KeyFansClub

首页 » - 同人讨论区 - » 综合同人区 » Adobe Image Ready简易动态头像制作教程
白井功名 - 2005/7/21 4:49:00
古语(忘了谁……)有云:授人以鱼不如授人以渔。看着想子那么辛苦的为大家做头像,我真的是很敬佩。但是,为什么我们就不能发扬自己动手丰衣足食的精神呢?于是,便有了以下这篇文章。不过,有些话要说在前头,1,IMAGE READY我从来没有看过正式的教程,这些方法都是自己慢慢摸索出来的,所以难免有些措辞会显得很“门外汉”,还请各位专业人士多多包涵。2,IR和PS算是一对好搭档,这篇文章主要介绍了IR而对PS只在必要时候提及一些,不过掌握更多PS的功能对IR制作动态图片会很有帮助。比如对于图层的了解深了你就会发现用IR实现一些特效简直易如反掌,所以希望大家在有空的时候也好好钻研下PS哦。3,我用的IR版本号为8.01,可能与其它的IR版本在细小的地方有出入,还望谅解。

嗯,那么首先来介绍下主角:ADOBE IMAGE READY。这个软件可算是PHOTO SHOP附带的赠品XD,也正因如此,很多人在感叹PS那强大的图片修改功能的同时,似乎都忘记了IR的存在。不过,除去IR那些花哨功能的比如直接生成HTML文件等等方面,他在制作动态图片方面的能力也是非常强大的。我这次就专门说说使用IR制作动态头像的一些基本技巧。

首先来说说原理。众所周知图像看起来会“动”的原理就是人眼的残留效果。而IR要达到动画的效果有两种方法,一种是图层的切换,这和一般的动画的原理相同。另一种是图层的移动,这就和现在大部分的FLASH动画类似了。

好了,来看看IR的基本界面。

最上面是菜单栏,和普通的软件相同。下面一点是参数设定栏,根据左边选择工具的不同而会有所不同。左边的是工具栏,所有的工具都在这里选取。中间的是现在正在编辑的文件。下方是动画窗口,可以说它和右下角的图层窗口构成了IR最重要的两个部分。右边则是各种自定义窗口,厄……在用到的时候会说的……

那就来先看看这个233图片吧,下方的动画窗口一共有9格,即代表9贞,而右边的图层窗口可以看到这个233动作有9个图层,每一贞都切换一个图层的可见性(即图层前面的小眼睛),可见233使用的是IR前面提到的第一种显示动画的方法。

好了,对IR的界面有了个比较直观的认识之后,还是让我们在实际操作中体会IR的强大吧。实例启动-0-



第一例,眨眼效果。

当你看到女孩子的时候,你会最先注意她哪里?没错,就是眼睛(那些想歪了的怪叔叔们退散……)。当可爱的小LOLI眨巴着水汪汪的大眼睛叫着你“お兄ちゃん~~”的时候,相信没有谁受得了吧?(咳咳,我承认我有轻度LOLICON)
那么,怎样让那些静态图片里的MM眼睛动起来呢?那就请大家跟着白井哥哥(分别念第三声和第二声)一起来变魔术吧-0-。

嗯,用的原图片嘛,就是我头像里可爱的可奈子啦。(图1)

首先,用IR打开原图片,然后,按一下文件显示框左下角那个“100%”字样,在弹出的窗口中选择“200%”,这样的话图片就会以200%于原大小的样子显示出来。不过也仅仅是显示了,图片本身并没有放大。这样做并没有什么特别的意义,只是纯粹扩大图片可以给接下来的选取工作带来不少方便而以XD。

然后,用鼠标左键按住左边工具栏里面的“选框工具”,也就是最左上角那个工具。这时候会弹出来一个选框,将鼠标拖动到弹出来的选框中的“多边形索套工具”上,将选取工具切换为多边形索套。
这里多嘴一句,PS中切换工具的方法是右击工具图标,IR中却是长按,个人认为挺不方便的……

好了,接下来用锁套工具将可奈子眼睛部分小心地选取下来。注意在最上面的参数设定栏中要将选取方式设定为添加到选区,不然选了左眼右眼再要选的话原来的选取就会取消掉。(图2)


