当前位置:主页 > 平面设计 > PS教程 > 制作实例 > 动画制作

最新发布

Photoshop动画制作(4)动画的设计思维
Photoshop动画制作(4)动画的设计思维

首先讲一下图层的组织,最终的成品动画是不包含图层信息的。这里所说的图层仅指制作中。对于利用图层位置变化来制作的动画而言,有一个显而易见的问题就是必须合理安排图层,因为移动的最小单位是图层,因此如果需要制作多个运动轨迹各异的物体时,它们就必须分布在不同的图层中。也需要事先考虑好移动的距离,图像的尺寸以及摆放的位置需要为移动留下足够的空间,这是其一。其二就是考虑好是否会与其他图层相交,以及相交时候的处理,谁遮盖谁,也就是图层的层次安排,如下图中就列出了3种相交的方式,最左边的是两个图层均为100%时候,绿色覆盖红色。另外两个则显示了在50%的不透明度下,不同层次造成的不同覆盖效果。如绿色遮盖红色,那么相交部位就偏绿,反而反之。这都是在正常混合模式下,如果选择了其他的混合模式如叠加等,就要更加注意层次。以上说的都是技术问题,现在来说一下情节方面的问题。一般来说,如果一个物体始终都在图像中运动,则无需对其进行交代。但如果物体原本不在画面中,是后来进入画面的,或原本在画面中后来移出了画面,则需要对物体的出现和消失做一个交代,这个交代就是过渡,让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示,演示了在同样的一个文字移动中,是否采取淡入和淡出处理的效果对比。可将鼠标移入到播放区观看实际的动画效果,移出播放区将停止播放。通过比较,相信大家都会觉得添加了淡入淡出处理的效果更好。播放范例动画1 播放范例动画2除此之外,循环设定也是属于情节方面的问题,这个我们其实在之前有提到过,就是有些场合下可以使用无限循环的动画,而有些场合则不适合。比如一个栏目标题文字淡入的动画,如果不断地重复,就会使得网页整体看上去显得很乱,会令观看者感到不舒服。此时最适合的做法就是播放一次,这样既可以展现效果,又不会影响网页整体。设定为2到3次的循环一般也可接受,再多就不好了。不过只播放一次的动画最好是放在网页的上部,这样一进入网页就可以看到。如果放在网页底部,可能观看者阅读到该处时动画已经播放完了。那样的话就制作动画就没有意义了,还不如就用静态的图片代替。播放范例动画3 播放范例动画4

5 次浏览
Photoshop动画制作(5)淡入和淡出的设定技巧
Photoshop动画制作(5)淡入和淡出的设定技巧

先说一下上节课的作业,我们让大家制作的三个动画都是带有淡入淡出效果的,但仔细观察就会发现其中有不同之处。第一个动画是随着文字移动而逐渐显现,移动到一半时文字最明显,然后又随着移动逐渐消隐。使用帧过渡来制作的话,就需要先确定好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帧设定不变的情况下,制作出如下图所示的动画。

3 次浏览
Photoshop动画制作(6)过渡帧动画的局限性
Photoshop动画制作(6)过渡帧动画的局限性

到现在为止我们制作动画的过程都是事先建立好所需要的图层(文字也是一种图层),再建立各个关键帧,之后进行过渡。如果每个动画都能有这样充足的事先计划那当然最好,但如果在已有的动画基础上新增图层会怎样呢?打开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内容相同。

8 次浏览
Photoshop动画制作(7)初识时间轴
Photoshop动画制作(7)初识时间轴

通过前面的课程,我们已经学会了利用关键帧过渡,以及利用独立图层这两种制作动画的方式。它们可以用来制作一些简单的单物体动画,在很长一段时间内也是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中它的作用并不是很重要,在后面的课程中会提到。

11 次浏览
PS给图片制作圆形水波涟漪GIF动画教程
PS给图片制作圆形水波涟漪GIF动画教程

本例为PhotoShop动画实例教程,重点在于是对同心圆水波变形而制作动画,也应该是对水波滤镜一个突破。主要学习如何在PS中运用定义蒙版配合动画面板来制作逼真的水波涟漪动画效果。在教程中主要运用到复制变换、滤镜工具、设置画布、裁剪工具、蒙版以及动画面板等工具,教程详解的比较详细,步骤比较多,实际制作起来并不太难,对PS动画感兴趣的朋友可以动手试试。先看效果图:

4 次浏览
Photoshop制作下雨动画效果教程
Photoshop制作下雨动画效果教程

本教程主要使用Photoshop制作下雨动画效果教程,动画的效果过度非常的漂亮的,喜欢的朋友可以一起来学习吧效果第一步,找个背景图-打开,把图层模式改为滤色开始做动画效果了

4 次浏览
像素坠子
像素坠子

1. 在PS中新建文件,输入文字,汉字(宋体,12像素,消除锯齿方式为 无);英文(04字体系列,6像素,消除锯齿方式为 无) 2.在文字下新建一层,载入像素笔刷,进行图像设计。像素笔刷的下载嘟嘟:之所以以上没在ImageReady里做,是因为IR居然不认像素笔刷。3.为文字层和像素层设置图层样式。

6 次浏览
使用Imageready将照片加入动态相框
使用Imageready将照片加入动态相框

下面讲讲ps中的IR添加动态相框效果! 

9 次浏览
PhotoShop制作放大镜扫描动画效果
PhotoShop制作放大镜扫描动画效果

本例教程主要为大家介绍使用Photoshop制作一幅神秘诱惑的GIF图片,在制作过程中主要运用了图层样式和动画面板,希望大家喜欢。   首先看看最终GIF图片的效果:主要素材: 1、首先打开制作GIF图片的人物素材,创建一个新图层,并填充黑色,如图所示。

6 次浏览
Photoshop CS3制作GIF动画-跟着浣熊阿杰一起走
Photoshop CS3制作GIF动画-跟着浣熊阿杰一起走

86ps.com-黄叶飞扬 原创教程,欢迎转贴,转贴本教程时需注明作者和来源! 使用的软件为:  Photoshop CS3 辅助使用软件:  Ulead GIF Animator5.5适合的读者为:  初级入门 操作的难易度:  简单稍有烦琐  导读:通过本教程的学习,使初学PS的朋友快速的掌握使用PSCS3的动画制作基本功能,及在CS3中如何使用时间轴功能编辑GIF动画的基本技巧,以及Photoshop的智能图层和视频图层的使用等等:因为CS3中已经取消了IR,而PS是无法完整同时打开一幅动态GIF图片的所有帧图层的,如果你的电脑里安装了QuickTime 7.1 版或更高版本,那么可以通过PS的“文件”--->"导入"-->"视频帧到图层"命令来导入GIF图画图片的所有帧信息的,不过,相信一般的朋友的电脑里基本上是没有安装QuickTime 7.1的啦,这样一来,我们就唯有借助别的软件来完成这个任务了,在这里我推荐大家使用Ulead GIF Animator5.5来进行GIF图片的转换为PSD的工作.( 当然用Ulead GIF Animator来处理GIF动画也是个很好的选择哦 )如果你没有该软件, 可以浏览这里了解该软件的相关信息! 素材如下: 效果图:

5 次浏览
共计217条记录 上一页 1.. 16 17 18 19 20 21 22 下一页