After Effects 移动UI动效设计 案例精粹
上QQ阅读APP看书,第一时间看更新

2 After Effects概述

2.1 After Effects软件简述

After Effects是由Adobe公司出品,能够兼容Adobe公司的其他软件,具备优良的兼容性,可以方便地导入Photo Shop、Illustrator等软件的文件,并能完整地保存层的存在,从而对图像中的层进行控制。After Effects中的蒙板、遮罩、滤镜等功能能够实现创作者的创意,并能进行三维层的转变,而且还可以创建灯光和摄像机,实现三维功能,从而将二维和三维融合,在After Effects中把不同的图层素材进行拼合,创造完美的视觉效果,制作出美轮美奂的设计作品。

After Effects CC

After Effects与Photoshop存在很多的相似性,可以说After Effects实现了Photoshop无法完成的动态效果,因此学习After Effects前掌握Photoshop的应用技巧十分重要,掌握了Photoshop中的技巧对于After Effects的应用打下了坚实的基础。

UI视觉设计中对空间的探求主要是形态和形态之间在视觉上形成的框架关系,将这种框架关系设置在二维平面空间(指高、宽二维)的状态之中。有时也能在二维平面的基础上表现出带有纵深感的三维立体空间(指高、宽、深三维)的效果。它需借助明暗、色彩、透视等多种表现手法才能达到,这样的空间效果使界面中形态的构架关系显得更为复杂和丰富。

随着After Effects软件版本的不断更新,对计算机硬件的要求也越来越高。如果硬件配置跟不上,会影响到整个操作的效果,严重的会出现经常死机或重启的现象。对于大多数初学者或在校的学生来说,计算机升级的速度永远没有软件升级的速度快。如果刻意保持计算机配置与应用软件版本同步的话,在经济方面也是一笔不小的开支。因此,建议初学者或在校的学生安装精简版软件或绿色软件,因为精简版软件或绿色软件会占用较小的系统资源,虽然有些特殊功能没法应用,但是对于一些普遍的动态效果制作来说已经足够了。

2.2 After Effects软件应用特点

(1)多层剪辑

无限层电影和静态画面的成熟合成技术,使After Effects可以实现电影和静态画面无缝的合成。

(2)高效的关键帧编辑

After Effects中,关键帧支持所有层属性的动画,After Effects可以自动处理关键帧之间的变化。

(3)无与伦比的准确性

After Effects可以精确到一个像素点的6‰,可以准确地定位动画。

(4)强大的路径功能

如同在纸上画草图一样,使用Motion Sketch可以轻松绘制动画路径,或者加入动画模糊。

(5)强大的特技控制

After Effects使用85种软插件以修饰、增强图像效果和动画控制。

(6)强大的兼容性

After Effects同其他Adobe软件的无缝结合。After Effects在输入Photoshop和Illustrator文件时,保留层信息。

(7)高效的渲染效果

After Effects可以执行一个合成在不同尺寸大小上的多种渲染,或者执行一组任何数量的不同合成的渲染。

2.3 After Effects的工作界面

After Effects通过对导入到项目中的素材进行组合,按时间排序将图层进行叠加来完成工作。启动After Effects后将会有一个新项目自动建立,而要进行片头制作需要打开或建立一个合成图像窗口——合成(Composition)窗口,即在After Effects中经过加工的作品当打开或建立一个合成图像窗口时,同时打开的还有一个与它相对应的时间线窗口,After Effects中的大部分制作要依靠这两个窗口完成。在After Effects中,基本窗口和面板有项目(Project)窗口、合成(Composition)窗口、时间线(TimeLine)窗口、效果和预设(Effects& Presets)面板、工具(Tools)面板、时间控制(Time Controls)面板、音频(Audio)面板。此外,After Effects还可以通过菜单命令来控制更多的细节。

项目(Project)窗口

合成(Composition)窗口

时间线(TimeLine)窗口

效果和预设(Effects & Presets)

工具(Tools)面板

时间控制(Time Controls)

音频(Audio)面板

2.4 After Effects动画制作应用