完成选取之后,在右下角的图层面板中右击,注意不要点到缩小图上右击,不然弹出来的菜单不一样。然后选择“通过拷贝的图层”,这样就会发现原来的图层上方多了一个图层,里面的内容就是选取的眼睛部分,名字自动为“图层2”。先把图层2前面的小眼睛给点掉,让其不可见,然后改用画笔工具(工具栏右边那排第四个),在参数栏那里调节一下画笔大小,然后按住ALT选取眼睛附近的肤色,将底图(也就是图层1)上可奈子的眼睛完全抹掉(图3,好可怕……)。


搞定之后再让图层2变为显示状态,并且复制3次(右键单击菜单里,或者直接拖动图层2到下方那个“新建”的小图标上也行),系统的默认命名方式是“图层2副本,副本2,副本3”为了不至于搞错,我们手动命名为图层3、4、5。

好了,接下来就要开始变魔术了。

首先在动画窗口中,缩略图下方有个“0秒”,这表示这一贞显示的时间,我们单击一下那个0秒,会弹出来一个框,暂且选取0.1秒吧。然后按下动画窗口最下方“复制当前贞”按钮4次。

第一贞,不用修改太多地方,只要把图层3~5全都隐藏掉(也就是把小眼睛给点掉)就行了。只留图层1、2显示。

第二贞,将2隐藏掉,而让3显示出来。然后选中3(也就是眼睛后面的那个小毛笔确实是在3上),按下CTRL+T,这时候会发现边框变了(图4)

用鼠标移动到上方中间的那个小方格上,等到鼠标变成双箭头之后按住往下拖拉一点,你会发现图层3变形了。嘿嘿,知道我要干什么了吧。

第三贞,将3隐藏将4显示,重复第二贞的步骤,就是将4变得比3更加地扁一点,做出闭眼睛时候的过渡效果。

第四贞,将4隐藏将5显示,这次不用CTRL+T了,直接选择菜单里的“编辑-〉变换-〉垂直反转”,图片就这么反转了。用橡皮擦(工具栏左边第4个)擦掉除了睫毛外的部分,然后用画笔稍微修补一下,OK了,整个闭眼睛的过程到此结束,算是完成了一半了。

不过,后面的工作就轻松得多,既然有闭眼睛,只要再把睁眼睛的动作做出来就好了吧。自然没有人会傻到重新建图层变换,只要把2、3贞复制一下按照反过来的顺序拖到第4贞后面就行了。
然后,为了让眨眼更加自然一点,需要调整一下每一贞的显示时间,把第1贞调为2秒,第4贞调为0.5秒,怎么样,自然多了吧?(图5)


最终效果如图。
当然,还可以通过不同的时间组合来做到更加真实的效果,比如:

好了,全部完毕,接下来就是要把修改存起来了。因为原图是JPG格式的,所以直接存储是不会动的。在右边最上面的窗口中选中“优化”这一项,将格式设定为“GIF”,然后在菜单里选择“文件-〉将优化结果存储为”就能保存为GIF图像了。至此才算是真正的大功告成。




咳咳,总结一下……
1,通过不同图片的切换来实现动画效果是最普通也是最基本的,在刚学GIF的时候一定要好好的掌握。
2,不一定要切换整附图片,如果只是部分动作(比如本例的眼睛)则只需要修改动的部分就行了。
3,本例的眼睛只是最基本的,如果原图的眼睛上本来就有一些头发的遮挡等等,情况就要复杂得多,借助PS能更好的完成这些复杂的工作。以后有机会会说一说……



第二例,通过图层移动来达到某些动态效果

那么,先来做一个“办证”吧XD。
使用的原图像为MOP的921,也就是大家熟悉的“路过,各位继续”的包子(图6)。


用IR打开原图,然后选择包子身体比较完整的图层,我选择了图层30。用选取工具全选这个图层然后CTRL+C复制一下,这个原图也就没用了。

然后,选择新建,默认的宽和高为51和50,我们在宽上加上100,设定为151和50,新建完成后,CRTL+V把刚才复制的图层粘贴上去。(图7)


