[[醒目]]25号头制作教程(希望妹妹考个好学校^^)

2003-06-08 23:43 | mummy

[[醒目]]25号头制作教程(希望妹妹考个好学校^^)

这个教程所用到的软件:
Adobe Photoshop 5.02 中文版
Macromedia Fireworks 4.0 英文版
Macromedia Flash 5.0 英文版

1.打开photoshop新建一个大小为120象素*130象素的文件,然后打开素材图片,全选素材图片,
复制.然后粘贴到新建的文件,可以如图中所示,选择编辑--变换--数字来缩放大小,然后再调整
图像到合适的位置.因为我总觉得该猫女的右腿有些WT,像被打折了一般,所以就没有进行缩放,
取了她的左脸放在图片中^^


图1



2.然后开始绘制眨眼的动作.用不规则选区工具选取猫女的眼睛部分,复制粘贴到新的图层,然
后用橡皮呀,画笔呀什么的绘制新图层达到如图的效果,这就是猫女在眨眼瞬间时的模样.这个
瞬间在成品每次循环中只出现1/12秒,所以简单绘制一下就可以蒙混过关了^^

小提示:为了猫女每个活动部位动作时与周围环境达成和谐自然,可以在眼睛层的下面复制一张
原图作为衬底图,眼睛层+眼睛的衬底层的效果才是这个动作瞬间完美的画面.


图2



3.然后绘制鱼尾巴折腾的动作.在原图中选取鱼尾巴部分复制粘贴到新层,进行垂直翻转,然后
绘制新层到如图的效果,同样我也作了针对该动作的衬底层.


图3



4.绘制眼珠转动的动作.选取猫女的眼睛,复制到新层后向右移动一些,然后绘制到如图的效果.


图4



5.相同的,绘制猫女的耳朵抖动的动作.总共形成图中这么些层(大家可以从图中看出,我还做了
头发随风飘动的动作,只做了一撮头发的动作就放弃了,一是因为最后生成的gif文件过大,二是
因为太麻烦^^)

小提示:可以隐藏一些层以及调整层的顺序来察看每种动作出现时的效果,或者几种动作同时出
现时的效果.


图5



6.到此70%的工作由ps完成(主要是绘制比较费时),再来看一下猫女的图片,图中红框划出的部分
就是猫女头像中有动作的部分,而这些动作均为两个不同状态,比如鱼尾巴有向上和向下两个状
态,眼睛有闭上和张开两个状态...即:只要在要发生动作的帧中用不同状态的不同部分画面替代
(遮住)原先不同部分的画面就可以了,这就是下面flash的工作.


图6



7.打开flash,新建一个文件,如图中调整图像大小为120象素*130象素,帧数我就用他默认的12帧
每秒了.(若是MX版本的话,在屏幕下方的属性面板里就可以改了)


图7



8.切换回ps,隐藏暂时不需要的图层,合并可见图层(此时ps不要存盘退出),复制猫女图的最原始
状态到flash中的第一层(图中的文件中显示的是layer2,是由于我曾把第一层删掉的缘故,层的
名称无所谓,可以自己改的),然后在上面的timeline窗口中右键单击这一层的第25帧选择插入
帧,让layer2中的内容始终出现在动画过程中作为背景.


图8



9.在flash中新建一层,在此层中放置鱼尾巴折腾的动作.回到ps,在历史纪录中撤销合并可见图
层的步骤,回到图5的状态,再隐藏暂时不需要的图层,显示出鱼尾巴向上的图像,再合并可见图层
将相应部分如图9一样复制到flash中的新的一层当中(图中的layer3),然后让鱼尾巴向上的这一
部分每次显示2帧,在每次循环过程中显示3次.按Enter键看一下效果,就是鱼尾巴三次向上翘起
的动画了.我还让鱼尾巴这一部分的画面比实际位置向上移动了几个像素,这样可以给人一种猫
女的脸蛋和鼻头也随着鱼的抖动而抖动的错觉^^


图9



10.用如同步骤9的方法做其他动作的层,图中所示:layer2为背景层,layer3为鱼尾巴动作层,
layer4为猫耳朵动作层,layer5为闭眼的动作层(眨眼是个相当快的过程,所以每次闭眼只让它显
示1帧),layer22为眼珠向左看的动作,在两次眨眼之间.(到这里ps的工作完成)

小提示:大家可以在图中看到我在每层上面都选了小锁的符号,这样是用来锁住该层的元素,以后
编辑其他层时就不会影响到你.


图10



11.在所有层的上面新建一层,写上ffsky的字样,颜色为白色,跟最底层一样,让这一层出现在所
有25帧中.


图11



12.新建一层,做F这个字母的动画效果.在这一层中写一个新的F,根原先那个F重合,在第一帧处点
右键选择第一项:建立motion变化帧,在第10帧处点右键选择插入关键帧(Insert KeyFrame),将第
10帧处的F字母向上移动,并且设置效果面板中的透明度为0.然后复制这一层中的所有帧,建立两
个新层,复制到这两个新层中,其中一个层第10帧的F向右移动一些,另一个层第10帧的F向左移动
一些,这就如图中一样,是从第一个F身上向三个不同方向发散出三个F字母,且渐渐消失.图中是放
大20倍的效果.当中的layer7,8,9就是朝三个不同方向运动的F的motion变化.


图12



13.如步骤12一样制作第二个F字母的效果,不过是第二个字母的F移动的角度小些而已.


图13



14.同样地,制作S的效果,不同的是,S只要制作左右平移的两个字母就可以了,只要两个motion变化
层.其他的字母如法炮制.每个字母的动画效果发动时间依次延迟5帧(像上面这样的效果很基础,用
fw,ir都可以做,我只是比较习惯flash而已)


图14



15.都做完以后,完成品的层的情况就像图中所示一样,下面的小头像中显示的是运行到第16帧时的
图像.选择输出(Export)成gif动画图像.flash的工作完成.


图15



16.打开fw,打开刚才输出的gif图像,再用fw进行各种设置,优化,再输出成最终的成品.


图16




BY 12点梦工厂

此教程每个图N上面都有一张图片,由于gznet经常月X,看不到的话请多刷几下
此教程纯属原创,如有雷同,那不可能

还要说一下,我觉得这张素材选的非常好,色阶本来就很明显,这样可以加入更多的动画效果而不失
真.





呼~~呼~~魔魔布置的作业终于写完了^^






我妹妹今天高考结束,希望她考个好学校,至少清华吧,在这里借大家一点祝福^^

灭哈哈哈哈,可以陪她疯玩啦~~~~~~









-
生活是狗屁