到现在为止我们制作动画的过程都是事先建立好所需要的图层(文字也是一种图层),再建立各个关键帧,之后进行过渡。如果每个动画都能有这样充足的事先计划那当然最好,但如果在已有的动画基础上新增图层会怎样呢?
,会看到该动画总共有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不支持旋转动画,也不支持任意变形动画,因此要制作这两类动画时,就必须采用“独立图层”方式,逐帧指定图层的显示状态。今天的作业是将下面两个动画制作出来,总体难度不大,主要考验在基础知识部分学习过路径,以及自由变换工具的使用,凡是这类涉及像素重组的变换,都应当优先使用矢量图形。使用路径方式绘制物体,通过【编辑>变换路径>再次】命令多次旋转和缩放。如果操作上有困难,应复习基础教程中的相应内容。
通过前面的课程,我们已经学会了利用关键帧过渡,以及利用独立图层这两种制作动画的方式。它们可以用来制作一些简单的单物体动画,在很长一段时间内也是Photoshop唯一的动画制作方式。今天我们要学习一种新的利用时间轴制作动画的方式。时间轴方式广泛运用在许多影视制作软件中,如Premiere、AfterEffects等,包括Flash也是采用这种方式。
文件并解压出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中它的作用并不是很重要,在后面的课程中会提到。
现在我们正式开始利用时间轴来制作动画,这与我们之前的帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,也是我们以后最主要的制作方式。
接着上一课的内容,开始设定“悄然来去”的动画。在时间轴调板中展开这个文字层的动画项目,如下图所示。确保当前时间为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已经将动画的具体内容存储到系统缓存中,可提高再次播放时的速度。但如果对动画作出了修改,则渲染缓冲将被清空。我们现在所制作的动画都比较简单,所以缓冲与否都一个样,但如果以后大家制作一些较为复杂的动画,尤其是动画中有多个图像互相混合时,缓冲的区别才会体现出来。
这节课中我们学习了时间轴方式制作动画的主要方式,与早先所学的帧过渡方式相比,时间轴方式不仅制作速度快,且修改极为便利。从今以后我们将以此方式制作绝大多数的动画作品。到这里我们已经讲解完了动画制作的基础知识,接下去的课程将讲解一些更高级的技巧,以及如何制作适用于网页、手机等不同媒体的动画。
在学习了如何使用时间轴方式制作动画之后,我们就完成了动画制作的基础部分。在这里要再次强调,注意不要随意在时间轴方式下切换到帧方式,因为这会导致时间轴定义的失效。若是误操作,可使用撤销命令挽回。
在前面的课程中,在使用帧过渡的时候,有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扩展教程的动画制作部分结束。