应用After Effects制作动画的基本操作技巧对After Effects进行操作,首先需要建立一个项目,并在项目中添加各种所需要的素材,然后建立合成图像,并在合成图像视窗中进行一系列操作,如动画、效果等,最后还要对制作好的影片进行渲染。其中除建立项目文件、层的操作、制作动画这样的基本操作外,对于素材的通道设置、建立合成图像、制作蒙版和效果等都有一些使用技巧。

1.素材的通道设置

素材引入后,根据所引入的素材文件类型的不同,还需要进行一些相应的设置。如果所引入的素材包含有Alpha通道,通常需要确定通道类型。

若由After Effects决定通道类型,选择Guess。若想丢弃透明度信息,选择Ignore。若认定该通道为Straight通道,选择Treat As Straight。这类通道的透明信息保存在一个单独的通道中,其他色彩通道中不包含透明信息。若认定该通道为Premultiplied通道,选择Treat As Premultiplied。这类通道的透明信息除了保存在Alpha通道中外,也保存在色彩通道R、G、B中。Straight类通道更有利于高精度色彩的产生,而Premultiplied类通道更有利于与应用程序的兼容。如果After Effects无法判断所引入素材的通道类型,它将自动弹出对话框,可以在此对话框中设置通道类型。

2.建立合成图像

建立新的合成图像的方法如下:首先单击主菜单中的Composition,执行其中的New Composition命令,便会弹出一个设置对话框,其中包含了合成图像的一些关键信息。用户可根据实际需要进行设置,如合成图像的名称、帧的尺寸、像素的百分比、分辨率、帧速率、持续时间等。要注意以下两点:

(1)帧尺寸越大,预示和渲染时所耗费的时间也就越多,所以不要设置过大的帧尺寸。

(2)After Effects提供了4种可供选择的分辨率。若想渲染合成图像中的每一个像素,则选择Full。而Half、Third和Quarter依次渲染合成图像的1/4、1/9和1/16的像素。使用Full得到的图像质量较好,但所需渲染时间也最长。Half、Third和Quarter的质量不如Full,但耗时相对较少。用户可根据实际需要确定所需分辨率。例如,制作初期,完全可以选用Third或Quarter,从而节约大量的时间,等后期制作时再选择质量较高的Full和Half。

3.制作蒙版和效果

蒙版与效果是After Effects中的关键技术。利用蒙版和效果,可以将多个画面叠加在一起,或对颜色、亮度等属性作特殊处理,从而产生神奇的视觉效果。

在After Effects中,可以直接建立蒙版,并把它应用到其他合成图像中。用户可以利用已建立好的矩形蒙版、椭圆形蒙版和Bezier蒙版。Bezier蒙版的形状为手画的多边形,它所受的限制最少,可以随意建立,产生形状丰富的蒙版。对合成图像的某一层添加效果,可以先在时间布局窗口中或者合成图像窗口中选择一个层,然后在Effect菜单中选择一个效果组,再从子菜单中选择一个效果。

2.5 After Effects的层模式

After Effects中的层模式和Photoshop中的层模式效果是相同的,一幅好的平面设计,必不可少地会应用到层模式,但其运用在After Effects中更为广泛和灵活。另外Photoshop中所应用的层模式,可以原封不动地带到After Effects中来。通过设置不同的层模式,可以带来意想不到的合成效果,极大地丰富After Effects画面的色彩表现方式。After Effect中的合成(Composition)窗口相当于Photoshop中的画布,时间线(Timeline)窗口相当于PS中的图层面板。

合成(Composition)窗口

时间线(Timeline)窗口

在After Effects中可以将层想象为透明的玻璃,它们一张张地叠放,通过改变透明度来显示下方的层,然后这些层在时间线中按时间进行排列,从而进行工作,达到设计制作的需要,并且能够将层进行分裂和复制等。在After Effects中,层的透明信息存放在Alpha通道内,当层的Alpha通道不能满足透明要求时,则利用Mask遮罩、Mattes遮罩层、Keying键来达到显示或隐藏层的内容的目的。

Mask遮罩

Mattes遮罩层

Keying键

