推荐阅读
使用Illustrator渐变网格打造旧皮靴教程
在Adobe Illustrator软件中,渐变网格工具是最让人惊叹和最让人困惑的工具之一。在Adobe Illustrator软件中,渐变网格工具是最让人惊叹和最让人困惑的工具之一。使用这个工具可以使几乎任何形状都转换成网格的形式,2条线(水平/垂直)的每一个交叉点可以填纯色,特别方便打造矢量效果的立体光影。 今天是父亲节,本文中我们利用Illustrator的渐变网格工具画一只老爸的旧皮靴,大家会看到一些网格工具的应用技巧,以及一个不错的工作流程,使你能够充分运用这个工具画出精致的作品。原文来自:tutsplus.com 1、我要谢谢Itai Lustgarten,和我一起编写本教程。Itai是一位资深的CG,设计师和讲师。我们1990年入行,在培训学院和以色列的几个专科院校里教授Illustrator、photoshop和印前技术。 2、创建基本的网格 选择一个形状后(非复合形状),从对象菜单中选择创建渐变网格。然后在创建渐变网格窗口中,你可以定义网格的构成-行数和列数。注意:网格线是依据形状的原外观轮廓生成的。 3、添加网格点的另一个方法是使用网格工具,然后在形状的任一位置上点击。
20张来自设计师们的办公室照片欣赏
作为一名设计师,拥有一个良好的的办公环境是必须的,这样除了能保持良好的工作状态外,还可以给你还来创造灵感哦!下面收集一些设计师们的办公室照片,看了这些作品后,我想你的办公空间也需要变一变了吧。My Workspace: George BokhuaSubmission Spotlight: David HellmannWorkspace: Mike BusbyJoel Speasmaker’s WorkspaceWorkspace: Per Vestman
Photoshop鼠绘靓丽曲线美女
最终效果先用钢笔工具进行人物动作定位 用钢笔工具勾出人物的轮廓,一气呵成,注意细节部分的调整。 CTRL+ENTER直接转换为选区并填充,腰部与胳膊间的空白勾出后直接删除。 用模拟压力画笔勾出身体的关键曲线。包括腿部、腰部、颈部等。 用减淡工具提出身体的稍亮部分。
在 Dreamweaver 中重新排列、停放或浮动“文档”窗口
打开多个文件时,“文档”窗口将以选项卡方式显示。 若要重新排列选项卡式“文档”窗口,请将某个窗口的选项卡拖动到组中的新位置。要从窗口组中取消停放(浮动或取消显示)某个“文档”窗口,请将该窗口的选项卡从组中拖出。要将某个“文档”窗口停放在单独的“文档”窗口组中,请将该窗口拖到该组中。若要创建堆叠或平铺的文档组,请将此窗口拖动到另一窗口的顶部、底部或侧边的放置区域。也可以利用应用程序栏上的“版面”按钮为文档组选择版面。若要在拖动某个选项时切换到选项卡式文档组中的其它文档,可将选项拖到该文档的选项卡上并保持一段时间。
最新发布
循环盛放的花朵超炫GIF动画效果详细教程
1、打开ps新建300*300像素的文件,文件名随便填,如图点确定。 2、把图层1填充为黑色的背景,然后新建图层2,如图。 3、选中图层2,用椭圆工具拖一个正圆的选区,填充为红色,不要取消选区。 4、用左方向键移动适当的距离,然后删除选区内的内容,如图。 5、把图层2复制一层图层2副本,如图。 6、选中图层2副本,在画布上用移动工具把图层2副本移到如图所示。 7、选中图层2,用橡皮檫工具檫除掉不需要的部分,如图。 8、选中图层2副本向下合并如图。
如何给GIF动画加水印(Photoshop篇)
给图片添加水印的方法很多,但大多数软件给GIF动态图片添加水印后保存出来的GIF格式图片都是静态的,只有第一帧画面。如果你有PHOTOSHOP,我们也可以不利用其它软件来给GIF动态图片添加水印,且导出带水印的动态图片。GIF动态图片PHOTOSHOP CS3 or moreQuickTime在PS CS3之后的版本中,都不能直接编辑多帧GIF动态图片,但有了视频编辑功能,所以我们可以将GIF动态图片当作视频处理。首先需要安装QuickTime:然后打开PS,点击“文件”菜单,选择“打开为”命令:
CS6动画制作入门教程-01动画初识
动画形成原理是因为人眼有视觉暂留的特性,所谓视觉暂留就是在看到一个物体后,即时该物体快速消失,也还是会在眼中留下一定时间的持续影像,这在物体较为明亮的情况下尤为明显。最常见的就是夜晚拍照时使用闪光灯,虽然闪光灯早已熄灭,但被摄者眼中还是会留有光晕并维持一段时间。 对这个特点最早期的应用,我们上小学时也许就都做过了,就是在课本的页脚画上许多人物的动作,然后快速翻动就可以在眼中实现连续的影像,这就是动画。需要注意的是,这里的动画并不是指卡通动画片,虽然卡通动画的制作原理相同,但这里的动画是泛指所有的连续影像。 总结起来,所谓动画,就是用多幅静止画面连续播放,利用视觉暂留形成连续影像。比如传统的电影,就是用一长串连续记录着单幅画面的胶卷,按照一定的速度依次用灯光投影到屏幕上。这里就有一个速度的要求,试想一下如果我们缓慢地翻动课本,感受到的只会是多个静止画面而非连续影像。播放电影也是如此,如果速度太慢,观众看到的就等于是一幅幅轮换的幻灯片。 为了让观众感受到连续影像,电影以每秒24张画面的速度播放,也就是一秒钟内在屏幕上连续投射出24张静止画面。有关动画播放速度的单位是fps,其中的f就是英文单词Frame(画面、帧),p就是Per(每),s就是Second(秒)。用中文表达就是多少帧每秒,或每秒多少帧。电影是24fps,通常简称为24帧。 现实生活中的其他能产生影像的设备也有帧速的概念,比如电视机的信号,中国与欧洲所使用的PAL制式为25帧,日本与美洲使用的NTSC制式为29.97帧。如果动画在电脑显示器上播放,则15帧就可以达到连续影像的效果。这样大家以后在制作视频的时候,要想好发布在何种设备上,以设定不同的帧速。 人眼的辨识精度其实远远高于以上几种帧速,因为人眼与大脑构成的视觉系统是非常发达的。只是依据环境不同而具备有不同的敏感程度,比如在黑暗环境中对较亮光源的视觉暂留时间较长,因此电影只需要24帧。顺便说句题外话,只有少数动物的眼睛能在某些方面超过人类,但都同时在其他方面存在严重缺陷。如“细节之王”鹰是色盲,而“夜视之王”猫头鹰的眼珠固定,要转动头部才能观察周围。 在我们前面所学的课程中,Photoshop只是被用来制作比如海报、印刷稿等静态图像的,我们提到过它具备动画制作 的能力。现在我们就是要在Photoshop中去创建一个由多个帧组成的动画。把单一的画面扩展到多个画面。并在这多个画面中营造一种影像上的连续性,令动画成型。 现在很多使用Flash制作的动画都可以附带配音和交互性,从而令整个动画更加生动。而Photoshop所制作出来的动画只能称作简单动画,这主要是因为其只具备画面而不能加入声音,且观众只能以固定方式观看。但简单并不代表简陋,虽然前者提供了更多的制作和表现方法,但后者也仍然具备自己的独特优势,如图层样式动画就可以很容易地做出一些其它软件很难实现的精美动画细节。再者,正如同在纸上画画是一个很简单的行为,但不同的人画得好坏也不相同。因此优秀的动画并不一定就需要很复杂的技术,重要的是优秀的创意。
CS6动画制作入门教程-02第一帧的传播特性
在开始之前我们先讲解一下上节课后的作业,那是一个有两个物体一起移动的动画。所谓的两个物体其实也就是两个图层,分别绘制上方块和圆,然后复制一帧并相对移动图层的位置即可。在技术上并没有太大难度。 但要注意看清楚我们的范例动画,其中的圆并不是一开始就移动的,而是滞后一段时间才开始的。这也就是说在前面几帧中只需要移动方块图层,而并不移动圆图层。在方块移动几帧后再开始移动圆,动画调板类似于下图所示。点击红色箭头处可以开启调板选项,可以自己设定帧缩览图的大小。绿色箭头处的是帧步进按钮,点击一次播放一帧,则是播放上一帧。按钮则是回到起始帧。 我们安排这个范例是想告诉大家,一个较为复杂的动画往往是由许多物体构成的,而这些物体未必都是一同动作(如移动)的。比如制作一个物体撞击另外一个物体的动画时,被撞物体就应该在撞击物体接触之前都保持不动。之前我们制作的是位移动画,是利用图层的移动。除此之外,还可以通过设定不同的图层部透明度来产生动画,制作的方法相信大家应该可以猜得到,那就是在不同的帧中改变图层调板中的部透明度数值。现在新建一个100×100的图像,新建一个图层并绘制一个方块。然后一次性复制5个帧出来,将会看到6个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒,如下左图所示。 接着选择第2帧,在图层调板中将方块图层的不透明度改为80%,第3帧60%,以此类推,到第6帧为0%。形成的效果类似下右图所示。这时候播放就会看到方块逐渐渐隐的效果。需要注意的是,通过按钮隐藏图层等同于将不透明度设定为0%。 在这个制作中有一个很大不同,就是我们改变了原先复制一帧后马上进行设定,设定完后才复制另外一帧的方法。这次是将所有帧一次性复制出来,然后选定帧进行设定。这也是一种制作方法。 在操作的过程中大家不难发现,对于图层调板中的不透明度而言,在选择另外一帧的时候它又会回到100%。这说明一个特性,那就是对其中一帧的不透明度更改并不会影响到其他帧。再试想一下,如果我们用这种方法去制作最初的方块移动,在前一帧中移动图层后选择下一帧时,将发生怎样的情况呢? 很显然,我们将看到方块又回到了原点。而如果此时的图层位置设定没有按照前一帧的轨迹,则将构不成流畅的移动效果。因此这种预先建立所有帧然后修改的方法并不适用于位移动画,其实也不适用于其他动画。只是遇到需要在指定帧数中制作动画时才会用到。
CS6动画制作入门教程-03设定帧过渡
在开始之前讲解一下上节课的思考题,问题的关键就是很难保证前后帧的轨迹统一,其实我们换一个角度想,就会觉得问题变简单了。总共不是有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后方,这样就交换了两者的前后顺序。过程如下图所示。从这个操作可以看出,复制出来的帧并非都出现在最后,而是出现在原有帧的后面,这个特点要注意。
CS6动画制作入门教程-04动画的设计思维
通过学习photoshop cs6动画制作入门教程的前3章,我们已经掌握了photoshop cs6制作动画的方法,尽管做出来的动画还十分简陋。还记得学习基础部分的时候,曾在很长一段时间内接触的都是单一的色块吗?那并未影响大家现在的水平发挥。同样的,很快我们就要开始制作较为精细的动画了。但是在这一切到来之前,大家还必须学习一些必备的设计思维。所谓设计思维就是指在制作动画前的规划考虑,这规划包括很多方面。 首先讲一下图层的组织,最终的成品动画是不包含图层信息的。这里所说的图层仅指制作中。对于利用图层位置变化来制作的动画而言,有一个显而易见的问题就是必须合理安排图层,因为移动的最小单位是图层,因此如果需要制作多个运动轨迹各异的物体时,它们就必须分布在不同的图层中。也需要事先考虑好移动的距离,图像的尺寸以及摆放的位置需要为移动留下足够的空间,这是其一。其二就是考虑好是否会与其他图层相交,以及相交时候的处理,谁遮盖谁,也就是图层的层次安排,如下图中就列出了3种相交的方式,最左边的是两个图层均为100%时候,绿色覆盖红色。另外两个则显示了在50%的不透明度下,不同层次造成的不同覆盖效果。如绿色遮盖红色,那么相交部位就偏绿,反而反之。这都是在正常混合模式下,如果选择了其他的混合模式如叠加等,就要更加注意层次。 以上说的都是技术问题,现在来说一下情节方面的问题。一般来说,如果一个物体始终都在图像中运动,则无需对其进行交代。但如果物体原本不在画面中,是后来进入画面的,或原本在画面中后来移出了画面,则需要对物体的出现和消失做一个交代,这个交代就是过渡,让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示,演示了在同样的一个文字移动中,是否采取淡入和淡出处理的效果对比。 通过下面两个范例比较,相信大家都会觉得添加了淡入淡出处理的效果更好。 范例动画1 范例动画2 除此之外,循环设定也是属于情节方面的问题,这个我们其实在之前有提到过,就是有些场合下可以使用无限循环的动画,而有些场合则不适合。比如一个栏目标题文字淡入的动画,如果不断地重复,就会使得网页整体看上去显得很乱,会令观看者感到不舒服。此时最适合的做法就是播放一次,这样既可以展现效果,又不会影响网页整体。设定为2到3次的循环一般也可接受,再多就不好了。不过只播放一次的动画最好是放在网页的上部,这样一进入网页就可以看到。如果放在网页底部,可能观看者阅读到该处时动画已经播放完了。那样的话就制作动画就没有意义了,还不如就用静态的图片代替。 范例动画3 范例动画4
CS6动画制作入门教程-05淡入和淡出的设定技巧
先说一下上节课的作业,我们让大家制作的三个动画都是带有淡入淡出效果的,但仔细观察就会发现其中有不同之处。 第一个动画是随着文字移动而逐渐显现,移动到一半时文字最明显,然后又随着移动逐渐消隐。使用帧过渡来制作的话,就需要先确定好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帧中每帧的移动距离应当相等,才能形成较好的移动效果。但大家往往会做出前快后慢,或前慢后快的效果,就是因为对移动距离判断不足。这个问题很难解决,除非动用标尺精确计算距离,不然就只能多试验几次找出最合适的过渡帧数。 本课中要掌握的是淡入淡出在与移动相结合时的处理手法。最好的方式就在持续移动的情况下,用较短的帧数完成淡入淡出,同时应保持每帧移动距离相近。这样操作是有些繁琐,不过不用担心,很快就有办法解决的。
CS6动画制作入门教程-06过渡帧动画的局限性
通常情况下都应开启“新建在所有帧中都可见的图层”选项。如果关闭,新建的图层只会出现在当前所选择(多选无效)的帧中。如果想在所选择的多个帧中可见,可以在图层调板中先隐藏再显示该层,此时动画调板中所选择的多个帧就会同时出现该层的内容。 现在回到正题,即如何在20帧中加入另外一组文字动画,新的文字既有移动也有不透明度变化。如果是从零开始设定关键帧的话,大家都知道该如何操作。但如果要添加到现有的帧中,则非常麻烦。此时不能再建立关键帧,因为新增关键帧势必增加帧数。那自然也就不能使用关键帧过渡。 也许大家会想到去修改关键帧,或建立两套帧系统再将之混合。能够这样想很好,说明思路灵活。但很遗憾这两个方法都不可行。一旦执行了过渡,关键帧就无法修改,除非撤销操作从头再来。而Photoshop只提供一套帧系统。现在唯一可行的方法就是逐帧地手动调整“去留无意”的位置和不透明度。并且最好一次搞定,因为再次修改将会烦上加烦。 就算从零开始,也未必就能制作好这个动画。因为我们使用的方法是建立关键帧后进行过渡,那么原先的“悄然来去”总共使用了4个关键帧,而“去留无意”的动作也必须设定为4个关键帧,只有这样才能统一执行帧过渡。 如果后者需要设定为5个关键帧,就涉及到统一关键帧的问题,需要将“悄然来去”扩展为5个关键帧。如下图所示,第3帧就是新建立的关键帧。可以看出它其实就是在帧2和帧4之间取一个中间状态。但这样做要基于一个前提,那就是“去留无意”的某个关键帧必须是和这个新帧相吻合的。如果“去留无意”作W波浪状移动,那么其波峰和波谷的关键帧就要与“悄然来去”的关键帧一一对应才可以。这就造成一种情形,两个文字尽管移动的轨迹不同,但 运动轨迹改变的时间却很相似。这会使动画显得单调。 所以,在制作过渡帧动画的时候,最重要的事情就是事先规划好动画的具体细节,做到完全的把握,然后才开始制作关键帧并执行过渡。这个过程一旦完成就不可修改,除非全部从头再来。 我们在基础教程部分的时候,曾再三强调在制作中要保留最大的可编辑性(如使用调整层等),以方便以后有可能发生的修改。这种思维适用于任何领域,却唯独在此不适用,因为过渡帧动画的特殊性,使其一旦成型就不可修改。这也是以往很少人使用Photoshop及ImageReady(早期与前者搭配)去制作较复杂动画的原因。 在基础部分我们曾经蜻蜓点水地使用了Premiere制作电影,大家对其中的通过时间轴设定电影的方式应该还有印象。另外学习过DW的读者也对HTML(动态网页)制作中的时间轴印象颇深。现在CS6版本的Photoshop也具备了时间轴设定方式,我们从此可以摆脱过渡帧动画的局限了。 还有一类动画称为“独立图层动画”,主要用来制作一些无法用关键帧过渡完成的效果,如鸟类拍打翅膀的动画,就是分开5个独立图层分别绘制一种翅膀形态,然后在不同的帧中显示不同的图层,如下中图所示,我们使用5个图层绘制5种形态,然后在5帧中分别顺序显示某一层,之后又增加了3帧制作回场,形成了8帧的往复式动画。其中帧28、帧37及帧46内容相同。
CS6动画制作入门教程-07初识视频时间轴
通过前面的课程,我们已经学会了利用关键帧过渡,以及利用独立图层这两种制作动画的方式。它们可以用来制作一些简单的单物体动画,在很长一段时间内也是Photoshop唯一的动画制作方式。今天我们要学习一种新的利用视频时间轴制作动画的方式。视频时间轴方式广泛运用在许多影视制作软件中,如Premiere、AfterEffects等,包括Flash也是采用这种方式。 关键帧过渡动画中还有许多操作我们没有提及,这是由于它们与时间轴方式并无关系,而时间时间轴将是我们今后制作动画的主要方式,因此予以略过。 为统一素材,点击此处下载anisample02.rar文件并解压出PSD文件,在Photoshop CS6中开启,这是一个没有帧设定的文件(大家也可以利用自己制作的代替)。如下图所示。由于使用了文字图层,可能在开启后会由于字体缺失而出现替换选项,选择用默认字体替换即可,默认字体虽然不够漂亮,但教学性是一样的。PSD文件中包含3个图层(背景层不算),其中两个是文字层,一个是矢量形状层。如果不知矢量形状图层为何物,说明基础部分没有掌握好。 点击动画调板右下角的按钮,即可切换到视频时间轴方式,如下图所示。在CS6之前版本中调板的名称变为了“动画(时间轴)”,而之前的是“动画(帧)”,而在photoshop cs6还是显示时间轴。右下角的按钮变为了 ,点击将会切换到原先的帧方式。 需要注意的是,这两种方式是互不兼容的,因此不要在制作过程中进行切换。如果误切换了,可以使用撤销命令〖CTRL+ALT+Z〗挽回。 在视频时间轴中我们看到了类似图层调板中的图层名字,其高低位置也与图层调板相同。点击图层左方的箭头标志就会展开该图层所有的动画项目,也就是能制作为动画的要素。在不同性质的图层中,其动画项目也不相同。所谓不同性质就是指如普通图层、带蒙版的普通图层、文字图层、调整图层等,这些都属于不同性质的图层。如下左图所示分别是“去留无意”文字层与“形状1”矢量形状层展开后的动画项目。其共有的是位置、不透明度、样式。不同的是文字层多了一个“文字变形”项目,而矢量形状层多了两个与蒙版有关的项目。 动画的制作不能超出图层自身的动画项目,比如不能对形状层进行“文字变形”。但有些动画项目可以后期再添加,如对文字层添加蒙版后,就令其具备了蒙版的动画项目。 在调板正下方有一组数字0:00:00:00,这是当前的时间码,从右端起分别是毫秒、秒、分钟、小时。一般也就用到秒这级。时间码后面还有一个30.00fps,这个就是帧速率,表示每秒多少帧。一般取值为整数,在影视编辑方面才会用到小数帧率。 点击动画调板右上角的按钮后选择“设置时间轴速率(文档设定)”,就会出现如下右图所示的视频时间轴设定。在其中可以指定动画帧速率。按照默认的设置,每秒30帧,这样总帧数就是300帧,对于网页动画来说这是一个相当大的数值了,制作出来会占用很大的字节数,不利于网络的传输。现在我们将持续时间改为5秒,帧速率改为5fps。确认后就会在动画调板中看到新的帧速率指示。 如下图所示,将动画调板横向拉大一些,就会看到01:00、02:00这样的时间标志,单位为秒。时间轴的最右端正是刚才所设定的5秒总时长。将红色箭头所指出的滑杆向右方拖动,就能放大时间轴的细节,红框区域内就是放大后的时间轴。可以看到在秒之间有了01f、02f这样的标志,这就是帧。我们刚才的设定是5fps,所以每两秒之间都有5个帧。 注意在两个橙色箭头之间有一条不太显眼的细线,这是渲染缓冲指示,其他影视编辑软件也都有这个指示,不过在Photoshop中它的作用并不是很重要,在后面的课程中会提到。
CS6动画制作入门教程-08用视频时间轴制作动画
现在我们正式开始利用视频时间轴来制作动画,这与我们之前的帧式动画有很大不同,但相比之下视频时间轴方式来的更直观和简便,也是我们以后最主要的制作方式。 接着上一课的内容,开始设定“悄然来去”的动画。在时间轴调板中展开这个文字层的动画项目,如下图所示。确保当前时间为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)的不透明度是相同的,因此我们可以通过拷贝粘贴关键帧的方法来完成。首先建立这两个关键帧,设定好开始时刻后,在时间轴中该关键帧的标志上点击右键,选择“拷贝关键帧”,然后在结束时刻的标志上点击右键选择“粘贴关键帧”,这样就将前者的设定复制到了后者之中。顺序也可以相反。这种方法可以在所有已存在的关键帧之间进行操作。