Photoshop GIF动画制作公开课

统一图层样式：
统一调整当前图层在所有帧中的样式
帧的传播特性：
将第1帧的改变传播给所有帧
四.教学过程
一个动画制作的完整过程： 1.制作编辑动画 2.设定帧的延迟时间 3.动画的循环方式 4.动画文件的导出
四.教学过程（简单动画）
既然称为动画，那就是要令画面中的图像动起来， 现在我们来实际动手画制作一个“简单”的动画吧。 1.新建一个200×200的空白图像，如右图所示。 2.新建一个图层并画上一个黑色的菱形，大致下图所示。
四.教学过程（过渡动画）
3.确定后将会在动画调板中看到的效果大致如下图所示，可以很清楚地看到圆 形的位置和不透明度都发生了均匀的过渡。如果之前在过渡设定中关闭了“位置” 或“不透明度”参数，显然就没有现在的效果了。
4.这种利用过渡方式制作动画的方法较为简便，我们只需要考虑某段动画的开 始和结束的样子就可以了，中间的过程会自动完成。在这种情况下，开始和结束的 那两帧被称之为关键帧(KeyFrame)，因为它们决定了过渡的形态。以后我们也会接 触到有多个关键帧的动画。
三.教学方法和教学安排
1.机房多媒体形式，讲授法与学生实际演 示相结合。 2. 两个课时
四.教学过程
1.复习提问
（1）Photoshop主要功能是什么？
（2）Photoshop 主要应用领域有哪些？
四.教学过程
2.新课导入
在我们前面所学的课程中，Photoshop只是被用来制作比如海 报、印刷稿等静态图像的，我们提到过它具备动画制作的能力。现 在我们就是要在Photoshop CS3中去创建一个由多个帧组成的动画。 把单一的画面扩展到多个画面。并在这多个画面中营造一种影像上 的连续性，令动画成型。 所谓动画，就是用多幅静止画面连续播放，利用视觉暂留形成 连续影像。比如传统的电影，就是用一长串连续记录着单幅画面的 胶卷，按照一定的速度依次用灯光投影到屏幕上。
四.教学过程（导出动画）
11.导出能用于网页的独立动画文件，则需要使用菜单【文件>存储为Web和设备所用格 式】，将出现一个如下图所示的大窗口。这个大窗口有许多内容需要介绍。但现在大家只 需要参照红色箭头区域中的设定即可。 同时窗口右下方红色箭头区域会出现播放按钮和循环选项，在此更改循环次数会同时 更改源文件中的设定。需要注意的是，如果在上方的红色箭头区域内没有选择GIF，则下方 的播放按钮不可用。这是因为只有GIF格式才支持动画，如果强行保存为其他格式如JPG或 PNG，则所生成的图像中只有第一帧的画面。
四.教学过程（设计创意思考）
1.制作女包360度旋转动画
四.教学过程（设计创意思考）
2.创意设计阿里旺旺动态头像
五.本章小结
受限于Photoshop主要是做图像处理的特点，Photoshop制作的GIF
动画相对于Flash软件来说还是有一定的局限性，尤其是不能像3dsmax那样制 作逼真的场景动画，但对于店铺装修过程中所需要的动画效果，Photoshop是
四.教学过程（设置动画循环方式）
10.除了延迟时间外，动画还有一个特点就是可以设定播放的循环次数。注意在动画调板第 一帧的下方有一个“永远”，这就是循环次数，如下图所示。点击后可以选择“一次”或“永远 ”，或者自行设定循环的次数。之后再次播放动画即可看到循环次数设定的效果。 虽然在绝大多数情况下动画都是连续循环的(即永远)，但在某些地方也会用到单次或少数几 次(2-3次)循环，主要出现在利用动画制作网页部件的时候。比如将一个栏目的名称从无到有用 动画渐显出来，这样当名称完全显示出来后就应当固定，而不能再次消失然后再次渐显。这时就 要使用“一次”的循环设定了。
Photoshop店铺GIF动画制作
讲课人：孙大兵
一.教学目标
（1）知识目标：掌握Photoshop动画制作的理论 知识，熟知动画帧的设置技巧。 （2）能力目标：能根据要求制作GIF动画。
（3）素质目标：要求学生能创造性的对图片素材
进行动画创意设计。
二.教学重点和难点
1.重点：Photoshop动画制作的两种方法 2.难点：动画面板和图层面板的使用
四.教学过程（复制帧）
3.然后打开动画面板，在开启了动画调板后，我们就可以开始制作动画了，在动画调板中 点击箭头处的“复制所选帧”按钮，就会看到新增加了一个帧，如下图所示。按照我们以前的 习惯，这个图标应该表示为新建，如新建图层等，在这里虽然字面上的解释是复制，但其实也 是一种新建，只不过这新增加出来的帧其实和前一个帧是相同的内容。相应的，大家也应该能 想得到垃圾桶似按钮的作用就是删除帧。
4.确认动画调板中目前选择的是复制出来的第2 帧，然后使用移动工具将图层中的形状移动一定距 离，大致如右图所示。可以看到虽然在第2帧中形状 的位置发生了改变，但在原先第1帧中方块的位置依 然未变。这是一个很重要的特性。
四.教学过程（调整帧）
5.重复几次这种先复制帧再移动方块的操作，最终得到下图所示的样子(类似
四.教学过程
3.讲解过程 1）动画面板和图层面板 2）制作简单的逐帧GIF动画
3）制作过渡GIF动画
4）利用图片素材创意设计动画
5）本章小结
四.教学过程
1. 动画面板 2.图层面板增加的选项
四.教学过程
动画面板的打开方法为：单击“窗口”菜单选择“动画”即可打开和关闭动画面板如下图所示。
图层面板中各部分的功能如下： 当前帧：即动画文件中当前的单幅画面 当前帧停留时间：当前画面停顿时间 当前动画文件循环选项：设定当前动画循环播放次数 选择第一帧：选择动画开始的单幅画面 选择上一帧：选择上一幅单幅画面 播放当前动画：预览当前动画 选择最后一帧：选择当前动画的最后一幅画面 过滤动画帧：两个帧之间的位置、透明度、效果变换 复制所选帧：复制当前画面
四.教学过程（过渡动画）
在上一节课中，我们讲了我们制作的是位移动画，是利用图层的移动。除此之外，还可以 通过设定不同的图层部透明度来产生动画，那就是在不同的帧中改变图层调板中的部透明度数 值。现在新建一个400×100的图像，新建一个图层并绘制一个圆形。然后一次性复制4个帧出来， 将会看到5个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒，如下图所示。
四.教学过程（导出动画）
12.在存储过程中可能出现如下图所示的警告信息，不必理会，确定即可。也可以让其 不再显示。
总结： 在这个章节中大家要掌握的是动画的两项属性，即帧延迟时间和循环次数。另外要掌 握“复制帧、移动图层”这种的制作简单物体位移动画的方法。并使用该方法制作出同时 有两个物体位移的动画。
四.教学过程（过渡动画）
目前我们制作动画的方法还属于全手动类型的，就是逐帧进行制 作。比如一个物体的移动，我们是从头到尾参与了每一帧的设定。这 种方式能够带来最大的可干预性，但同时也使得制作变得非常繁琐， 尤其是帧数多的时候。今天我们要学习的就是利用帧过渡来制作动画 ，它的基本原理是，设定好某段运动的起始帧和结束帧，然后在这两 帧中产生平均的过渡。如果是物体的移动，则就是先设定好移动起点 帧和终点帧。
即可)。现在我们拥有了7个帧，且每个帧中方块的位置都不同。再看看图层调板，
很明显只有一个图层存在(背景层暂且不算)，这就引出一个特性：对一个图层来说， 它的位置(或坐标)在不同帧中可以单独指定。按照这个特性，我们使用一个图层就 可以做出物体移动的动画。
四.教学过程（设置动画时间）
6.现在大家可以按下动画调板中的播放按钮，在图像窗口就可以看到形状移动的效果了，只 是移动的速度很快。这是因为没有设置帧延迟时间。注意动画调板中每一帧的下方现在都有一个 “ 0秒”，这就是帧延迟时间(或称停留时间)。帧延迟时间表示在动画过程中该帧显示的时长。 比如某帧的延迟设为2秒，那么当播放到这个帧的时候会停留2秒钟后才继续播放下一帧。延迟默 认为0秒，每个帧都可以独立设定延迟。 7.设定帧延迟的方法就是点击帧下方的时间处，在弹出的列表中选择相应的时间即可。如图 11-8所示，将第7帧设为0.5秒。
删除所选帧：删除当前画面
转换为时间轴动画：转换为更复杂的、功能更强大的动画面板
四.教学过程
当打开动画面板的同时，在图层面板上也会增加一些关于动画制作的选项，如下图所示：
图层面板中各部分的功能如下： 统一图层位置：
统一设定当前图层在所有帧当中显示的位置
统一图层可见性：
统一设定当前图层在所有帧当中是否显示
2.由于只有一个图层(背景层未有变化)在参与动画，所 以现在图层选项中任何一个都是可以的。但不选择背景层的 话会形成成透明背景，有关动画背景透明的问题我们会在以 后学习到。注意右图中红色箭头处的参数，其中有“位置” 和“不透明度”这两项。所谓参数就是指进行动画过渡的图 层属性，我们之前说过图层的位置和不透明度的变化可以做 成动画，在这里就反映出来了。
Fra Baidu bibliotek 四.教学过程（设置动画时间）
8.列表中的“无延迟”就是0秒，如果没有想要设定的时间，可以选择“其他”后自行输入数 值(单位为秒)。也可以在选择多个帧后统一修改延迟，选择多个帧的方法和选择多个图层相同， 先在动画调板中点击第1帧将其选择，然后按住SHIFT键点击第6帧，就选择了第1至第6帧。然后在 其中任意一帧的时间区进行设定即可，如下图所示，设为0.1秒。这是一个比较常用的延迟时间。 9.再次播放动画，就会看到形状移动的速度有所减缓，并且在移动的最后会停留较长时间。 很明显，这是由于它被设置了较长延迟的缘故。而这种较长的延迟实际上起到了一种突出的作用 ，在实际制作中就可以利用这个特点来突出某个主题。
接着选择第2帧，在图层调板中将方块图 层的不透明度改为80%，第3帧60%，以此类推 ，因为我们还有一个0%的延迟，所以还需要再 复制一个帧出来，为第6帧，并设定透明度为 0%。形成的效果如右图所示。这时候播放就会 看到方块逐渐渐隐的效果。
四.教学过程（过渡动画）
1.新建一个图像，大约500×100，新建图层并画上圆形形状，将其移动到左上角。接着复 制1帧，在新帧中将方块移动到右下角，并将图层部透明度设为10%，大致下左图所示。然后按 下红色箭头处的按钮，将出现下右图所示的对话框，下右图中红色箭头处的过渡方式是指过渡 相对哪一帧，由于之前我们选择的是第1帧，并且总共也只有2帧，所以既可以选择默认的“下 一帧”，也可以选择“最后一帧”。要添加的帧数就是指过渡过程所将占用的帧数，这里设为5 ，那么加上原来7帧，这个动画总共就是7帧。
可以能很好的满足其需求的。
现在大家已经具备完全的GIF动画制作能力，可利用照片、视频 或自己绘制图形来完成制作。将动画以彩信发送给亲朋好友吧，并在
其中加上你的祝福话语。