实例9 制作GIF动画（素材的制作）

实例说明

GIF动画可以实现图片的动态效果。在网页中，GIF动画的应用非常广泛，在Photoshop CS3中，可以应用“动画”面板制作相关的GIF动画。在本实例中，将制作一款数码相机的GIF动画，由于该动画的制作过程比较优复杂，将分为素材的制作和动画设置两部分完成，在本实例中，将制作GIF动画的素材部分。

技术要点

在制作本实例时，首先导入背景素材图像，然后使用裁剪工具将素材图像进行裁剪，将背景层进行多次复制，通过使用色相/饱和度工具将各个图层的背景颜色进行调整，接下来分别导入数码相机和花素材图像，然后对该图像进行编辑调整，最后在添加文本，完成GIF动画的素材部分制作。

本实例中主要制作GIF动画展示数码相机的炫彩效果，因此在制作动画素材时，使用了较为鲜艳的颜色，该素材分别由红、黄、绿、蓝四种不同背景组成，图案主体部分为一款数码相机图像，为配合背景颜色的变化，在相机左侧，分别由红、黄、绿、蓝四种颜色的花图像组成，由于在以后的GIF动画中，需要配合背景逐个突出花图像，所以在编辑素材时需将红、黄、绿、蓝四种花图像分别创建两个图层，调整其中一个图层中的图像较大显示。图9-1为本实例完成后的效果。

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

2 确定“背景.jpg”处于可编辑状态，在工具箱中单击“裁剪工具”按钮，这时在属性栏内会出现其编辑参数，在属性栏中在“宽度”参数栏内键入6.94，在“高度”参数栏内键入2.78，在“分辨率”参数栏内键入72，将“设置裁剪图像的分辨率”设置为“像素/厘米”，参照图9-3所示将图像进行裁剪，双击鼠标，退出编辑模式。

3 执行菜单栏中的“图像”/“旋转画步”/“水平翻转画布”命令，将画布进行翻转，如图9-4所示。双击鼠标，退出编辑模式。

4 选择“背景”层，在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。选择“着色”复选项框，在“色相”参数栏内键入0，在“饱和度”参数栏内键入85，在“明度”参数栏内键入52，如图9-5所示，然后单击“确定”按钮，退出该对话框。

5 选择“背景”层，将其拖动至“图层”面板底部的“创建新图层”按钮处，复制得到“背景副本”层，使用同样方法，分别复制“背景副本2”层和“背景副本3”层，如图9-6所示。

6 将“背景副本3”层命名为“黄背景”，将“背景副本2”层命名为“绿背景”，将“背景副本”层命名为“蓝背景”，如图9-7所示。

7 为了便于编辑，单击“绿背景”层和“蓝背景”层左侧的“指示图层可见性”按钮，将该图层隐藏，如图9-8所示。

8 选择“黄背景”层，在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入40，在“饱和度”参数栏内键入30，在“明度”参数栏内键入-5，如图9-9所示，然后单击“确定”按钮，退出该对话框。

9 单击“绿背景”层左侧的“指示图层可见性”按钮，将该图层取消隐藏，选择“绿背景”层，在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入118，在“饱和度”参数栏内键入8，在“明度”参数栏内键入-1，如图9-10所示，然后单击“确定”按钮，退出该对话框。

10 单击“蓝背景”层左侧的“指示图层可见性”按钮，将该图层取消隐藏，选择“蓝背景”层，在菜单栏中执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入-153，如图9-11所示，然后单击“确定”按钮，退出该对话框。

11 单击“图层”面板中的“创建新图层”按钮，创建一个新图层——“图层1”。选择工具箱中的“矩形选框工具”，创建一个如图9-12所示的矩形选区，将前景色设置为白色，按组合键Alt+Delete将选区进行填充。

12 按组合键Ctrl+D取消选区。在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例9：制作GIF动画（素材的制作）/手机.jpg”文件，单击“打开”按钮，打开该文件，如图9-13所示。

13 确定“手机.jpg”处于可编辑状态，在工具箱中单击“魔棒工具”按钮，在属性栏中在“容差”参数栏内键入50，单击“手机.jpg”中的白色区域，在白色区域内会出现一个选区，如图9-14所示。