除此之外,层模式通过层的叠加组合,来产生非凡的视觉效果。层模式用来控制一个层怎样融合到它下面的层。其中,Stencil和Silhouette层模式用来影响下面的A1pha通道,其他层模式则影响某些颜色的显示。同时应用越来越广泛的抠像插件日益增加,如Primatte Keyer、Key Light,这些插件操作简单,支持16bit颜色控制,对于一些包含透明、烟雾、头发丝等复杂的图像有较好的键控效果。

Stenci层模式

Silhouette层模式

After Effects可以通过对层的持续时间的改变,改变动态效果动画的播放速度,对动画做慢动作播放或快进播放。一般情况下,通过时间延伸(Time Stretch)命令可以非常方便地改变层的持续时间,修改影片播放速度。当需要更自由的时间控制时,例如制作影片由快到慢地过渡或者瞬间加速等特效时,可以使用时间变化(Time—Remapping)技术。该技术可以拉伸、压缩、反向播放或令层的一部分静止。

时间延伸(Time Stretch)命令

After Effects中可以通过对关键帧的设置实现对对象属性的变化,基本动画有5种:轴心点(Anchor point)设置、位置(Position)设置、比例(Scale)设置、旋转(Rotation)设置、不透明度(Opacity)设置。通过这些设置可以实现动画效果,灵活使用这些设置便可以制作出惟妙惟肖的作品。

轴心点(Anchor point)设置

位置(Position)设置

比例(Scale)设置

旋转(Rotation)设置

不透明度(Opacity)设置

2.6 After Effects插值

After Effects还可以通过线性(Linen)插值、贝塞尔(Bezier)插值、连续贝赛尔(ContinuousBezier)插值、自动贝赛尔(AutoBezier)插值、静止(Ho1d)插值等方式对关键帧进行控制。插值可以使关键帧产生多变的运动,使层的运动产生加速、减速或者匀速等变化。通过时间线窗口中速率图或速度图,也可以对层的动画进行精细地调整。速率图提供所有空间值(如位置)、速度图提供所有非空间值(如旋转)在合成图像中的变化率的全部信息以及值的控制。在合成图像窗口中,运动路径上点的间隔显示速度的变化。在速率或速度图中,高度变化意味着速度的改变:值增高表示速度增加,值水平表示速度正常。同时曲线上点的密集程度,也表示速度变化:点越疏则速度越快,点越密则速度越慢。

2.7 After Effects插件

After Effects效果所能达到的单独视觉程度与我们在Photoshop所看到的相当,除此之外还能反映效果的变化过程。After Effects的特技效果,是通过效果插件(Plug_in)来实现的,这些插件都放在After Effects安装目录下的P1ug_in路径中。和其他动画一样,通过为效果的属性参数设置关键帧,即可实现效果的动画。After Effects可以为一个层设置多个特技效果,甚至还可以为音频指定效果。除了After Effects自带的效果,作为影视后期工业标准的After Effects拥有最广泛的第三方支持,几乎所有合成软件的插件都首先支持After Effects,其他合成软件也都兼容After Effects插件AEX。著名的After Effects第三方插件有Bori sFX、DigiEffects、Eyecandy等。此外After Effects可以直接应用Photoshop的插件,所以目前市场上为After Effects提供的插件是极为丰富的。

2.8 渲染与导出

完成动态效果动画的编辑合成之后,最后一步需要将完成的影片渲染输出。After Effects可以以多种格式输出影片,例如各种格式的视频文件或序列图片。通过外挂插件,After Effects还可以输出适用于其他平台的影片,具有广泛的兼容性。

UI动态效果演示动画制作有很多东西是有套路可循的,所以可在平时先将一些格式化的元素制作出来,在需要的时候可以直接调用这些素材,节省创意、制作和渲染的时间,缩短制作的周期。制作中注意细节的处理。片头制作是一门艺术,是完全靠细节取胜的工作,因此,需要有耐心,点滴修饰,不断充实完善制作内容。同时在制作中不但要注意画面内容上的细节的设计,还要注意画面和音乐剪辑的流畅性、细心地调整三维和后期合成软件中的每一个关键帧参数等技术上的细节,只有这样才能制作出画面丰富、结构严谨、让人赏心悦目的演示动画效果。