接下来就要对图片进行一些修改了。首先把那块牌子给擦掉。然后选取手的部分,并且用移动工具(工具栏右边那排最上面)把手移动到身体后面,然后用铅笔工具(画笔的弹出框里面有)把表情修改一下,尽量猥琐XD,再在手上添加上如画笔一般的东西。最终包子效果完成。(图8)


接下来选择菜单里的“编辑-〉变换-〉水平反转”把包子翻个身,并且用移动工具移动到画面最左端,用矩形选取工具将包子图层全部选上,并且用白色填充透明部分(画笔工具的弹出框里的油漆桶在透明的地方按一下就行了)。

好了,接下来将图层1隐藏掉并且选中背景层,然后用文字工具(工具栏左边第5个那个T)在适当的地方打上“办证1234567”。注意文字的大小合适就行了。然后把包子图层的眼睛点上,因为之前打字的时候会新建一个文字图层,这个图层在包子的下面,所以因为包子图层右边白色部分的阻挡会看不到“办证”等字。至此,静态修改基本完成,接下来要动态修改了。

动画窗口中,依然先要把时间调整一下,设定为0.1秒,然后复制一贞。选中第二贞,使用移动工具把包子图层中的包子移动到右边画面外,注意只能水平移动最好不要有垂直移动。(图9)


接下来就是最神奇的一步了,选中第二贞按下这个按钮,这个按钮的作用是在两贞之间创立过度关系,使得画面“动”起来,参数里“过渡”就选择“上一贞”,“要添加的贞数”就输入“5”吧,看看效果,第一贞和第二贞之间创立了包子图层从左往右移动的效果了。存储下来看看吧,最终效果如图。



总结一下吧。
1,通过移动图层的方式,可以只使用很少的图层制作就创造出移动的效果,对于减轻工作量非常有用。
2,创立过渡贞可以极大的减轻工作量,尤其是和移动图层配合,更是可以非常方便的创造出移动效果。相信熟悉FLASH的朋友一定都对创立过渡贞这一东西非常熟悉而又喜爱吧。
3,过渡贞数越多,则过渡就越自然,当然消耗的时间和文件的容量也会大增。由于GIF动画和FLASH动画本质上的不同,因此贞数越多容量也就越大,在制作的时候容量问题必须要考虑到。
4,因为IR不具有很强的矢量运算能力,所以过渡应用的范围比起FLASH来说要小得多。只能针对图层的平移、两幅图之间的淡入淡出效果有所过渡,连变形都不行。这就是我第一例为什么要手动修改每一个眼睛图层的道理了。


好了,接下来来一个更加炫的例子来加深下对图层移动的认识,并且稍稍的提及一点PS的知识吧。


第三例,霓虹文字

本例需要用到PHOTOSHOP,所以希望大家能对PS有个认识。不过就算不会用,跟着我一步步来也没关系……[EM34]

首先打开PS,可以看到PS的界面和IR很像,就是左边的工具条有些许不同以及没有下面的动画窗口。具体的我就不介绍了……介绍起来写本书都可以了……OTL

新建一个文件,随意,只要你觉得能放下你打的字就行,我设定为88X31(标准的LINK BANNER大小)。

选用文字工具(工具栏右边那排的那个“T”),然后随便打上些字就行了。最好用比较粗的字体,这样看起来比较明显。我选用的是IMPACT字体。字体以及大小设定都能在最上方的参数栏里设定。结果如图10。


再新建一个文件,大小的话,宽度设定为第一个文件的两倍,高度一样。然后用各种各样的颜色一条一条的填充进去吧。用手画自然不现实,最好的方法是用渐变工具,就是工具栏右边那排上面数下来第5个。有可能是油漆桶,只要右击然后在弹出框里面设定为渐变工具就行了。默认的渐变方式是前景色到背景色,我们需要修改一下。单击一下参数栏的那个渐变框,就会跳出来一个对话框,里面有各种渐变的预设,我们设定为“透明彩虹”(默认位置为第二排倒数第二个)就行了(图11)。


然后,在文件2上多拖拉几次,做出霓虹的效果,最好能保证每条色带的平行(按住SHIFT再拖拉,就只能在以45度为倍数的角度拖拉,可以利用这点)。完成之后如图12。


