Photoshop动画教程及实例GIF动画制作实用教案

1、会计学1Photoshop动画教程及实例动画教程及实例(shl)GIF动动画制作画制作第一页，共47页。第1页/共46页第二页，共47页。第2页/共46页第三页，共47页。G I F 动 画 初 识所谓动画，就是用多幅静止画面连续播放，利用视觉暂留形成连续影像。比如(br)传统的电影，就是用一长串连续记录着单幅画面的胶卷，按照一定的速度依次用灯光投影到屏幕上。目前在Windows系统上的主要动画图像格式是GIF，其也可以直接在网页中显示，是目前应用最广泛的动画图像格式。包括现在流行的手机彩信中的动画也属于GIF格式。1第3页/共46页第四页，共47页。1.1 动画面板(min bn)1.2 图

2、层面板(min bn) 第4页/共46页第五页，共47页。单击单击“窗口窗口”菜单选择菜单选择“动画动画”即可打开和关闭即可打开和关闭(gunb)(gunb)动画面板。动画面板。当前帧：即动画文件中当前的单幅画面 当前帧停留时间：当前画面停顿时间当前动画文件循环选项：设定当前动画循环播放次数 选择第一帧：选择动画开始的单幅画面选择上一帧：选择上一幅单幅画面 播放当前动画：预览当前动画选择最后一帧：选择当前动画的最后一幅画面 过滤动画帧：两个帧之间的位置、透明度、效果变换 复制所选帧：复制当前画面 删除(shnch)所选帧：删除(shnch)当前画面转换为时间轴动画：转换为更复杂的、功能更强大的

3、动画面板1.1 动画面板(min bn)第5页/共46页第六页，共47页。图层面板中各部分的功能：图层面板中各部分的功能：统一图层位置统一图层位置(wi zhi)(wi zhi)： 统一设定当前图层在所有帧当中显示的位置统一设定当前图层在所有帧当中显示的位置(wi zhi)(wi zhi)统一图层可见性：统一图层可见性： 统一设定当前图层在所有帧当中是否显示统一设定当前图层在所有帧当中是否显示统一图层样式：统一图层样式： 统一调整当前图层在所有帧中的样式统一调整当前图层在所有帧中的样式帧的传播特性：帧的传播特性： 将第将第1 1帧的改变传播给所有帧帧的改变传播给所有帧1.2 图层面板第6页/共

4、46页第七页，共47页。1.制作编辑(binj)动画2.设定帧的延迟时间3.动画的循环方式4.动画文件的导出2制作(zhzu)简单的GIF动画第7页/共46页第八页，共47页。1.新建一个(y )200200像素的文档。2.新建一个图层并绘制(huzh)一个任意形状。2.1 制作(zhzu)动画第8页/共46页第九页，共47页。3.在动画调板中点击箭头处的“复制所选帧”按钮，就会看到新增加了一个帧。这新建出来(ch li)的帧和前一个帧的内容是相同的。相应的，大家也应该能想得到垃圾桶似按钮的作用就是删除帧。4.确认动画调板中目前选择的是复制出来的第2帧，然后(rnhu)使用移动工具将图层中的形

5、状移动一定距离，大致如右图所示。可以看到虽然在第2帧中形状的位置发生了改变，但在原先第1帧中方块的位置依然未变。这是一个很重要的特性。 第9页/共46页第十页，共47页。第10页/共46页第十一页，共47页。6.设定帧延迟的方法就是点击帧下方的时间处，在弹出的列表(li bio)中选择相应的时间即可。如图所示，将第7帧设为0.5秒。第11页/共46页第十二页，共47页。7.动画的循环(xnhun)方式 第12页/共46页第十三页，共47页。 导出能用于网页的独立动画文件，则需要使用菜单【文件导出能用于网页的独立动画文件，则需要使用菜单【文件 存储为存储为WebWeb和和设备所用格式】。设备所用

6、格式】。 弹出保存设置窗口，需要注意的是，如果没有弹出保存设置窗口，需要注意的是，如果没有(mi yu)(mi yu)选择选择GIFGIF格式，格式，则下方的播放按钮不可用。这是因为只有则下方的播放按钮不可用。这是因为只有GIFGIF格式才支持动画，如果强行保格式才支持动画，如果强行保存为其他格式（如存为其他格式（如JPGJPG或或PNGPNG格式），则所生成的图像中只有第一帧的画面。格式），则所生成的图像中只有第一帧的画面。2.2 动画的导出第13页/共46页第十四页，共47页。在存储过程中可能出现如下图所示的警告信息，不必理会，确定即可。也可以让其不再在存储过程中可能出现如下图所示的警告信

