『很烂囶rz』简单动态字体制作范例及其他

2006-06-22 14:25 | 林柯



| 简单动态文字制作范例

一个好的头像,需要好的素材,同时字体运用也很重要,文字不仅反映直观的要素——ID,天幻字样,而且可以协调整个头像,甚至有画龙点睛,为头像增彩的作用。动态的文字是其中之一,接下来就和大家交流一下一些简易动态文字的制作。

要说明一下的是,木木接触IR的时间也确实不算长,很多东西都是自己尝试的,难免有疏漏之处,还请大家多多指正,谢谢。

| 粗略认识GIF

GIF是8位文件格式,所以最多存储256色,可以多幅图像存放一起,我们把每一幅称为一帧,这个特点就为实现动画很有利。

大家都知道动画的原理,很多静态但是彼此之间有一定联系的图片按照设定的停留时间快速播放,利用人眼的暂留特性实现了动画,所以做动态图的时候,重点在于“组合与分解”

“组合”,是在头脑里形成动画,成品要怎样动,制作之前对整体和最终结果有一个大致的构思和布局,而后需要在过程当中不断的调试达到预期的效果;

“分解”,则是把一个动画重新分解为多幅静态图,这在了解别人所做的动画时候也能用到,每帧停留时间的估计,帧与帧之间的联系考虑等等。当然,在实际的操作过程中,两者都是相辅相成,缺一不可的(毛X答卷- -)

| 文字渐现渐消

其实不仅仅是文字,渐现渐消的效果一般都是图层的“不透明度”变化的效果,以文字渐现为例,第一帧的文字不透明度为0%,即为透明,所以不可见,复制几帧,将不透明度依次设为25%、50%、75%、100%,播放,就实现了文字慢慢出现的效果(时间设定自行决定,此处不说了)

基于这个原理,快捷的方式是运用“过渡”。

运用过渡,只需要头尾两帧,而中间的过渡帧只需要设定好张数,以及上一帧(从上一帧过渡到本帧)还是下一帧(从本帧到下一帧),一次即可完成。渐消同理。

不透明度以0-100-0(实际运用时候不透明度可自行设定)三帧图像的方式,两两之间设置过渡帧,就实现了文字的渐现渐消。

而稍稍注意就可发现,不透明度的递增递减是比较平均的,这样动画的时候才显得自然,过渡帧越多出现的越缓越平和,一次过渡中每帧之间的差值为 [(最后一帧不透明度-第一帧不透明度)/(过渡张数+2)]*100%,2为头尾两帧,如前,如果过渡设为3帧,那么差值就是25%,讲这个原理,是为下面进一步运用渐现效果打理论基础XD

以下面这个头中的文字效果为例:

其中,有“动作”的一些图层在每帧的不透明度设定见下表

图层 不透明度(起始帧-末尾帧)
帧数 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
时间 1s 0.1s 3s 0.1s 1s
白图 0 27 54(3-23) 27 0 0 0
Forget 0(1-3) 20 40 60 80 100(8-15) 80 60 40 20 0(20-27)
Lethe 0(1-4) 40 79(6-15) 40 0(17-27)
Forgive 0(1-5) 26 52(7-17) 26 0(19-27)
DCFLK 0(1-5) 20 40 60 80 100(10-19) 75 50 25 0(23-27)
LIVE 0(1-7) 33 67 100(10-18) 67 33 0(21-27)
LOVE 0(1-8) 33 67 100(11-19) 67 33 0(22-27)
LEAVE 0(1-9) 33 67 100(12-21) 67 33 0(24-27)
SQUARECN 0(1-12) 33 67 100(15-25) 67 0

表当中可以发现,有些图层最终也不是完全的100%,而且前面的差值和后面的差值也可以不一样。而在第15帧是全局停留时期,这个时候也是所有图层都“出现”、达到设定中不透明度最大数值的时期,头尾两帧则是都为“不可见”时期。所以,即使是“出现”的不同时,也有同步的时候。

因为每帧中的文字图层不透明度设定有差异,从而实现了直观上出现的不同时,有了层次感。别看着一张表格很繁琐,其实操作起来也没那么复杂的,如果对于IR稍稍熟练,把头另存了用IR打开看看就很容易领会,这样运用过渡和手动操作来修改不透明度就很简单,只是修改不透明度而已嘛,况且做GIF本来就需要耐性-v-

| 文字移动

过渡不仅可以实现不透明度的渐变,选项里有位置,则也可以实现图层的移动变化,仍以文字的移动为例,操作和渐变同理,第一帧的位置过渡到尾帧的位置,过渡就以距离的差值来平均处理。

在过渡的时候,可以同时设置渐现和移动效果,具体操作留给大家自行尝试`-`

当然,这些渐变和移动是最基础的,要实现更复杂的移动,一般是复制图层做了处理、每帧来显现你要的图层,从而一起实现动画,像下面的就是这样,自由落体(想想物理实验的测重力加速度的打点纸带),所以只用了四帧,每帧间距逐渐增大模拟现实中的落体,其他的翻转什么的都是复制然后做了旋转处理的,连起来就是动态了。

继续拉人充军

右边的头像,字母一个个出现的效果就是每一个字母设了一个图层,挨着挨着一帧一帧出来就行了。


| 手写文字

林小玉你便充军来吧

手写的文字看着是一笔一笔的写出来的,操作也其实很简单,文字设定好后删格化为图层,一帧一帧的复制,每复制一帧按着实际写字的笔画反着用橡皮(蒙版也可,此处不说了)擦去,最后在IR里一帧一帧的让图层出现,再调整时间即可,注意,这种做法需要在新出现一个图层时候把上一个图层隐藏。

上面的图层截图可以看出是复制一帧反着擦去再复制再擦去的,而在做动画就是顺着出现就行了。


| 其他

以上都是比较简单的动画,要实现更为精致更炫的动画效果,需要更多的创意和耐心,多看看其他的动画,Flash之类,分析一下是怎么实现的,这样就是一个经验,在合适的地方就可以用到了。依然还是那句,需要大家的兴趣和耐心,多交流多学习。

这次在这里主要是说明了文字的一些简单动态效果,关于图层动态的话,先给大家说明一点:有时候图像渐现效果其实是遮挡它的单色图层隐藏的效果,比如社区的头一般都用的白色图层遮挡,这样不仅节约容量也能达到预期效果

继续充军

上面两个头,左边运用白色图层遮挡,以它的消失来实现了图像的出现,文字方面用了渐现,并且加入了模糊效果,即复制了设定不同的模糊值,左边的同样有白色图层,也用到了手写字效果。

具体操作之类和其他的图层动态效
果.................留给Ultra来说-_,卌

有请伟大的天空城主女儿摇头丸基库来为我们大家讲解,哦呢该,大家鼓掌~偶速逃~
以上,木木,20060622



-