第15章 网页与动画的制作.pptVIP

第15章 网页与动画的制作 李 慧 本章知识点 创建动画 动画简介 Ps也能制作简单的GIF动画，称之为“图层动画” 动画是时间和空间变化的产物，就是用多幅静止画面连续播放，利用视觉暂留形成连续影像。 为了使影响连续，一般以每秒24张画面的速度播放，也就是一秒钟内在屏幕上连续投射出24张静止画面。 动画播放速度的单位是fps，表示帧每秒，其中的f是Frame(画面、帧)，p是Per，s是Second(秒)。电影是24fps，通常简称为24帧。 创建动画 实例1：制作网页动画LOGO 用Photoshop制作“花花世界”鲜花网站动画LOGO，如图8-1所示，动画效果如图8-2所示，一束“白光”在“花花世界”字样上闪过。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤一：新建文件：400*100大小，RGB颜色模式。用渐变工具进行填充背景，渐变工具属性设置如如8-3所示。填充效果如图8-4所示。 提示：在实际的网站开发中，LOGO的大小与背景要与网站页面的整体风格相一致。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤二：打开素材文件“花.PNG”，将其拖放到新建文件中，调整大小及位置如图8-5所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤三：选择文字，设置参数如图8-6所示，图层中单击输入“花花世界”，效果如图8-7所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤四：复制字体图层，并设置“花花世界副本”图层字体颜色为蓝色（8，128，248），如图8-8所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤五：设置“花花世界”图层文字的立体效果：选中下方的“花花世界”图层，同时按Ctrl+Alt键，按左方向键“?”四下，向下方向键一下（该过程就是复制图层并自动产生位移，得到立体效果），效果如图8-9所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤六：设置文字效果后，在图层面板中复制了很多图层，为了便于后续操作，可以将这些文字图层合并成一个图层，变成一个单独的文字图层，如图8-10所示。此过程先将文字图层进行栅格化成图像图层，然后对其进行图层合并。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤七：设置文字图层的遮罩效果：在“花花世界副本5”图层上，新建图层，重命令为“遮罩”，在新建图层上用矩形选框绘制一个选区，调整选区并用白色填充，如图8-11所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤八：选中“遮罩”图层，将鼠标移至与“花花世界副本5”图层之间，按Alt键，待鼠标光标变形状后，单击鼠标左键，让“遮罩”层对“花花世界副本5”层实施剪切蒙板，如图8-12所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤九：复制遮罩图层，移动位置，直至“花花世界”文字被白色遮掩住，如图8-13所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤十：动画设计：执行“窗口/动画”命令打开“动画”面板，如图8-14所示。默认动画只有一帧，即一副静态图像，所有图层可见元素都在该帧。动画设计就是通过复制新建帧，并将不同的图层元素在新建帧显示，并设置帧播放时间，点击播放按钮就会产生动画效果。PS中动画又叫图层动画。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤十一：在图层面板中，共有遮罩图层共有11个遮罩图层，分布在“花花世界”文字上，接下来在动画面板中，单击“复制所选帧”对第一帧进行复制，重复10次，此时动作面板上共有11帧，如图8-15所示。接下来设置每一帧上该显示的图层。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤十二：选中第一帧，设置该帧上要显示的图层元素。为了达到动画效果，因此将“遮罩”图层显示在该帧上，其他遮罩复制层都设为不可见。重复该操作，在不同的帧上隐藏显示不同的图层，效果如图8-16所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤十三：设置每帧的播放时间为“0.1”秒，“循环播放控制”为“永远”，点击“播放”按钮预览动画效果，如图8-17所示。 创建动画 实例1：制作网页动画LOGO 操作步骤： 步骤十四：动画设置完后，将其保存为支持动画的GIF图像格式。执行“文件/存储为WEB和设备所支持格式”，弹出如图8-18所示对话框，选择GIF格式，存储为“LOGO.GIF”。 创建动画 实例1：制作网页动画LOGO 总结 Ps中的动画又叫图层动画，通过在顺序帧上设置显示和隐藏图层元素，并设置帧的显示时间来实现动画。 优秀网页欣赏 网页设计概述 网页设计是一门边缘性的交