用选取工具全选文件2,然后CTRL+C复制,再粘贴到文件1里。这时候会自动新建一图层来放置文件2里复制过来的东西,我们手动命名为“霓虹”。因为霓虹图层在文字图层上方,所以文字图层是完全看不见的。我们选中霓虹图层,然后在菜单里选择“图层-〉创建剪贴蒙版”或者直接用快捷键CTRL+G来将霓虹图层向下组编。这时候我们就会惊奇的发现文字显示出来了,并且颜色变成了上层霓虹的颜色。(图13)


接下来按下左下角那个按钮,直接将文件从PS转移到IR,然后接下来的事情就非常好办了,设定时间,复制贞,将“霓虹”图层在第一贞和第二贞内分别移动到最左边和最右边,创建位移过渡。因为在实例二里面已经讲得非常详细了,所以这里就一笔带过了。

最终效果如图。


当然,如果将文字的边框变得闪动,那么霓虹效果就更棒了,如下图。(不过好像非常刺眼……OTL)


容我在这里卖个关子,怎么办到的,大家自己摸索摸索吧。


嗯,总结发言一下。
1,PHOTOSHOP和IMAGEREADY可以说是相当不错的搭档,前者强大的静态图片处理能力以及后者的动态输出能力可以互相弥补,尤其是PS的静态处理对于IR的动态效果的达成来说非常的有用,在PS里处理好每一静态贞然后在IR中将其串为GIF动画是非常方便的。
2,移动图层还是有很多地方可以发掘的,上面的霓虹文字只是其中的一小点而已,大家可以发挥自己的创意来挖掘它的潜能。


好了,就到这里吧,下次有灵感了再更新……OTL
chy - 2005/7/21 8:46:00
我想问一个问题,Adobe Image Ready哪儿有下载?
C君 - 2005/7/21 8:53:00
好像要整个PS下载才有~...
scegg - 2005/7/21 8:53:00
与Photoshop一起得到。
十六月 辉夜 - 2005/7/21 15:53:00
感谢小白哦~很实用的教程呢

我现在的头像就是看了教程后做的
菜鸟刚上阵,出来的效果还过得去吧?
hino - 2005/7/21 18:27:00
辛苦了。。
闭目用反转留睫毛这招的确弓虽。。
不过有一点点小瑕疵。。
小白同学在反转后忘记擦掉双眼皮的线了。。这样一来后果就是在闭上眼睛的时候会出现眼袋。。。=_____,=|||
白井功名 - 2005/7/21 19:47:00
以下引用蒼月之狼在2005-7-21 15:53:22的发言:
感谢小白哦~很实用的教程呢

我现在的头像就是看了教程后做的
菜鸟刚上阵,出来的效果还过得去吧?

呵呵,做得很不错哦。
能让人觉得这篇文章有用我也就满足了。[EM42]

以下引用hino在2005-7-21 18:27:12的发言:
辛苦了。。
闭目用反转留睫毛这招的确弓虽。。
不过有一点点小瑕疵。。
小白同学在反转后忘记擦掉双眼皮的线了。。这样一来后果就是在闭上眼睛的时候会出现眼袋。。。=_____,=|||

懒人想出来的懒办法……[EM34]
呃……因为这个是用来做例子的,所以就没有太过认真地做……OTL



呃,说一句,更新了……[EM34]
不过,我的IR也差不多就到这里了,下次更新……等有了灵感或者有什么没有补完的再说吧……估计短时间内是不会了OTL
Miokii - 2005/7/21 21:17:00
辛苦了~写滴很8错~
8过和我做眨眼滴方法不太一样···
我做一个吧~然后放到头像上。
由于无法再发贴了,所以请关注···(不关注也无所谓啦=—=)
白井功名 - 2005/7/21 21:40:00
以下引用Miokii在2005-7-21 21:17:09的发言:
辛苦了~写滴很8错~
8过和我做眨眼滴方法不太一样···
我做一个吧~然后放到头像上。
由于无法再发贴了,所以请关注···(不关注也无所谓啦=—=)

啊,欢迎欢迎。我也希望可以多一点人讨论ps和ir的心得呢。

