实例10 制作GIF动画（动画的制作）

实例说明

GIF动画是互联网常用的一种动画格式，在网页中添加GIF动画，不仅可以美化网站，还可以吸引观众，起到更好的宣传效果。应用Photoshop CS3中的“动画”面板可能制作GIF格式动画，通过本实例的学习，使用读者能够了解“动画”面板的应用。

技术要点

本实例的制作过程中，首先打开上一实例中保存的“制作GIF动画（素材的制作）”文件，然后进入“动画”面板，在“动画”面板中复制新的帧，然后通过编辑各帧中图层的不同显示状态，完成GIF动画的制作。

在制作本实例时，应注意调整各帧中的帧延迟时间。因为第2帧中的背景颜色与第1帧中的背景颜色没有变化，所以需要将第1帧中的图像显示时间延长至0.5 s，使其有一个较长的停顿过程，然后将其他帧中的图像均延迟0.2 s，完成该实例的制作。图10-1为该动画的部分静帧画面。

1 运行Photoshop CS3，在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例9：制作GIF动画（素材的制作）/作GIF动画（素材的制作）.psd”文件，单击“打开”按钮，打开上一实例中保存的文件，如图10-2所示。

2 执行菜菜单栏中的“窗口”/“动画”命令，进入“动画（时间轴）”面板，如图10-3所示。

3 单击“动画（时间轴）”面板底部的“转换为帧动画”按钮，进入“动画（帧）”面板，如图10-4所示。

4 单击“动画（帧）”面板底部的“复制选中的帧”按钮，复制帧，如图10-5所示。

5 使用以上方法，按下“动画（帧）”面板底部的“复制选中的帧”按钮3次，复制3个帧。

6 选择第1帧，在“图层”面板中单击“黄背景”层、“绿背景”层、“蓝背景”层、“蓝花副本”层、“绿花副本”层、“黄花副本”层和“红花副本”层左侧的“指示图层可视性”按钮，将该些图层隐藏。

7 单击第1帧中的“选择帧延迟时间”下拉按钮，在弹出的下拉式选项栏中选择0.5，使该帧延迟0.5 s，如图10-6所示。

8 选择第2帧，在“图层”面板中单击“红花副本”层左侧的“指示图层可视性”按钮，将该图层取消隐藏，单击第2帧中的“选择帧延迟时间”下拉按钮，在弹出的下拉式选项栏中选择0.2，使该帧延迟0.2 s。

9 选择第3帧，在“图层”面板中单击“黄花副本”层和“黄背景”层左侧的“指示图层可视性”按钮，将该些图层取消隐藏，单击第3帧中的“选择帧延迟时间”下拉按钮，在弹出的下拉式选项栏中选择0.2，使该帧延迟0.2 s，如图10-7所示。

10 确定第3帧处于可编辑状态，在“图层”面板中将“炫酷色彩,一起心动!”层中的文字移动至图10-8所示的黄花图像底部。

11 选择第4帧，在“图层”面板中单击“绿花副本”层和“绿背景”层左侧的“指示图层可视性”按钮，将该些图层取消隐藏，单击第4帧中的“选择帧延迟时间”下拉按钮，在弹出的下拉式选项栏中选择0.2，使该帧延迟0.2 s。

12 确定第4帧处于可编辑状态，在“图层”面板中将“炫酷色彩,一起心动!”层中的文字移动至图10-9所示的绿花图像底部。

13 选择第5帧，在“图层”面板中单击“蓝花副本”层和“蓝背景”层左侧的“指示图层可视性”按钮，将该些图层取消隐藏，单击第5帧中的“选择帧延迟时间”下拉按钮，在弹出的下拉式选项栏中选择0.2，使该帧延迟0.2 s。

14 确定第5帧处于可编辑状态，在“图层”面板中将“炫酷色彩,一起心动!”层中的文字移动至图10-10所示的蓝花图像底部。

15 接下来将该动画进行输出。执行菜单栏中的“文件”/“存储为Web和设备所用格式”命令，打开“存储为Web和设备所用格式”对话框，如图10-11所示。

16 单击“存储”按钮，打开“将优化结果存储为”对话框，在“文件名”文本框中键入“数码相机动画”，在“保存类型”下拉式选项栏中选择“仅限图像（*.gif）”选项，如图10-12所示。其他参数使用默认设置，单击“保存”按钮，将该动画保存。

17 现在GIF动画的制作就全部完成了，图10-13为该动画的部分静帧画面。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘“使用Photoshop CS3编辑网页素材/实例10：制作GIF动画（动画的制作）/制作GIF动画（动画的制作）.psd”文件，该文件为本实例完成后的效果。