Photoshop制作钓鱼小游戏的常态动画

想必大家都对钓鱼的小游戏不会陌生，在本节实例的学习中就将通过使用 Photoshop 和 ImageReady 这两款软件制作钓鱼小游戏的常态动画。如图 10-64 所示，为本实例的完成效果。

图10-64 完成效果技术提示
在本实例的设计、制作流程中，动画所需的静态图像都已经在素材文件中准备好了。主要通过对“动画”和“图层”调板进行设置制作出钓鱼游戏的常态动画。如图 10-65 所示，为本实例的完成效果。

图10-65 制作流程
制作步骤
（ 1 ）启动 Photoshop ，打开本书附带光盘 \Chapter-10\ “钓鱼小游戏 .psd ”文件，如图 10-66 所示。
提示：在“钓鱼小游戏.psd”文件中，已包含制作该实例需要的所有图层图像。

图10-66 “钓鱼小游戏.psd”文件
（ 2 ）在“图层”调板中，选择“图层 13 ” 。然后执行“图层”→“图层样式”→“外发光”命令，为该图层添加“外发光”效果，如图 10-67 所示。

图10-67 设置“外发光”图层样式效果
（ 3 ）单击 “在 ImageReady 中编辑”按钮，将当前文件传送到 ImageReady 中。然后在“图层”调板中，隐藏“图层 13 ” 的“外发光”图层样式效果，设置第 1 帧动画，如图 10-68 所示。

图10-68 设置第1帧动画
（ 4 ）接着参照图 10-69 所示，通过调整“组 1 ”图层组中小鱼图像所在视图中的位置，设置第 2 ～ 5 帧动画。

图10-69 设置第2～3帧动画
（ 5 ）在“动画”调板中选择第 3 帧动画，然后单击 “过渡”按钮，参照图 10-70 所示，在第 2 帧和第 3 帧动画之间插入 2 个过渡帧，这时调板中共有 7 帧动画。

图10-70 设置过渡帧
（ 6 ）再在第 5 帧和第 6 帧之间插入 3 个过渡帧，这时共有 10 帧动画。在第 9 帧与第 10 帧之间插入 6 个过渡帧，这时共有 16 帧动画。
（ 7 ）接下来选择第 5 帧动画，再单击 “复制当前帧”按钮，创建第 6 帧动画，然后将泡泡图像所在的“图层 6 ” 显示，编辑第 6 帧动画，如图 10-71 所示。

图10-71 编辑第6帧动画
（ 8 ）按照上一步骤的操作方法，通过创建动画帧、编辑动画帧的方法，继续在第 6 帧之后，编辑第 7 ～ 11 帧动画，如图 10-72 所示。

图10-72 编辑第7～11帧动画
（ 9 ）分别复制当前的第 1 帧和第 22 帧，再创建出两个动画帧，这时的动画帧共有 24 帧。配合使用 键，同时选中第 2 、 4 、 6 、 8 、 10 、 12 、 14 、 16 、 18 、 20 、 22 、 24 帧动画，然后在“图层”调板中隐藏“图层 1 ” ，并显示“图层 2 ” ，更改选中帧的波浪效果，如 图 10-73 所示。

图10-73 更改选中帧的波浪效果
（ 10 ）完成上述操作后，将第 1 ～ 24 帧全部选中，然后设置这些选中帧的延迟时间为 0.3 秒，如图 10-74 所示。
提示：在设置动画帧的延迟时间之前，选择动画的第24帧，在“图层”调板中将小鱼图像所在“组1”图层组隐藏，编辑出该帧效果。

图10-74 设置延迟时间
（ 11 ）按下 键，存储“钓鱼小游戏 .psd ”文件。再执行“文件”→“存储优化结果”命令，设置文件名为“钓鱼小游戏常态动画”，存储优化 结果为“ HTML 和图像”格式文件。
读者可打开本书附带光盘 \Chapter-10\ “钓鱼小游戏常态动画 .html ”文件查看最终效果。

查看更多关于Photoshop制作钓鱼小游戏的常态动画的详细内容...