另外,我非常感兴趣Miokii作的图片旁边的花边是怎么弄的?说是蒙版,但总不是手动画上去的吧,这工作量也太……OTL [EM34]
03534 - 2005/7/21 22:24:00
楼主的教程的确很实用,而且也很通俗易懂……(我这种新手中的新手也能懂就证明了 -v-b ……)

网上、书本的教程看起来都很难懂的说…………

另,
不久前才发现:原来这个IR装PS时已经装了……[em34]
但是完全不会用…………[em32][em34]于是一直就放在那里发霉(啊!生出蘑菇了 =口=!  )………………

另另,
Adobe Image Ready缩写= AIR …………[em8]


[em8][em8][em8][em8][em8][em8][em8][em8]
白井功名 - 2005/7/21 22:52:00
以下引用03534在2005-7-21 22:24:25的发言:

另另,
Adobe Image Ready缩写= AIR …………[em8]


[em8][em8][em8][em8][em8][em8][em8][em8]

OTL

我以前怎么一直都没注意到-0- [EM34]

美丽的巧合阿[EM42]
fish - 2005/7/22 15:39:00
一般都称它为IR
BTW:在PS里面做好图层后再转到IR里面做动画的,如图
[IMG=upload/KFCFile5164_Snap11.gif]上传文件5164[/IMG]
03534 - 2005/7/22 16:01:00
以下引用fish在2005-7-22 15:39:27的发言:
一般都称它为IR
BTW:在PS里面做好图层后再转到IR里面做动画的,如图
[IMG=upload/KFCFile5164_Snap11.gif]上传文件5164[/IMG]

又是一个巧合??
我看到羽毛了,还是AIR………………
fish - 2005/7/23 3:46:00
羽毛是Photoshop的标志,从PhototshopCS开始
CS以前的Photoshop的标志是是眼睛
BTW:PS6.0的眼睛让人觉得最恐怖
hino - 2005/7/23 9:50:00
以下引用fish在2005-7-23 3:46:54的发言:
BTW:PS6.0的眼睛让人觉得最恐怖
PS6.01古董王道的路人路过。。。。。
白井功名 - 2005/7/23 16:25:00
以下引用fish在2005-7-23 3:46:54的发言:
羽毛是Photoshop的标志,从PhototshopCS开始
CS以前的Photoshop的标志是是眼睛
BTW:PS6.0的眼睛让人觉得最恐怖
[IMG=upload/KFCFile5173_40.jpg]上传文件5173[/IMG]
再恐怖都比这个强……[EM34]
勇气之翼 - 2005/7/23 16:35:00
啊.......好强..........晕ING
fish - 2005/7/23 20:09:00
以下引用白井功名在2005-7-23 16:25:59的发言:
[IMG=upload/KFCFile5173_40.jpg]上传文件5173[/IMG]
再恐怖都比这个强……[EM34]

还好,我现在不用PS 7.0
在用CS2,
不然的话...
Miokii - 2005/7/23 20:15:00
CS滴文字输入8支持狂拼,可素我用别滴很8适应,所以现在还素用7.0(IR用CS),而且我那个7.0汉化滴比CS好滴多···
浮翼续雨 - 2005/7/23 20:18:00
楼主好人
但这个工具在哪里下载?
Miokii - 2005/7/23 20:25:00
下载PS就可以了,IR素PS滴捆绑品
(阿~等全部休息完后就可以连发20多贴好爽···)
fish - 2005/7/24 0:27:00
以下引用浮翼续雨在2005-7-23 20:18:11的发言:
楼主好人
但这个工具在哪里下载?

在各大BT网站上面都有下载的
BTW:从6.0开始,我就没有用过汉化或中文版的PS了 :D
CS也没有用过多少,直接从7.0跳到CS2
Miokii - 2005/7/24 0:29:00
CS2还未入手,用7.0就感觉很8错了···
紗紗 - 2005/7/24 1:23:00
颜色反转啊…………
炽天使的乐师 - 2005/7/24 19:11:00
终于能做自己的图了~~感激!!!
xscy2062 - 2009/9/30 2:58:00
想看看到底怎么制作的~:miffy1: :miffy1:
1
查看完整版本: Adobe Image Ready简易动态头像制作教程