7、息，不必理会，确定即可。也可以让其不再显示。但大家要注意在给文件起名时要使用半角英文或数字，不要使用全角字符或中文显示。但大家要注意在给文件起名时要使用半角英文或数字，不要使用全角字符或中文(zhngwn)(zhngwn)。这是为了能更广泛地被各种语言的浏览器所兼容。这是为了能更广泛地被各种语言的浏览器所兼容。第14页/共46页第十五页，共47页。帧的传播(chunb)特性及过渡33.1 帧的透明度传播3.2 帧的传播特性3.3 帧的选择(xunz)3.4 帧的过渡第15页/共46页第十六页，共47页。3.1 帧的透明度传播(chunb)上一个上一个(y )(y )我们制作的是位移动画，是利用

8、图层的移动。我们制作的是位移动画，是利用图层的移动。还可以通过设定不同的图层部透明度来产生动画，那就是在不同的帧中改变图层调板中的部透还可以通过设定不同的图层部透明度来产生动画，那就是在不同的帧中改变图层调板中的部透明度数值。现在新建一个明度数值。现在新建一个(y )400(y )400100100的图像，新建一个的图像，新建一个(y )(y )图层并绘制一个图层并绘制一个(y )(y )圆形。然后一次性复制圆形。然后一次性复制4 4个帧出来，将会看到个帧出来，将会看到5 5个帧都是相同的内容。将所有帧的停留时间统一个帧都是相同的内容。将所有帧的停留时间统一改为改为0.10.1秒，如下图所示。

9、秒，如下图所示。第16页/共46页第十七页，共47页。接着选择第2帧，在图层调板中将方块图层的不透明度改为80%，第3帧60%，以此类推，因为我们还有一个0%的延迟(ynch)，所以还需要再复制一个帧出来，为第6帧，并设定透明度为0%。形成的效果如右图所示。这时候播放就会看到方块逐渐渐隐的效果。第17页/共46页第十八页，共47页。3.2 帧的传播(chunb)传播(chunb)特性如果你在第一帧删除了某个图层，那么之后所有帧中就都不存在这个层了。因此在Photoshop动画设定中，第一帧是比较(bjio)特殊的。现在选择第一帧，确保图层调板中“传播帧1”已被勾选，如下左图红色箭头处所示。然后

10、移动图层，就会发现所有帧中的方块都统一发生了移动，如下右图所示。如果“传播帧1”未被勾选，则只会改变第1帧中的方块位置。第18页/共46页第十九页，共47页。3.3 帧的选择(xunz)SHIFT键连选快捷键CTRL键点选快捷键第19页/共46页第二十页，共47页。3.4 帧的过渡(gud)1. 逐帧动画：就是逐个帧进行制作。例如，一个物体的移动，我们是从头到尾(cng tu do wi)参与了每一帧的设定。2. 补间动画：设定好某段运动的起始帧和结束帧，然后在这两帧中产生平均的过渡。如果是物体的移动，则就是先设定好移动起点帧和终点帧。第20页/共46页第二十一页，共47页。1.新建一个图像，

11、大约5001002.新建图层并画上圆形形状，将其移动(ydng)到左上角。3.接着复制1帧，在新帧中将方块移动(ydng)到右下角，将图层部透明度设为10%。4.然后按下红色箭头处的按钮，将出现相应的对话框。第21页/共46页第二十二页，共47页。1.过渡方式是指过渡相对哪一帧，由于之前我们选择的是第1帧，并且总共也只有2帧，所以既可以选择默认的“下一帧”，也可以选择“最后一帧”。2.要添加的帧数就是指过渡过程所将占用的帧数，这里设为5，那么加上原来7帧，这个动画总共就是7帧。3.“位置”和“不透明度”这两项。所谓参数(cnsh)就是指进行动画过渡的图层属性，我们之前说过图层的位置和不透明度的

12、变化可以做成动画，在这里就反映出来了。第22页/共46页第二十三页，共47页。可以看到圆形的位置和不透明度都发生了均匀的过渡。如果之前在过渡设定(sh dn)中关闭了“位置”或“不透明度”参数，就没有现在的效果了。开始和结束的那两帧被称之为关键帧，它们决定了过渡(gud)帧的形态。第23页/共46页第二十四页，共47页。第24页/共46页第二十五页，共47页。第25页/共46页第二十六页，共47页。第26页/共46页第二十七页，共47页。第27页/共46页第二十八页，共47页。第28页/共46页第二十九页，共47页。第29页/共46页第三十页，共47页。第30页/共46页第三十一页，共47页。第31页/共46页第三十二页，共47页。第32页/共46页第三十三页，共47页。第33页/共46页第三十四页，共47页。第34页/共46页第三十五页，共47页。第35页/共46页第三十六页，共47页。第36页/共46页第三十七页，共47页。第37页/共46页第三十八页，共47页。第38