Photoshop动画制作
2009-07-22 12:28
393 查看
（3600字）了解动画原理并制作简单的位移动画。
动画形成原理是因为人眼有视觉暂留的特性，所谓视觉暂留就是在看到一个物体后，即时该物体快速消失，也还是会在眼中留下一定时间的持续影像，这在物体较为明亮的情况下尤为明显。最常见的就是夜晚拍照时使用闪光灯，虽然闪光灯早已熄灭，但被摄者眼中还是会留有光晕并维持一段时间。
对这个特点最早期的应用，我们上小学时也许就都做过了，就是在课本的页脚画上许多人物的动作，然后快速翻动就可以在眼中实现连续的影像，这就是动画。需要注意的是，这里的动画并不是指卡通动画片，虽然卡通动画的制作原理相同，但这里的动画是泛指所有的连续影像。
总结起来，所谓动画，就是用多幅静止画面连续播放，利用视觉暂留形成连续影像。比如传统的电影，就是用一长串连续记录着单幅画面的胶卷，按照一定的速度依次用灯光投影到屏幕上。这里就有一个速度的要求，试想一下如果我们缓慢地翻动课本，感受到的只会是多个静止画面而非连续影像。播放电影也是如此，如果速度太慢，观众看到的就等于是一幅幅轮换的幻灯片。为了让观众感受到连续影像，电影以每秒24张画面的速度播放，也就是一秒钟内在屏幕上连续投射出24张静止画面。有关动画播放速度的单位是fps，其中的f就是英文单词Frame(画面、帧)，p就是Per(每)，s就是Second(秒)。用中文表达就是多少帧每秒，或每秒多少帧。电影是24fps，通常简称为24帧。
现实生活中的其他能产生影像的设备也有帧速的概念，比如电视机的信号，中国与欧洲所使用的PAL制式为25帧，日本与美洲使用的NTSC制式为29.97帧。如果动画在电脑显示器上播放，则15帧就可以达到连续影像的效果。这样大家以后在制作视频的时候，要想好发布在何种设备上，以设定不同的帧速。
人眼的辨识精度其实远远高于以上几种帧速，因为人眼与大脑构成的视觉系统是非常发达的。只是依据环境不同而具备有不同的敏感程度，比如在黑暗环境中对较亮光源的视觉暂留时间较长，因此电影只需要24帧。顺便说句题外话，只有少数动物的眼睛能在某些方面超过人类，但都同时在其他方面存在严重缺陷。如“细节之王”鹰是色盲，而“夜视之王”猫头鹰的眼珠固定，要转动头部才能观察周围。
在我们前面所学的课程中，Photoshop只是被用来制作比如海报、印刷稿等静态图像的，我们提到过它具备动画制作 的能力。现在我们就是要在Photoshop中去创建一个由多个帧组成的动画。把单一的画面扩展到多个画面。并在这多个画面中营造一种影像上的连续性，令动画成型。
现在很多使用Flash制作的动画都可以附带配音和交互性，从而令整个动画更加生动。而Photoshop所制作出来的动画只能称作简单动画，这主要是因为其只具备画面而不能加入声音，且观众只能以固定方式观看。但简单并不代表简陋，虽然前者提供了更多的制作和表现方法，但后者也仍然具备自己的独特优势，如图层样式动画就可以很容易地做出一些其它软件很难实现的精美动画细节。再者，正如同在纸上画画是一个很简单的行为，但不同的人画得好坏也不相同。因此优秀的动画并不一定就需要很复杂的技术，重要的是优秀的创意。
无论是哪一个软件，它们的制作原理都是相同的，正如同我们曾经刻苦学习的RGB色彩模式一样，到哪里都能应用上。所以我们现在的任务是利用已经学到的Photoshop基础知识，将它扩展到动画制作上，从中学习到制作动画的一般性技巧和方法。这些知识以后仍然可以应用于其它方面。并且我们也会介绍如何将Photoshop动画转为视频并为其加入声音。
除了制作上的不同以外，在用途上也有不同。动画经常被安放于网页中的某个区域用以强调某项内容，如广告动画。这种动画通常按照安放位置的不同而具备相应的固定尺寸，如468x60、140x60、90x180等。也可将动画应用于手机彩信(一种可发送图片、声音、视频的多媒体短信服务)。这些用途都有各自的特点，除了尺寸以外还有其它需要考虑的因素。如字节数的限制，帧停留时间等。我们会在教程中逐步予以讲解。
需要注意的是，在本教程开始之前，我们要求读者都已经学习过Photoshop的基础知识，理解并掌握如调整图层、图层样式等概念和操作，例如“怎样建立曲线调整层”之类的内容我们只作简要操作介绍，而不再详细解释其中原理。因此建议新加入的读者先行学习基础部分内容。
另外，Photoshop CS3 Extended(扩展)版本才具备动画制作功能，普通版本是不具备的。CS2版本有附带动作制作功能，操作也与CS3 Extended相似。而CS及更早版本则需要借助捆绑的ImageReady软件进行动画制作。建议大家使用与教程相同的CS3 Extended版本。
既然称为动画，那就是要令画面中的图像动起来，现在我们来实际动手画制作一个“简单且简陋”的动画吧。
新建一个150×150的空白图像，新建一个图层并画上一个矩形，大致如下左图所示，图层调板如下右图。从中可以看出这是一个普通的点阵图层，大家在实际操作中应尽可能使用矢量图层，在后面的教程中我们也会注意这一点的。
通过【窗口_动画】开启动画调板，如下左图所示。而此时图层调板也多出了一些选项，如下右图红色箭头处。如果将动画调板关闭则恢复到原先。这里暂时不用去理会。另外动画调板经常与测量记录调板组合在一起，后者与我们目前的内容并无关系，可将其关闭。
在开启了动画调板后，我们就可以开始制作动画了，在动画调板中点击红色箭头处的“复制所选帧”按钮
，就会看到新增加了一个帧。如下图所示。按照我们以前的习惯，这个图标应该表示为新建，如新建图层等，在这里虽然字面上的解释是复制，但其实也是一种新建，只不过这新增加出来的帧其实和前一个帧是相同的内容。相应的，大家也应该能想得到
按钮的作用就是删除帧。
确认动画调板中目前选择的是复制出来的第2帧，然后使用移动工具将图层中的方块移动一定距离，大致如下左图所示。此时动画调板如下中图所示。可以看到虽然在第2帧中方块的位置发生了改变，但在原先第1帧中方块的位置依然未变。这是一个很重要的特性。
重复几次这种先复制帧再移动方块的操作，最终得到如下右图所示的样子(类似即可)。现在我们拥有了7个帧，且每个帧中方块的位置都不同。注意这句话“每个帧中方块的位置都不同”，再看看图层调板，很明显只有一个图层存在(背景层暂且不算)，这就引出一个特性：对一个图层来说，它的位置(或坐标)在不同帧中可以单独指定。按照这个特性，我们使用一个图层就可以做出物体移动的动画。
现在大家可以按下动画调板中的播放按钮
，在图像窗口就可以看到方块移动的效果了，只是移动的速度很快。这是因为没有设置帧延迟时间。注意动画调板中每一帧的下方现在都有一个“ 0秒”，这就是帧延迟时间(或称停留时间)。帧延迟时间表示在动画过程中该帧显示的时长。比如某帧的延迟设为2秒，那么当播放到这个帧的时候会停留2秒钟后才继续播放下一帧。延迟默认为0秒，每个帧都可以独立设定延迟。
设定帧延迟的方法就是点击帧下方的时间处，在弹出的列表中选择相应的时间即可。如下左图所示，将第7帧设为0.5秒。列表中的“无延迟”就是0秒，如果没有想要设定的时间，可以选择“其他”后自行输入数值(单位为秒)。也可以在选择多个帧后统一修改延迟，选择多个帧的方法和选择多个图层相同，先在动画调板中点击第1帧将其选择，然后按住SHIFT键点击第6帧，就选择了第1至第6帧。然后在其中任意一帧的时间区进行设定即可，如下右图所示，设为0.1秒。这是一个比较常用的延迟时间。
再次播放动画，就会看到方块移动的速度有所减缓，并且在移动的最后会停留较长时间。很明显，这是由于它被设置了较长延迟的缘故。而这种较长的延迟实际上起到了一种突出的作用，在实际制作中就可以利用这个特点来突出某个主题。我们在后面的教程中也会找时间专门介绍一些表现手法。
除了延迟时间外，动画还有一个特点就是可以设定播放的循环次数。注意在动画调板第一帧的下方有一个“永远”，这就是循环次数。点击后可以选择“一次”或“永远”，或者自行设定循环的次数。之后再次播放动画即可看到循环次数设定的效果。
虽然在绝大多数情况下动画都是连续循环的(即永远)，但在某些地方也会用到单次或少数几次(2~3次)循环，主要出现在利用动画制作网页部件的时候。比如将一个栏目的名称从无到有用动画渐显出来，这样当名称完全显示出来后就应当固定，而不能再次消失然后再次渐显。这时就要使用“一次”的循环设定了。
按下〖CTRL+S〗【文件>存储】可以将动画设定保存起来，文件格式为psd。这种文件格式是Photoshop专有的，可以记录所有的相关信息，建议大家都将自己的作品保存为该格式，方便以后的修改。如果需要能用于网页的独立动画文件，则需要使用〖CTRL+ALT+SHIFT+S〗【文件>存储为Web和设备所用格式】，将出现一个如下左图所示的大窗口。这个大窗口有许多内容需要介绍。但现在大家只需要参照红色箭头区域中的设定即可。
同时窗口右下方绿色箭头区域会出现播放按钮和循环选项，在此更改循环次数会同时更改源文件中的设定。需要注意的是，如果在红色箭头区域内没有选择GIF，则播放按钮不可用。这是因为只有GIF格式才支持动画，如果强行保存为其他格式如JPG或PNG，则所生成的图像中只有第一帧的画面。
在存储过程中可能出现如下右图所示的警告信息，不必理会，确定即可。也可以让其不再显示。但大家要注意在给文件起名时要使用半角英文或数字，不要使用全角字符或中文。这是为了能更广泛地被各种语言的浏览器所兼容。
在这个章节中大家要掌握的是动画的两项属性，即帧延迟时间和循环次数。另外要掌握“复制帧、移动图层”这种的制作简单物体位移动画的方法。并使用该方法制作出同时有两个物体位移的动画。效果类似下图所示。
第02课 第一帧的传播特性 http://www.missyuan.com/thread-363072-1-1.html
（2100字）利用图层不透明度制作动画；“传播帧1”的作用。
在开始之前我们先讲解一下上节课后的作业，那是一个有两个物体一起移动的动画。所谓的两个物体其实也就是两个图层，分别绘制上方块和圆，然后复制一帧并相对移动图层的位置即可。在技术上并没有太大难度。
但要注意看清楚我们的范例动画，其中的圆并不是一开始就移动的，而是滞后一段时间才开始的。这也就是说在前面几帧中只需要移动方块图层，而并不移动圆图层。在方块移动几帧后再开始移动圆，动画调板类似于下图所示。点击红色箭头处可以开启调板选项，可以自己设定帧缩览图的大小。绿色箭头处的
是帧步进按钮，点击一次播放一帧，
则是播放上一帧。
按钮则是回到起始帧。
我们安排这个范例是想告诉大家，一个较为复杂的动画往往是由许多物体构成的，而这些物体未必都是一同动作(如移动)的。比如制作一个物体撞击另外一个物体的动画时，被撞物体就应该在撞击物体接触之前都保持不动。
之前我们制作的是位移动画，是利用图层的移动。除此之外，还可以通过设定不同的图层部透明度来产生动画，制作的方法相信大家应该可以猜得到，那就是在不同的帧中改变图层调板中的部透明度数值。现在新建一个100×100的图像，新建一个图层并绘制一个方块。然后一次性复制5个帧出来，将会看到6个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒，如下左图所示。
接着选择第2帧，在图层调板中将方块图层的不透明度改为80%，第3帧60%，以此类推，到第6帧为0%。形成的效果类似下右图所示。这时候播放就会看到方块逐渐渐隐的效果。需要注意的是，通过
按钮隐藏图层等同于将不透明度设定为0%。
在这个制作中有一个很大不同，就是我们改变了原先复制一帧后马上进行设定，设定完后才复制另外一帧的方法。这次是将所有帧一次性复制出来，然后选定帧进行设定。这也是一种制作方法。
在操作的过程中大家不难发现，对于图层调板中的不透明度而言，在选择另外一帧的时候它又会回到100%。这说明一个特性，那就是对其中一帧的不透明度更改并不会影响到其他帧。再试想一下，如果我们用这种方法去制作最初的方块移动，在前一帧中移动图层后选择下一帧时，将发生怎样的情况呢？
很显然，我们将看到方块又回到了原点。而如果此时的图层位置设定没有按照前一帧的轨迹，则将构不成流畅的移动效果。因此这种预先建立所有帧然后修改的方法并不适用于位移动画，其实也不适用于其他动画。只是遇到需要在指定帧数中制作动画时才会用到。
现在我们已经掌握了两种可产生动画效果的设定，一是图层位置，二是图层不透明度，现在可以综合利用两者来制作一个既移动又渐隐的动画了。这可以在刚才单纯渐隐的基础上加以修改。也就是用土办法，选择一帧后移动些许，如此往复。
不过我们需要一个从左端移动到右端的效果，也就是说方块的起始位置必须在左端，但现在所有帧中的方块都在中间，这该怎么办呢？既然“所有帧”都在中间，那么我们就让“所有帧”都到左边吧。在动画调板中选择所有的帧，通过移动工具移动图层到最左端，就会看到所有帧中方块的位置都发生了改变。
此外还有一种方法。整个动画过程可以看作是一个前因后果的关系。如果你在第一帧删除了某个图层，那么之后所有帧中就都不存在这个层了。因此在Photoshop动画设定中，第一帧是比较特殊的。现在选择第一帧，确保图层调板中“传播帧1”有效，如下左图红色箭头处所示。然后移动图层，就会发现所有帧中的方块都统一发生了移动，如下右图所示。如果“传播帧1”无效则只会改变第1帧中的方块位置。
这两种方法各有利弊，“传播帧1”其实就是“传播第1帧，就是将第1帧的改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。而选择所有帧的做法在帧数较多的时候会稍显麻烦，但它可以派生出“选择某些帧”的方式，比如只要改变前3帧时，就可以将前3帧一起选择后进行设定。
需要注意的是，即使原先每个帧都设定了不同的图层位置，“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。
在这里再说一下选择多个帧的问题，我们已经知道如果要选择前4帧，可以先选择帧1后按住SHIFT键再点击帧4，或者反其道而行之也可。但如果要选择不连续的帧，如帧1、帧3、帧4，则可以先按照之前的方法选择帧1到帧4，然后按住CTRL键单击帧2，就可以减去选择帧2。重复操作一次则又可以添加选择帧2。如果是要选择距离较远的个别帧，如帧2、帧11、帧17、帧27，则可以先单独选择其中任意一个，再按住CTRL去添加选择其他的帧。
将所有的帧中的方块都移动到左端后，要做的就是逐个帧地设定方块的位置，那就是选择第2帧移动些许，选择第3帧移动些许。当然这中间有一个我们已经提到过的问题，就是很难保证移动的流畅。我们在Photoshop中学习过，在选用移动工具的时，可以使用键盘上的方向键去移动图层，一次移动1像素，配合SHIFT键就可以远距离移动。
那现在我们就选择第2帧，用SHIFT+右方向键移动。接着选择第3帧，由于该帧中方块又回到了起点，所以需要两次SHIFT+右方向键。第4帧中则是3次，以此类推。设定类似下图所示。第6帧中方块已消失，可不作设定。
使用方向键移动的方法尽管可以保证轨迹的一致，但其局限性也很明显，那就是只适合制作水平垂直或45度角这样的轨迹。如果我们需要较为随意的移动轨迹(如一条弧线)，又想保持流畅性该如何做呢？当然大家会说如果在开始就使用“复制帧、移动图层”的方法就不会有现在的困扰，但请别忘记，修改运动轨迹也是常有的事情。所以还是仔细思考一下如何操作吧。
第03课 设定帧过渡 http://www.missyuan.com/thread-363073-1-1.html
（2100字）使用过渡功能快速制作动画；制作往复式动画。
在开始之前讲解一下上节课的思考题，问题的关键就是很难保证前后帧的轨迹统一，其实我们换一个角度想，就会觉得问题变简单了。总共不是有6个帧吗？我们就先将除了第一帧以外其余5帧中的方块移动到相同的位置，然后再将除了前两帧以外的其余4帧移动到下一个位置，以此类推。
落实到操作上，其实就是先选择帧2到帧6，移动到相应位置，然后按住CTRL减去选择帧2，将帧3到帧6移动到下一位置，再减去选择帧3……如此类推直到完成帧6的位置指定。这是一个操作中很实用的技巧。具体的操作我们就不再叙述了，有问题的话可以参看本课的视频教程。
目前我们制作动画的方法还属于全手动类型的，就是逐帧进行制作。比如一个物体的移动，我们是从头到尾参与了每一帧的设定。这种方式能够带来最大的可干预性，但同时也使得制作变得非常繁琐，尤其是帧数多的时候。今天我们要学习的就是利用帧过渡来制作动画，它的基本原理是，设定好某段运动的起始帧和结束帧，然后在这两帧种产生平均的过渡。如果是物体的移动，则就是先设定好移动起点帧和终点帧。
新建一个图像，大约150×150，新建图层并画上方块，将其移动到左上角。接着复制1帧，在新帧中将方块移动到右下角，并将图层部透明度设为10%，大致如下左图所示。然后按下红色箭头处的
按钮，将出现如下中图所示的对话框，红色箭头处的过渡方式是指过渡相对哪一帧，由于之前我们选择的是第2帧，并且总共也只有2帧，所以既可以选择默认的“上一帧”，也可以选择“第一帧”。要添加的帧数就是指过渡过程所将占用的帧数，这里设为3，那么加上原来2帧，这个动画总共就是5帧。
由于只有一个图层(背景层未有变化)在参与动画，所以现在图层选项中任何一个都是可以的。但不选择背景层的话会形成成透明背景，有关动画背景透明的问题我们会在以后学习到。注意绿色箭头处的参数，其中有“位置”和“不透明度”这两项。所谓参数就是指进行动画过渡的图层属性，我们之前说过图层的位置和不透明度的变化可以做成动画，在这里就反映出来了。
确定后将会在动画调板中看到的效果大致如下右图所示，可以很清楚地看到方块的位置和不透明度都发生了均匀的过渡。如果之前在过渡设定中关闭了“位置”或“不透明度”参数，显然就没有现在的效果了。
这种利用过渡方式制作动画的方法较为简便，我们只需要考虑某段动画的开始和结束的样子就可以了，中间的过程会自动完成。在这种情况下，开始和结束的那两帧被称之为关键帧(KeyFrame)，因为它们决定了过渡的形态。以后我们也会接触到有多个关键帧的动画。
当今许多动画片的制作也采用这种方式，虽然动画片的画面复杂的多，但基本的原理是相同的。不过由于过渡均匀的特点，有时也会使得画面不够生动，缺乏表现力。这是Photoshop功能上的局限。
现在我们面临一个新课题，那就是如何让动画可以完美地循环播放，也就是从A到B再回到A，这样才能形成完整循环，称为往复式动画。就我们目前的这个动画来说，可以通过复制并移动帧来完成“回去”的过程。首先复制帧4，复制后帧4帧5都是相同的内容，而原先的帧5则变为了帧6。然后手动将帧5移动到帧6后方，这样就交换了两者的前后顺序。过程如下图所示。从这个操作可以看出，复制出来的帧并非都出现在最后，而是出现在原有帧的后面，这个特点要注意。
按照这个方法将帧3复制为帧7，帧2复制为帧8。复制帧1为帧9是没有必要的，因为帧9播放后又会是帧1，而两者的内容相同。实际上相当于同一个帧播放了两倍的时间。
撤销操作到原先只有5帧的时候，现在介绍另外一个简单的方法，那就是选择帧5后再次执行帧过渡，将过渡方式设为“第一帧”，表示是从现在的帧(第5帧)过渡到第1帧去，添加帧数保持为3即可，也可以设定更大的数值。确定后就能得到一个往复式动画了。下图所示是设定了添加7帧的效果。
在播放这个往复式动画的时候，会发现一个问题，那就是方块“回场”的时间比较长。这当然是因为同样的距离我们用了更多的帧数，如果将帧6到帧12的延迟设为0.05，就与原先差不多了。
可能大家会有一个疑问，那就是既然总体时间都差不多，那有什么必要设定7帧的过渡呢，像原先那样3帧不就够了吗？这就要涉及到一个动画精细度的问题了。作为一个表现运动的动画来说，帧数越多它所能表现的瞬间也就越多，帧与帧之间的差异就越微小，过渡的整体效果就越平滑。当然同时也会带来制作和存储上的一些不便。所以一般来说不宜设定较多的帧数，只需要满足观看需要就可以了。
在视频制作中也存在这个问题，其原理相同。我们说过电影每秒帧数是24，那么如果使用高速摄影机以48FPS拍摄一段电影，再以通常的24FPS播放，我们看到的就是比正常运动速度慢了一倍的画面。动作影片中的慢镜头就是这样制作出来的。
而如果用普通摄影机拍摄的影片要实现慢动作，就需要延长每帧的停留时间，要达到慢一倍的效果，每帧的延迟就要从1/24调整为1/12，这样实际上每秒钟只播出了12帧，画面会有较为明显的跳动感。所以真正的慢镜头并不是“正常排，慢慢放”，而是“快快拍，正常放”。
同理，低速摄影就是以很低的帧率拍摄，然后正常播放，形成快进的效果。常用来拍摄需要长时间等待的场景然后快速地呈现给观众，如花开、日落等。
本节课需要掌握的就是使用帧过渡制作动画的方法和关键帧的概念，在使用中主要注意过渡方式的选项，要弄清楚是“前一帧”还是“第一帧”，一般说来后者场用来制作“回场”以形成往复式动画。以后大家制作的动画都要优先采取往复式以形成较完美的循环效果。
第04课 动画的设计思维 http://www.missyuan.com/thread-363074-1-1.html
（1800字）如何规划一个合理的动画。
通过前面3课的学习，我们已经掌握了制作动画的方法，尽管做出来的动画还十分简陋。还记得学习基础部分的时候，曾在很长一段时间内接触的都是单一的色块吗？那并未影响大家现在的水平发挥。同样的，很快我们就要开始制作较为精细的动画了。但是在这一切到来之前，大家还必须学习一些必备的设计思维。所谓设计思维就是指在制作动画前的规划考虑，这规划包括很多方面。
首先讲一下图层的组织，最终的成品动画是不包含图层信息的。这里所说的图层仅指制作中。对于利用图层位置变化来制作的动画而言，有一个显而易见的问题就是必须合理安排图层，因为移动的最小单位是图层，因此如果需要制作多个运动轨迹各异的物体时，它们就必须分布在不同的图层中。也需要事先考虑好移动的距离，图像的尺寸以及摆放的位置需要为移动留下足够的空间，这是其一。
其二就是考虑好是否会与其他图层相交，以及相交时候的处理，谁遮盖谁，也就是图层的层次安排，如下图中就列出了3种相交的方式，最左边的是两个图层均为100%时候，绿色覆盖红色。另外两个则显示了在50%的不透明度下，不同层次造成的不同覆盖效果。如绿色遮盖红色，那么相交部位就偏绿，反而反之。这都是在正常混合模式下，如果选择了其他的混合模式如叠加等，就要更加注意层次。
以上说的都是技术问题，现在来说一下情节方面的问题。一般来说，如果一个物体始终都在图像中运动，则无需对其进行交代。但如果物体原本不在画面中，是后来进入画面的，或原本在画面中后来移出了画面，则需要对物体的出现和消失做一个交代，这个交代就是过渡，让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示，演示了在同样的一个文字移动中，是否采取淡入和淡出处理的效果对比。
可将鼠标移入到播放区观看实际的动画效果，移出播放区将停止播放。通过比较，相信大家都会觉得添加了淡入淡出处理的效果更好。
播放范例动画1 播放范例动画2
除此之外，循环设定也是属于情节方面的问题，这个我们其实在之前有提到过，就是有些场合下可以使用无限循环的动画，而有些场合则不适合。比如一个栏目标题文字淡入的动画，如果不断地重复，就会使得网页整体看上去显得很乱，会令观看者感到不舒服。此时最适合的做法就是播放一次，这样既可以展现效果，又不会影响网页整体。设定为2到3次的循环一般也可接受，再多就不好了。
不过只播放一次的动画最好是放在网页的上部，这样一进入网页就可以看到。如果放在网页底部，可能观看者阅读到该处时动画已经播放完了。那样的话就制作动画就没有意义了，还不如就用静态的图片代替。
播放范例动画3 播放范例动画4
需要注意的是，GIF动画图片每调用一次就会重新播放。如果有些人已经具备了网页制作的知识，可以利用这个性质在网页制作软件中设定相应的动作。比如大家在这里移动鼠标观看范例的动画就是如此。每次移入后动画总是从头开始播放。这样即便是只播放一次的动画，也可以令它在网页中多次播放。没有网页制作知识也不用担心，这并不影响我们后面的动画学习。如果想要了解一下，可观看GoLive的视频教程。
对于看上去很不错的淡入淡出效果而言，有一个重要的问题需要考虑，那就是浏览器可以被设置为禁止播放动画。此时动画只会显示其第1帧时候的画面。那么类似上面的“悄然来去”的动画在网页中将是一片空白，因为其第1帧本来就是空白的。这就容易引起观看者的误会。
也许大家会觉得没有人会刻意关闭动画显示，但既然不能排除这个因素，我们就需要从最广泛的层面去考虑访问者的情况。在网页的整体布局中，应避免在重要的文字或指示部位使用淡入淡出动画。在将动画放入网页中后，最好自己手动关闭动画播放检查是否存在问题。除了关闭动画播放以外，在页面显示时如果访问者按下ESC键也会中断动画播放，画面将停留在中断的那一刻。
如要同时照顾到禁止和允许播放动画的访问者，在两者之间取得平衡点，那么在动画的制作上就应该遵循一个原则，那就是主体部分不动，修饰部分作动画。如下图所示，文字本身不做动画，只是在文字的边缘制作了动画效果。这样即使静止动画播放或播放时中断，也不会影响观看者对内容的理解。
不过，只要保证能在任何时候准确地反映内容，避免文字的消失或过于剧烈的变形，主体文字也是可以动的。
播放范例动画5
本节课中所讲述的内容和制作动画的技术并不相关，不过在大家要将动画应用于网页中的时候，就要从大方面来考虑动画的制作及表现方法。单纯学习这些内容有些枯燥，大家留下印象就好，在以后的制作中会有应用到的时候。
这次的作业是将“悄然来去”那个动画制作出来。另外将下面两个派生的动画也制作出来。
播放范例动画6 播放范例动画7
第05课 淡入和淡出的设定技巧 http://www.missyuan.com/thread-363075-1-1.html
（1900字）适当使用淡入和淡出以增加观赏性。
先说一下上节课的作业，我们让大家制作的三个动画都是带有淡入淡出效果的，但仔细观察就会发现其中有不同之处。
第一个动画是随着文字移动而逐渐显现，移动到一半时文字最明显，然后又随着移动逐渐消隐。使用帧过渡来制作的话，就需要先确定好3个 关键帧，第1帧文字应该在最右端，不透明度为0%(或隐藏图层)；第2帧文字在中央位置，透明度为100%；第3帧文字在最左端，不透明度回到0%(或隐藏图层)。大致如下图所示。
然后分别在帧12，以及帧23之间进行过渡，各增加5帧左右即可。帧延迟时间可自行设定。在这个动画中，文字的淡入淡出是随着移动同时进行的。在整个移动过程中透明度始终在变化。
第二个动画中，文字在最右端淡入的时候是静止的，完全显现后才开始移动。移动到最左端后又在静止状态下淡出。那么它的关键帧应该为4帧，大致如下左图所示。分别在这4帧之间设定过渡即可。
虽然具体的过渡帧数可随意设定，但从设计方面考虑的话，帧12和帧34的过渡应该少一些，大约3至4帧即可。而帧23之间的过渡应相对多一些，大约6至7帧左右。这是因为在同样的距离上移动时，帧数越少每帧移动的越快，帧数越多则移动得越慢。如下右图所示就是3帧、4帧、7帧的每帧移动距离。从理论上来说，帧数越多则动画细节越丰富，也越细腻。
我们这个动画主要是展示文字内容，要让观看者看得清楚。如果把淡入淡出的帧数设定得很多，而移动的帧数很少的话，就会形成一种局面，那就是文字非常细腻地淡入，然后飞快移动，接着又非常细腻地淡出。或许观看者仍然可以明白文字的内容，但这样的表现手法是不恰当的。虽然某些时候这也可以成为一种非常规的表现手法。
现在我们已经就同一个主题制作出两个动画，都带有淡入淡出和移动效果，但它们在表达上都有缺点。第一个动画的缺点在于不透明度的过渡太长，整个动画过程中文字只在其中1帧时是完全显现的。而之前之后都处于半透明状态。这不利于强调文字的重要性，并且可能令观看者阅读困难。
大家也许会觉得并不存在这个问题，因为第一个动画中的文字看上去很清晰。但我们是以100%的不透明度为最终显现状态的。这样按照5帧过渡来说，每一帧都有20%的递增，也就是第1帧虽为0%，但第2帧就达到了20%，因此阅读基本没什么问题。如果换一种情况，最终显现的不透明度并非100%，而是只有30%或更低时，每一帧中的不透明度递增也就变得很微小，这样尽管30%的最终不透明度足够满足阅读需要，但其淡入过程就会难以看清从而影响阅读。大家可以将最终不透明度设为30%、10%之类的再做做看。
相比之下，第二个动画就避免了这个缺点，它将淡入和淡出单独制作，在淡入完成(文字达到最终显现状态)后才开始移动，这就确保了文字在移动过程中始终保持其最终显现状态，无论是100%还是30%或其他。不过它同时存在另外一个缺点，那就是文字在起点和终点是静止的，这样破坏了移动的连贯性。
现在我们要将两者结合在一起，制作一个既有淡入淡出效果，也能较好展示文字的动画。思路是保留第一个动画中的文字全程移动，但将淡入和淡出压缩在头尾少数几帧内完成，从而保证文字在大部分移动过程中保持最终显现状态。如下左图，双向箭头表示淡入和淡出过程，上半部所示是第一个动画，可以看出淡入和淡出相加等于动画全程。下部所示是我们现在的构想，淡入加上淡出只占用全程的一半或更少。这样就能让文字以最终显现状态完成大部分的移动。
关键帧设定如下右图所示，分别在相邻的两帧时间设定过渡即可。帧1虽然看不见文字，但可以知道它正位于画面最右端，帧2中文字已经全部显现，位置也稍向左移动。这样帧12的过渡就完成了不透明度的全部变化，同时完成一小部分的移动。之后文字移动一段距离(帧23过渡)后，在接近左端处开始一边移动一边淡出(帧34过渡)，与淡入相反。
不知大家是否想到了这个动画在制作中会遇到的另外一个问题，那就是如何保证帧12的移动距离与帧23的距离对应。这里的对应不是说相等，而是指每帧移动的距离相同，假设帧12的过渡为3帧(ABC)，帧23的过渡为6帧(DEFGHI)，也就是1ABC2DEFGHI3共12帧。那么文字在这12帧中每帧的移动距离应当相等，才能形成较好的移动效果。但大家往往会做出前快后慢，或前慢后快的效果，就是因为对移动距离判断不足。这个问题很难解决，除非动用标尺精确计算距离，不然就只能多试验几次找出最合适的过渡帧数。
本课中要掌握的是淡入淡出在与移动相结合时的处理手法。最好的方式就在持续移动的情况下，用较短的帧数完成淡入淡出，同时应保持每帧移动距离相近。这样操作是有些繁琐，不过不用担心，很快就有办法解决的。
制作第三个动画的源文件我们在这里提供给大家(点击下载anisample01.rar)，并不是认为大家做不出来，而是为了保证教学上的统一，我们需要用这个动画继续学习。大家也可以使用自己的作品。本课没有作业，但有一道思考题，就是如何在保持anisample01.psd原有20帧设定不变的情况下，制作出如下图所示的动画。
第06课 过渡帧动画的局限性 http://www.missyuan.com/thread-363076-1-1.html
（1900字）认识过渡帧的缺陷，以及制作“独立图层”式动画。
到现在为止我们制作动画的过程都是事先建立好所需要的图层(文字也是一种图层)，再建立各个关键帧，之后进行过渡。如果每个动画都能有这样充足的事先计划那当然最好，但如果在已有的动画基础上新增图层会怎样呢？
打开anisample01.psd，会看到该动画总共有20个帧。点击动画调板右上角的
按钮就能看到“新建在所有帧中都可见的图层”一项。这样在已经为图像建立了多个帧的前提下，若新增图层，则该图层默认在所有帧中都可见，位置及不透明度也相同。
现在选择第1帧，在图像左上角新增一个矢量圆角矩形层及文字(如果看不懂这句话，则说明没有掌握基础知识)。就会看到所有帧中都出现相同的内容。如下图所示。其实在选择其他帧时新建层也可以达到同样目的，但圆角矩形及文字未必能直接就位于指定位置，总是需要使用移动工具作调整的。所以此时要利用“传播帧1”的特性来确保在所有帧中的位置相同。如果在其他帧中调整位置，就只对一帧有效。
通常情况下都应开启“新建在所有帧中都可见的图层”选项。如果关闭，新建的图层只会出现在当前所选择(多选无效)的帧中。如果想在所选择的多个帧中可见，可以在图层调板中先隐藏再显示该层，此时动画调板中所选择的多个帧就会同时出现该层的内容。
现在回到正题，即如何在20帧中加入另外一组文字动画，新的文字既有移动也有不透明度变化。如果是从零开始设定关键帧的话，大家都知道该如何操作。但如果要添加到现有的帧中，则非常麻烦。此时不能再建立关键帧，因为新增关键帧势必增加帧数。那自然也就不能使用关键帧过渡。
也许大家会想到去修改关键帧，或建立两套帧系统再将之混合。能够这样想很好，说明思路灵活。但很遗憾这两个方法都不可行。一旦执行了过渡，关键帧就无法修改，除非撤销操作从头再来。而Photoshop只提供一套帧系统。现在唯一可行的方法就是逐帧地手动调整“去留无意”的位置和不透明度。并且最好一次搞定，因为再次修改将会烦上加烦。
就算从零开始，也未必就能制作好这个动画。因为我们使用的方法是建立关键帧后进行过渡，那么原先的“悄然来去”总共使用了4个关键帧，而“去留无意”的动作也必须设定为4个关键帧，只有这样才能统一执行帧过渡。
如果后者需要设定为5个关键帧，就涉及到统一关键帧的问题，需要将“悄然来去”扩展为5个关键帧。如下图所示，第3帧就是新建立的关键帧。可以看出它其实就是在帧2和帧4之间取一个中间状态。但这样做要基于一个前提，那就是“去留无意”的某个关键帧必须是和这个新帧相吻合的。如果“去留无意”作W波浪状移动，那么其波峰和波谷的关键帧就要与“悄然来去”的关键帧一一对应才可以。这就造成一种情形，两个文字尽管移动的轨迹不同，但运动轨迹改变的时间却很相似。这会使动画显得单调。
所以，在制作过渡帧动画的时候，最重要的事情就是事先规划好动画的具体细节，做到完全的把握，然后才开始制作关键帧并执行过渡。这个过程一旦完成就不可修改，除非全部从头再来。
我们在基础教程部分的时候，曾再三强调在制作中要保留最大的可编辑性(如使用调整层等)，以方便以后有可能发生的修改。这种思维适用于任何领域，却唯独在此不适用，因为过渡帧动画的特殊性，使其一旦成型就不可修改。这也是以往很少人使用Photoshop及ImageReady(早期与前者搭配)去制作较复杂动画的原因。
在基础部分我们曾经蜻蜓点水地使用了Premiere制作电影，大家对其中的通过时间轴设定电影的方式应该还有印象。另外观看了GoLive视频教程的读者也对DHTML(动态网页)制作中的时间轴印象颇深。现在CS3版本的Photoshop也具备了时间轴设定方式，我们从此可以摆脱过渡帧动画的局限了。我们将在下一课学习使用时间轴。
之所以我们没有在一开始就介绍时间轴，是因为帧式动画是所有动画的基础。时间轴只是在设定方式上不同，形成的最终动画仍然是以帧形式存在的。并且时间轴适合制作情节较为复杂的动画，对于一些类似单个文字移动这样的效果，使用过渡帧制作更快更简单。
还有一类动画称为“独立图层动画”，主要用来制作一些无法用关键帧过渡完成的效果，如鸟类拍打翅膀的动画，就是分开5个独立图层分别绘制一种翅膀形态，然后在不同的帧中显示不同的图层，如下中图所示，我们使用5个图层绘制5种形态，然后在5帧中分别顺序显示某一层，之后又增加了3帧制作回场，形成了8帧的往复式动画。其中帧28、帧37及帧46内容相同。
由于Photoshop不支持旋转动画，也不支持任意变形动画，因此要制作这两类动画时，就必须采用“独立图层”方式，逐帧指定图层的显示状态。今天的作业是将下面两个动画制作出来，总体难度不大，主要考验在基础知识部分学习过路径，以及自由变换工具的使用，凡是这类涉及像素重组的变换，都应当优先使用矢量图形。使用路径方式绘制物体，通过【编辑>变换路径>再次】命令多次旋转和缩放。如果操作上有困难，应复习基础教程中的相应内容。
第07课 初识时间轴 http://www.missyuan.com/thread-363077-1-1.html
（1400字）接触时间轴方式，为将来的动画制作做准备
通过前面的课程，我们已经学会了利用关键帧过渡，以及利用独立图层这两种制作动画的方式。它们可以用来制作一些简单的单物体动画，在很长一段时间内也是Photoshop唯一的动画制作方式。今天我们要学习一种新的利用时间轴制作动画的方式。时间轴方式广泛运用在许多影视制作软件中，如Premiere、AfterEffects等，包括Flash也是采用这种方式。
关键帧过渡动画中还有许多操作我们没有提及，这是由于它们与时间轴方式并无关系，而时间轴将是我们今后制作动画的主要方式，因此予以略过。
为统一素材，点击此处下载anisample02.rar文件并解压出PSD文件，在Photoshop中开启，这是一个没有帧设定的文件(大家也可以利用自己制作的代替)。如下图所示。由于使用了文字图层，可能在开启后会由于字体缺失而出现替换选项，选择用默认字体替换即可，默认字体虽然不够漂亮，但教学性是一样的。
PSD文件中包含3个图层(背景层不算)，其中两个是文字层，一个是矢量形状层。如果不知矢量形状图层为何物，说明基础部分没有掌握好。
点击动画调板右下角的
按钮，即可切换到时间轴方式，如下图所示。细心的读者会注意到调板的名称变为了“动画(时间轴)”，而之前的是“动画(帧)”。右下角的按钮变为了
，点击将会切换到原先的帧方式。
需要注意的是，这两种方式是互不兼容的，因此不要在制作过程中进行切换。如果误切换了，可以使用撤销命令〖CTRL+ALT+Z〗挽回。
在时间轴中我们看到了类似图层调板中的图层名字，其高低位置也与图层调板相同。点击图层左方的箭头标志就会展开该图层所有的动画项目，也就是能制作为动画的要素。在不同性质的图层中，其动画项目也不相同。所谓不同性质就是指如普通图层、带蒙版的普通图层、文字图层、调整图层等，这些都属于不同性质的图层。如下左图所示分别是“去留无意”文字层与“形状1”矢量形状层展开后的动画项目。其共有的是位置、不透明度、样式。不同的是文字层多了一个“文字变形”项目，而矢量形状层多了两个与蒙版有关的项目。
动画的制作不能超出图层自身的动画项目，比如不能对形状层进行“文字变形”。但有些动画项目可以后期再添加，如对文字层添加蒙版后，就令其具备了蒙版的动画项目。
在调板左上方有一组数字0:00:00:00，这是当前的时间码，从右端起分别是毫秒、秒、分钟、小时。一般也就用到秒这级。时间码后面还有一个30.00fps，这个就是帧速率，表示每秒多少帧。一般取值为整数，在影视编辑方面才会用到小数帧率。
点击动画调板右上角的
按钮后选择“文档设定”，就会出现如下右图所示的时间轴设定。在其中可以指定动画总时长和帧速率。按照默认的设置，是总长10秒，每秒30帧，这样总帧数就是300帧，对于网页动画来说这是一个相当大的数值了，制作出来会占用很大的字节数，不利于网络的传输。现在我们将持续时间改为5秒，帧速率改为5fps。确认后就会在动画调板中看到新的帧速率指示。
如下图所示，将动画调板横向拉大一些，就会看到01:00、02:00这样的时间标志，单位为秒。时间轴的最右端正是刚才所设定的5秒总时长。将红色箭头所指出的滑杆向右方拖动，就能放大时间轴的细节，红框区域内就是放大后的时间轴。可以看到在秒之间有了01f、02f这样的标志，这就是帧。我们刚才的设定是5fps，所以每两秒之间都有5个帧。虽然我们只看到最大04f，但要知道05f其实就是和01:00重合在一起的。因此被表达为01:00f，意思就是该处既是第一秒，也是一个帧。
注意在两个橙色箭头之间有一条不太显眼的细线，这是渲染缓冲指示，其他影视编辑软件也都有这个指示，不过在Photoshop中它的作用并不是很重要，在后面的课程中会提到。
第08课 用时间轴制作动画 http://www.missyuan.com/thread-363078-1-1.html
（2400字）学习新的制作方式，体会新方式带来的便利。
现在我们正式开始利用时间轴来制作动画，这与我们之前的帧式动画有很大不同，但相比之下时间轴方式来的更直观和简便，也是我们以后最主要的制作方式。
接着上一课的内容，开始设定“悄然来去”的动画。在时间轴调板中展开这个文字层的动画项目，如下图所示。确保当前时间为0:00:00:00，同时注意红色箭头处的时间标杆应位于最左端，这就表示是处在起始时刻。
接着用移动工具将“悄然来去”移动到画面的右端。然后在点击橙色箭头处的秒表按钮
，这表示启动了“位置”这一动画项目，并且将目前该文字层的位置(画面最右端)记录在起始时刻。时间轴区域中出现的黄色菱形就是该处包含记录的标志，这也称为关键帧，是时间轴的关键帧，与我们以前学习的过渡帧动画不同。
将时间标杆拉到最右边，使用移动工具将文字移动到画面最左端，这时会看到时间轴上的标杆处自动产生了一个关键帧。如下图所示，并且注意在红色箭头处有一个菱形的“删除/添加”按钮
，此时如果按下该按钮，将会删除时间标杆处已建立的关键帧。如果标杆处没有关键帧，点击则可建立一个新帧。
需要注意的是，在这里我们的时间标杆往右最多只能拉动到04:04时刻处，而不是05:00。这是因为05:00是动画最终结束的时刻，是“最后一帧结束时”的时刻，但我们现在需要设定的是“最后一帧开始时”的状态，而最后一帧本身将停留一段时间。所以标杆并不会位于05:00时刻。要记住帧是最小的单位。
通过以上的设定我们完成了“悄然来去”文字的位置移动设定。接着来设定其透明度变化。我们先弄个简单的，就是从开始时淡入，进行到一半时完全显现，然后淡出直到结束。这样就需要3个关键帧进行设定，在开始时刻设定为0%，一半时设定为100%，结束时再设为0%即可完成。大致如下图所示。注意在时间轴方式下不能通过隐藏图层实现透明度变化。
当我们在第一步中将关键帧1设为0%后，如果向后拉动时间标杆，会发现在所有时间内透明度都是0%。在第二步中设定关键帧2后，会发现12之间已有过渡效果，但关键帧2之后直到结束时，文字都始终显示。这就带出时间轴一个很重要的性质：某个时刻的关键帧设定会影响该时刻之后的所有时间。因此关键帧1的设定导致了之后所有时间内(12之间、23之间)文字图层全程都是0%。而当关键帧2设定后，既在12之间形成了过渡，也导致了23之间变为了全程100%。直到关键帧3设定完成，23之间形成过渡。
在设定的顺序上，并不需要完全遵从上述的顺序。“悄然来去”本来就是100%的状态，这样我们可以先在一半时刻建立关键帧，而并不需要设定不透明度，因为此时就应该设为100%。然后再在开始和结束时刻建立关键帧并调整为0%。
撤销之前的设定，按照新顺序来进行，也就是从1、2、3的顺序改为2、1、3。由于开始和结束时刻(1与2)的不透明度是相同的，因此我们可以通过拷贝粘贴关键帧的方法来完成。首先建立这两个关键帧，设定好开始时刻后，在时间轴中该关键帧的标志
上点击右键，选择“拷贝关键帧”，然后在结束时刻的标志上点击右键选择“粘贴关键帧”，这样就将前者的设定复制到了后者之中。顺序也可以相反。这种方法可以在所有已存在的关键帧之间进行操作。
回忆早先在学习过渡帧式动画制作时所说的淡入和淡出，就会知道现在这个3帧设定的效果并不是最理想的，应当将淡入和淡出的过程缩短，以便让文字在移动过程中大部分时候保持完全的显现。现在我们就在之前的3帧基础上修改。
大家可能会想在原有的帧2前后再新增两个帧，如下图上方所示。其实只需按照下方所示移动原帧2，然后新增一个帧即可。其设定可由原帧2拷贝而来。这样我们就完成了淡入淡出的修改。
从以上操作我们可以总结出时间轴式动画的一个基本特性，那就是将各个动画项目独立出来，对其中一个项目的修改并不会影响其他项目。比如我们在修改“透明度”的时候就不需要去考虑早先设定好的“位置”。另外就是各项目的关键帧设定允许不相同，不必为了统一关键帧数量再花费心思。
关于新增关键帧有一个需要注意的问题，那就是自动添加和手动添加的区别。当点击某个项目的秒表按钮
后，该项目就会在时间标杆处建立一个关键帧，并自动跟踪该项目在其他时间范围中的变化。这就意味着如果将时间标杆移动到一个新位置，并对图层的该项目上做出了更改后，将会自动在当时标杆处建立一个新帧。如果未做任何更改又想建立关键帧，就需要手动点击秒表按钮左边的
按钮(注意在已有帧处点击将删除该帧)。点击前一帧
和后一帧
按钮则可在各关键帧之间跳转。也可以直接在关键帧上点击右键选择删除该帧。
一般来说，我们都是在动画起始时刻点击秒表按钮
建立第一个关键帧，然后将标杆移动到适当的时刻，对图层做出相应改变，获得新的自动关键帧。周而复始完成整个设定过程。相对而言，手动建立帧的机会并不多，因为都是为了设定，效果与自动增加的帧区别不大。后面的课程中讲解制作加速和减速效果时会用到手动新增帧。
除了单个项目以外，也可以同时设定多个动画项目，它们都会被自动跟踪。现在我们将时间标杆移动到起始时刻，如下图所示，启动“去留无意”和“形状1”相应的动画项目，然后拉动时间标杆到不同时刻，相应改变位置和不透明度等。有改变的地方就会留下帧标志。
需要注意的是，由于“形状1”是矢量蒙版图层，因此要记录其位置移动必须使用“矢量蒙版位置”项目，而不是“位置”。
另外要提到的就是在上节课中所讲到的渲染缓冲指示，大家可能已经发现了，在播放以及拉动时间标杆时，相应区域的渲染缓冲指示就会被填满，这表示Photoshop已经将动画的具体内容存储到系统缓存中，可提高再次播放时的速度。但如果对动画作出了修改，则渲染缓冲将被清空。我们现在所制作的动画都比较简单，所以缓冲与否都一个样，但如果以后大家制作一些较为复杂的动画，尤其是动画中有多个图像互相混合时，缓冲的区别才会体现出来。
这节课中我们学习了时间轴方式制作动画的主要方式，与早先所学的帧过渡方式相比，时间轴方式不仅制作速度快，且修改极为便利。从今以后我们将以此方式制作绝大多数的动画作品。到这里我们已经讲解完了动画制作的基础知识，接下去的课程将讲解一些更高级的技巧，以及如何制作适用于网页、手机等不同媒体的动画。
第09课 使用图层样式制作动画 http://www.missyuan.com/thread-363079-1-1.html
（2400字）图层样式的引入，令整个动画的质量大为提高。
在学习了如何使用时间轴方式制作动画之后，我们就完成了动画制作的基础部分。在这里要再次强调，注意不要随意在时间轴方式下切换到帧方式，因为这会导致时间轴定义的失效。若是误操作，可使用撤销命令挽回。
在前面的课程中，在使用帧过渡的时候，有3个参数(蒙版情况下有5个)，分别是位置、不透明度、样式。我们已经知道位置就是图层的坐标，比如一个文字的移动，就是改变文字图层的位置。不透明度则可实现图层半透明变化。而所谓的样式就是指图层样式。在Photoshop基础知识中我们已经学习过如何为图层定义样式，在定义样式中有许多的参数都直接影响最终的效果。如阴影的高度、角度等。这些参数中的绝大多数，都可以作为动画的变量来使用。可以做出效果非常好的动画。
在制作静态的作品时，图层样式中使用频率最高的就是投影，那我们就先从投影开始，将其做成动画来看看效果。
做动画前先要构思好怎么做，这个构思可称为剧本，这次的剧本设定，是让一个圆形浮起。而要在一个平面上表现物体浮起，就需要借助投影来引导视觉。新建一个100×100的空白图像，在文档设置(点击动画调板右上角的
按钮)中将动画持续时间改为1秒，帧率改为15。如下图所示。这样动画总共就是15帧。需要注意的是：由于帧数是从1开始，而时刻是从0开始，因此开始时刻即00:00就是第1帧，那么第15帧应位于00:14时刻，而非00:15。这个问题以前已经提到过，这里重复一下。
新建图层，接着使用椭圆工具的填充像素方式(非矢量)画出一个圆，颜色自定，然后对其设定投影样式。分别如下各图所示。
以上的设定都是默认在00:00时刻的，现在按下时间轴中“样式”左方的秒表按钮
，开启该项动画设定。将时间标杆移动到00:14时刻(也就是最后1帧)，再次开启样式设定框，更改投影参数中的“距离”为20像素，效果如下图所示。
播放范例动画
看起来似乎不太对劲，这是因为虽然影子移动了，但物体没有移动，所以并不能表达出浮动的效果。因此大家以后在制作此类动画时候要注意，物体和阴影要同时反向移动。
现在回到开始时刻，开启时间轴中的“位置”项目。然后在00:14时刻(可点击样式项目的
按钮找到该时刻)将圆形往左上方移动些许(可用键盘的方向键)，我们的投影是75度，所以要注意往上移动多些距离，往左移动少些，大约2:1这样。移动的距离并不一定也要20像素，大约15像素左右就可以满足效果了。修改后的效果如下。
播放范例动画
这个剧本大体上就算完成了，我们可以再把细节做的好一些。修改最后一帧的投影设定，分别将投影的“不透明度”改为45%，“大小”改为15像素。这样令影子变得模糊和淡化。更符合实际情况。
播放范例动画
之前我们介绍情节设定的时候，是不提倡这种“有去无回”的，而应当令其形成可往复的循环运动，所以接下来我们动手修改。
首先在文档设置中将持续时间改为2秒，帧率保持15不变，形成总数30帧的动画。然后在最后时刻建立样式和图层位置的关键帧，这两个关键帧保持着原先动画结束的状态。
接着在这两个项目的开始时刻关键帧上点击右键选择“拷贝关键帧”，到最后时刻的关键帧上点击右建选择“粘贴关键帧”。这样结束时刻的状态就与开始时刻一致了。效果如下图所示。
播放范例动画
现在我们觉得这个圆形太单调了，像一块饼，而不像一个球，那么还是通过图层样式为其添加高光效果，这可使用渐变叠加来完成。回到开始时刻，设定渐变叠加样式如下左图所示。注意默认的高光会位于圆形中央，要在设定时到图像窗口中拖动到左上方些许(不能使用键盘)，效果如下右图所示。
播放范例动画
这时大家有没有想到一个问题，那就是我们之前已经开启了样式项目动画，现在添加了新的样式项，那么这个新样式项在动画中是怎样表现的？我们只在开始时刻设定了该样式项，那其它的时刻呢？播放一下动画就可以看到，随着动画的进行，渐变叠加的效果逐渐消失了。这是因为下一关键帧中并没有包含该样式项(在00:14时刻观察图层调板可知)，这样就等于是把渐变叠加做成了淡出。
而现在要使渐变叠加始终有效，就需要在所有关键帧中添加该样式项。但这个样式涉及到鼠标的拖动，不像投影那样可以通过参数简单地再现。因此想要让每一次的设定都相同，等于要保证鼠标的拖动动作都相同，这是不现实的。而Photoshop将全部样式项视为一个整体，没有提供针对单个样式项的复制功能。所以，我们想在保留原先动画的投影样式基础上，加入渐变叠加是不可能的。
现在较为可行的方法，就是删除样式项目的第2、3关键帧。让其在包含渐变叠加的基础上，重新进行投影项目的动画设定。而图层位置与此操作无关，不需改变。完成后的效果如下图所示。
需要注意的是：在针对矢量蒙版图层使用渐变叠加、光泽等需鼠标在图像中拖动产生效果的样式时，最好不要同时设定图层移动。否则在输出为文件时这些样式可能不会跟随移动，这也许是Photoshop的程序漏洞所致。
播放范例动画
针对这种不能在中途加入新样式项的问题，可以用一个简单的方法解决，那就是在一开始建立图层样式时，就将所有的样式项都打开启，并将一些暂时用不到的样式项的不透明度设为0%，这样既不会影响效果，也便于今后的重新启用。但还是免除不了重新设定各关键帧的麻烦。所以在剧本阶段就应当对此做好充分考虑。
目前渐变叠加在3个帧中的状态都是相同的。我们可以在第2关键帧时修改样式，用鼠标将渐变所形成的高光点向左上移动些许，模仿球体移动造成的光照位置变化。效果如下图。在现实中影子的变化也与此不同，应该顺着光照方向变为椭圆才对。并且一个球体停在平面上时，阴影的高度不应那么低，大约应该在5~8像素这样。这些问题不在本课讨论范围。
播放范例动画
图层样式中的绝大多数都可以形成动画，其中投影和内阴影的使用方法差不多，可用作表现物体的立体感，就如同我们上面所作的范例。外发光与内发光的效果也差不多，都是用来营造物体的发光效果。斜面和浮雕中的“方向”及“角度”不能作为动画。光泽可以形成较为虚幻的动画。颜色叠加则可以形成两种颜色之间的过渡。渐变叠加是一个可以产生多种效果的样式项，除了角度、缩放以及鼠标移动位置以外，也需要基础的渐变设定知识。可观看基础教程中相应部分的介绍。
图案以及描边选项中图案描边方式中，图案的缩放及混合模式可以形成很好的动画效果，具体内容大家可自行研究。
这次的作业是将下图所示的模拟雷达动画制作出来，注意观察动画的细节。
第10课 实战图层样式动画 http://www.missyuan.com/thread-363080-1-1.html
（2300字）在实际制作中体会图层样式在动画中的应用。
现在我们来讲解一下上节课的作业。比起以前“石器时代”的作业，它的难度有明显的增加。一个是动画元素的增多，不再是由少数的简单物体构成。再就是要求在制作前要成竹在胸，事先就要计划好步骤。
新建图像，约100×100，用椭圆形状工具的形状图层方式绘制一个矢量正圆，填充为绿色(数值19631c，可在拾色器下方的#区域内填入，这其实就是用十六进制来表示十进制的0~255，不必深究)或其他颜色。然后复制该图层(CTRL+J，复制出来的应位于原图层上方)，对复制出来的图层用自由变换功能，将其参照中心点(ALT+SHIFT)缩小。接着为其定义描边样式(大小为1像素，白色)并将填充不透明度设置为0%，得到一个线圆。适当降低该图层的不透明度(约15%)已达到较好的视觉效果。将这个线圆图层再次复制并依照之前再次缩小，得到两个同心的线圆。大家也可依次列推制作更多的同心线圆。此时图像应类似于下左图所示。
然后新建一个普通图层，使用直线工具的填充像素方式(粗细1像素，关闭消除锯齿)在圆的中央位置绘制一横一竖组成十字。绘制的时候可将图像放大便于对齐，绘制后也可使用多图层对齐功能调整。此时图像类似于下中图所示，图层调板如下右图所示。
在这个前期的动画元素准备过程中，我们先使用了矢量绘制圆是因为其需要缩小，矢量方式可保证质量。后面的十字理论上也可以使用矢量方式绘制，但由于矢量直线在1像素这样小的单位时，会由于自身的抗锯齿功能而可能导致边缘模糊，结果看上去就像是2像素粗细。大家可以自己动手试试看。除了这种极微小单位的情况以外，都应尽量使用矢量绘制，这个前提是不会变的。
雷达扫描效果的实现是第一个难点，这其实就是渐变叠加样式，关键是要选择角度的渐变方式，以及相应的渐变设定，分别如下左图和中图所示。渐变色标为96de8a。渐变色标也可用白色，再通过更改混合模式或降低不透明度来融合图像。此时图像应如下右图所示。如果看不懂这里的内容，请复习基础教程的相应章节。
现在我们让扫描线动起来，其方法就是改变渐变叠加设定中的角度数值。这里会遇到第二个难点，那就是如何设置动画参数。扫描线应该从90度开始，旋转360度后应回到90度。但在关键帧中两个都设置为90的话就没有动画效果了，所以我们先将其设置到旋转180度的位置。需要注意的是，如果旋转的绝对角度小于180(181度等同于1度)，将以最小转角作为旋转的方向。
将动画的文档设置改为持续01:00，帧速率15fps。在开始时刻开启圆图层的样式动画记录。然后将时间标杆移动到动画结束时刻，将角度设置为-90度。动画调板如下左图所示。
观看范例动画
现在我们延长动画的持续时间为02:00，将时间标杆移动到新的结束时刻并建立关键帧，然后将样式的第1帧复制到该时刻。此时动画调板如下左图所示。看起来像是完成了旋转一周的设定了，但细想一下，现在时刻00:00与02:00的状态是相同的，这样当动画循环播放时，两个完全一样的帧就会形成一种停顿的效果，播放动画的时候仔细看一下，不难发现。
观看范例动画
这个问题我们以前在帧式动画的时候遇到过，当时的方法是删除最后一帧。但在时间轴方式下不能单独删除某一帧，只能通过更改持续时间的方式。我们将持续时间改为01:14。动画调板如下左图所示。
注意此时原先设定的帧已位于时间区域之外了，但仍然在发挥作用，控制着动画的参数改变。即使再将持续时间改为更短，以至于在动画调板已看不见时，也是如此。所以在时间轴方式下定义的关键帧，是不会因为持续时间变短而消失的。以后只要增加持续时间，它们还会出现。这是一个很重要的特性。
这里再强调一下动画时刻的表述方式，01:14本身既包含秒时间也包含帧，含义是经过1秒后的第14帧。按照我们15fps的设定，这个绝对帧数就应该是15＋14＝29帧。而下一帧的时刻表示应为02:00而不是01:15。就好比日常生活中的时间是60进位制，那么就不可能有3点60分这样的表述，而应表述为4点。同样的，15fps就表示15进位制，把一秒钟平均分为15单位，14单位之后就向秒进位。
观看范例动画
现在要制作模拟雷达扫描到的物体，这本应在最初就先做好，但为了体现制作过程中可能发生的后期添加元素的情况，所以放到现在来做。
新建一个图层，用直径为1的铅笔工具用白色在其中随便点几下(间距不要太大)。如下左图所示。接着移动时间标杆，在扫描线与这几个点接触的时候(范例中位于00:10)，点击不透明度的秒表按钮建立关键帧，然后移动时间标杆在扫描线差不多回到原点的时候(范例位于01:10)再建立一个，将图层不透明度设置为0%，这样就制作出了小点逐渐淡出的动画。
通过上面的动画可以看出小点在扫描线经过后有了淡出的效果，但问题是小点在扫描线还没有到达的时候，应该是看不见的，当扫描线达到时出现，然后再逐渐淡出。那么我们应该在开始时刻设定关键帧，并将图层的不透明度设置为0%。但这又出现一个问题，那就是小点的出现变成了淡入效果，也就是扫描线还没有到达的时候，小点就逐渐显现了。
观看范例动画
如何解决这个问题是第三个难点。解决的方法有两种，一种大家应该可以自己想到的，那就是将开始时刻的关键帧移动到小点完全出现的前一帧，如下左图所示。此外另外一种方法更“正规”一些，是我们以前没有讲到过的，那就是改变帧之间的过渡关系。
现在不透明度3个帧之间都是过渡关系，即帧12过渡，帧23过渡。如果我们能令帧12之间不过渡的话，就可以达到目的了。在动画调板中第1帧上点击右键，选择“保留插值”，注意帧图标从
变为了
，如下右图红色箭头处所示。这就表示这一帧到下一帧之间不再有过渡效果。由“从黑到白”的方式变成了“非黑即白”。此时整个动画的制作就完成了。
当然，可以在后期再将其改为默认的“线性插值”方式，那样过渡效果就会重新出现。大家可以自己尝试改变其他帧的插值方式。这里的“插值”是由英文生硬地翻译而来，虽有些词不达意，但记住其效果就可以了。
在引入图层样式后，我们表现动画效果的能力就得到了很大的提高。大家应该在课程之外自己多动手实践，不要只局限于这里所介绍的内容。要知道我们的范例是有限的，你们的创意是无限的。就这个已完成的动画而言，大家可以再尝试将十字线或同心圆做成忽明忽暗的效果。这说白了也就是淡入和淡出交替，只不过并非是0%或100%这样极端的状态。
观看范例动画
今天的作业是完成如下的动画。除背景层外，只允许使用一个文字层制作。
第11课 使用蒙版制作动画 http://www.missyuan.com/thread-363081-1-1.html
（2600字）使用蒙版制作出更为灵活多变的效果。
前一课的作业没有技术层面上的难点，所需要的就是细致的观察和耐心的思考。因此我们不会再做详细讲评，仅简要介绍。并附带PSD源文件供大家参考。
文字从黑变白的做法是建立白色文字层，将文字层的填充不透明度作成动画，即可形成从黑到白的效果。其实应该是逐渐隐现的淡入效果，只是由于背景为黑色而已。文字边缘的效果则是描边，使用了图案描边。图案描边可以使用鼠标拖动调整位置，正是将这个位置做成了动画效果。大部分边缘闪动的效果都可以这样来制作。另外还可以试试看将图案缩放做成动画，效果也类似。点此下载该范例的PSD源文件，打开后若出现字体缺失的警告，则可改用其它字体，对最终效果没有多大影响。
在Photoshop制作动画的内容中，最重要的是基本的时间轴、关键帧等概念。在此基础上，要令动画漂亮、精细，则需要依靠样式。因此够熟练使用图层样式也是一个重要的条件。本课将介绍另一个动画基础知识，就是在动画中使用蒙版。当然，在此之前要求大家已完全掌握了基础教程中蒙版部分的知识，在这里不会重复介绍。如果想要了解这方面的内容，可点此观看动画教程。蒙版的文字教程只包含于书籍《大师之路-Photoshop中文版完全解析》中。
在时间轴的项目中，大家都已经看到过蒙版的项目，分为普通的点阵蒙版与矢量蒙版。它们各自都具备两个动画项目，一是蒙版的位置，二是蒙版的启用。
所谓启用就是指蒙版的有效性，即开启或关闭。可以用来控制物体的出现或消失，但不能带有过渡效果。也就是说要么就完全有，要么就完全没有，而不能在两者间过渡。实用价值不是很大，因为同样的效果我们直接使用图层不透明度和“保留插值”就可以实现。
蒙版位置则是一个大有用处的项目，如果我们要制作一个模拟进度条的动画，如下图所示。由于Photoshop不支持变形动画，因此不能简单地通过变换命令实现。虽然可以通过之前介绍的“独立图层”来制作，但未免显得太过繁琐，且后期可编辑性极差。
观看范例动画
用蒙版来制作这个动画则非常简单，在新建的图层中画好长方形，建立一个全白的蒙版，再将其填黑，解除蒙版与图层的链接关系，如下左图所示。接着就可以设定蒙版位置的动画项目了。其过程很简单，就是在开始时刻保持蒙版在全黑，在结束时刻将其移动(往左往右自定)到完全露出白色，也就是不再遮挡图层内容为止。动画的文档设定为1秒、15fps。
也可以将蒙版制作为带有渐变的，如下右图所示。这样可以令进度条的末端显得平滑些。
观看范例动画
除了移动蒙版的位置以外，也可在保持蒙版不动的前提下去移动图层中的内容。建立一个文字层，用渐变工具将其蒙版制作为带有对称渐变的效果。图像效果如下左图所示，图层调板如下右图所示。解除蒙版链接后，就可以将图层的位置制作为动画了。注意此时不再是蒙版位置项目，而是之前我们学过的图层位置。动画的文档设定为2秒、15fps。
虽然此时并不是直接移动蒙版，但必须借助于蒙版的遮挡效果才能完成动画，所以仍然将其归为蒙版类动画。
观看范例动画
不同于以前我们所做的文字移动，上面这个效果可称为文字滚动，两者的区别主要在于前者的文字内容完全呈现，后者则轮流出现。如果要令滚动的文字具备循环效果则需要一定的技巧，往复式设定不适用于此，因为阅读习惯的关系，滚动过去的文字不适宜反方向再滚动回来，就好比一句话不能反过来读一样。虽然默认的循环播放也算是一种解决方法，但在文字的最后字母经过之后会留有一段空白。
我们可以通过复制文字内容的方式来形成没有空白的循环效果。将文字内容复制出2份并接在原文字之后，即将“Photoshop”变为“Photoshop_Photoshop_Photoshop”。在起始时刻将前两个单词的衔接处即“p_P”置于图层中央(或某个)位置，在结束时刻将第2个衔接处移动到大致相同的位置。在动画中微小的差异不易被察觉，所以不精确也没关系。若要追求精确，可以某个字母的笔画(如P的左边一竖)为准建立参考线精确对齐。
此时循环效果已形成，只是在开始时刻和结束时刻存在相同状态的帧。由于这里不是对称的往复式动画，可直接将结束时刻(01:14)的关键帧移动到02:00处，如下图所示。如果掌握了之前所学的内容就能理解02:00时刻实际上并不属于动画过程，真正的动画过程是00:00至01:14。
不仅是文字，各种图形符号也可以依照这个方法做成单向循环动画。
观看范例动画
蒙版动画的技术性内容就是这些，并不高深，但如果结合之前的知识，就能做出很多效果。比如我们之前学过图层样式动画中的角度渐变动画就可以利用蒙版进一步制作。普通的角度渐变如下左图所示，我们为其添加上一个矢量蒙版，如下右图所示。就可以作出一个圆形进度条的动画了。点此下载这个动画的PSD源文件。供大家自行分析。
虽然这里可以使用点阵蒙版，但矢量蒙版能很好地适应图像缩放。这样可以很容易地将动画改变为任意尺寸以适应不同的需求。有关点阵与矢量的区别、矢量路径的绘制在基础教程部分已经介绍过了。后面的课程中会介绍动画尺寸对于字节数的影响。
观看范例动画
将上面的蒙版改变为圆环，或更改渐变的样式，还可以得到另外的动画效果。
观看范例动画1
观看范例动画2
此外，相同色标的渐变可以将色标位置的变化作为动画，如下图所示。可以形成渐变逐渐展开的效果。
观看范例动画
大家也许认为范例的动画总用黑白灰度太单调，这其实是我们从教学角度出发而采取的方式，一是灰度没有色彩干扰可以清晰的表示内容，二是灰度很容易以不同的混合模式作用于任何颜色之上，从而经过简单的修改步骤就能形成良好的效果。这个我们在基础教程的第11章节第6小节已经介绍过了。可点击观看该小节视频教程。文字教程则只包含于出版的书籍《大师之路-Photoshop中文版完全解析》中。
我们为动画添加上投影、外发光等，并更改填充的颜色和渐变的叠加方式，就得到了如下图所示的图像效果。注意这个动画的文档设定改为了10fps，以后会介绍为何更改。
观看范例动画
到现在为止，我们基本都是在以单个图层作为动画的对象，但并不代表在实际的制作中也要如此“节约”。大家尽可以使用多个图层来组成画面更丰富的动画。不过依然要遵循这一个原则，即用尽可能少的图层去制作。因为图层数量一多容易造成混乱，且不利于后期修改。另外一个原则早在基础教程时候就提到过了，那就是尽量使用矢量。
以下就是我们用两个图层组成的动画。由于这个动画字节数太大，就不在网页中展示了。大家可将其当成作业，我们提供源文件供大家研究。点此下载范例PSD源文件。
Photoshop也可以为图层组制作动画，但仅限于图层组的总体不透明度，以及图层组蒙版。不支持图层组位置动画，这多少有些遗憾。如果能够支持图层组位置动画，则我们就可以很容易制作相对移动。比如先制作文字在按钮上的横向移动，然后将文字与按钮组成图层组，再为图层组定义一个竖向移动的动画，就可以完成上面的作业了。
第12课 GIF图像综述及彩信格式 http://www.missyuan.com/thread-363082-1-1.html
（3500字）GIF图像格式的特点，及与手机彩信的关联。
在网页设计扩展教程中也包含对图像格式的叙述，但不会再重复介绍本课中关于GIF的知识，而是介绍其余图像格式的特点及综合使用的方法等。因此如果有想学习网页设计扩展教程的读者，务必掌握好本课的内容。
现在我们已经学习了许多制作动画的方法，但大家对于动画最终的呈现形式仍不十分清楚。动画究竟怎样输出？在哪些地方使用？在使用中又有哪些需要注意的？这节课我们就来详细说明这些问题。
目前在Windows系统上的主要动画图像格式是GIF，其也可以直接在网页中显示，是目前应用最广泛的动画图像格式。包括现在流行的手机彩信中的动画也属于GIF格式。GIF格式可支持静止和动画两种表现方式。有关静止GIF的内容我们将在网页设计的扩展教程中介绍，这里就介绍GIF动画格式。
动画GIF格式的实现原理并不复杂，大家可将其理解为将多个静止画面(帧)组合在一起轮流显示。这些画面(帧)之间还有运算关系存在，与选区何路径的运算类似，分别是添加、减去和消除。这是为了优化动画的字节数。
某一帧如果是添加方式，则就会在保留前一帧图像画面的基础上，再加上这一帧的内容，综合形成新的画面。如常见的进度条动画就是一个典型，如下图所示，假设一个进度条由3帧组成，那么在我们眼中所看到的理论帧形态上来说，好像这3帧中分别保存了最短、中度和最长进度条的图像。但其实在第2帧中只包含了第1帧中所没有那个部分的像素，然后以添加方式作用于第1帧之上，形成了“1+2”的图像。第3帧也是如此。这种优化措施可有效减少图像字节数。
减去方式与之正好相反，是将前一帧图像中的某些像素抹去，可用“倒退的进度条”去理解。消除方式则是将前一帧完全擦除，主要用在前后两帧之间没有任何关联的时候，比如从全部红色变为全部绿色时，前后帧之间并没有任何像素相同，则采取消除方式。
在实际制作中Photoshop会自动根据图像情况来决定采取何种方式，不需要人工干预。这些运算方式作为一个知识来了解就可以了。也可以作为构思动画时的一个参考。
现在要说以下GIF格式的一个重要特点，就是色彩数量的限制，GIF最大只能支持256色，也就是说一幅GIF图像中最多只能有256种色彩。这一点在静态GIF中尤为明显，一些带有丰富色彩的图像，如多种色彩的渐变等，很难在GIF中完美的表现出来。如下左图所示就是一幅照片的局部(注意是局部，并不是完整的全图)在PNG24位、GIF256无仿色和扩散仿色的图像情况。全图是一幅在威尼斯拍摄的商店橱窗，如下右图所示。
可以明显看出PNG24位的色彩最好，可以看作原图。而GIF格式的色彩表现力欠佳。在无仿色的情况下，原图中的一些带有色彩过渡的部位出现了色斑。在扩散仿色下色斑有所淡化，但颗粒感较重，这是仿色自身的原理造成的。有关仿色的概念在基础教程中已介绍过了，可点此观看相应内容。
需要注意的是，256色指的是针对整幅图像而言的。如果整幅原图像就是如下图那样的大小，则256色与原图的区别就不是很大了。这是因为将色彩减少到256色的时候，Photoshop会根据原有图像中的颜色进行编排，这个过程也称为索引，就是将相近的多种颜色归为一种。
如果原图中的色彩包含多个色相，那么256色平均分摊下来后，分给单个色相的数量就很少。相反，如果原图中的色相基本一致或接近，则256色也可以很好地表达。这就是为什么之前的256无仿色看起来色斑明显，而现在的色斑较不明显的原因。因为前者的原图中包含了较多色相，有些颜色被分配给蓝色、红色等，分配给黄色相的色彩较少。而后者的原图中基本只有黄色相，这样就不必为分配其他色相分配颜色了。
如下图是一张在皮亚琴擦拍摄的街景照片，我们取其不同的部位进行比较。下方的若干方块是颜色表，其中的色块就表示所用到的256种颜色。在颜色表中可以很容易的看出原图的色彩构成对色彩索引的影响。左侧图中色相较多，那么256色中分配给天空的蓝色相数量较少，图像中的天空出现了明显的色斑。而右侧图中基本只包含天空部分，所以256色中的大部分都分配给了蓝色相，使得图像中的天空表现较好。
使用【文件＞存储为Web和设备所用格式】〖CTRL＋SHIFT＋ALT＋S〗，将出现的保存储设置框。这是我们最常用的输出功能，在以后将要学习的网页设计扩展教程中更是如此。
进入设置界面后要注意红色箭头处，必须在“优化”选项卡中看到的才是输出后的实际效果，也就是在浏览器或看图软件中的效果。而“原稿”选项卡则是在Photoshop中的效果，不能作为参照的标准，这点要切记。
绿色箭头处是相应的设置区域，从中我们将图像格式设置为GIF，将颜色数设置为256，关闭仿色选项。其设定与上图左侧的效果对应的。
注意蓝色箭头处的字节数指示，这是一个很重要的指标，无论何时我们都必须使这个数字尽可能地小，否则将无法有效使用图像或动画。
要令字节数小，就需要减少颜色数，颜色表中的色块数也会相应减少。但显而易见的，太少的颜色会对图像质量造成明显的影响，很容易形成色斑。开启仿色虽然可以淡化色斑，但同时也会增加字节数。这就像架在字节数和质量之间的一座跷跷板，两者不能兼顾。作为准备在网络上传输的图像而言，字节数往往更为重要，因为大部分访问者不会有耐心花上几分钟去等待一个网页的显示。而网页除了图像之外，还有其他一些代码也需要占用字节数，所以，尽量减少字节数是一个基本原则。当然这个原则与图像质量是冲突的，这就要求我们在构思和制作的过程中要有足够的技巧去平衡两者。这些技巧包括：
一、不要在动画中使用过于丰富的色彩。其原因已经说过了，较多的色彩会导致在索引后图像质量的下降，形成难看的色斑。既然如此还不如使用较为单一的色彩，虽然可能不够华丽，但起码能避免色斑这种硬伤的出现。
二、如果一定需要丰富的色彩，则应保持丰富色彩部分的像素在动画中处于静止状态。因为GIF动画的前后帧之间存在运算关系，位于静止状态的部分可以沿用到后续的帧，那些后续的帧中不必再存有这部分的图像。这样就可以在保持整个动画具备丰富色彩的前提下有效地减少字节数。相反，如果色彩较丰富的像素也在运动的话，则后续的帧中就必须再存有色彩丰富的像素，会大大增加动画的整体字节数。
如下两个动画的对比，第一个保持小球的外发光、投影等部分不动，只有高光部分在变化。而第二个则是小球整体移动。在同样帧率、同样时长、同是256无仿色的前提下，前者的字节数是9.29K，后者则是57.1K。相差达6倍之多。那么它们在网络上传送所耗费的时间也就相差6倍。
观看范例动画1
观看范例动画2
我们在构思动画的时候，要事先考虑好其用途，如果是要用于网页之中，那还要参考其在网页中的重要性，如果不是很重要，属于装饰性的，就尽量减少字节数。这可从减少存储时的色彩数，以及良好的制作规划两个方面去实现。如果遇到带有重要指示性的，一定需要色彩丰富或动感强烈的动画时，则应尽可能减少动画的尺寸。因为小尺寸的图像中像素总量也少，用256色进行索引就不会显得那么局促。这点大家可自己动手实验得知。
GIF还有一个重要特点就是支持背景透明，这使其可以与网页的背景很好的融合。大家也可以在关闭背景图层的前提下输出透明背景的GIF。不过GIF的背景透明只能是两种状态，要么全透明，要么全不透明，而不能是介于两者之间的半透明。因此除非图像的边界是水平、垂直、45度斜线这三种情况，否则都会因为透明而形成明显的锯齿。如下图所示是一组不同边界的图形在不同背景色下的表现。从中不难看出两者的区别。
需要注意的是，边缘的锯齿的形成原理并不只是图像的问题，也有显示器物理局限的因素，相关知识在基础教程中提到过，可点此观看相应内容。
对于带有半透明像素(如投影样式)的图像而言，若要保存为透明背景，则需要开启透明度抖动项目，这样可以用微小的疏密不同的散点来模拟半透明。如下图所示即是。可看出在“无透明度仿色”下的GIF尽管也是背景透明，但在原先半透明的部分仍然保留有白色，这样只能适用于白色背景之上。而后者可适用于任何背景之上。如下右图所示。
需要注意的是，透明度仿色并不是一个完美的解决方案，甚至可以说是一个非常差的解决方案。但出于GIF本身对于透明度的限制而言，也是一种解决之道。在实际的制作中，如果确定要使用GIF格式，则应避免在图像的边界生成半透明像素。换言之就是尽量避免使用透明度仿色。
还有一点要注意的是，如果输出的动画是透明背景的，则可能改变在非透明状态下各帧的运算关系，也可能导致动画的字节数有所增加。
现在我们来说说将动画用作手机彩信的用途。中国移动目前最大允许100K的彩信，那动画最好控制在95K以下，要留一些空间给文字及短信自身的代码。另外还需要注意的是动画的尺寸，不同型号的手机由于其屏幕分辨率不同，能够完美显示的动画尺寸也不相同。所谓完美显示就是指手机屏幕分辨率与动画尺寸一致或更大。如果动画尺寸超过了手机屏幕的分辨率，手机则会将其缩小显示。但缩小后的动画质量会变得很差。常见的屏幕尺寸有：
128×128：常见于早期以及时下一些低端型号的手机上。是彩信动画的基本尺寸，网络上下载来的彩信动画以这个尺寸居多，因为它可以运行于几乎所有支持彩信的手机之上。
128×160：虽然比之前的要多出一些像素，但主要用于显示一些信息，所以能够运行的动画尺寸大多也仍为128×128。
176×208、240×320：常见于Symbian及WindowsMobile等带开放式操作系统的手机，都可播放全屏动画。也有普通手机采用此分辨率的，能否支持全屏播放则不一定。
480×640：常见于高端的手机型号，虽然理论上可以支持全屏播放同尺寸的动画，但由于GIF本身的限制，播放时的流畅度得不到保证。
在制作彩信动画的时候，应该以128×128作为首要考虑的尺寸，因为其兼容性最好，且由于尺寸小，同样内容的动画字节数也比大尺寸的要小。当然，如果确定了接收者的屏幕分辨率，也可以采用与之相当的尺寸制作。
在“存储为Web和设备所用格式”右下角有一个“Device Central...”的按钮，按下后能在选定的手机设备上预览动画在手机上的效果。如下图所示。可在左侧的设备列表中选择，图中所选的是Nokia 3110。Adobe Device Central其实是一个移动设备的资料库，可为面向移动设备制作的人员提供集中的环境。除了普通的显示以外，还可以模拟手机屏幕背光关闭，以及户外屏幕逆光等条件下的显示情况。不过这些功能目前对于我们目前而言意义不大。
另外要注意的一个问题就是动画的帧率，在电脑上基本都能流畅播放30fps的动画，但手机的处理器不比台式电脑，其资源有限。动画的帧率应设置为2~5fps为佳，针对开放式操作系统的手机，由于其处理器性能较普通手机出色，可设置为10fps或更高。同时影响手机播放效果的还有尺寸、总时长、字节数等因素。做出来的动画最好是拿到手机中试播一下观察其流畅程度。
如果要输出多宗不同尺寸的动画，则最好使用矢量格式进行制作，并且矢量格式也是最佳的保存原始图像的格式，符合我们一贯主张的“保留最大可编辑性”原则。
第13课 其他的动画制作技巧 http://www.missyuan.com/thread-363083-1-1.html
（3100字）有关变速、运动模糊、文字变形等辅助技巧。
就我们目前已经学习的制作方法而言，足以应付大部分的制作需求。在本课中我们将学习一些能为作品增添更多效果的技巧，这些技巧都要建立在以往的课程基础之上。因此，彻底掌握之前的所有课程是必须的。这些技巧包括：特殊图层、加减速、运动模糊、文字变形。也希望大家能够总结出自己的制作技巧，并与他人分享。
在Photoshop中能够作为动画的项目有图层位置、图层蒙版、图层不透明度、图层样式。在基础教程的阶段我们学习了色彩调整图层和填充图层。这类图层具有特殊性，前者不直接产生图像，而是针对下方图层做出色彩调整效果。后者虽然产生图像，但属于“虚拟像素”，可在后期更改填充的内容。现在我们将它们为动画服务，看看能有怎样的效果。点击此处阅读有关色彩调整图层的内容。点击此处阅读有关填充图层的内容。
色彩调整图层是比较好用的，利用它可以制作出色彩变化的效果。这些效果可以是从明暗变化、灰度变化、反相等。实现的方法也很简单，就是先建立色彩调整层并做好相关的设置，然后将调整层的不透明度制作为动画即可。如下各动画范例，分别是曲线变暗、曲线变亮、渐变映射、反相。若要将图像变为灰度，可利用渐变映射的灰度渐变，或通过色相饱和度实现。
需要注意的是，这种色彩变化的动画由于前后帧之间的像素大都不相同，因此其占用的字节数会很大。此时应尽可能减少帧数、帧速率或缩小动画的尺寸来平衡。此外，也可以通过建立调整图层的蒙版来实现只针对某个区域的色彩调整效果，这里就不再示范了。
观看范例动画1
观看范例动画2
观看范例动画3
观看范例动画4
有时候可能要表现一些剧烈变化的场景。所谓剧烈变化要么是像素的大幅移动，要么是色彩的大幅改变，可利用反相来实现色彩的剧烈变化。通过前面的范例，我们发现将反相制作为过渡的效果并不好，将过渡效果关闭后能够形成剧烈的色彩改变。这可通过两种方法来实现，一个是将帧设置为保留插值。二是两个关键帧之间不要留有空隙，这样就无所谓过渡与否了。
需要注意的是，第二种方法的后期可修改性较差。如果在文档设置中增大了帧速率，就会在原有的紧密排列的两个关键帧之间插入新帧，这样就会出现过渡效果了。因此不建议采用此方法。而应该采取第一种方法。
现在大家自己动手将这个动画制作出来。点此下载范例文件包。文件包中包含素材图片以及成品的PSD，大家先不要开启PSD文件，尝试自己去分析和制作。完成后再参照范例PSD文件。
观看范例动画1
这个演示反相调整层使用技巧的范例动画具有一定的情节。首先是黑色流星坠落，流星是使用带有渐隐步长的画笔绘制的笔直或垂直线条，然后将其旋转为45度(角度可自定)，接着将除建筑物之外的天空部分创建为蒙版。在解除蒙版链接后，可单独移动流星并与建筑物产生遮挡效果。其后的反相交替没有什么技术难点，就不再说明了。至于蒙版的建立属于，可参看基础教程中有关图层蒙版的相关内容。
需要注意的是，最后的淡出是采用了色相饱和度调整层，所不同的是采取了淡出为黑色的效果，而不是以往的淡出为白色。在使用调整层来制作淡出时，最好不要使用曲线或亮度对比度，因为这两种色彩调整命令并不能完全将画面变为全白或全黑，而色相饱和度命令可以做到。
除了使用调整图层以外，也可以使用填充图层，或将普通图层填充后来制作淡出。淡出的原理就是该图层的不透明度从0%逐渐到100%的过程。这样的好处是除了黑色与白色，还可以淡出为其他的颜色如红色、蓝色等。以下是一个在2000年制作的动画，将当时的个人照分别裁切为两个不同的区域，然后分为3段，并采用白色的填充图层做出的模拟曝光转场效果。因为是为了在经典论坛中的个人头像之用，因此动画的尺寸和字节数有严格的限定。
在尽可能保持较少字节数的前提下，同时又尽可能保证动画的流畅，并不是一件容易的事情。为此可能要牺牲一些哪怕是很好的创意。但如果制作出来的动画不符合要求，或传输较慢，也就失去了其本身最重要的价值。大家自行选用其他素材来模仿制作出这个动画，文件字节数限制在5K左右(范例为3.65K)。并尝试在这个前提下，加入自己的一些新创意。至于其中的单色及抽丝线效果，可参看基础教程种有关色彩调整，以及图案平铺方面的内容。
在填充图层中，除了常用的纯色填充以外，还有图案填充和渐变填充。有关它们的使用方法，就不再另外说明了，大家自己尝试即可。
观看范例动画1
很早以前我们就学习过如何制作一个运动的物体，但我们所制作出来的物体都是匀速运动的，现在可以通过更改关键帧的位置来模拟出加速和减速的效果。这种效果并不局限于物体的运动，也可以用于类似淡入淡出的任何带有过渡性效果的场合。并且该方法也适用于其他的视频编辑软件，以及网页制作软件GoLive的时间轴DHTML效果中。
首先我们新建一个150×100的白底图像，将文档设定为1秒，30fps。新建一个普通图层画上一个矩形，并设定好其从左侧移动到右侧的动画。时间轴设定大致如下图所示。现在的移动速度是匀速的。
观看范例动画1
接下来将时间标杆移动到10f处，点击“位置”项目的菱形按钮，手动在当前时刻增加一个关键帧。这个关键帧目前可以说是多余的，因为它并不会改变动画过程。现在大家来设想一下，假设本来计划在10分钟后到达的地点，现在要求你在5分钟后就到达，那么你肯定需要加速。明白了这个道理，就能明白制作加速动画的方法了。那就是将这个10f时刻的关键帧，移动到05f时刻。这样在0f至05f之间，物体将呈现快速运动，在05f之后恢复原有速度。
以此类推，再分别将15f移动到10f，20f移动到15f，25f移动到20f。就可以制作出一个减速运动的物体了。我们这里是为了说明效果，而在实际制作中其实没有必要更改这么多关键帧，视物体移动距离的长短，一般更改2到3个关键帧就足够了。太长的移动距离本身就不适合用GIF来表现。另外帧率也不要设为30fps这么高。
观看范例动画1
观看范例动画1
运动模糊其实也与物体的移动有关，有些时候需要用较少的帧数来表现物体的快速移动时，使用运动模糊可以减少画面的跳跃感。如下范例动画的演示，提供给人物移动的帧数就是4帧，在如此有限的帧数下要完成长距离(所谓长距离也需要参照物体的大小)的移动是很局促的。为了弥补这个缺点，我们将人物图层复制并用运动模糊滤镜加以处理，形成残影效果。将残影与人物图层一起移动，并在运动开始和结束时刻将其隐藏。这个人物图形可从Photoshop自带的形状库中找到。大家自己尝试制作出运动模糊的效果。我们提供PSD源文件供大家在完成后对照。点此下载范例PSD文件。
需要注意的是，这里我们在具备运动模糊的帧中，仍然保留了人物本体的完整影像，在实际操作中也可以降低本体的不透明度，或索性只保留残影，造成更快速的移动感。在只保留残影的方式下，残影的长度要适当延长一些，并且要接近于运动结束时刻的物体位置。大家可仔细观看范例动画，注意残影位置的区别。
观看范例动画1
观看范例动画2
运动模糊广泛应用于影视制作领域，大部分影视制作软件如After Effects等都有针对此的专项功能。在一些影视片断中，如果将一些快速运动的物体画面暂停，也就可以看到类似的残像。运动模糊英文名称是Motion Blur。在GIF动画制作中，运动模糊可能会增加动画的颜色数，因为残影效果本身就是带有许多过渡性色彩的。在输出的时候要注意在色彩数和动画质量之间做一个平衡。
除了使用滤镜制作残像，也可以将图层复制多份，并依次更改其色彩或不透明度形成一种比较规整的残像效果，如下右图所示，就是将人物层复制出3份并将填充色改为不同程度的灰色。这种残像用较少的色彩数量也可以很好地表现。而滤镜所形成的残像可能会在较少的颜色数下产生色斑。
在使用文字图层的时候，可能有些细心的读者已经发现了“文字变形”这个动画项目。如下图所示，可在动画中设置变形样式为“无”或其他样式，从而形成过渡变形的效果。这个动画项目其实是非常好用的，可惜只能局限于文字，如果能针对所有图形有效就更好了。不过我们有时候可以通过文字中的标点或特殊字符来模拟一些简单的物体形状，从而获得变形的能力，如符号“-”可扩大为矩形。
观看范例动画1
观看范例动画2
第14课 导入和导出 http://www.missyuan.com/thread-363084-1-1.html
（5600字）导入现有的动画及视频资源，将动画保存为视频格式。
我们也可以将一段视频作为动画的素材加以导入，方法是使用【文件＞导入＞视频帧到图层】命令。这个命令要求系统中安装有QuickTime7.1及以上版本才能使用，否则会出现如下图所示的警告框。QuickTime是苹果公司所创的一种应用于视频的优秀的编码方式，早年只能在MAC OS系统中使用，现在已经移植到Windows系统中。可从Apple的网站上下载免费版本的播放器，网址为http://www.apple.com.cn/quicktime。
我们将一段自拍的动物视频经由Premiere剪接为简短的版本，提供给大家进行导入练习。点此下载该视频。进入导入视频帧到图层后的对话框如下左图所示。在左方可选择全部导入或只导入某个片断。全部导入就不必详细说明了。导入片断需要事先定义视频范围，方法是拖动播放进度条至所需片断的开始时刻(红色箭头处)，然后按住SHIFT键继续拖动至结束时刻(绿色箭头处)，也可按住SHIFT键直接点击结束位置。这时播放进度条上会出现一段深色区域，该区域即为将要导入的片断。确定后将建立一个以独立图层方式存在的动画，即每一帧由一个图层组成，在不同的帧中分别显示不同的图层。动画调板类似下右图所示。
这种视频导入方式所形成的动画字节数通常是非常庞大的，这与片断的时长及视频的帧速率有关。比如片断时长为10秒，帧速率为15fps，那么所产生的总帧数就是150帧，是相当大的。所以一般都不宜导入太长的时间，两三秒这样就差不多了。但对于一些高帧率的视频(如24fps、30fps)来说，这点时间所产生的总帧数也很可观，此时可开启“限制为每隔2帧”，这样对原始视频是每2帧取1帧导入，所产生的总帧数就减少了一半。如果设置为每隔3帧，则总帧数减少三分之二，以此类推。这种方法称为帧抽离。可有效地减少动画字节数，但由于是平均抽离，可能会丢失一些动作细节，或造成画面的跳跃感。
一般情况下，对于15fps的原始视频可采取每隔3帧的导入方式，形成每秒5帧的动画。更高速率的原始视频据此类推即可。注意导入后需要调整帧停留时间为原先的3倍，否则会出现类似快进的播放效果。
对于导入后的动画而言，要减少字节数就需要从图像尺寸和色彩数方面去进行调整。在这里需要提醒大家的是，采用【图像＞图像大小】〖CTRL＋ALT＋I〗缩小图像，可能会由于像素重组导致一些原本边缘锐利图像的边缘变得模糊，从而增加理论色彩数。如下图所示就是一个边缘锐利的正方形在缩小前后的理论色彩数对比，可以看出由于像素重组使得色彩数有所增加。在这种情况下，缩小后的图像未必就具备较小的字节数。除非将色彩数强行指定为与前者相同。但强行减少色彩数可能会形成毛刺边缘。
再者，有一些流程图像主要由点、线、框构成，使用缩小命令会令这些细节变得难以辨认，从而影响表达。这个问题不仅针对整个图像，也会出现在针对某些图层的自由变换命令中。所以，对于一些边缘锐利的图像而言，缩小并不是减少字节数的好方法，甚至很可能适得其反。
对于视频而言，因为大部分视频的编码方式重在表现帧之间流畅性而非单个帧的画面质量，其本身就不能完美地记录锐利边缘，导入后的动画画面也是如此，所以缩小尺寸造成的损失及色彩数量的变化并不明显。
除了整体缩小图像尺寸以外，也可以考虑使用裁切命令保留视频的局部，由于不涉及像素重组，因此不会对图像边缘造成影响，不会增加理论色彩数。在大部分情况下，这是一个较好的解决方法。如下图所示是一个常见的处理流程，将原始画面中一些不需要区域进行正方形裁切，得到动画的主体，然后再缩小图像为彩信的通用尺寸128×128(或其他所需要的尺寸)。最后视情添加色彩调整层以改善动画的画面色彩。
注意调整层需位于所有图层上方才能确保针对所有图层有效。当然也可以置于其他层次以营造动画中色彩改变的效果。
在明确动画的画面布局后，可手工进行进一步的帧抽离，如下图所示，若需要将一个过程中的10帧减少为5帧，可分别选择2、4、6、8、10帧并删除，并将剩余的帧延时。这需要大家首先浏览各个帧，在发觉某一过程中的各帧之间变化并不大时，可采用这种方法进行平均抽离。除此之外，也可以连续选择某些帧进行集中抽离，比如物体落下用了7个帧，其间4帧中的变化并不很大，就可以将它们一起删除，并更改剩余帧时长。
这种手动抽离帧的方法速度慢，且需要一定的经验，但较为灵活，可依据实际情况采取不同的抽离方式，可大幅减少动画的字节数，是大家必须掌握的知识。平时多做些尝试，反正还可以撤销。在抽离后最好输出动画到网页或手机等观看效果。手动帧抽离也可在修改图像尺寸或裁切之前进行，但裁切和改变尺寸可确定动画的画面情况，建议大家在这个时候再进行。抽离帧后可删除与之对应的图层。
平均抽离可执行多次，如下图中的最终动画帧中，还可以将2、4帧抽离出去。但第6帧很重要，是情节转化的关键，无论如何不能抽离。 说句题外话，注意观察这个第6帧，大家就会看到以前学过的运动模糊效果。其实运动模糊本来就是由摄影设备造成的，我们之前只不过是将其模拟出来而已。
至于从色彩数方面减少字节数则比较困难，因为视频编码方式的特性，即使在画面中处于静止状态的物体，在前后帧中的色彩也可能不同。再加上光照及摄像机光圈、焦距、曝光度的微小变化，更是使得前后帧之间很难具备同样的色彩。这点与我们以前通过绘制创建物体的动画是完全不同的。况且视频的画面中经常带有过渡性的色彩，如光照或阴影的变化等，减少色彩数量很容易形成色斑。开启仿色尽管可以改善色斑，但同时也会增加字节数。
此时可以考虑以灰度方式显示动画，即建立黑白渐变映射调整层。在灰度方式下减少色彩数量所造成的损失较不明显。还可以使用阈值命令形成黑白分明的图像，配合特殊混合模式的纯色填充层，在减少字节数的同时还可以营造出特殊的艺术效果。点此下载范例PSD文件。
阈值命令所形成的画面具备反差强烈的色彩，很适合用来制作透明背景。在存储为Web和设备所用格式的对话框中，可以指定某种颜色为透明色。首先确保“透明度”选项为关闭，然后使用吸管工具(快捷键I)在背景上点击一下，这样颜色表中的某个颜色就被选中了，接着点击下方的
按钮，就可将所选的颜色变为透明。如下图所示。可将多个颜色转为透明。
观看范例动画1
观看范例动画2
观看范例动画3
此外还有一种方法可有效减少字节数，就是采用抽丝线覆盖画面，由于覆盖的地方变为单一的颜色，实际上就等于消除了这一行中的像素差异。其原理等同于将图像的一半填充为全黑，只不过这里并不是连续填充，而是每隔1像素填充一行，使得画面整体仍具备可读性。这种方法其实就是被称为扫描线或抽丝线的效果，可利用图案填充来完成，点此阅读基础教程中有关图案填充的内容。隔行抽丝可令动画字节数减少近一半。
需要注意的是，尽管半透明的抽丝线看上去效果不错，但这里的图案填充不能采用半透明，因为半透明并不能完全覆盖图像中原有的象素，达不到我们的目的。此外，黑色的抽丝线可能会使图像偏暗，白色的则会使图像偏亮，注意配合色彩调整图层中和一下亮度。也可以采用其他颜色的抽丝线达到另类的效果，还可将抽丝线的颜色转为透明。在转为透明之前，抽丝线的颜色应尽可能与画面的色彩有较大的反差，这样是为了避免其它地方的同种色彩也被一并转为透明，从而破坏画面。
导入后的视频以独立图层的方式存在，可切换到时间轴方式进行附加制作，如添加上文字或其他图形等。在切换之前最好将所有的视频帧归为一个图层组，以避免占用动画调板的空间。如范例中就在左下方加了一个标志，以及增加了动态的文字效果。需要注意的是，用时间轴方式进行帧停留时间的调整是很困难的，因此在转为时间轴方式时，最好确认之前的工作都已完成。
尝试将这个动画制作出来，之后参照对比范例文件，点此下载范例PSD文件。
观看范例动画
有些时候可能需要开启现有的GIF动画文件进行再加工，这时就会出现一个问题，那就是直接开启GIF动画文件后只能保留第一帧的画面，而其后的动画帧都被遗弃。如下图所示。这显然不能满足需求。
其实Photoshop是可以开启现有的GIF动画的，只是屏蔽了这功能，我们可以通过【文件＞导入＞视频帧到图层】开启动画GIF，如下图所示，默认情况下只能开启视频格式MOV、AVI、MPG、MPEG，而并没有GIF。现在首先在红色箭头处确认路径正确，然后在绿色箭头处输入符号“*”，按一下“载入”按钮，将列出所有格式的文件，从中选择相应的GIF文件即可以独立图层方式导入动画GIF。或直接输入动画文件全名，如abc.gif、123.gif等。导入后的操作与之前一致。大家可利用这个方法开启以往的GIF动画试试看。
此外，还可以通过【文件＞打开为】〖CTRL＋ALT＋SHIFT＋O〗，在“打开为”项目中选择QuickTime影片，这样就可以把GIF以影片方式开启，在图层调板中形成一个独立的视频图层，在时间轴中独立存在。如下图所示。这个方法是由经典论坛中名叫XYBLUEIDEA的朋友提出的，在此感谢他以及所有为教程完善而努力的朋友们。
Photoshop的【文件＞打开为】命令是将图像以某种特殊用途所需要的形式开启，然后保存为该特殊用途的格式，其实就是一个带转换功能的打开命令。大家在“打开为”项目中可以看到各种用途的文件格式。其中一些特殊格式的应用我们会在其他教程中介绍。需要注意的是，并不是所有的文件都可以支持所有的特殊格式。
此时导入的GIF动画本身的内容不能再作修改，但由于其作为一个独立的图层形式，可以像普通图层那样通过图层样式添加效果，间接达到修改动画的目的，如下图所示。虽然这种修改仅局限于样式，但由于Photoshop图层样式功能的强大，除了动画情节无法修改以外，其余的任何视觉效果都可以达到。
不过，优化动画仍然是一个首要前提，如果我们将内发光的颜色选为与原有动画颜色差异明显的红色、绿色等，因为色彩资源有限，某些分配给原动画的色彩要分配给内发光样式。则这个动画的字节数会明显上升，或在同样的色彩数量前提下画质会明显下降。这个道理相信大家已经能理解了。
对于一些必须以独立图层方式制作的动画来说，这种方法可以很方便地对其进行二次制作。如前面提到过的鸟类拍打翅膀的动画，通过这种方法就可以实现一边拍打翅膀一边移动的效果了。再如一个人物向前跑动，可先制作出跑步的动画，输出为GIF后再以视频图层载入，在扩大画布尺寸(注意不是图像尺寸)后，将视频图层的位置改变制作为动画，就达到了一边跑动一边前进的效果了。
观看范例动画
这种导入方式实际上提供了组件化动画的可能性，如果物体需要同时具备多种运动属性的时候都可以考虑采取这种方法。这种思路也广泛应用于视频编辑领域，比如要制作两个场景边切换边缩放并旋转的效果时，理论上应该先将两个场景设置好同样的旋转速度，然后再逐渐降低第一个场景的不透明度达到目的。但在实际操作中，场景自身属性(如尺寸)的不同可能导致缩放程度及旋转角度的差异。此时可以先将场景的静态切换渲染为一段视频，然后导入这段视频，再对其制作缩放和旋转就可以了。点此下载范例视频文件。
需要注意的是，介绍组件化知识是为了扩展大家的知识面，并不提倡大家在这里使用，毕竟我们目前所针对的只是GIF动画作品，不是视频作品。能够一次完成是最好的。如果非要不可，也要注意保留所有组件动画的原始文件，方便以后的修改。
在安装了QuickTime之后，除了具备导入功能以外，还可以使用导出功能将动画以视频方式输出，而不再局限于以往的GIF格式输出。GIF格式由于其自身特性限制，并不能完美记录我们在Photoshop中所能制作出来的所有动画效果。但视频格式就不同了，视频的编码方式不仅可以支持千万色(点此阅读基础教程中有关千万色的内容)及更高色彩数，同时在画面的播放流畅度上也较GIF有质的提高，最明显的体现就是画面尺寸及帧速率。在视频编码方式下，我们不必再受困于有限的图像尺寸，可以使用640×480、800×600或更大的尺寸。所使用的帧速率也可以提升至30fps、60fps或更高。
【文件＞导出＞渲染视频】命令就可以输出视频格式，如下图所示。将导出视频的格式选择为AVI，然后点击红色箭头处的按钮进行设置。在视频设置中将绿色箭头处的压缩类型选择为“无”即可。这样就能输出一个能在Windows中通过WindowsMediaPlayer播放的视频了。如果将压缩类型选择为其他的如“DV-PAL”也可输出视频，但在画面尺寸、帧速率等方面与我们文档设定的会有不同。
将其他的视频格式作一个简要介绍：3G是用于手机，可作为彩信发送(注意彩信容量限制)；FLC是早期DOS系统下的256色动画格式；FLV是网络上流行的Flash视频；QuickTime、APPLE TV、iPod及iPhone都是苹果的视频格式，后两者为手持设备；MPEG-4就是所谓的MP4，也常用于手持设备。有关视频编码的详细内容不是现在需要学习的，将来有机会我们会在与视频有关的教程中予以介绍。说句题外话，我们所熟悉的MP3音频格式属于MPEG-1，全称为MPEG-1 Audio Layer3。
“图像序列”方式可将动画输出为多个静止图像，图像文件名按递增命名。图像尺寸默认为文档大小，可改为别的尺寸，但是小尺寸改为大尺寸后可能会因像素重组造成画质损失。注意某些压缩类型(如PAL-DV)等会以其设定的固定尺寸进行渲染。输出范围一般为所有帧也就是整个动画，如有特殊需要可改为其他方式。Alpha通道可以输出带多级半透明信息的视频，方便在Premiere等视频编辑软件中进行合成。帧速率建议保持文档所设定的速率，在电脑上播放一般都没有问题，但某些特殊用途的播放设备有固定的帧速率，如转录为PAL制式(25fps)或NTSC制式(约30fps)、拷贝为电影胶片(24fps)等，否则可能因不同步而影响效果。
除了Photoshop，还有一些软件也能够制作GIF动画，并且在某些方面还更加简单。如Ulead出品的GIF Animator就是其中之一，它可以很容易地将一些静态图片组成各种样式的动画，并添加一些文字或图形。并且可以将动画GIF的各个帧单独输出。也可以输出为PSD文件格式，每个帧存放在一个图层中并保留透明信息。在Photoshop中开启这个PSD文件，在帧方式下点击动画调板的右上角的扩展菜单，选择“从图层建立帧”即可创建独立图层形式的动画。在实际的制作中，大家可视情采用这类软件。
最后一个作业是利用素材仿造出以下的动画。点此下载素材图片。这个动画的尺寸是128×160，当时是为了用以刷入Moto L6手机作为开机动画。不过它也可用于彩信。这个动画没有技术难点，仔细观察动画的细节，多尝试一些实现方法，找到最便捷的道路。并在完成后加入自己的创意形成新的动画。
现在大家已经具备完全的GIF动画制作能力，可利用照片、视频或自己绘制图形来完成制作。将动画以彩信发送给亲朋好友吧，并在其中加上你的祝福话语。也可以发来给我看看哟，我的手机目前是QVGA分辨率(240×320)。并且希望在网络上能看到大家制作的被广为流传的优秀彩信。
观看范例动画
到此为止，Photoshop扩展教程的动画制作部分结束。
动画形成原理是因为人眼有视觉暂留的特性，所谓视觉暂留就是在看到一个物体后，即时该物体快速消失，也还是会在眼中留下一定时间的持续影像，这在物体较为明亮的情况下尤为明显。最常见的就是夜晚拍照时使用闪光灯，虽然闪光灯早已熄灭，但被摄者眼中还是会留有光晕并维持一段时间。
对这个特点最早期的应用，我们上小学时也许就都做过了，就是在课本的页脚画上许多人物的动作，然后快速翻动就可以在眼中实现连续的影像，这就是动画。需要注意的是，这里的动画并不是指卡通动画片，虽然卡通动画的制作原理相同，但这里的动画是泛指所有的连续影像。
总结起来，所谓动画，就是用多幅静止画面连续播放，利用视觉暂留形成连续影像。比如传统的电影，就是用一长串连续记录着单幅画面的胶卷，按照一定的速度依次用灯光投影到屏幕上。这里就有一个速度的要求，试想一下如果我们缓慢地翻动课本，感受到的只会是多个静止画面而非连续影像。播放电影也是如此，如果速度太慢，观众看到的就等于是一幅幅轮换的幻灯片。为了让观众感受到连续影像，电影以每秒24张画面的速度播放，也就是一秒钟内在屏幕上连续投射出24张静止画面。有关动画播放速度的单位是fps，其中的f就是英文单词Frame(画面、帧)，p就是Per(每)，s就是Second(秒)。用中文表达就是多少帧每秒，或每秒多少帧。电影是24fps，通常简称为24帧。
现实生活中的其他能产生影像的设备也有帧速的概念，比如电视机的信号，中国与欧洲所使用的PAL制式为25帧，日本与美洲使用的NTSC制式为29.97帧。如果动画在电脑显示器上播放，则15帧就可以达到连续影像的效果。这样大家以后在制作视频的时候，要想好发布在何种设备上，以设定不同的帧速。
人眼的辨识精度其实远远高于以上几种帧速，因为人眼与大脑构成的视觉系统是非常发达的。只是依据环境不同而具备有不同的敏感程度，比如在黑暗环境中对较亮光源的视觉暂留时间较长，因此电影只需要24帧。顺便说句题外话，只有少数动物的眼睛能在某些方面超过人类，但都同时在其他方面存在严重缺陷。如“细节之王”鹰是色盲，而“夜视之王”猫头鹰的眼珠固定，要转动头部才能观察周围。
在我们前面所学的课程中，Photoshop只是被用来制作比如海报、印刷稿等静态图像的，我们提到过它具备动画制作 的能力。现在我们就是要在Photoshop中去创建一个由多个帧组成的动画。把单一的画面扩展到多个画面。并在这多个画面中营造一种影像上的连续性，令动画成型。
现在很多使用Flash制作的动画都可以附带配音和交互性，从而令整个动画更加生动。而Photoshop所制作出来的动画只能称作简单动画，这主要是因为其只具备画面而不能加入声音，且观众只能以固定方式观看。但简单并不代表简陋，虽然前者提供了更多的制作和表现方法，但后者也仍然具备自己的独特优势，如图层样式动画就可以很容易地做出一些其它软件很难实现的精美动画细节。再者，正如同在纸上画画是一个很简单的行为，但不同的人画得好坏也不相同。因此优秀的动画并不一定就需要很复杂的技术，重要的是优秀的创意。
无论是哪一个软件，它们的制作原理都是相同的，正如同我们曾经刻苦学习的RGB色彩模式一样，到哪里都能应用上。所以我们现在的任务是利用已经学到的Photoshop基础知识，将它扩展到动画制作上，从中学习到制作动画的一般性技巧和方法。这些知识以后仍然可以应用于其它方面。并且我们也会介绍如何将Photoshop动画转为视频并为其加入声音。
除了制作上的不同以外，在用途上也有不同。动画经常被安放于网页中的某个区域用以强调某项内容，如广告动画。这种动画通常按照安放位置的不同而具备相应的固定尺寸，如468x60、140x60、90x180等。也可将动画应用于手机彩信(一种可发送图片、声音、视频的多媒体短信服务)。这些用途都有各自的特点，除了尺寸以外还有其它需要考虑的因素。如字节数的限制，帧停留时间等。我们会在教程中逐步予以讲解。
需要注意的是，在本教程开始之前，我们要求读者都已经学习过Photoshop的基础知识，理解并掌握如调整图层、图层样式等概念和操作，例如“怎样建立曲线调整层”之类的内容我们只作简要操作介绍，而不再详细解释其中原理。因此建议新加入的读者先行学习基础部分内容。
另外，Photoshop CS3 Extended(扩展)版本才具备动画制作功能，普通版本是不具备的。CS2版本有附带动作制作功能，操作也与CS3 Extended相似。而CS及更早版本则需要借助捆绑的ImageReady软件进行动画制作。建议大家使用与教程相同的CS3 Extended版本。
既然称为动画，那就是要令画面中的图像动起来，现在我们来实际动手画制作一个“简单且简陋”的动画吧。
新建一个150×150的空白图像，新建一个图层并画上一个矩形，大致如下左图所示，图层调板如下右图。从中可以看出这是一个普通的点阵图层，大家在实际操作中应尽可能使用矢量图层，在后面的教程中我们也会注意这一点的。
通过【窗口_动画】开启动画调板，如下左图所示。而此时图层调板也多出了一些选项，如下右图红色箭头处。如果将动画调板关闭则恢复到原先。这里暂时不用去理会。另外动画调板经常与测量记录调板组合在一起，后者与我们目前的内容并无关系，可将其关闭。
在开启了动画调板后，我们就可以开始制作动画了，在动画调板中点击红色箭头处的“复制所选帧”按钮
，就会看到新增加了一个帧。如下图所示。按照我们以前的习惯，这个图标应该表示为新建，如新建图层等，在这里虽然字面上的解释是复制，但其实也是一种新建，只不过这新增加出来的帧其实和前一个帧是相同的内容。相应的，大家也应该能想得到
按钮的作用就是删除帧。
确认动画调板中目前选择的是复制出来的第2帧，然后使用移动工具将图层中的方块移动一定距离，大致如下左图所示。此时动画调板如下中图所示。可以看到虽然在第2帧中方块的位置发生了改变，但在原先第1帧中方块的位置依然未变。这是一个很重要的特性。
重复几次这种先复制帧再移动方块的操作，最终得到如下右图所示的样子(类似即可)。现在我们拥有了7个帧，且每个帧中方块的位置都不同。注意这句话“每个帧中方块的位置都不同”，再看看图层调板，很明显只有一个图层存在(背景层暂且不算)，这就引出一个特性：对一个图层来说，它的位置(或坐标)在不同帧中可以单独指定。按照这个特性，我们使用一个图层就可以做出物体移动的动画。
现在大家可以按下动画调板中的播放按钮
，在图像窗口就可以看到方块移动的效果了，只是移动的速度很快。这是因为没有设置帧延迟时间。注意动画调板中每一帧的下方现在都有一个“ 0秒”，这就是帧延迟时间(或称停留时间)。帧延迟时间表示在动画过程中该帧显示的时长。比如某帧的延迟设为2秒，那么当播放到这个帧的时候会停留2秒钟后才继续播放下一帧。延迟默认为0秒，每个帧都可以独立设定延迟。
设定帧延迟的方法就是点击帧下方的时间处，在弹出的列表中选择相应的时间即可。如下左图所示，将第7帧设为0.5秒。列表中的“无延迟”就是0秒，如果没有想要设定的时间，可以选择“其他”后自行输入数值(单位为秒)。也可以在选择多个帧后统一修改延迟，选择多个帧的方法和选择多个图层相同，先在动画调板中点击第1帧将其选择，然后按住SHIFT键点击第6帧，就选择了第1至第6帧。然后在其中任意一帧的时间区进行设定即可，如下右图所示，设为0.1秒。这是一个比较常用的延迟时间。
再次播放动画，就会看到方块移动的速度有所减缓，并且在移动的最后会停留较长时间。很明显，这是由于它被设置了较长延迟的缘故。而这种较长的延迟实际上起到了一种突出的作用，在实际制作中就可以利用这个特点来突出某个主题。我们在后面的教程中也会找时间专门介绍一些表现手法。
除了延迟时间外，动画还有一个特点就是可以设定播放的循环次数。注意在动画调板第一帧的下方有一个“永远”，这就是循环次数。点击后可以选择“一次”或“永远”，或者自行设定循环的次数。之后再次播放动画即可看到循环次数设定的效果。
虽然在绝大多数情况下动画都是连续循环的(即永远)，但在某些地方也会用到单次或少数几次(2~3次)循环，主要出现在利用动画制作网页部件的时候。比如将一个栏目的名称从无到有用动画渐显出来，这样当名称完全显示出来后就应当固定，而不能再次消失然后再次渐显。这时就要使用“一次”的循环设定了。
按下〖CTRL+S〗【文件>存储】可以将动画设定保存起来，文件格式为psd。这种文件格式是Photoshop专有的，可以记录所有的相关信息，建议大家都将自己的作品保存为该格式，方便以后的修改。如果需要能用于网页的独立动画文件，则需要使用〖CTRL+ALT+SHIFT+S〗【文件>存储为Web和设备所用格式】，将出现一个如下左图所示的大窗口。这个大窗口有许多内容需要介绍。但现在大家只需要参照红色箭头区域中的设定即可。
同时窗口右下方绿色箭头区域会出现播放按钮和循环选项，在此更改循环次数会同时更改源文件中的设定。需要注意的是，如果在红色箭头区域内没有选择GIF，则播放按钮不可用。这是因为只有GIF格式才支持动画，如果强行保存为其他格式如JPG或PNG，则所生成的图像中只有第一帧的画面。
在存储过程中可能出现如下右图所示的警告信息，不必理会，确定即可。也可以让其不再显示。但大家要注意在给文件起名时要使用半角英文或数字，不要使用全角字符或中文。这是为了能更广泛地被各种语言的浏览器所兼容。
在这个章节中大家要掌握的是动画的两项属性，即帧延迟时间和循环次数。另外要掌握“复制帧、移动图层”这种的制作简单物体位移动画的方法。并使用该方法制作出同时有两个物体位移的动画。效果类似下图所示。
第02课 第一帧的传播特性 http://www.missyuan.com/thread-363072-1-1.html
（2100字）利用图层不透明度制作动画；“传播帧1”的作用。
在开始之前我们先讲解一下上节课后的作业，那是一个有两个物体一起移动的动画。所谓的两个物体其实也就是两个图层，分别绘制上方块和圆，然后复制一帧并相对移动图层的位置即可。在技术上并没有太大难度。
但要注意看清楚我们的范例动画，其中的圆并不是一开始就移动的，而是滞后一段时间才开始的。这也就是说在前面几帧中只需要移动方块图层，而并不移动圆图层。在方块移动几帧后再开始移动圆，动画调板类似于下图所示。点击红色箭头处可以开启调板选项，可以自己设定帧缩览图的大小。绿色箭头处的
是帧步进按钮，点击一次播放一帧，
则是播放上一帧。
按钮则是回到起始帧。
我们安排这个范例是想告诉大家，一个较为复杂的动画往往是由许多物体构成的，而这些物体未必都是一同动作(如移动)的。比如制作一个物体撞击另外一个物体的动画时，被撞物体就应该在撞击物体接触之前都保持不动。
之前我们制作的是位移动画，是利用图层的移动。除此之外，还可以通过设定不同的图层部透明度来产生动画，制作的方法相信大家应该可以猜得到，那就是在不同的帧中改变图层调板中的部透明度数值。现在新建一个100×100的图像，新建一个图层并绘制一个方块。然后一次性复制5个帧出来，将会看到6个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒，如下左图所示。
接着选择第2帧，在图层调板中将方块图层的不透明度改为80%，第3帧60%，以此类推，到第6帧为0%。形成的效果类似下右图所示。这时候播放就会看到方块逐渐渐隐的效果。需要注意的是，通过
按钮隐藏图层等同于将不透明度设定为0%。
在这个制作中有一个很大不同，就是我们改变了原先复制一帧后马上进行设定，设定完后才复制另外一帧的方法。这次是将所有帧一次性复制出来，然后选定帧进行设定。这也是一种制作方法。
在操作的过程中大家不难发现，对于图层调板中的不透明度而言，在选择另外一帧的时候它又会回到100%。这说明一个特性，那就是对其中一帧的不透明度更改并不会影响到其他帧。再试想一下，如果我们用这种方法去制作最初的方块移动，在前一帧中移动图层后选择下一帧时，将发生怎样的情况呢？
很显然，我们将看到方块又回到了原点。而如果此时的图层位置设定没有按照前一帧的轨迹，则将构不成流畅的移动效果。因此这种预先建立所有帧然后修改的方法并不适用于位移动画，其实也不适用于其他动画。只是遇到需要在指定帧数中制作动画时才会用到。
现在我们已经掌握了两种可产生动画效果的设定，一是图层位置，二是图层不透明度，现在可以综合利用两者来制作一个既移动又渐隐的动画了。这可以在刚才单纯渐隐的基础上加以修改。也就是用土办法，选择一帧后移动些许，如此往复。
不过我们需要一个从左端移动到右端的效果，也就是说方块的起始位置必须在左端，但现在所有帧中的方块都在中间，这该怎么办呢？既然“所有帧”都在中间，那么我们就让“所有帧”都到左边吧。在动画调板中选择所有的帧，通过移动工具移动图层到最左端，就会看到所有帧中方块的位置都发生了改变。
此外还有一种方法。整个动画过程可以看作是一个前因后果的关系。如果你在第一帧删除了某个图层，那么之后所有帧中就都不存在这个层了。因此在Photoshop动画设定中，第一帧是比较特殊的。现在选择第一帧，确保图层调板中“传播帧1”有效，如下左图红色箭头处所示。然后移动图层，就会发现所有帧中的方块都统一发生了移动，如下右图所示。如果“传播帧1”无效则只会改变第1帧中的方块位置。
这两种方法各有利弊，“传播帧1”其实就是“传播第1帧，就是将第1帧的改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。而选择所有帧的做法在帧数较多的时候会稍显麻烦，但它可以派生出“选择某些帧”的方式，比如只要改变前3帧时，就可以将前3帧一起选择后进行设定。
需要注意的是，即使原先每个帧都设定了不同的图层位置，“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。
在这里再说一下选择多个帧的问题，我们已经知道如果要选择前4帧，可以先选择帧1后按住SHIFT键再点击帧4，或者反其道而行之也可。但如果要选择不连续的帧，如帧1、帧3、帧4，则可以先按照之前的方法选择帧1到帧4，然后按住CTRL键单击帧2，就可以减去选择帧2。重复操作一次则又可以添加选择帧2。如果是要选择距离较远的个别帧，如帧2、帧11、帧17、帧27，则可以先单独选择其中任意一个，再按住CTRL去添加选择其他的帧。
将所有的帧中的方块都移动到左端后，要做的就是逐个帧地设定方块的位置，那就是选择第2帧移动些许，选择第3帧移动些许。当然这中间有一个我们已经提到过的问题，就是很难保证移动的流畅。我们在Photoshop中学习过，在选用移动工具的时，可以使用键盘上的方向键去移动图层，一次移动1像素，配合SHIFT键就可以远距离移动。
那现在我们就选择第2帧，用SHIFT+右方向键移动。接着选择第3帧，由于该帧中方块又回到了起点，所以需要两次SHIFT+右方向键。第4帧中则是3次，以此类推。设定类似下图所示。第6帧中方块已消失，可不作设定。
使用方向键移动的方法尽管可以保证轨迹的一致，但其局限性也很明显，那就是只适合制作水平垂直或45度角这样的轨迹。如果我们需要较为随意的移动轨迹(如一条弧线)，又想保持流畅性该如何做呢？当然大家会说如果在开始就使用“复制帧、移动图层”的方法就不会有现在的困扰，但请别忘记，修改运动轨迹也是常有的事情。所以还是仔细思考一下如何操作吧。
第03课 设定帧过渡 http://www.missyuan.com/thread-363073-1-1.html
（2100字）使用过渡功能快速制作动画；制作往复式动画。
在开始之前讲解一下上节课的思考题，问题的关键就是很难保证前后帧的轨迹统一，其实我们换一个角度想，就会觉得问题变简单了。总共不是有6个帧吗？我们就先将除了第一帧以外其余5帧中的方块移动到相同的位置，然后再将除了前两帧以外的其余4帧移动到下一个位置，以此类推。
落实到操作上，其实就是先选择帧2到帧6，移动到相应位置，然后按住CTRL减去选择帧2，将帧3到帧6移动到下一位置，再减去选择帧3……如此类推直到完成帧6的位置指定。这是一个操作中很实用的技巧。具体的操作我们就不再叙述了，有问题的话可以参看本课的视频教程。
目前我们制作动画的方法还属于全手动类型的，就是逐帧进行制作。比如一个物体的移动，我们是从头到尾参与了每一帧的设定。这种方式能够带来最大的可干预性，但同时也使得制作变得非常繁琐，尤其是帧数多的时候。今天我们要学习的就是利用帧过渡来制作动画，它的基本原理是，设定好某段运动的起始帧和结束帧，然后在这两帧种产生平均的过渡。如果是物体的移动，则就是先设定好移动起点帧和终点帧。
新建一个图像，大约150×150，新建图层并画上方块，将其移动到左上角。接着复制1帧，在新帧中将方块移动到右下角，并将图层部透明度设为10%，大致如下左图所示。然后按下红色箭头处的
按钮，将出现如下中图所示的对话框，红色箭头处的过渡方式是指过渡相对哪一帧，由于之前我们选择的是第2帧，并且总共也只有2帧，所以既可以选择默认的“上一帧”，也可以选择“第一帧”。要添加的帧数就是指过渡过程所将占用的帧数，这里设为3，那么加上原来2帧，这个动画总共就是5帧。
由于只有一个图层(背景层未有变化)在参与动画，所以现在图层选项中任何一个都是可以的。但不选择背景层的话会形成成透明背景，有关动画背景透明的问题我们会在以后学习到。注意绿色箭头处的参数，其中有“位置”和“不透明度”这两项。所谓参数就是指进行动画过渡的图层属性，我们之前说过图层的位置和不透明度的变化可以做成动画，在这里就反映出来了。
确定后将会在动画调板中看到的效果大致如下右图所示，可以很清楚地看到方块的位置和不透明度都发生了均匀的过渡。如果之前在过渡设定中关闭了“位置”或“不透明度”参数，显然就没有现在的效果了。
这种利用过渡方式制作动画的方法较为简便，我们只需要考虑某段动画的开始和结束的样子就可以了，中间的过程会自动完成。在这种情况下，开始和结束的那两帧被称之为关键帧(KeyFrame)，因为它们决定了过渡的形态。以后我们也会接触到有多个关键帧的动画。
当今许多动画片的制作也采用这种方式，虽然动画片的画面复杂的多，但基本的原理是相同的。不过由于过渡均匀的特点，有时也会使得画面不够生动，缺乏表现力。这是Photoshop功能上的局限。
现在我们面临一个新课题，那就是如何让动画可以完美地循环播放，也就是从A到B再回到A，这样才能形成完整循环，称为往复式动画。就我们目前的这个动画来说，可以通过复制并移动帧来完成“回去”的过程。首先复制帧4，复制后帧4帧5都是相同的内容，而原先的帧5则变为了帧6。然后手动将帧5移动到帧6后方，这样就交换了两者的前后顺序。过程如下图所示。从这个操作可以看出，复制出来的帧并非都出现在最后，而是出现在原有帧的后面，这个特点要注意。
按照这个方法将帧3复制为帧7，帧2复制为帧8。复制帧1为帧9是没有必要的，因为帧9播放后又会是帧1，而两者的内容相同。实际上相当于同一个帧播放了两倍的时间。
撤销操作到原先只有5帧的时候，现在介绍另外一个简单的方法，那就是选择帧5后再次执行帧过渡，将过渡方式设为“第一帧”，表示是从现在的帧(第5帧)过渡到第1帧去，添加帧数保持为3即可，也可以设定更大的数值。确定后就能得到一个往复式动画了。下图所示是设定了添加7帧的效果。
在播放这个往复式动画的时候，会发现一个问题，那就是方块“回场”的时间比较长。这当然是因为同样的距离我们用了更多的帧数，如果将帧6到帧12的延迟设为0.05，就与原先差不多了。
可能大家会有一个疑问，那就是既然总体时间都差不多，那有什么必要设定7帧的过渡呢，像原先那样3帧不就够了吗？这就要涉及到一个动画精细度的问题了。作为一个表现运动的动画来说，帧数越多它所能表现的瞬间也就越多，帧与帧之间的差异就越微小，过渡的整体效果就越平滑。当然同时也会带来制作和存储上的一些不便。所以一般来说不宜设定较多的帧数，只需要满足观看需要就可以了。
在视频制作中也存在这个问题，其原理相同。我们说过电影每秒帧数是24，那么如果使用高速摄影机以48FPS拍摄一段电影，再以通常的24FPS播放，我们看到的就是比正常运动速度慢了一倍的画面。动作影片中的慢镜头就是这样制作出来的。
而如果用普通摄影机拍摄的影片要实现慢动作，就需要延长每帧的停留时间，要达到慢一倍的效果，每帧的延迟就要从1/24调整为1/12，这样实际上每秒钟只播出了12帧，画面会有较为明显的跳动感。所以真正的慢镜头并不是“正常排，慢慢放”，而是“快快拍，正常放”。
同理，低速摄影就是以很低的帧率拍摄，然后正常播放，形成快进的效果。常用来拍摄需要长时间等待的场景然后快速地呈现给观众，如花开、日落等。
本节课需要掌握的就是使用帧过渡制作动画的方法和关键帧的概念，在使用中主要注意过渡方式的选项，要弄清楚是“前一帧”还是“第一帧”，一般说来后者场用来制作“回场”以形成往复式动画。以后大家制作的动画都要优先采取往复式以形成较完美的循环效果。
第04课 动画的设计思维 http://www.missyuan.com/thread-363074-1-1.html
（1800字）如何规划一个合理的动画。
通过前面3课的学习，我们已经掌握了制作动画的方法，尽管做出来的动画还十分简陋。还记得学习基础部分的时候，曾在很长一段时间内接触的都是单一的色块吗？那并未影响大家现在的水平发挥。同样的，很快我们就要开始制作较为精细的动画了。但是在这一切到来之前，大家还必须学习一些必备的设计思维。所谓设计思维就是指在制作动画前的规划考虑，这规划包括很多方面。
首先讲一下图层的组织，最终的成品动画是不包含图层信息的。这里所说的图层仅指制作中。对于利用图层位置变化来制作的动画而言，有一个显而易见的问题就是必须合理安排图层，因为移动的最小单位是图层，因此如果需要制作多个运动轨迹各异的物体时，它们就必须分布在不同的图层中。也需要事先考虑好移动的距离，图像的尺寸以及摆放的位置需要为移动留下足够的空间，这是其一。
其二就是考虑好是否会与其他图层相交，以及相交时候的处理，谁遮盖谁，也就是图层的层次安排，如下图中就列出了3种相交的方式，最左边的是两个图层均为100%时候，绿色覆盖红色。另外两个则显示了在50%的不透明度下，不同层次造成的不同覆盖效果。如绿色遮盖红色，那么相交部位就偏绿，反而反之。这都是在正常混合模式下，如果选择了其他的混合模式如叠加等，就要更加注意层次。
以上说的都是技术问题，现在来说一下情节方面的问题。一般来说，如果一个物体始终都在图像中运动，则无需对其进行交代。但如果物体原本不在画面中，是后来进入画面的，或原本在画面中后来移出了画面，则需要对物体的出现和消失做一个交代，这个交代就是过渡，让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示，演示了在同样的一个文字移动中，是否采取淡入和淡出处理的效果对比。
可将鼠标移入到播放区观看实际的动画效果，移出播放区将停止播放。通过比较，相信大家都会觉得添加了淡入淡出处理的效果更好。
播放范例动画1 播放范例动画2
除此之外，循环设定也是属于情节方面的问题，这个我们其实在之前有提到过，就是有些场合下可以使用无限循环的动画，而有些场合则不适合。比如一个栏目标题文字淡入的动画，如果不断地重复，就会使得网页整体看上去显得很乱，会令观看者感到不舒服。此时最适合的做法就是播放一次，这样既可以展现效果，又不会影响网页整体。设定为2到3次的循环一般也可接受，再多就不好了。
不过只播放一次的动画最好是放在网页的上部，这样一进入网页就可以看到。如果放在网页底部，可能观看者阅读到该处时动画已经播放完了。那样的话就制作动画就没有意义了，还不如就用静态的图片代替。
播放范例动画3 播放范例动画4
需要注意的是，GIF动画图片每调用一次就会重新播放。如果有些人已经具备了网页制作的知识，可以利用这个性质在网页制作软件中设定相应的动作。比如大家在这里移动鼠标观看范例的动画就是如此。每次移入后动画总是从头开始播放。这样即便是只播放一次的动画，也可以令它在网页中多次播放。没有网页制作知识也不用担心，这并不影响我们后面的动画学习。如果想要了解一下，可观看GoLive的视频教程。
对于看上去很不错的淡入淡出效果而言，有一个重要的问题需要考虑，那就是浏览器可以被设置为禁止播放动画。此时动画只会显示其第1帧时候的画面。那么类似上面的“悄然来去”的动画在网页中将是一片空白，因为其第1帧本来就是空白的。这就容易引起观看者的误会。
也许大家会觉得没有人会刻意关闭动画显示，但既然不能排除这个因素，我们就需要从最广泛的层面去考虑访问者的情况。在网页的整体布局中，应避免在重要的文字或指示部位使用淡入淡出动画。在将动画放入网页中后，最好自己手动关闭动画播放检查是否存在问题。除了关闭动画播放以外，在页面显示时如果访问者按下ESC键也会中断动画播放，画面将停留在中断的那一刻。
如要同时照顾到禁止和允许播放动画的访问者，在两者之间取得平衡点，那么在动画的制作上就应该遵循一个原则，那就是主体部分不动，修饰部分作动画。如下图所示，文字本身不做动画，只是在文字的边缘制作了动画效果。这样即使静止动画播放或播放时中断，也不会影响观看者对内容的理解。
不过，只要保证能在任何时候准确地反映内容，避免文字的消失或过于剧烈的变形，主体文字也是可以动的。
播放范例动画5
本节课中所讲述的内容和制作动画的技术并不相关，不过在大家要将动画应用于网页中的时候，就要从大方面来考虑动画的制作及表现方法。单纯学习这些内容有些枯燥，大家留下印象就好，在以后的制作中会有应用到的时候。
这次的作业是将“悄然来去”那个动画制作出来。另外将下面两个派生的动画也制作出来。
播放范例动画6 播放范例动画7
第05课 淡入和淡出的设定技巧 http://www.missyuan.com/thread-363075-1-1.html
（1900字）适当使用淡入和淡出以增加观赏性。
先说一下上节课的作业，我们让大家制作的三个动画都是带有淡入淡出效果的，但仔细观察就会发现其中有不同之处。
第一个动画是随着文字移动而逐渐显现，移动到一半时文字最明显，然后又随着移动逐渐消隐。使用帧过渡来制作的话，就需要先确定好3个 关键帧，第1帧文字应该在最右端，不透明度为0%(或隐藏图层)；第2帧文字在中央位置，透明度为100%；第3帧文字在最左端，不透明度回到0%(或隐藏图层)。大致如下图所示。
然后分别在帧12，以及帧23之间进行过渡，各增加5帧左右即可。帧延迟时间可自行设定。在这个动画中，文字的淡入淡出是随着移动同时进行的。在整个移动过程中透明度始终在变化。
第二个动画中，文字在最右端淡入的时候是静止的，完全显现后才开始移动。移动到最左端后又在静止状态下淡出。那么它的关键帧应该为4帧，大致如下左图所示。分别在这4帧之间设定过渡即可。
虽然具体的过渡帧数可随意设定，但从设计方面考虑的话，帧12和帧34的过渡应该少一些，大约3至4帧即可。而帧23之间的过渡应相对多一些，大约6至7帧左右。这是因为在同样的距离上移动时，帧数越少每帧移动的越快，帧数越多则移动得越慢。如下右图所示就是3帧、4帧、7帧的每帧移动距离。从理论上来说，帧数越多则动画细节越丰富，也越细腻。
我们这个动画主要是展示文字内容，要让观看者看得清楚。如果把淡入淡出的帧数设定得很多，而移动的帧数很少的话，就会形成一种局面，那就是文字非常细腻地淡入，然后飞快移动，接着又非常细腻地淡出。或许观看者仍然可以明白文字的内容，但这样的表现手法是不恰当的。虽然某些时候这也可以成为一种非常规的表现手法。
现在我们已经就同一个主题制作出两个动画，都带有淡入淡出和移动效果，但它们在表达上都有缺点。第一个动画的缺点在于不透明度的过渡太长，整个动画过程中文字只在其中1帧时是完全显现的。而之前之后都处于半透明状态。这不利于强调文字的重要性，并且可能令观看者阅读困难。
大家也许会觉得并不存在这个问题，因为第一个动画中的文字看上去很清晰。但我们是以100%的不透明度为最终显现状态的。这样按照5帧过渡来说，每一帧都有20%的递增，也就是第1帧虽为0%，但第2帧就达到了20%，因此阅读基本没什么问题。如果换一种情况，最终显现的不透明度并非100%，而是只有30%或更低时，每一帧中的不透明度递增也就变得很微小，这样尽管30%的最终不透明度足够满足阅读需要，但其淡入过程就会难以看清从而影响阅读。大家可以将最终不透明度设为30%、10%之类的再做做看。
相比之下，第二个动画就避免了这个缺点，它将淡入和淡出单独制作，在淡入完成(文字达到最终显现状态)后才开始移动，这就确保了文字在移动过程中始终保持其最终显现状态，无论是100%还是30%或其他。不过它同时存在另外一个缺点，那就是文字在起点和终点是静止的，这样破坏了移动的连贯性。
现在我们要将两者结合在一起，制作一个既有淡入淡出效果，也能较好展示文字的动画。思路是保留第一个动画中的文字全程移动，但将淡入和淡出压缩在头尾少数几帧内完成，从而保证文字在大部分移动过程中保持最终显现状态。如下左图，双向箭头表示淡入和淡出过程，上半部所示是第一个动画，可以看出淡入和淡出相加等于动画全程。下部所示是我们现在的构想，淡入加上淡出只占用全程的一半或更少。这样就能让文字以最终显现状态完成大部分的移动。
关键帧设定如下右图所示，分别在相邻的两帧时间设定过渡即可。帧1虽然看不见文字，但可以知道它正位于画面最右端，帧2中文字已经全部显现，位置也稍向左移动。这样帧12的过渡就完成了不透明度的全部变化，同时完成一小部分的移动。之后文字移动一段距离(帧23过渡)后，在接近左端处开始一边移动一边淡出(帧34过渡)，与淡入相反。
不知大家是否想到了这个动画在制作中会遇到的另外一个问题，那就是如何保证帧12的移动距离与帧23的距离对应。这里的对应不是说相等，而是指每帧移动的距离相同，假设帧12的过渡为3帧(ABC)，帧23的过渡为6帧(DEFGHI)，也就是1ABC2DEFGHI3共12帧。那么文字在这12帧中每帧的移动距离应当相等，才能形成较好的移动效果。但大家往往会做出前快后慢，或前慢后快的效果，就是因为对移动距离判断不足。这个问题很难解决，除非动用标尺精确计算距离，不然就只能多试验几次找出最合适的过渡帧数。
本课中要掌握的是淡入淡出在与移动相结合时的处理手法。最好的方式就在持续移动的情况下，用较短的帧数完成淡入淡出，同时应保持每帧移动距离相近。这样操作是有些繁琐，不过不用担心，很快就有办法解决的。
制作第三个动画的源文件我们在这里提供给大家(点击下载anisample01.rar)，并不是认为大家做不出来，而是为了保证教学上的统一，我们需要用这个动画继续学习。大家也可以使用自己的作品。本课没有作业，但有一道思考题，就是如何在保持anisample01.psd原有20帧设定不变的情况下，制作出如下图所示的动画。
第06课 过渡帧动画的局限性 http://www.missyuan.com/thread-363076-1-1.html
（1900字）认识过渡帧的缺陷，以及制作“独立图层”式动画。
到现在为止我们制作动画的过程都是事先建立好所需要的图层(文字也是一种图层)，再建立各个关键帧，之后进行过渡。如果每个动画都能有这样充足的事先计划那当然最好，但如果在已有的动画基础上新增图层会怎样呢？
打开anisample01.psd，会看到该动画总共有20个帧。点击动画调板右上角的
按钮就能看到“新建在所有帧中都可见的图层”一项。这样在已经为图像建立了多个帧的前提下，若新增图层，则该图层默认在所有帧中都可见，位置及不透明度也相同。
现在选择第1帧，在图像左上角新增一个矢量圆角矩形层及文字(如果看不懂这句话，则说明没有掌握基础知识)。就会看到所有帧中都出现相同的内容。如下图所示。其实在选择其他帧时新建层也可以达到同样目的，但圆角矩形及文字未必能直接就位于指定位置，总是需要使用移动工具作调整的。所以此时要利用“传播帧1”的特性来确保在所有帧中的位置相同。如果在其他帧中调整位置，就只对一帧有效。
通常情况下都应开启“新建在所有帧中都可见的图层”选项。如果关闭，新建的图层只会出现在当前所选择(多选无效)的帧中。如果想在所选择的多个帧中可见，可以在图层调板中先隐藏再显示该层，此时动画调板中所选择的多个帧就会同时出现该层的内容。
现在回到正题，即如何在20帧中加入另外一组文字动画，新的文字既有移动也有不透明度变化。如果是从零开始设定关键帧的话，大家都知道该如何操作。但如果要添加到现有的帧中，则非常麻烦。此时不能再建立关键帧，因为新增关键帧势必增加帧数。那自然也就不能使用关键帧过渡。
也许大家会想到去修改关键帧，或建立两套帧系统再将之混合。能够这样想很好，说明思路灵活。但很遗憾这两个方法都不可行。一旦执行了过渡，关键帧就无法修改，除非撤销操作从头再来。而Photoshop只提供一套帧系统。现在唯一可行的方法就是逐帧地手动调整“去留无意”的位置和不透明度。并且最好一次搞定，因为再次修改将会烦上加烦。
就算从零开始，也未必就能制作好这个动画。因为我们使用的方法是建立关键帧后进行过渡，那么原先的“悄然来去”总共使用了4个关键帧，而“去留无意”的动作也必须设定为4个关键帧，只有这样才能统一执行帧过渡。
如果后者需要设定为5个关键帧，就涉及到统一关键帧的问题，需要将“悄然来去”扩展为5个关键帧。如下图所示，第3帧就是新建立的关键帧。可以看出它其实就是在帧2和帧4之间取一个中间状态。但这样做要基于一个前提，那就是“去留无意”的某个关键帧必须是和这个新帧相吻合的。如果“去留无意”作W波浪状移动，那么其波峰和波谷的关键帧就要与“悄然来去”的关键帧一一对应才可以。这就造成一种情形，两个文字尽管移动的轨迹不同，但运动轨迹改变的时间却很相似。这会使动画显得单调。
所以，在制作过渡帧动画的时候，最重要的事情就是事先规划好动画的具体细节，做到完全的把握，然后才开始制作关键帧并执行过渡。这个过程一旦完成就不可修改，除非全部从头再来。
我们在基础教程部分的时候，曾再三强调在制作中要保留最大的可编辑性(如使用调整层等)，以方便以后有可能发生的修改。这种思维适用于任何领域，却唯独在此不适用，因为过渡帧动画的特殊性，使其一旦成型就不可修改。这也是以往很少人使用Photoshop及ImageReady(早期与前者搭配)去制作较复杂动画的原因。
在基础部分我们曾经蜻蜓点水地使用了Premiere制作电影，大家对其中的通过时间轴设定电影的方式应该还有印象。另外观看了GoLive视频教程的读者也对DHTML(动态网页)制作中的时间轴印象颇深。现在CS3版本的Photoshop也具备了时间轴设定方式，我们从此可以摆脱过渡帧动画的局限了。我们将在下一课学习使用时间轴。
之所以我们没有在一开始就介绍时间轴，是因为帧式动画是所有动画的基础。时间轴只是在设定方式上不同，形成的最终动画仍然是以帧形式存在的。并且时间轴适合制作情节较为复杂的动画，对于一些类似单个文字移动这样的效果，使用过渡帧制作更快更简单。
还有一类动画称为“独立图层动画”，主要用来制作一些无法用关键帧过渡完成的效果，如鸟类拍打翅膀的动画，就是分开5个独立图层分别绘制一种翅膀形态，然后在不同的帧中显示不同的图层，如下中图所示，我们使用5个图层绘制5种形态，然后在5帧中分别顺序显示某一层，之后又增加了3帧制作回场，形成了8帧的往复式动画。其中帧28、帧37及帧46内容相同。
由于Photoshop不支持旋转动画，也不支持任意变形动画，因此要制作这两类动画时，就必须采用“独立图层”方式，逐帧指定图层的显示状态。今天的作业是将下面两个动画制作出来，总体难度不大，主要考验在基础知识部分学习过路径，以及自由变换工具的使用，凡是这类涉及像素重组的变换，都应当优先使用矢量图形。使用路径方式绘制物体，通过【编辑>变换路径>再次】命令多次旋转和缩放。如果操作上有困难，应复习基础教程中的相应内容。
第07课 初识时间轴 http://www.missyuan.com/thread-363077-1-1.html
（1400字）接触时间轴方式，为将来的动画制作做准备
通过前面的课程，我们已经学会了利用关键帧过渡，以及利用独立图层这两种制作动画的方式。它们可以用来制作一些简单的单物体动画，在很长一段时间内也是Photoshop唯一的动画制作方式。今天我们要学习一种新的利用时间轴制作动画的方式。时间轴方式广泛运用在许多影视制作软件中，如Premiere、AfterEffects等，包括Flash也是采用这种方式。
关键帧过渡动画中还有许多操作我们没有提及，这是由于它们与时间轴方式并无关系，而时间轴将是我们今后制作动画的主要方式，因此予以略过。
为统一素材，点击此处下载anisample02.rar文件并解压出PSD文件，在Photoshop中开启，这是一个没有帧设定的文件(大家也可以利用自己制作的代替)。如下图所示。由于使用了文字图层，可能在开启后会由于字体缺失而出现替换选项，选择用默认字体替换即可，默认字体虽然不够漂亮，但教学性是一样的。
PSD文件中包含3个图层(背景层不算)，其中两个是文字层，一个是矢量形状层。如果不知矢量形状图层为何物，说明基础部分没有掌握好。
点击动画调板右下角的
按钮，即可切换到时间轴方式，如下图所示。细心的读者会注意到调板的名称变为了“动画(时间轴)”，而之前的是“动画(帧)”。右下角的按钮变为了
，点击将会切换到原先的帧方式。
需要注意的是，这两种方式是互不兼容的，因此不要在制作过程中进行切换。如果误切换了，可以使用撤销命令〖CTRL+ALT+Z〗挽回。
在时间轴中我们看到了类似图层调板中的图层名字，其高低位置也与图层调板相同。点击图层左方的箭头标志就会展开该图层所有的动画项目，也就是能制作为动画的要素。在不同性质的图层中，其动画项目也不相同。所谓不同性质就是指如普通图层、带蒙版的普通图层、文字图层、调整图层等，这些都属于不同性质的图层。如下左图所示分别是“去留无意”文字层与“形状1”矢量形状层展开后的动画项目。其共有的是位置、不透明度、样式。不同的是文字层多了一个“文字变形”项目，而矢量形状层多了两个与蒙版有关的项目。
动画的制作不能超出图层自身的动画项目，比如不能对形状层进行“文字变形”。但有些动画项目可以后期再添加，如对文字层添加蒙版后，就令其具备了蒙版的动画项目。
在调板左上方有一组数字0:00:00:00，这是当前的时间码，从右端起分别是毫秒、秒、分钟、小时。一般也就用到秒这级。时间码后面还有一个30.00fps，这个就是帧速率，表示每秒多少帧。一般取值为整数，在影视编辑方面才会用到小数帧率。
点击动画调板右上角的
按钮后选择“文档设定”，就会出现如下右图所示的时间轴设定。在其中可以指定动画总时长和帧速率。按照默认的设置，是总长10秒，每秒30帧，这样总帧数就是300帧，对于网页动画来说这是一个相当大的数值了，制作出来会占用很大的字节数，不利于网络的传输。现在我们将持续时间改为5秒，帧速率改为5fps。确认后就会在动画调板中看到新的帧速率指示。
如下图所示，将动画调板横向拉大一些，就会看到01:00、02:00这样的时间标志，单位为秒。时间轴的最右端正是刚才所设定的5秒总时长。将红色箭头所指出的滑杆向右方拖动，就能放大时间轴的细节，红框区域内就是放大后的时间轴。可以看到在秒之间有了01f、02f这样的标志，这就是帧。我们刚才的设定是5fps，所以每两秒之间都有5个帧。虽然我们只看到最大04f，但要知道05f其实就是和01:00重合在一起的。因此被表达为01:00f，意思就是该处既是第一秒，也是一个帧。
注意在两个橙色箭头之间有一条不太显眼的细线，这是渲染缓冲指示，其他影视编辑软件也都有这个指示，不过在Photoshop中它的作用并不是很重要，在后面的课程中会提到。
第08课 用时间轴制作动画 http://www.missyuan.com/thread-363078-1-1.html
（2400字）学习新的制作方式，体会新方式带来的便利。
现在我们正式开始利用时间轴来制作动画，这与我们之前的帧式动画有很大不同，但相比之下时间轴方式来的更直观和简便，也是我们以后最主要的制作方式。
接着上一课的内容，开始设定“悄然来去”的动画。在时间轴调板中展开这个文字层的动画项目，如下图所示。确保当前时间为0:00:00:00，同时注意红色箭头处的时间标杆应位于最左端，这就表示是处在起始时刻。
接着用移动工具将“悄然来去”移动到画面的右端。然后在点击橙色箭头处的秒表按钮
，这表示启动了“位置”这一动画项目，并且将目前该文字层的位置(画面最右端)记录在起始时刻。时间轴区域中出现的黄色菱形就是该处包含记录的标志，这也称为关键帧，是时间轴的关键帧，与我们以前学习的过渡帧动画不同。
将时间标杆拉到最右边，使用移动工具将文字移动到画面最左端，这时会看到时间轴上的标杆处自动产生了一个关键帧。如下图所示，并且注意在红色箭头处有一个菱形的“删除/添加”按钮
，此时如果按下该按钮，将会删除时间标杆处已建立的关键帧。如果标杆处没有关键帧，点击则可建立一个新帧。
需要注意的是，在这里我们的时间标杆往右最多只能拉动到04:04时刻处，而不是05:00。这是因为05:00是动画最终结束的时刻，是“最后一帧结束时”的时刻，但我们现在需要设定的是“最后一帧开始时”的状态，而最后一帧本身将停留一段时间。所以标杆并不会位于05:00时刻。要记住帧是最小的单位。
通过以上的设定我们完成了“悄然来去”文字的位置移动设定。接着来设定其透明度变化。我们先弄个简单的，就是从开始时淡入，进行到一半时完全显现，然后淡出直到结束。这样就需要3个关键帧进行设定，在开始时刻设定为0%，一半时设定为100%，结束时再设为0%即可完成。大致如下图所示。注意在时间轴方式下不能通过隐藏图层实现透明度变化。
当我们在第一步中将关键帧1设为0%后，如果向后拉动时间标杆，会发现在所有时间内透明度都是0%。在第二步中设定关键帧2后，会发现12之间已有过渡效果，但关键帧2之后直到结束时，文字都始终显示。这就带出时间轴一个很重要的性质：某个时刻的关键帧设定会影响该时刻之后的所有时间。因此关键帧1的设定导致了之后所有时间内(12之间、23之间)文字图层全程都是0%。而当关键帧2设定后，既在12之间形成了过渡，也导致了23之间变为了全程100%。直到关键帧3设定完成，23之间形成过渡。
在设定的顺序上，并不需要完全遵从上述的顺序。“悄然来去”本来就是100%的状态，这样我们可以先在一半时刻建立关键帧，而并不需要设定不透明度，因为此时就应该设为100%。然后再在开始和结束时刻建立关键帧并调整为0%。
撤销之前的设定，按照新顺序来进行，也就是从1、2、3的顺序改为2、1、3。由于开始和结束时刻(1与2)的不透明度是相同的，因此我们可以通过拷贝粘贴关键帧的方法来完成。首先建立这两个关键帧，设定好开始时刻后，在时间轴中该关键帧的标志
上点击右键，选择“拷贝关键帧”，然后在结束时刻的标志上点击右键选择“粘贴关键帧”，这样就将前者的设定复制到了后者之中。顺序也可以相反。这种方法可以在所有已存在的关键帧之间进行操作。
回忆早先在学习过渡帧式动画制作时所说的淡入和淡出，就会知道现在这个3帧设定的效果并不是最理想的，应当将淡入和淡出的过程缩短，以便让文字在移动过程中大部分时候保持完全的显现。现在我们就在之前的3帧基础上修改。
大家可能会想在原有的帧2前后再新增两个帧，如下图上方所示。其实只需按照下方所示移动原帧2，然后新增一个帧即可。其设定可由原帧2拷贝而来。这样我们就完成了淡入淡出的修改。
从以上操作我们可以总结出时间轴式动画的一个基本特性，那就是将各个动画项目独立出来，对其中一个项目的修改并不会影响其他项目。比如我们在修改“透明度”的时候就不需要去考虑早先设定好的“位置”。另外就是各项目的关键帧设定允许不相同，不必为了统一关键帧数量再花费心思。
关于新增关键帧有一个需要注意的问题，那就是自动添加和手动添加的区别。当点击某个项目的秒表按钮
后，该项目就会在时间标杆处建立一个关键帧，并自动跟踪该项目在其他时间范围中的变化。这就意味着如果将时间标杆移动到一个新位置，并对图层的该项目上做出了更改后，将会自动在当时标杆处建立一个新帧。如果未做任何更改又想建立关键帧，就需要手动点击秒表按钮左边的
按钮(注意在已有帧处点击将删除该帧)。点击前一帧
和后一帧
按钮则可在各关键帧之间跳转。也可以直接在关键帧上点击右键选择删除该帧。
一般来说，我们都是在动画起始时刻点击秒表按钮
建立第一个关键帧，然后将标杆移动到适当的时刻，对图层做出相应改变，获得新的自动关键帧。周而复始完成整个设定过程。相对而言，手动建立帧的机会并不多，因为都是为了设定，效果与自动增加的帧区别不大。后面的课程中讲解制作加速和减速效果时会用到手动新增帧。
除了单个项目以外，也可以同时设定多个动画项目，它们都会被自动跟踪。现在我们将时间标杆移动到起始时刻，如下图所示，启动“去留无意”和“形状1”相应的动画项目，然后拉动时间标杆到不同时刻，相应改变位置和不透明度等。有改变的地方就会留下帧标志。
需要注意的是，由于“形状1”是矢量蒙版图层，因此要记录其位置移动必须使用“矢量蒙版位置”项目，而不是“位置”。
另外要提到的就是在上节课中所讲到的渲染缓冲指示，大家可能已经发现了，在播放以及拉动时间标杆时，相应区域的渲染缓冲指示就会被填满，这表示Photoshop已经将动画的具体内容存储到系统缓存中，可提高再次播放时的速度。但如果对动画作出了修改，则渲染缓冲将被清空。我们现在所制作的动画都比较简单，所以缓冲与否都一个样，但如果以后大家制作一些较为复杂的动画，尤其是动画中有多个图像互相混合时，缓冲的区别才会体现出来。
这节课中我们学习了时间轴方式制作动画的主要方式，与早先所学的帧过渡方式相比，时间轴方式不仅制作速度快，且修改极为便利。从今以后我们将以此方式制作绝大多数的动画作品。到这里我们已经讲解完了动画制作的基础知识，接下去的课程将讲解一些更高级的技巧，以及如何制作适用于网页、手机等不同媒体的动画。
第09课 使用图层样式制作动画 http://www.missyuan.com/thread-363079-1-1.html
（2400字）图层样式的引入，令整个动画的质量大为提高。
在学习了如何使用时间轴方式制作动画之后，我们就完成了动画制作的基础部分。在这里要再次强调，注意不要随意在时间轴方式下切换到帧方式，因为这会导致时间轴定义的失效。若是误操作，可使用撤销命令挽回。
在前面的课程中，在使用帧过渡的时候，有3个参数(蒙版情况下有5个)，分别是位置、不透明度、样式。我们已经知道位置就是图层的坐标，比如一个文字的移动，就是改变文字图层的位置。不透明度则可实现图层半透明变化。而所谓的样式就是指图层样式。在Photoshop基础知识中我们已经学习过如何为图层定义样式，在定义样式中有许多的参数都直接影响最终的效果。如阴影的高度、角度等。这些参数中的绝大多数，都可以作为动画的变量来使用。可以做出效果非常好的动画。
在制作静态的作品时，图层样式中使用频率最高的就是投影，那我们就先从投影开始，将其做成动画来看看效果。
做动画前先要构思好怎么做，这个构思可称为剧本，这次的剧本设定，是让一个圆形浮起。而要在一个平面上表现物体浮起，就需要借助投影来引导视觉。新建一个100×100的空白图像，在文档设置(点击动画调板右上角的
按钮)中将动画持续时间改为1秒，帧率改为15。如下图所示。这样动画总共就是15帧。需要注意的是：由于帧数是从1开始，而时刻是从0开始，因此开始时刻即00:00就是第1帧，那么第15帧应位于00:14时刻，而非00:15。这个问题以前已经提到过，这里重复一下。
新建图层，接着使用椭圆工具的填充像素方式(非矢量)画出一个圆，颜色自定，然后对其设定投影样式。分别如下各图所示。
以上的设定都是默认在00:00时刻的，现在按下时间轴中“样式”左方的秒表按钮
，开启该项动画设定。将时间标杆移动到00:14时刻(也就是最后1帧)，再次开启样式设定框，更改投影参数中的“距离”为20像素，效果如下图所示。
播放范例动画
看起来似乎不太对劲，这是因为虽然影子移动了，但物体没有移动，所以并不能表达出浮动的效果。因此大家以后在制作此类动画时候要注意，物体和阴影要同时反向移动。
现在回到开始时刻，开启时间轴中的“位置”项目。然后在00:14时刻(可点击样式项目的
按钮找到该时刻)将圆形往左上方移动些许(可用键盘的方向键)，我们的投影是75度，所以要注意往上移动多些距离，往左移动少些，大约2:1这样。移动的距离并不一定也要20像素，大约15像素左右就可以满足效果了。修改后的效果如下。
播放范例动画
这个剧本大体上就算完成了，我们可以再把细节做的好一些。修改最后一帧的投影设定，分别将投影的“不透明度”改为45%，“大小”改为15像素。这样令影子变得模糊和淡化。更符合实际情况。
播放范例动画
之前我们介绍情节设定的时候，是不提倡这种“有去无回”的，而应当令其形成可往复的循环运动，所以接下来我们动手修改。
首先在文档设置中将持续时间改为2秒，帧率保持15不变，形成总数30帧的动画。然后在最后时刻建立样式和图层位置的关键帧，这两个关键帧保持着原先动画结束的状态。
接着在这两个项目的开始时刻关键帧上点击右键选择“拷贝关键帧”，到最后时刻的关键帧上点击右建选择“粘贴关键帧”。这样结束时刻的状态就与开始时刻一致了。效果如下图所示。
播放范例动画
现在我们觉得这个圆形太单调了，像一块饼，而不像一个球，那么还是通过图层样式为其添加高光效果，这可使用渐变叠加来完成。回到开始时刻，设定渐变叠加样式如下左图所示。注意默认的高光会位于圆形中央，要在设定时到图像窗口中拖动到左上方些许(不能使用键盘)，效果如下右图所示。
播放范例动画
这时大家有没有想到一个问题，那就是我们之前已经开启了样式项目动画，现在添加了新的样式项，那么这个新样式项在动画中是怎样表现的？我们只在开始时刻设定了该样式项，那其它的时刻呢？播放一下动画就可以看到，随着动画的进行，渐变叠加的效果逐渐消失了。这是因为下一关键帧中并没有包含该样式项(在00:14时刻观察图层调板可知)，这样就等于是把渐变叠加做成了淡出。
而现在要使渐变叠加始终有效，就需要在所有关键帧中添加该样式项。但这个样式涉及到鼠标的拖动，不像投影那样可以通过参数简单地再现。因此想要让每一次的设定都相同，等于要保证鼠标的拖动动作都相同，这是不现实的。而Photoshop将全部样式项视为一个整体，没有提供针对单个样式项的复制功能。所以，我们想在保留原先动画的投影样式基础上，加入渐变叠加是不可能的。
现在较为可行的方法，就是删除样式项目的第2、3关键帧。让其在包含渐变叠加的基础上，重新进行投影项目的动画设定。而图层位置与此操作无关，不需改变。完成后的效果如下图所示。
需要注意的是：在针对矢量蒙版图层使用渐变叠加、光泽等需鼠标在图像中拖动产生效果的样式时，最好不要同时设定图层移动。否则在输出为文件时这些样式可能不会跟随移动，这也许是Photoshop的程序漏洞所致。
播放范例动画
针对这种不能在中途加入新样式项的问题，可以用一个简单的方法解决，那就是在一开始建立图层样式时，就将所有的样式项都打开启，并将一些暂时用不到的样式项的不透明度设为0%，这样既不会影响效果，也便于今后的重新启用。但还是免除不了重新设定各关键帧的麻烦。所以在剧本阶段就应当对此做好充分考虑。
目前渐变叠加在3个帧中的状态都是相同的。我们可以在第2关键帧时修改样式，用鼠标将渐变所形成的高光点向左上移动些许，模仿球体移动造成的光照位置变化。效果如下图。在现实中影子的变化也与此不同，应该顺着光照方向变为椭圆才对。并且一个球体停在平面上时，阴影的高度不应那么低，大约应该在5~8像素这样。这些问题不在本课讨论范围。
播放范例动画
图层样式中的绝大多数都可以形成动画，其中投影和内阴影的使用方法差不多，可用作表现物体的立体感，就如同我们上面所作的范例。外发光与内发光的效果也差不多，都是用来营造物体的发光效果。斜面和浮雕中的“方向”及“角度”不能作为动画。光泽可以形成较为虚幻的动画。颜色叠加则可以形成两种颜色之间的过渡。渐变叠加是一个可以产生多种效果的样式项，除了角度、缩放以及鼠标移动位置以外，也需要基础的渐变设定知识。可观看基础教程中相应部分的介绍。
图案以及描边选项中图案描边方式中，图案的缩放及混合模式可以形成很好的动画效果，具体内容大家可自行研究。
这次的作业是将下图所示的模拟雷达动画制作出来，注意观察动画的细节。
第10课 实战图层样式动画 http://www.missyuan.com/thread-363080-1-1.html
（2300字）在实际制作中体会图层样式在动画中的应用。
现在我们来讲解一下上节课的作业。比起以前“石器时代”的作业，它的难度有明显的增加。一个是动画元素的增多，不再是由少数的简单物体构成。再就是要求在制作前要成竹在胸，事先就要计划好步骤。
新建图像，约100×100，用椭圆形状工具的形状图层方式绘制一个矢量正圆，填充为绿色(数值19631c，可在拾色器下方的#区域内填入，这其实就是用十六进制来表示十进制的0~255，不必深究)或其他颜色。然后复制该图层(CTRL+J，复制出来的应位于原图层上方)，对复制出来的图层用自由变换功能，将其参照中心点(ALT+SHIFT)缩小。接着为其定义描边样式(大小为1像素，白色)并将填充不透明度设置为0%，得到一个线圆。适当降低该图层的不透明度(约15%)已达到较好的视觉效果。将这个线圆图层再次复制并依照之前再次缩小，得到两个同心的线圆。大家也可依次列推制作更多的同心线圆。此时图像应类似于下左图所示。
然后新建一个普通图层，使用直线工具的填充像素方式(粗细1像素，关闭消除锯齿)在圆的中央位置绘制一横一竖组成十字。绘制的时候可将图像放大便于对齐，绘制后也可使用多图层对齐功能调整。此时图像类似于下中图所示，图层调板如下右图所示。
在这个前期的动画元素准备过程中，我们先使用了矢量绘制圆是因为其需要缩小，矢量方式可保证质量。后面的十字理论上也可以使用矢量方式绘制，但由于矢量直线在1像素这样小的单位时，会由于自身的抗锯齿功能而可能导致边缘模糊，结果看上去就像是2像素粗细。大家可以自己动手试试看。除了这种极微小单位的情况以外，都应尽量使用矢量绘制，这个前提是不会变的。
雷达扫描效果的实现是第一个难点，这其实就是渐变叠加样式，关键是要选择角度的渐变方式，以及相应的渐变设定，分别如下左图和中图所示。渐变色标为96de8a。渐变色标也可用白色，再通过更改混合模式或降低不透明度来融合图像。此时图像应如下右图所示。如果看不懂这里的内容，请复习基础教程的相应章节。
现在我们让扫描线动起来，其方法就是改变渐变叠加设定中的角度数值。这里会遇到第二个难点，那就是如何设置动画参数。扫描线应该从90度开始，旋转360度后应回到90度。但在关键帧中两个都设置为90的话就没有动画效果了，所以我们先将其设置到旋转180度的位置。需要注意的是，如果旋转的绝对角度小于180(181度等同于1度)，将以最小转角作为旋转的方向。
将动画的文档设置改为持续01:00，帧速率15fps。在开始时刻开启圆图层的样式动画记录。然后将时间标杆移动到动画结束时刻，将角度设置为-90度。动画调板如下左图所示。
观看范例动画
现在我们延长动画的持续时间为02:00，将时间标杆移动到新的结束时刻并建立关键帧，然后将样式的第1帧复制到该时刻。此时动画调板如下左图所示。看起来像是完成了旋转一周的设定了，但细想一下，现在时刻00:00与02:00的状态是相同的，这样当动画循环播放时，两个完全一样的帧就会形成一种停顿的效果，播放动画的时候仔细看一下，不难发现。
观看范例动画
这个问题我们以前在帧式动画的时候遇到过，当时的方法是删除最后一帧。但在时间轴方式下不能单独删除某一帧，只能通过更改持续时间的方式。我们将持续时间改为01:14。动画调板如下左图所示。
注意此时原先设定的帧已位于时间区域之外了，但仍然在发挥作用，控制着动画的参数改变。即使再将持续时间改为更短，以至于在动画调板已看不见时，也是如此。所以在时间轴方式下定义的关键帧，是不会因为持续时间变短而消失的。以后只要增加持续时间，它们还会出现。这是一个很重要的特性。
这里再强调一下动画时刻的表述方式，01:14本身既包含秒时间也包含帧，含义是经过1秒后的第14帧。按照我们15fps的设定，这个绝对帧数就应该是15＋14＝29帧。而下一帧的时刻表示应为02:00而不是01:15。就好比日常生活中的时间是60进位制，那么就不可能有3点60分这样的表述，而应表述为4点。同样的，15fps就表示15进位制，把一秒钟平均分为15单位，14单位之后就向秒进位。
观看范例动画
现在要制作模拟雷达扫描到的物体，这本应在最初就先做好，但为了体现制作过程中可能发生的后期添加元素的情况，所以放到现在来做。
新建一个图层，用直径为1的铅笔工具用白色在其中随便点几下(间距不要太大)。如下左图所示。接着移动时间标杆，在扫描线与这几个点接触的时候(范例中位于00:10)，点击不透明度的秒表按钮建立关键帧，然后移动时间标杆在扫描线差不多回到原点的时候(范例位于01:10)再建立一个，将图层不透明度设置为0%，这样就制作出了小点逐渐淡出的动画。
通过上面的动画可以看出小点在扫描线经过后有了淡出的效果，但问题是小点在扫描线还没有到达的时候，应该是看不见的，当扫描线达到时出现，然后再逐渐淡出。那么我们应该在开始时刻设定关键帧，并将图层的不透明度设置为0%。但这又出现一个问题，那就是小点的出现变成了淡入效果，也就是扫描线还没有到达的时候，小点就逐渐显现了。
观看范例动画
如何解决这个问题是第三个难点。解决的方法有两种，一种大家应该可以自己想到的，那就是将开始时刻的关键帧移动到小点完全出现的前一帧，如下左图所示。此外另外一种方法更“正规”一些，是我们以前没有讲到过的，那就是改变帧之间的过渡关系。
现在不透明度3个帧之间都是过渡关系，即帧12过渡，帧23过渡。如果我们能令帧12之间不过渡的话，就可以达到目的了。在动画调板中第1帧上点击右键，选择“保留插值”，注意帧图标从
变为了
，如下右图红色箭头处所示。这就表示这一帧到下一帧之间不再有过渡效果。由“从黑到白”的方式变成了“非黑即白”。此时整个动画的制作就完成了。
当然，可以在后期再将其改为默认的“线性插值”方式，那样过渡效果就会重新出现。大家可以自己尝试改变其他帧的插值方式。这里的“插值”是由英文生硬地翻译而来，虽有些词不达意，但记住其效果就可以了。
在引入图层样式后，我们表现动画效果的能力就得到了很大的提高。大家应该在课程之外自己多动手实践，不要只局限于这里所介绍的内容。要知道我们的范例是有限的，你们的创意是无限的。就这个已完成的动画而言，大家可以再尝试将十字线或同心圆做成忽明忽暗的效果。这说白了也就是淡入和淡出交替，只不过并非是0%或100%这样极端的状态。
观看范例动画
今天的作业是完成如下的动画。除背景层外，只允许使用一个文字层制作。
第11课 使用蒙版制作动画 http://www.missyuan.com/thread-363081-1-1.html
（2600字）使用蒙版制作出更为灵活多变的效果。
前一课的作业没有技术层面上的难点，所需要的就是细致的观察和耐心的思考。因此我们不会再做详细讲评，仅简要介绍。并附带PSD源文件供大家参考。
文字从黑变白的做法是建立白色文字层，将文字层的填充不透明度作成动画，即可形成从黑到白的效果。其实应该是逐渐隐现的淡入效果，只是由于背景为黑色而已。文字边缘的效果则是描边，使用了图案描边。图案描边可以使用鼠标拖动调整位置，正是将这个位置做成了动画效果。大部分边缘闪动的效果都可以这样来制作。另外还可以试试看将图案缩放做成动画，效果也类似。点此下载该范例的PSD源文件，打开后若出现字体缺失的警告，则可改用其它字体，对最终效果没有多大影响。
在Photoshop制作动画的内容中，最重要的是基本的时间轴、关键帧等概念。在此基础上，要令动画漂亮、精细，则需要依靠样式。因此够熟练使用图层样式也是一个重要的条件。本课将介绍另一个动画基础知识，就是在动画中使用蒙版。当然，在此之前要求大家已完全掌握了基础教程中蒙版部分的知识，在这里不会重复介绍。如果想要了解这方面的内容，可点此观看动画教程。蒙版的文字教程只包含于书籍《大师之路-Photoshop中文版完全解析》中。
在时间轴的项目中，大家都已经看到过蒙版的项目，分为普通的点阵蒙版与矢量蒙版。它们各自都具备两个动画项目，一是蒙版的位置，二是蒙版的启用。
所谓启用就是指蒙版的有效性，即开启或关闭。可以用来控制物体的出现或消失，但不能带有过渡效果。也就是说要么就完全有，要么就完全没有，而不能在两者间过渡。实用价值不是很大，因为同样的效果我们直接使用图层不透明度和“保留插值”就可以实现。
蒙版位置则是一个大有用处的项目，如果我们要制作一个模拟进度条的动画，如下图所示。由于Photoshop不支持变形动画，因此不能简单地通过变换命令实现。虽然可以通过之前介绍的“独立图层”来制作，但未免显得太过繁琐，且后期可编辑性极差。
观看范例动画
用蒙版来制作这个动画则非常简单，在新建的图层中画好长方形，建立一个全白的蒙版，再将其填黑，解除蒙版与图层的链接关系，如下左图所示。接着就可以设定蒙版位置的动画项目了。其过程很简单，就是在开始时刻保持蒙版在全黑，在结束时刻将其移动(往左往右自定)到完全露出白色，也就是不再遮挡图层内容为止。动画的文档设定为1秒、15fps。
也可以将蒙版制作为带有渐变的，如下右图所示。这样可以令进度条的末端显得平滑些。
观看范例动画
除了移动蒙版的位置以外，也可在保持蒙版不动的前提下去移动图层中的内容。建立一个文字层，用渐变工具将其蒙版制作为带有对称渐变的效果。图像效果如下左图所示，图层调板如下右图所示。解除蒙版链接后，就可以将图层的位置制作为动画了。注意此时不再是蒙版位置项目，而是之前我们学过的图层位置。动画的文档设定为2秒、15fps。
虽然此时并不是直接移动蒙版，但必须借助于蒙版的遮挡效果才能完成动画，所以仍然将其归为蒙版类动画。
观看范例动画
不同于以前我们所做的文字移动，上面这个效果可称为文字滚动，两者的区别主要在于前者的文字内容完全呈现，后者则轮流出现。如果要令滚动的文字具备循环效果则需要一定的技巧，往复式设定不适用于此，因为阅读习惯的关系，滚动过去的文字不适宜反方向再滚动回来，就好比一句话不能反过来读一样。虽然默认的循环播放也算是一种解决方法，但在文字的最后字母经过之后会留有一段空白。
我们可以通过复制文字内容的方式来形成没有空白的循环效果。将文字内容复制出2份并接在原文字之后，即将“Photoshop”变为“Photoshop_Photoshop_Photoshop”。在起始时刻将前两个单词的衔接处即“p_P”置于图层中央(或某个)位置，在结束时刻将第2个衔接处移动到大致相同的位置。在动画中微小的差异不易被察觉，所以不精确也没关系。若要追求精确，可以某个字母的笔画(如P的左边一竖)为准建立参考线精确对齐。
此时循环效果已形成，只是在开始时刻和结束时刻存在相同状态的帧。由于这里不是对称的往复式动画，可直接将结束时刻(01:14)的关键帧移动到02:00处，如下图所示。如果掌握了之前所学的内容就能理解02:00时刻实际上并不属于动画过程，真正的动画过程是00:00至01:14。
不仅是文字，各种图形符号也可以依照这个方法做成单向循环动画。
观看范例动画
蒙版动画的技术性内容就是这些，并不高深，但如果结合之前的知识，就能做出很多效果。比如我们之前学过图层样式动画中的角度渐变动画就可以利用蒙版进一步制作。普通的角度渐变如下左图所示，我们为其添加上一个矢量蒙版，如下右图所示。就可以作出一个圆形进度条的动画了。点此下载这个动画的PSD源文件。供大家自行分析。
虽然这里可以使用点阵蒙版，但矢量蒙版能很好地适应图像缩放。这样可以很容易地将动画改变为任意尺寸以适应不同的需求。有关点阵与矢量的区别、矢量路径的绘制在基础教程部分已经介绍过了。后面的课程中会介绍动画尺寸对于字节数的影响。
观看范例动画
将上面的蒙版改变为圆环，或更改渐变的样式，还可以得到另外的动画效果。
观看范例动画1
观看范例动画2
此外，相同色标的渐变可以将色标位置的变化作为动画，如下图所示。可以形成渐变逐渐展开的效果。
观看范例动画
大家也许认为范例的动画总用黑白灰度太单调，这其实是我们从教学角度出发而采取的方式，一是灰度没有色彩干扰可以清晰的表示内容，二是灰度很容易以不同的混合模式作用于任何颜色之上，从而经过简单的修改步骤就能形成良好的效果。这个我们在基础教程的第11章节第6小节已经介绍过了。可点击观看该小节视频教程。文字教程则只包含于出版的书籍《大师之路-Photoshop中文版完全解析》中。
我们为动画添加上投影、外发光等，并更改填充的颜色和渐变的叠加方式，就得到了如下图所示的图像效果。注意这个动画的文档设定改为了10fps，以后会介绍为何更改。
观看范例动画
到现在为止，我们基本都是在以单个图层作为动画的对象，但并不代表在实际的制作中也要如此“节约”。大家尽可以使用多个图层来组成画面更丰富的动画。不过依然要遵循这一个原则，即用尽可能少的图层去制作。因为图层数量一多容易造成混乱，且不利于后期修改。另外一个原则早在基础教程时候就提到过了，那就是尽量使用矢量。
以下就是我们用两个图层组成的动画。由于这个动画字节数太大，就不在网页中展示了。大家可将其当成作业，我们提供源文件供大家研究。点此下载范例PSD源文件。
Photoshop也可以为图层组制作动画，但仅限于图层组的总体不透明度，以及图层组蒙版。不支持图层组位置动画，这多少有些遗憾。如果能够支持图层组位置动画，则我们就可以很容易制作相对移动。比如先制作文字在按钮上的横向移动，然后将文字与按钮组成图层组，再为图层组定义一个竖向移动的动画，就可以完成上面的作业了。
第12课 GIF图像综述及彩信格式 http://www.missyuan.com/thread-363082-1-1.html
（3500字）GIF图像格式的特点，及与手机彩信的关联。
在网页设计扩展教程中也包含对图像格式的叙述，但不会再重复介绍本课中关于GIF的知识，而是介绍其余图像格式的特点及综合使用的方法等。因此如果有想学习网页设计扩展教程的读者，务必掌握好本课的内容。
现在我们已经学习了许多制作动画的方法，但大家对于动画最终的呈现形式仍不十分清楚。动画究竟怎样输出？在哪些地方使用？在使用中又有哪些需要注意的？这节课我们就来详细说明这些问题。
目前在Windows系统上的主要动画图像格式是GIF，其也可以直接在网页中显示，是目前应用最广泛的动画图像格式。包括现在流行的手机彩信中的动画也属于GIF格式。GIF格式可支持静止和动画两种表现方式。有关静止GIF的内容我们将在网页设计的扩展教程中介绍，这里就介绍GIF动画格式。
动画GIF格式的实现原理并不复杂，大家可将其理解为将多个静止画面(帧)组合在一起轮流显示。这些画面(帧)之间还有运算关系存在，与选区何路径的运算类似，分别是添加、减去和消除。这是为了优化动画的字节数。
某一帧如果是添加方式，则就会在保留前一帧图像画面的基础上，再加上这一帧的内容，综合形成新的画面。如常见的进度条动画就是一个典型，如下图所示，假设一个进度条由3帧组成，那么在我们眼中所看到的理论帧形态上来说，好像这3帧中分别保存了最短、中度和最长进度条的图像。但其实在第2帧中只包含了第1帧中所没有那个部分的像素，然后以添加方式作用于第1帧之上，形成了“1+2”的图像。第3帧也是如此。这种优化措施可有效减少图像字节数。
减去方式与之正好相反，是将前一帧图像中的某些像素抹去，可用“倒退的进度条”去理解。消除方式则是将前一帧完全擦除，主要用在前后两帧之间没有任何关联的时候，比如从全部红色变为全部绿色时，前后帧之间并没有任何像素相同，则采取消除方式。
在实际制作中Photoshop会自动根据图像情况来决定采取何种方式，不需要人工干预。这些运算方式作为一个知识来了解就可以了。也可以作为构思动画时的一个参考。
现在要说以下GIF格式的一个重要特点，就是色彩数量的限制，GIF最大只能支持256色，也就是说一幅GIF图像中最多只能有256种色彩。这一点在静态GIF中尤为明显，一些带有丰富色彩的图像，如多种色彩的渐变等，很难在GIF中完美的表现出来。如下左图所示就是一幅照片的局部(注意是局部，并不是完整的全图)在PNG24位、GIF256无仿色和扩散仿色的图像情况。全图是一幅在威尼斯拍摄的商店橱窗，如下右图所示。
可以明显看出PNG24位的色彩最好，可以看作原图。而GIF格式的色彩表现力欠佳。在无仿色的情况下，原图中的一些带有色彩过渡的部位出现了色斑。在扩散仿色下色斑有所淡化，但颗粒感较重，这是仿色自身的原理造成的。有关仿色的概念在基础教程中已介绍过了，可点此观看相应内容。
需要注意的是，256色指的是针对整幅图像而言的。如果整幅原图像就是如下图那样的大小，则256色与原图的区别就不是很大了。这是因为将色彩减少到256色的时候，Photoshop会根据原有图像中的颜色进行编排，这个过程也称为索引，就是将相近的多种颜色归为一种。
如果原图中的色彩包含多个色相，那么256色平均分摊下来后，分给单个色相的数量就很少。相反，如果原图中的色相基本一致或接近，则256色也可以很好地表达。这就是为什么之前的256无仿色看起来色斑明显，而现在的色斑较不明显的原因。因为前者的原图中包含了较多色相，有些颜色被分配给蓝色、红色等，分配给黄色相的色彩较少。而后者的原图中基本只有黄色相，这样就不必为分配其他色相分配颜色了。
如下图是一张在皮亚琴擦拍摄的街景照片，我们取其不同的部位进行比较。下方的若干方块是颜色表，其中的色块就表示所用到的256种颜色。在颜色表中可以很容易的看出原图的色彩构成对色彩索引的影响。左侧图中色相较多，那么256色中分配给天空的蓝色相数量较少，图像中的天空出现了明显的色斑。而右侧图中基本只包含天空部分，所以256色中的大部分都分配给了蓝色相，使得图像中的天空表现较好。
使用【文件＞存储为Web和设备所用格式】〖CTRL＋SHIFT＋ALT＋S〗，将出现的保存储设置框。这是我们最常用的输出功能，在以后将要学习的网页设计扩展教程中更是如此。
进入设置界面后要注意红色箭头处，必须在“优化”选项卡中看到的才是输出后的实际效果，也就是在浏览器或看图软件中的效果。而“原稿”选项卡则是在Photoshop中的效果，不能作为参照的标准，这点要切记。
绿色箭头处是相应的设置区域，从中我们将图像格式设置为GIF，将颜色数设置为256，关闭仿色选项。其设定与上图左侧的效果对应的。
注意蓝色箭头处的字节数指示，这是一个很重要的指标，无论何时我们都必须使这个数字尽可能地小，否则将无法有效使用图像或动画。
要令字节数小，就需要减少颜色数，颜色表中的色块数也会相应减少。但显而易见的，太少的颜色会对图像质量造成明显的影响，很容易形成色斑。开启仿色虽然可以淡化色斑，但同时也会增加字节数。这就像架在字节数和质量之间的一座跷跷板，两者不能兼顾。作为准备在网络上传输的图像而言，字节数往往更为重要，因为大部分访问者不会有耐心花上几分钟去等待一个网页的显示。而网页除了图像之外，还有其他一些代码也需要占用字节数，所以，尽量减少字节数是一个基本原则。当然这个原则与图像质量是冲突的，这就要求我们在构思和制作的过程中要有足够的技巧去平衡两者。这些技巧包括：
一、不要在动画中使用过于丰富的色彩。其原因已经说过了，较多的色彩会导致在索引后图像质量的下降，形成难看的色斑。既然如此还不如使用较为单一的色彩，虽然可能不够华丽，但起码能避免色斑这种硬伤的出现。
二、如果一定需要丰富的色彩，则应保持丰富色彩部分的像素在动画中处于静止状态。因为GIF动画的前后帧之间存在运算关系，位于静止状态的部分可以沿用到后续的帧，那些后续的帧中不必再存有这部分的图像。这样就可以在保持整个动画具备丰富色彩的前提下有效地减少字节数。相反，如果色彩较丰富的像素也在运动的话，则后续的帧中就必须再存有色彩丰富的像素，会大大增加动画的整体字节数。
如下两个动画的对比，第一个保持小球的外发光、投影等部分不动，只有高光部分在变化。而第二个则是小球整体移动。在同样帧率、同样时长、同是256无仿色的前提下，前者的字节数是9.29K，后者则是57.1K。相差达6倍之多。那么它们在网络上传送所耗费的时间也就相差6倍。
观看范例动画1
观看范例动画2
我们在构思动画的时候，要事先考虑好其用途，如果是要用于网页之中，那还要参考其在网页中的重要性，如果不是很重要，属于装饰性的，就尽量减少字节数。这可从减少存储时的色彩数，以及良好的制作规划两个方面去实现。如果遇到带有重要指示性的，一定需要色彩丰富或动感强烈的动画时，则应尽可能减少动画的尺寸。因为小尺寸的图像中像素总量也少，用256色进行索引就不会显得那么局促。这点大家可自己动手实验得知。
GIF还有一个重要特点就是支持背景透明，这使其可以与网页的背景很好的融合。大家也可以在关闭背景图层的前提下输出透明背景的GIF。不过GIF的背景透明只能是两种状态，要么全透明，要么全不透明，而不能是介于两者之间的半透明。因此除非图像的边界是水平、垂直、45度斜线这三种情况，否则都会因为透明而形成明显的锯齿。如下图所示是一组不同边界的图形在不同背景色下的表现。从中不难看出两者的区别。
需要注意的是，边缘的锯齿的形成原理并不只是图像的问题，也有显示器物理局限的因素，相关知识在基础教程中提到过，可点此观看相应内容。
 | | |
需要注意的是，透明度仿色并不是一个完美的解决方案，甚至可以说是一个非常差的解决方案。但出于GIF本身对于透明度的限制而言，也是一种解决之道。在实际的制作中，如果确定要使用GIF格式，则应避免在图像的边界生成半透明像素。换言之就是尽量避免使用透明度仿色。
还有一点要注意的是，如果输出的动画是透明背景的，则可能改变在非透明状态下各帧的运算关系，也可能导致动画的字节数有所增加。
现在我们来说说将动画用作手机彩信的用途。中国移动目前最大允许100K的彩信，那动画最好控制在95K以下，要留一些空间给文字及短信自身的代码。另外还需要注意的是动画的尺寸，不同型号的手机由于其屏幕分辨率不同，能够完美显示的动画尺寸也不相同。所谓完美显示就是指手机屏幕分辨率与动画尺寸一致或更大。如果动画尺寸超过了手机屏幕的分辨率，手机则会将其缩小显示。但缩小后的动画质量会变得很差。常见的屏幕尺寸有：
128×128：常见于早期以及时下一些低端型号的手机上。是彩信动画的基本尺寸，网络上下载来的彩信动画以这个尺寸居多，因为它可以运行于几乎所有支持彩信的手机之上。
128×160：虽然比之前的要多出一些像素，但主要用于显示一些信息，所以能够运行的动画尺寸大多也仍为128×128。
176×208、240×320：常见于Symbian及WindowsMobile等带开放式操作系统的手机，都可播放全屏动画。也有普通手机采用此分辨率的，能否支持全屏播放则不一定。
480×640：常见于高端的手机型号，虽然理论上可以支持全屏播放同尺寸的动画，但由于GIF本身的限制，播放时的流畅度得不到保证。
在制作彩信动画的时候，应该以128×128作为首要考虑的尺寸，因为其兼容性最好，且由于尺寸小，同样内容的动画字节数也比大尺寸的要小。当然，如果确定了接收者的屏幕分辨率，也可以采用与之相当的尺寸制作。
在“存储为Web和设备所用格式”右下角有一个“Device Central...”的按钮，按下后能在选定的手机设备上预览动画在手机上的效果。如下图所示。可在左侧的设备列表中选择，图中所选的是Nokia 3110。Adobe Device Central其实是一个移动设备的资料库，可为面向移动设备制作的人员提供集中的环境。除了普通的显示以外，还可以模拟手机屏幕背光关闭，以及户外屏幕逆光等条件下的显示情况。不过这些功能目前对于我们目前而言意义不大。
另外要注意的一个问题就是动画的帧率，在电脑上基本都能流畅播放30fps的动画，但手机的处理器不比台式电脑，其资源有限。动画的帧率应设置为2~5fps为佳，针对开放式操作系统的手机，由于其处理器性能较普通手机出色，可设置为10fps或更高。同时影响手机播放效果的还有尺寸、总时长、字节数等因素。做出来的动画最好是拿到手机中试播一下观察其流畅程度。
如果要输出多宗不同尺寸的动画，则最好使用矢量格式进行制作，并且矢量格式也是最佳的保存原始图像的格式，符合我们一贯主张的“保留最大可编辑性”原则。
第13课 其他的动画制作技巧 http://www.missyuan.com/thread-363083-1-1.html
（3100字）有关变速、运动模糊、文字变形等辅助技巧。
就我们目前已经学习的制作方法而言，足以应付大部分的制作需求。在本课中我们将学习一些能为作品增添更多效果的技巧，这些技巧都要建立在以往的课程基础之上。因此，彻底掌握之前的所有课程是必须的。这些技巧包括：特殊图层、加减速、运动模糊、文字变形。也希望大家能够总结出自己的制作技巧，并与他人分享。
在Photoshop中能够作为动画的项目有图层位置、图层蒙版、图层不透明度、图层样式。在基础教程的阶段我们学习了色彩调整图层和填充图层。这类图层具有特殊性，前者不直接产生图像，而是针对下方图层做出色彩调整效果。后者虽然产生图像，但属于“虚拟像素”，可在后期更改填充的内容。现在我们将它们为动画服务，看看能有怎样的效果。点击此处阅读有关色彩调整图层的内容。点击此处阅读有关填充图层的内容。
色彩调整图层是比较好用的，利用它可以制作出色彩变化的效果。这些效果可以是从明暗变化、灰度变化、反相等。实现的方法也很简单，就是先建立色彩调整层并做好相关的设置，然后将调整层的不透明度制作为动画即可。如下各动画范例，分别是曲线变暗、曲线变亮、渐变映射、反相。若要将图像变为灰度，可利用渐变映射的灰度渐变，或通过色相饱和度实现。
需要注意的是，这种色彩变化的动画由于前后帧之间的像素大都不相同，因此其占用的字节数会很大。此时应尽可能减少帧数、帧速率或缩小动画的尺寸来平衡。此外，也可以通过建立调整图层的蒙版来实现只针对某个区域的色彩调整效果，这里就不再示范了。
观看范例动画1
观看范例动画2
观看范例动画3
观看范例动画4
有时候可能要表现一些剧烈变化的场景。所谓剧烈变化要么是像素的大幅移动，要么是色彩的大幅改变，可利用反相来实现色彩的剧烈变化。通过前面的范例，我们发现将反相制作为过渡的效果并不好，将过渡效果关闭后能够形成剧烈的色彩改变。这可通过两种方法来实现，一个是将帧设置为保留插值。二是两个关键帧之间不要留有空隙，这样就无所谓过渡与否了。
需要注意的是，第二种方法的后期可修改性较差。如果在文档设置中增大了帧速率，就会在原有的紧密排列的两个关键帧之间插入新帧，这样就会出现过渡效果了。因此不建议采用此方法。而应该采取第一种方法。
现在大家自己动手将这个动画制作出来。点此下载范例文件包。文件包中包含素材图片以及成品的PSD，大家先不要开启PSD文件，尝试自己去分析和制作。完成后再参照范例PSD文件。
观看范例动画1
这个演示反相调整层使用技巧的范例动画具有一定的情节。首先是黑色流星坠落，流星是使用带有渐隐步长的画笔绘制的笔直或垂直线条，然后将其旋转为45度(角度可自定)，接着将除建筑物之外的天空部分创建为蒙版。在解除蒙版链接后，可单独移动流星并与建筑物产生遮挡效果。其后的反相交替没有什么技术难点，就不再说明了。至于蒙版的建立属于，可参看基础教程中有关图层蒙版的相关内容。
需要注意的是，最后的淡出是采用了色相饱和度调整层，所不同的是采取了淡出为黑色的效果，而不是以往的淡出为白色。在使用调整层来制作淡出时，最好不要使用曲线或亮度对比度，因为这两种色彩调整命令并不能完全将画面变为全白或全黑，而色相饱和度命令可以做到。
除了使用调整图层以外，也可以使用填充图层，或将普通图层填充后来制作淡出。淡出的原理就是该图层的不透明度从0%逐渐到100%的过程。这样的好处是除了黑色与白色，还可以淡出为其他的颜色如红色、蓝色等。以下是一个在2000年制作的动画，将当时的个人照分别裁切为两个不同的区域，然后分为3段，并采用白色的填充图层做出的模拟曝光转场效果。因为是为了在经典论坛中的个人头像之用，因此动画的尺寸和字节数有严格的限定。
在尽可能保持较少字节数的前提下，同时又尽可能保证动画的流畅，并不是一件容易的事情。为此可能要牺牲一些哪怕是很好的创意。但如果制作出来的动画不符合要求，或传输较慢，也就失去了其本身最重要的价值。大家自行选用其他素材来模仿制作出这个动画，文件字节数限制在5K左右(范例为3.65K)。并尝试在这个前提下，加入自己的一些新创意。至于其中的单色及抽丝线效果，可参看基础教程种有关色彩调整，以及图案平铺方面的内容。
在填充图层中，除了常用的纯色填充以外，还有图案填充和渐变填充。有关它们的使用方法，就不再另外说明了，大家自己尝试即可。
观看范例动画1
很早以前我们就学习过如何制作一个运动的物体，但我们所制作出来的物体都是匀速运动的，现在可以通过更改关键帧的位置来模拟出加速和减速的效果。这种效果并不局限于物体的运动，也可以用于类似淡入淡出的任何带有过渡性效果的场合。并且该方法也适用于其他的视频编辑软件，以及网页制作软件GoLive的时间轴DHTML效果中。
首先我们新建一个150×100的白底图像，将文档设定为1秒，30fps。新建一个普通图层画上一个矩形，并设定好其从左侧移动到右侧的动画。时间轴设定大致如下图所示。现在的移动速度是匀速的。
观看范例动画1
接下来将时间标杆移动到10f处，点击“位置”项目的菱形按钮，手动在当前时刻增加一个关键帧。这个关键帧目前可以说是多余的，因为它并不会改变动画过程。现在大家来设想一下，假设本来计划在10分钟后到达的地点，现在要求你在5分钟后就到达，那么你肯定需要加速。明白了这个道理，就能明白制作加速动画的方法了。那就是将这个10f时刻的关键帧，移动到05f时刻。这样在0f至05f之间，物体将呈现快速运动，在05f之后恢复原有速度。
以此类推，再分别将15f移动到10f，20f移动到15f，25f移动到20f。就可以制作出一个减速运动的物体了。我们这里是为了说明效果，而在实际制作中其实没有必要更改这么多关键帧，视物体移动距离的长短，一般更改2到3个关键帧就足够了。太长的移动距离本身就不适合用GIF来表现。另外帧率也不要设为30fps这么高。
观看范例动画1
观看范例动画1
运动模糊其实也与物体的移动有关，有些时候需要用较少的帧数来表现物体的快速移动时，使用运动模糊可以减少画面的跳跃感。如下范例动画的演示，提供给人物移动的帧数就是4帧，在如此有限的帧数下要完成长距离(所谓长距离也需要参照物体的大小)的移动是很局促的。为了弥补这个缺点，我们将人物图层复制并用运动模糊滤镜加以处理，形成残影效果。将残影与人物图层一起移动，并在运动开始和结束时刻将其隐藏。这个人物图形可从Photoshop自带的形状库中找到。大家自己尝试制作出运动模糊的效果。我们提供PSD源文件供大家在完成后对照。点此下载范例PSD文件。
需要注意的是，这里我们在具备运动模糊的帧中，仍然保留了人物本体的完整影像，在实际操作中也可以降低本体的不透明度，或索性只保留残影，造成更快速的移动感。在只保留残影的方式下，残影的长度要适当延长一些，并且要接近于运动结束时刻的物体位置。大家可仔细观看范例动画，注意残影位置的区别。
观看范例动画1
观看范例动画2
运动模糊广泛应用于影视制作领域，大部分影视制作软件如After Effects等都有针对此的专项功能。在一些影视片断中，如果将一些快速运动的物体画面暂停，也就可以看到类似的残像。运动模糊英文名称是Motion Blur。在GIF动画制作中，运动模糊可能会增加动画的颜色数，因为残影效果本身就是带有许多过渡性色彩的。在输出的时候要注意在色彩数和动画质量之间做一个平衡。
除了使用滤镜制作残像，也可以将图层复制多份，并依次更改其色彩或不透明度形成一种比较规整的残像效果，如下右图所示，就是将人物层复制出3份并将填充色改为不同程度的灰色。这种残像用较少的色彩数量也可以很好地表现。而滤镜所形成的残像可能会在较少的颜色数下产生色斑。
在使用文字图层的时候，可能有些细心的读者已经发现了“文字变形”这个动画项目。如下图所示，可在动画中设置变形样式为“无”或其他样式，从而形成过渡变形的效果。这个动画项目其实是非常好用的，可惜只能局限于文字，如果能针对所有图形有效就更好了。不过我们有时候可以通过文字中的标点或特殊字符来模拟一些简单的物体形状，从而获得变形的能力，如符号“-”可扩大为矩形。
观看范例动画1
观看范例动画2
第14课 导入和导出 http://www.missyuan.com/thread-363084-1-1.html
（5600字）导入现有的动画及视频资源，将动画保存为视频格式。
我们也可以将一段视频作为动画的素材加以导入，方法是使用【文件＞导入＞视频帧到图层】命令。这个命令要求系统中安装有QuickTime7.1及以上版本才能使用，否则会出现如下图所示的警告框。QuickTime是苹果公司所创的一种应用于视频的优秀的编码方式，早年只能在MAC OS系统中使用，现在已经移植到Windows系统中。可从Apple的网站上下载免费版本的播放器，网址为http://www.apple.com.cn/quicktime。
我们将一段自拍的动物视频经由Premiere剪接为简短的版本，提供给大家进行导入练习。点此下载该视频。进入导入视频帧到图层后的对话框如下左图所示。在左方可选择全部导入或只导入某个片断。全部导入就不必详细说明了。导入片断需要事先定义视频范围，方法是拖动播放进度条至所需片断的开始时刻(红色箭头处)，然后按住SHIFT键继续拖动至结束时刻(绿色箭头处)，也可按住SHIFT键直接点击结束位置。这时播放进度条上会出现一段深色区域，该区域即为将要导入的片断。确定后将建立一个以独立图层方式存在的动画，即每一帧由一个图层组成，在不同的帧中分别显示不同的图层。动画调板类似下右图所示。
这种视频导入方式所形成的动画字节数通常是非常庞大的，这与片断的时长及视频的帧速率有关。比如片断时长为10秒，帧速率为15fps，那么所产生的总帧数就是150帧，是相当大的。所以一般都不宜导入太长的时间，两三秒这样就差不多了。但对于一些高帧率的视频(如24fps、30fps)来说，这点时间所产生的总帧数也很可观，此时可开启“限制为每隔2帧”，这样对原始视频是每2帧取1帧导入，所产生的总帧数就减少了一半。如果设置为每隔3帧，则总帧数减少三分之二，以此类推。这种方法称为帧抽离。可有效地减少动画字节数，但由于是平均抽离，可能会丢失一些动作细节，或造成画面的跳跃感。
一般情况下，对于15fps的原始视频可采取每隔3帧的导入方式，形成每秒5帧的动画。更高速率的原始视频据此类推即可。注意导入后需要调整帧停留时间为原先的3倍，否则会出现类似快进的播放效果。
对于导入后的动画而言，要减少字节数就需要从图像尺寸和色彩数方面去进行调整。在这里需要提醒大家的是，采用【图像＞图像大小】〖CTRL＋ALT＋I〗缩小图像，可能会由于像素重组导致一些原本边缘锐利图像的边缘变得模糊，从而增加理论色彩数。如下图所示就是一个边缘锐利的正方形在缩小前后的理论色彩数对比，可以看出由于像素重组使得色彩数有所增加。在这种情况下，缩小后的图像未必就具备较小的字节数。除非将色彩数强行指定为与前者相同。但强行减少色彩数可能会形成毛刺边缘。
再者，有一些流程图像主要由点、线、框构成，使用缩小命令会令这些细节变得难以辨认，从而影响表达。这个问题不仅针对整个图像，也会出现在针对某些图层的自由变换命令中。所以，对于一些边缘锐利的图像而言，缩小并不是减少字节数的好方法，甚至很可能适得其反。
对于视频而言，因为大部分视频的编码方式重在表现帧之间流畅性而非单个帧的画面质量，其本身就不能完美地记录锐利边缘，导入后的动画画面也是如此，所以缩小尺寸造成的损失及色彩数量的变化并不明显。
除了整体缩小图像尺寸以外，也可以考虑使用裁切命令保留视频的局部，由于不涉及像素重组，因此不会对图像边缘造成影响，不会增加理论色彩数。在大部分情况下，这是一个较好的解决方法。如下图所示是一个常见的处理流程，将原始画面中一些不需要区域进行正方形裁切，得到动画的主体，然后再缩小图像为彩信的通用尺寸128×128(或其他所需要的尺寸)。最后视情添加色彩调整层以改善动画的画面色彩。
注意调整层需位于所有图层上方才能确保针对所有图层有效。当然也可以置于其他层次以营造动画中色彩改变的效果。
在明确动画的画面布局后，可手工进行进一步的帧抽离，如下图所示，若需要将一个过程中的10帧减少为5帧，可分别选择2、4、6、8、10帧并删除，并将剩余的帧延时。这需要大家首先浏览各个帧，在发觉某一过程中的各帧之间变化并不大时，可采用这种方法进行平均抽离。除此之外，也可以连续选择某些帧进行集中抽离，比如物体落下用了7个帧，其间4帧中的变化并不很大，就可以将它们一起删除，并更改剩余帧时长。
这种手动抽离帧的方法速度慢，且需要一定的经验，但较为灵活，可依据实际情况采取不同的抽离方式，可大幅减少动画的字节数，是大家必须掌握的知识。平时多做些尝试，反正还可以撤销。在抽离后最好输出动画到网页或手机等观看效果。手动帧抽离也可在修改图像尺寸或裁切之前进行，但裁切和改变尺寸可确定动画的画面情况，建议大家在这个时候再进行。抽离帧后可删除与之对应的图层。
平均抽离可执行多次，如下图中的最终动画帧中，还可以将2、4帧抽离出去。但第6帧很重要，是情节转化的关键，无论如何不能抽离。 说句题外话，注意观察这个第6帧，大家就会看到以前学过的运动模糊效果。其实运动模糊本来就是由摄影设备造成的，我们之前只不过是将其模拟出来而已。
至于从色彩数方面减少字节数则比较困难，因为视频编码方式的特性，即使在画面中处于静止状态的物体，在前后帧中的色彩也可能不同。再加上光照及摄像机光圈、焦距、曝光度的微小变化，更是使得前后帧之间很难具备同样的色彩。这点与我们以前通过绘制创建物体的动画是完全不同的。况且视频的画面中经常带有过渡性的色彩，如光照或阴影的变化等，减少色彩数量很容易形成色斑。开启仿色尽管可以改善色斑，但同时也会增加字节数。
此时可以考虑以灰度方式显示动画，即建立黑白渐变映射调整层。在灰度方式下减少色彩数量所造成的损失较不明显。还可以使用阈值命令形成黑白分明的图像，配合特殊混合模式的纯色填充层，在减少字节数的同时还可以营造出特殊的艺术效果。点此下载范例PSD文件。
阈值命令所形成的画面具备反差强烈的色彩，很适合用来制作透明背景。在存储为Web和设备所用格式的对话框中，可以指定某种颜色为透明色。首先确保“透明度”选项为关闭，然后使用吸管工具(快捷键I)在背景上点击一下，这样颜色表中的某个颜色就被选中了，接着点击下方的
按钮，就可将所选的颜色变为透明。如下图所示。可将多个颜色转为透明。
观看范例动画1
观看范例动画2
观看范例动画3
此外还有一种方法可有效减少字节数，就是采用抽丝线覆盖画面，由于覆盖的地方变为单一的颜色，实际上就等于消除了这一行中的像素差异。其原理等同于将图像的一半填充为全黑，只不过这里并不是连续填充，而是每隔1像素填充一行，使得画面整体仍具备可读性。这种方法其实就是被称为扫描线或抽丝线的效果，可利用图案填充来完成，点此阅读基础教程中有关图案填充的内容。隔行抽丝可令动画字节数减少近一半。
需要注意的是，尽管半透明的抽丝线看上去效果不错，但这里的图案填充不能采用半透明，因为半透明并不能完全覆盖图像中原有的象素，达不到我们的目的。此外，黑色的抽丝线可能会使图像偏暗，白色的则会使图像偏亮，注意配合色彩调整图层中和一下亮度。也可以采用其他颜色的抽丝线达到另类的效果，还可将抽丝线的颜色转为透明。在转为透明之前，抽丝线的颜色应尽可能与画面的色彩有较大的反差，这样是为了避免其它地方的同种色彩也被一并转为透明，从而破坏画面。
导入后的视频以独立图层的方式存在，可切换到时间轴方式进行附加制作，如添加上文字或其他图形等。在切换之前最好将所有的视频帧归为一个图层组，以避免占用动画调板的空间。如范例中就在左下方加了一个标志，以及增加了动态的文字效果。需要注意的是，用时间轴方式进行帧停留时间的调整是很困难的，因此在转为时间轴方式时，最好确认之前的工作都已完成。
尝试将这个动画制作出来，之后参照对比范例文件，点此下载范例PSD文件。
观看范例动画
有些时候可能需要开启现有的GIF动画文件进行再加工，这时就会出现一个问题，那就是直接开启GIF动画文件后只能保留第一帧的画面，而其后的动画帧都被遗弃。如下图所示。这显然不能满足需求。
其实Photoshop是可以开启现有的GIF动画的，只是屏蔽了这功能，我们可以通过【文件＞导入＞视频帧到图层】开启动画GIF，如下图所示，默认情况下只能开启视频格式MOV、AVI、MPG、MPEG，而并没有GIF。现在首先在红色箭头处确认路径正确，然后在绿色箭头处输入符号“*”，按一下“载入”按钮，将列出所有格式的文件，从中选择相应的GIF文件即可以独立图层方式导入动画GIF。或直接输入动画文件全名，如abc.gif、123.gif等。导入后的操作与之前一致。大家可利用这个方法开启以往的GIF动画试试看。
此外，还可以通过【文件＞打开为】〖CTRL＋ALT＋SHIFT＋O〗，在“打开为”项目中选择QuickTime影片，这样就可以把GIF以影片方式开启，在图层调板中形成一个独立的视频图层，在时间轴中独立存在。如下图所示。这个方法是由经典论坛中名叫XYBLUEIDEA的朋友提出的，在此感谢他以及所有为教程完善而努力的朋友们。
Photoshop的【文件＞打开为】命令是将图像以某种特殊用途所需要的形式开启，然后保存为该特殊用途的格式，其实就是一个带转换功能的打开命令。大家在“打开为”项目中可以看到各种用途的文件格式。其中一些特殊格式的应用我们会在其他教程中介绍。需要注意的是，并不是所有的文件都可以支持所有的特殊格式。
此时导入的GIF动画本身的内容不能再作修改，但由于其作为一个独立的图层形式，可以像普通图层那样通过图层样式添加效果，间接达到修改动画的目的，如下图所示。虽然这种修改仅局限于样式，但由于Photoshop图层样式功能的强大，除了动画情节无法修改以外，其余的任何视觉效果都可以达到。
不过，优化动画仍然是一个首要前提，如果我们将内发光的颜色选为与原有动画颜色差异明显的红色、绿色等，因为色彩资源有限，某些分配给原动画的色彩要分配给内发光样式。则这个动画的字节数会明显上升，或在同样的色彩数量前提下画质会明显下降。这个道理相信大家已经能理解了。
对于一些必须以独立图层方式制作的动画来说，这种方法可以很方便地对其进行二次制作。如前面提到过的鸟类拍打翅膀的动画，通过这种方法就可以实现一边拍打翅膀一边移动的效果了。再如一个人物向前跑动，可先制作出跑步的动画，输出为GIF后再以视频图层载入，在扩大画布尺寸(注意不是图像尺寸)后，将视频图层的位置改变制作为动画，就达到了一边跑动一边前进的效果了。
观看范例动画
这种导入方式实际上提供了组件化动画的可能性，如果物体需要同时具备多种运动属性的时候都可以考虑采取这种方法。这种思路也广泛应用于视频编辑领域，比如要制作两个场景边切换边缩放并旋转的效果时，理论上应该先将两个场景设置好同样的旋转速度，然后再逐渐降低第一个场景的不透明度达到目的。但在实际操作中，场景自身属性(如尺寸)的不同可能导致缩放程度及旋转角度的差异。此时可以先将场景的静态切换渲染为一段视频，然后导入这段视频，再对其制作缩放和旋转就可以了。点此下载范例视频文件。
需要注意的是，介绍组件化知识是为了扩展大家的知识面，并不提倡大家在这里使用，毕竟我们目前所针对的只是GIF动画作品，不是视频作品。能够一次完成是最好的。如果非要不可，也要注意保留所有组件动画的原始文件，方便以后的修改。
在安装了QuickTime之后，除了具备导入功能以外，还可以使用导出功能将动画以视频方式输出，而不再局限于以往的GIF格式输出。GIF格式由于其自身特性限制，并不能完美记录我们在Photoshop中所能制作出来的所有动画效果。但视频格式就不同了，视频的编码方式不仅可以支持千万色(点此阅读基础教程中有关千万色的内容)及更高色彩数，同时在画面的播放流畅度上也较GIF有质的提高，最明显的体现就是画面尺寸及帧速率。在视频编码方式下，我们不必再受困于有限的图像尺寸，可以使用640×480、800×600或更大的尺寸。所使用的帧速率也可以提升至30fps、60fps或更高。
【文件＞导出＞渲染视频】命令就可以输出视频格式，如下图所示。将导出视频的格式选择为AVI，然后点击红色箭头处的按钮进行设置。在视频设置中将绿色箭头处的压缩类型选择为“无”即可。这样就能输出一个能在Windows中通过WindowsMediaPlayer播放的视频了。如果将压缩类型选择为其他的如“DV-PAL”也可输出视频，但在画面尺寸、帧速率等方面与我们文档设定的会有不同。
将其他的视频格式作一个简要介绍：3G是用于手机，可作为彩信发送(注意彩信容量限制)；FLC是早期DOS系统下的256色动画格式；FLV是网络上流行的Flash视频；QuickTime、APPLE TV、iPod及iPhone都是苹果的视频格式，后两者为手持设备；MPEG-4就是所谓的MP4，也常用于手持设备。有关视频编码的详细内容不是现在需要学习的，将来有机会我们会在与视频有关的教程中予以介绍。说句题外话，我们所熟悉的MP3音频格式属于MPEG-1，全称为MPEG-1 Audio Layer3。
“图像序列”方式可将动画输出为多个静止图像，图像文件名按递增命名。图像尺寸默认为文档大小，可改为别的尺寸，但是小尺寸改为大尺寸后可能会因像素重组造成画质损失。注意某些压缩类型(如PAL-DV)等会以其设定的固定尺寸进行渲染。输出范围一般为所有帧也就是整个动画，如有特殊需要可改为其他方式。Alpha通道可以输出带多级半透明信息的视频，方便在Premiere等视频编辑软件中进行合成。帧速率建议保持文档所设定的速率，在电脑上播放一般都没有问题，但某些特殊用途的播放设备有固定的帧速率，如转录为PAL制式(25fps)或NTSC制式(约30fps)、拷贝为电影胶片(24fps)等，否则可能因不同步而影响效果。
除了Photoshop，还有一些软件也能够制作GIF动画，并且在某些方面还更加简单。如Ulead出品的GIF Animator就是其中之一，它可以很容易地将一些静态图片组成各种样式的动画，并添加一些文字或图形。并且可以将动画GIF的各个帧单独输出。也可以输出为PSD文件格式，每个帧存放在一个图层中并保留透明信息。在Photoshop中开启这个PSD文件，在帧方式下点击动画调板的右上角的扩展菜单，选择“从图层建立帧”即可创建独立图层形式的动画。在实际的制作中，大家可视情采用这类软件。
最后一个作业是利用素材仿造出以下的动画。点此下载素材图片。这个动画的尺寸是128×160，当时是为了用以刷入Moto L6手机作为开机动画。不过它也可用于彩信。这个动画没有技术难点，仔细观察动画的细节，多尝试一些实现方法，找到最便捷的道路。并在完成后加入自己的创意形成新的动画。
现在大家已经具备完全的GIF动画制作能力，可利用照片、视频或自己绘制图形来完成制作。将动画以彩信发送给亲朋好友吧，并在其中加上你的祝福话语。也可以发来给我看看哟，我的手机目前是QVGA分辨率(240×320)。并且希望在网络上能看到大家制作的被广为流传的优秀彩信。
观看范例动画
到此为止，Photoshop扩展教程的动画制作部分结束。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- photoshop制作gif动画
- 使用PhotoShop制作gif动画全过程
- 用photoshop制作超炫动画---------变化花环
- 手把手教你如何用PhotoShop制作gif动画
- Photoshop制作Gif动画
- PhotoShop制作简单的文字动画--多媒体技术与应用
- 2010年全国职称计算机考试专用教程——Photoshop 6.0图像处理/Flash MX 2004动画制作
- Photoshop制作动态水波动画效果
- Photoshop动画教程：制作枫叶凋落的动画
- 如何用Photoshop制作GIF动画
- Photoshop制作简单粗暴可爱的漫画GIF动画
- IT忍者神龟之Photoshop简单几步制作秋意GIF动画效果
- Photoshop制作枫叶飘落的动画风景
- 跟互联力量学Photoshop之二_用Photoshop制作GIF动画
- 03-photoshop制作gif动画教程
- 用PhotoShop和ImageReady制作Gif动画
- 制作动画或小游戏——CreateJS事件（二）
- Photoshop制作漂亮的蓝色透明玻璃按钮教程
- MilkShape 制作动画笔记
- 是什么能够两小时写出《flppybird》游戏--制作小鸟的动画