罗盘是在地面上确定方向的一种器械，给人古老而又神秘的感觉。在本节实例的学习中，就来制作楼盘游戏中颜色渐变部分的动画，如图
10-83
所示，为本实例的完成效果。
图
10-83 完成效果技术提示
罗盘小游戏中颜色渐变部分的动画，主要是制作按钮图像在画面中循环变色的动画效果。在制作图像颜色渐变的流程中，首先为图像设置不同的颜色，并将每个颜色的图像记作一帧动画，然后在这几帧动画之间添加过渡帧，制作出图像颜色渐变的动画效果。如图
10-84
所示，为本实例的制作流程。
图
10-84 制作概览制作步骤
（
1
）启动
Photoshop
，打开本书附带光盘
\Chapter-10\
“罗盘背景
.jpg
”文件，如图
10-85
所示。
图
10-85 背景图片
（
2
）在“图层”调板中新建“图层
1”。设置前景色为白色，使用
“椭圆”工具，配合
<Shift>
键，绘制如图
10-86
所示的白色圆形图像。
图
10-86 绘制白色圆形
（
3
）在“图层”调板中设置“图层
1”的“填充”选项为0%
。再执行“图层”→“图层样式”→“斜面和浮雕”命令，如图
10-87
所示，为该图层添加“斜面和浮雕”效果。
图
10-87 添加“斜面和浮雕”效果
（
4
）新建“图层
2”。再使用
“椭圆”工具，在凹下去的圆形的中间部分绘制如图
10-88
所示的白色圆形。
图
10-88 新建图层并绘制圆形
（
5
）参照图
10-89
所示，在“样式”调板中单击“铬合金”样式，为“图层
2”中的圆形添加预设的样式效果。
图
10-89 添加预设样式
（
6
）在“图层”调板中关闭“图层
2”的“投影”样式效果，然后参照图10-90
所示，更改“颜色叠加”样式效果的颜色设置。
图
10-90 更改图层样式效果
（
7
）按下
<Shift>
键，再在“图层”调板中单击“图层
1”，将“图层 2”和“图层 1”同时选择。然后按下<Ctrl+E>
键，将选择的图层合并为一个图层，如图
10-91
所示。
图
10-91 选择图层并合并图层
（
8
）新建“图层
3”，再绘制如图10-92
所示的白色圆形，然后更改该图层的“填充”设置为
0%
。接着参照图示所示，为该图层添加白色“外发光”和红色“颜色叠加”效果。
图
10-92 绘制并编辑圆形图像
（
9
）下面执行“窗口”→“动画”命令，打开“动画”调板，当前视图中的图像将成为第
1
帧动画。接着创建第
2
帧，然后更改“图层
3”的“颜色叠加”图层样式的颜色设置，编辑第2
帧动画，如图
10-93
所示。
图
10-93 设置第
2帧动画
（
10
）按照上一步骤中更改“颜色叠加”样式的颜色设置的方法，再参照图
10-94
所示，继续设置第
3
～
4
帧动画。
图
10-94 设置第
3～
4帧动画
（
11
）在“动画”调板中选择第
2
帧动画，然后单击
“动画帧过渡”按钮，如图
10-95
所示，在第
1
帧和第
2
帧动画之间插入
5
个过渡帧，这时调板中共有
9
帧动画。
图
10-95 在第
1帧和第
2帧之间设置过渡帧
（
12
）再在第
7
帧和第
8
帧之间插入
5
个过渡帧，这时共有
14
帧动画。在第
13
帧和第
14
帧之间插入
5
个过渡帧，这时共有
19
帧动画。
（
13
）接着参照图
10-96
所示，再在第
19
帧和第
1
帧动画之间插入
5
个过渡帧。
图
10-96 在第
19帧和第
1帧之间设置过渡帧
（
14
）按下
<Shift+Ctrl+S>
键，将“罗盘背景
.jpg
”文件另存为
PSD
格式的文件。
（
15
）然后再执行“文件”→“存储为
Web
所用格式”命令，如图
10-97
所示，设置文件名为“制作颜色渐变动画”，存储优化结果为
GIF
格式文件。
提示：在保存过程中如出现一个对话框，提示存储的一些文件名称与某些
Web浏览器和服务器不兼容时，请单击“确定”按钮，关闭该对话框。
读者可打开本书附带光盘
\Chapter-10\
“制作颜色渐变动画
.gif
”文件查看最终效果。
图
10-97 存储优化结果
评论(0)