Photoshop设计实例 Photoshop设计实例

 5、在ImageReady中让虚线动起来。

　　我们的准备工作已经做完了，下面要切换到ImageReady中制作动画。按下工具箱最底部的跳转按钮，ImageReady将自动运行，并且自动载入我们刚才准备好的文件，并且图层和蒙版等元素全都保持原貌。在Animation面板上，可以看到当前图像自动成为动画的第1帧。单击复制当前帧按钮，将建立与第1帧相同的第2帧（如图8）。

（图8）

　　选择移动工具，在Layers面板上，选择图层“左”，按下↑箭头按钮，使其向上移动一个像素。然后分别将图层“上”向右移动一个像素，图层“右”向下移动一个像素，图层“下”向左移动一个像素。从图像上看，就像是虚线框顺时针方向蠕动了一下。再在Animation面板上复制第2帧为第3帧，使用相同的方法再次让虚线框顺时针方向蠕动一下。重复以上过程，直到将第8帧制作完毕。我们在前面制作的图案基本单位是8像素，每帧移动1像素，刚好经过8帧可以周而复始。

　　　6、最后的设置。

　　ImageReady默认的设置是每帧动画停留0秒钟，我们需要改变这个数字。在Animation面板上，单击第1帧选择它，再按住Shift键单击第8帧，将8帧动画全部选择。单击任意一帧下面的停留时间下拉菜单，选择0.1seconds，于是全部帧的停留时间全都改为0.1秒钟（如图9）。

（图9）

　　我们的动画已经制作完了，下面要对输出文件进行设置。在Optimize面板上，将Setting选择为GIF Web Palette，具体设置保持默认即可（如图10）。

（图10）

　　通过菜单命令“File→Save Optimized”，在对话框中选择目录，命名文件，保存类型选择Image Only，保存后即可将文件输出为GIF动画。在图像查看软件中打开该GIF动画，或者将其插入到网页中用网页浏览器打开，就可以看到我们的Logo有了一条蠕动的虚线框（如图11）。

（图11）

　　根据具体的需要，我们还可以将虚线框外面的白边改成其他颜色或者裁切掉，以便更加适应网页设计和制作的需要。

　　好了，动画制作完了。聪明的读者已经看出，这篇教程整个过程就是实现了一个视觉上的欺骗，只要摸清了思路，制作过程极为简单。只要开拓我们的思路，同样的例子还可以制作出多种蠕动方式的虚线框来。

　　最后的结果是这样的：

需要说明的是，第5步中，可以复制出第2帧后直接将各部分移动7像素，再在Animation面板的功能菜单中选择Tween，有软件自动生成中间的6帧——这样也许更简便，但不如一帧一帧的移动容易理解。 :)