14 按组合键Ctrl+Shift+I将选区进行反选。使用工具箱中的“移动工具”，将“手机.jpg”移动至到图9-15所示的位置，在“图层”面板中自动生成“图层2”。

15 选择“图层2”层，将其拖动至“图层”面板底部的“创建新图层”按钮处，复制得到“图层2副本”层。

16 选择“图层2”，按组合键Ctrl+T打开自由变化框，右击鼠标，在弹出的快捷菜单中选择“垂直翻转”选项，将图像进行翻转。

17 按住Ctlr键，调整控制点位置，将图像调整为如图9-16所示的形态。

18 按Enter键，取消自由变换框。选择工具箱中的“橡皮擦工具”，在属性栏中在“画笔”的“主直径”参数栏内键入80，参照图9-17所示将图像底部进行擦除。

19 执行菜单栏中的“滤镜”/“模糊”/“高斯模糊”命令，打开“高斯模糊”对话框，在“半径”参数栏内键入0.5，单击“确定”按钮，退出该对话框，如图9-18所示。

20 在“图层”面板中的“不透明度”参数栏内键入60，如图9-19所示。

21 执行菜单栏中的“图像”/“调整”/“亮度/对比度”命令，打开“亮度/对比度”对话框，在“亮度”参数栏内键入-60，单击“确定”按钮，退出该对话框，如图9-20所示。

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

23 使用工具箱中的“移动工具”，将“花素材.jpg”移至到如图9-22所示的位置，在“图层”面板中自动生成“图层3”。按组合键Ctrl+T，使用“自由变化”工具将图像的大小进调整。

24 按Enter键，取消选区。在“图层”面板中将“图层3”命名为“蓝花”。按住Ctrl键不放，单击“蓝花”层的“图层缩览图”，加载选区。

25 在该选区中右击，在弹出的快捷菜单中选择“描边”选项，进入“描边”对话框，在“宽度”参数栏内键入4，将“颜色”设置为白色，选择“居外”单选按钮，如图9-23所示。单击“确定”按钮，退出该对话框。

26 按组合键Ctrl+D取消选区。选择“蓝花”层，将其拖至“图层”面板底部的“创建新图层”按钮处，复制生成“蓝花副本”层，将该图层命名为“绿花”。

27 选择“绿花”层，将该图像移动至图9-24所示的位置。

28 确定“绿花”层处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入-98，将该图像调整为黄色调。然后单击“确定”按钮，退出该对话框。

29 选择“绿花”层，将其拖动至“图层”面板底部的“创建新图层”按钮处，复制生成“绿花副本”层，将该图层命名为“黄花”。

30 选择“黄花”层，将该图像移动至图9-25所示的位置。

31 确定“黄花”层处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入-55，将该图像调整为黄色调。然后单击“确定”按钮，退出该对话框。

32 选择“黄花”层，将其拖至“图层”面板底部的“创建新图层”按钮中，复制生成“黄花副本”层，将该图层命名为“红花”。

33 选择“红花”层，将该图像移动至图9-26所示的位置。

34 确定“红花”层处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框。在“色相”参数栏内键入-55，将该图像调整为红色调。然后单击“确定”按钮，退出该对话框。

35 按Ctrl键，分别选择“蓝花”层、“绿花”层、“黄花”层和“红花”层，将加选的图层拖动至“图层”面板底部的“创建新图层”按钮处，复制生成“蓝花副本”层、“绿花副本”层、“黄花副本”层和“红花副本”层，如图9-27所示。

36 使用“自由变换”工具将各图层中的图像大小进行调整，如图9-28所示。

37 创建一个新图层——“图层3”。选择工具箱中的“矩形选框工具”，在工作区边缘绘制选区，右击该选区，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入4，将“颜色”设置为浅灰色，选择“内部”单选按钮，单击“确定”按钮，退出该对话框，如图9-29所示。

38 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“字体大小”参数栏内键入12，将“设置文本颜色”显示窗内的颜色设置为白色，在如图9-30所示的位置键入XUANKU。

39 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“方正大黑繁体”选项，在“字体大小”参数栏内键入6，将“设置文本颜色”显示窗内的颜色设置为黑色，在如图9-31所示的位置键入“炫酷色彩，一起心动”。

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

41 将该实例保存，以便在下一实例中应用。