phoenixwws 发表于 2010-1-16 16:31

【原创】想让自己的个性签名和大头像都“动”起来吗?动态GIF制

动态GIF制作教学帖,献给喜欢个性签名和大头像的坛友们让你们都“动”起来


       这是我第一次发教学帖子,之所以发这个帖子是因为最近论坛升级改版后大家都在关心自己的大头像和签名,想做的个性一点,动感十足。看到好多坛友们对自己动手做动态GIF文件不太了解,我就把自己的一些经验分享给大家!
    由于本人不是专业人士,所以难免写出的东西未必让各位看官满意,但我真的是用心做的。 花了本人一整天加一晚上的时间,不足之处也请大家谅解!重在分享!费话不说进入正题。

一、所需的6个软件及用途介绍(这几个软件大家可以看局体情况来决定使用那个,不用全部下载)

1,Fraps 这个就不用说了,截取视频做素材的利器
2,GIFmovgear它可以把截取的视频直接转换成GIF动画,不过效果不太好。如果对效果不是太在意,那么它就是你所需要的了。
3,GomPlayer 是个播放器,但是它有一个很强大的功能就是可以连续的截图,并保存为JPG文件。你可以把任意时间轴的影像截取下来,还可设定连续截多少帧。
4,Adobe ImageReady CS3 这个大家应该很熟悉,就是和PHTOSHOP捆绑在一起的那个软件,它也是做动画文件的一个软件。用处就是把GomPlayer上截取下来 的JPG文件在这里直接生成帧和图层。下面会详细说怎么做,在这就不详细说明了。如果是做一个动态GIF文件那么Adobe ImageReady就可以做到了。如果是想把两个动态的GIF拼合在一起全要动起来,那么就要使用下面这个软件了。
5,Adobe Fireworks CS3 拼合GIF文件的强大软件,有了它我们会省不少力气的。
6,Xara 3D 6.0 它是做3D动态文字的软件,使用非常简单!

二、Fraps及 GIFmovgear实战篇

经过以上的介绍大家对这些软件有了一个大概的了解,下面我配合图来给大家一一道来。
2-1 Fraps 点击运行后,打开游戏,当想保存视频的时候按F9,想结束就再次按F9。这样游戏中的视频就保存下来了。保存的格式是AVI的,在分辨率1440*900下文件会很大10几秒的视频都会上G,大家在使用前确信你的保存路径所在盘有足够的空间。
在这里提醒大家最好选择生成一半视频尺寸这个选项
如图2-1所示中红圈的地方
http://photo.mipang.com/uploads/image/100114/1688664_1006884_c98f3655c2_o.jpg

2-2打开GIFmovgear
2-2-1点击 “文件”—“打开”—选择你刚才保存下来的视频文件路径,选择后----点击“打开”。
GIFmovgear只能打开AVI格式的视频文件并且自动生成帧。其它视频格式都不支持,这一点大家要注意!
如图2-2所示
http://photo.mipang.com/uploads/image/100115/1689170_1006884_0ab004aaea.jpg
2-2-2 这时候生成的动画帧数较多,我们需要减少帧数和色彩数目,目的只有一个就是使最终生成的GIF文件既播放流畅而占用空间又不能太大。
PS:因为论坛对动态头像是有帧数和大小要求的。不然是上传不了的。
具体操作:
第一步:为动画减肥
点击 动画菜单→减少体积(减少帧数)→弹出“剪切帧”窗口 如图2-2-2所示PS:由于软件是网友汉化的所以各种版本命令并不统一,有的版本叫做“剪切帧”大家只要记住弹出这个窗口就对了。在这里我们可以看到当前动画的总帧数和剪切后的帧数。选择隔2帧剪切1帧,或者是隔3帧剪切1帧,大家根据自己需要来操作吧!
如图2-2-2所示
http://photo.mipang.com/uploads/image/100115/1689169_1006884_f87a7d168f.jpg

第二步:减少发色数

点击图中红圈所示按钮就可以找开“减少颜色”对话框在这里就可以设定发色数了共有256,128,64,32,16,8几种选择。图像比较复杂的设成256或者128就可以了。
如图2-2-2-1所示
http://photo.mipang.com/uploads/image/100115/1689167_1006884_74d8d81c95.jpg
第三步就是把优化后动画另存为GIF动画
点击“文件”菜单下的“另存为” 弹出窗口 在另存为风格项里选择动画,点保存。
因为不能保证大家用的是同一个版本,所以命令有可能会有小的出入。大家只要看看最后生成的是动画GIF就可以了。
如图2-2-2-2所示
http://photo.mipang.com/uploads/image/100115/1689168_1006884_bb946c8ae4.jpg
上面的方法是从AVI直接用GIFmovgear来转换成GIF,操作比较简单,对于色彩不多,帧数不多的素材来说用GIFmovgear就可以了。如果视频素材帧数过多,分辨率较大,而且自己对清晰度要求比较高,那么就要用另外的2个软件了。它们就是GomPlayer还有Adobe ImageReady CS3。有兴趣的继续往下看!
三,GomPlayer及Adobe ImageReady CS3实战篇
3-1,GomPlayer在上面已经介绍给大家了它的主要职责就是截图介面如下
http://photo.mipang.com/uploads/image/100115/1689171_1006884_e0684b0c9b.jpg
打开GomPlayer后按 快捷键 CTRL+G 就打开了高级截图对话框,在这可以设置图片保存格式,保存品质,连续截图数(实际上就是我们所需要的帧了,我们主要就是用它这个功能,我一般设置成120,好像有点大,实际上是为了以后编辑时有更大的回旋余地,因为它是素材还是帧多一些好点儿。大家也可以根据需要自由设定,最高999张。这个介面打开了先不要关闭,在截图的时候还要用呢。
这里提醒大家就好把输出截图的路径单独设一个文件夹,这个文件夹里不要放其它和此次工作无关图片,为什么现在先不说。呵呵。改变输出路径点“更改图片文件夹”按钮就好 。
当设置好后就可以播放你用Fraps抓取的视频文件了,当出现你要的画面时快速点击 保存连续画面 按钮 。完成后 点击“打开图片文件夹”就看到我们刚刚保存的截图了,共120张连续的JPG图片。
3-2
大家可能要问了,怎么变成动画呢?别急,下面我们用Adobe ImageReady CS3来帮我们实现目的。
第一步:导入素材
打开Adobe ImageReady CS3,之后点击文件
如图3-2所示
http://photo.mipang.com/uploads/image/100115/1689176_1006884_3978e449fa.jpg

选择“导入”→选择“作为帧的文件夹”(也就是GomPlayer输出图片所在文件夹)
之后你会看到所有的图片自动生成图层和动画帧。现在明白为什么我不让大家在这里放其它无关图片的原因所在
第二步:剪切帧、修改图像大小,减小体积。为什么要这样做呢?
因为论坛对头像和外链图片这几个方面有限制,而且提供图床的网站对图片大小是有限制的。比如限制最大不能超过4M等等了。所以本环节非常重要。下面分别说明操作。
3-2-1剪切帧

如图3-2-1所示
http://photo.mipang.com/uploads/image/100115/1689172_1006884_2cd03aa65c.jpg
在这里选择要删除的帧,比如想每2帧删除1帧那么按住CTRL后依次选择3,6,9,12。。。。。。都选上后点击图中红箭头位置,从弹出的菜单里选择删除帧就可以了,如果想每3帧删除1帧,就是依次选择4,8,12,16,20。。。。。道理是一样的。(还有一点要提醒大家如果感觉有点麻烦的话,也可以先生成GIF文件,而后在GIFmovgear里编辑帧数,参考2-2-2图所示。大家灵活掌握吧)咱们3DM论坛头像好象只要帧数在40帧以内,大小500K以内就可以,我最后剪辑成了31帧,大小是470K,以上是友情提示,并不代表是真正的标准。

3-2-2修改图像大小也就是分辨率
如图3-2-2
http://photo.mipang.com/uploads/image/100115/1689173_1006884_34879b7a6c.jpg
操作方法:选择“图像”菜单中“图像大小”命令弹出对话框,在这里就可以在宽度和高度来自由设定了。以3DM论坛要求头像大概是119*221,所以我就设成这样了。大家根据情况自由把握吧!
在这里说一下,如果要打上文字的话,让文字始终可见也简单。
看下面的图

http://photo.mipang.com/uploads/image/100115/1689189_1006884_38b65ac9e9_o.jpg


点选最上面的图层,本例中是图层31,之后点击快捷栏中的T图标,在想插入文字的地方点鼠标“左键”,光标就变为我们非常熟悉的 ∣ ,这时候就可以输入你要的文字了,输入完成后直接按小键盘的回车键就行了。非常简单在此就不多说了。
在此只提醒一点:最上面的文字层的眼睛要永远保持是开启状态,这样才能使在每一帧都能显示你编辑的文字!现在可以预览下了,按图3-2-3中红圈所示的按钮就可以了
图3-2-3
http://photo.mipang.com/uploads/image/100115/1689174_1006884_461debcf78.jpg
3-2-4保存
点击“文件”菜单里的“存储优化结果”
完成后的最终GIF文件:
http://photo.mipang.com/uploads/image/100113/1687580_1006884_ef74c669c2_o.gif

现在是不是又把贪婪的目光投向了签名了?比如我的签名效果。那么往下看吧。
四,拼接2个或者多个GIF动画最终成为一个单一的GIF文件。画中画也是可以的噢。哈哈!
所需软件:Adobe Fireworks CS3
操作步骤
4-1打开Adobe Fireworks CS3,比如我想把下面两个分辨率是320*200的GIF拼接在一起那么我要建一个宽为640高为200的文件。
http://photo.mipang.com/uploads/image/091206/1653022_1006884_5cd42e095c_o.gif            http://photo.mipang.com/uploads/image/091206/1653021_1006884_5a681ad81c_o.gif

如图4-1所示点文件---新建 ,弹出对话框
如图4-1所示
http://photo.mipang.com/uploads/image/100115/1689177_1006884_70118264e2.jpg

对了在此提醒各位:拼接两个GIF要保证这两个文件的帧数要一致。切记!!!
4-2把两个GIF文件分别导入到新建的这个文件里面。
如图4-2所示
http://photo.mipang.com/uploads/image/100115/1689184_1006884_49c87394a0.jpg
具体步骤是:
点击“文件”菜单--------选择“导入”,点选后,大家会看到光标变成了┍ 这时把光标停在画布的左上角(图4-2所示A点),达到完全重合就可以了,之后按住鼠标左键不放向右下角拖拽,当虚线框和画布的下边线重合了就可以松开左键了(图4-2所示B点位置),这时第一个GIF文件就成功导入了。
如图4-2-1
http://photo.mipang.com/uploads/image/100115/1689178_1006884_bf2f6ac478.jpg

4-2-2
导入第二个GIF文件,步骤和上面的一样,只是插入点和结束点有点变化
如图4-2-2所示
http://photo.mipang.com/uploads/image/100115/1689179_1006884_04f5545337.jpg
最终效果如图4-2-3所示
http://photo.mipang.com/uploads/image/100115/1689180_1006884_c4ed222b8a.jpg

按播放键看看怎么样,图中红圈所示按键
http://photo.mipang.com/uploads/image/100115/1689182_1006884_8278711097.jpg

如果满意,就可生成最后的GIF了。步骤如下
点击“文件”菜单-------“另存为”(在另存为类型里注意要选择“动画GIF),先别急按保存键,先点“选项”从弹出的窗口中按红圈所示修改即可,调色板项选择“接近网页最合适”之后下面的色彩数一栏才可编辑,这里我选128色,点确定,回到另存为窗口点“保存”。(上面的设置都是为了最终生成的GIF文件更便于在网络上播放,满足“体积小,播放速度快,清晰度高几个要求。大家可以根据具体情况灵活设定)如图4-2-4所示
http://photo.mipang.com/uploads/image/100115/1689183_1006884_00c7a7efb8.jpg
最终效果如下:
http://photo.mipang.com/uploads/image/100114/1688800_1006884_a9bc73ec29_o.gif





五,动态3D文字制作

所需软件:Xara 3D 6.0
打开Xara 3D 6.0
5-1点击Aa图标,弹出文字选项窗口。这时按“退格键”就可以消去原来的文字,之后就是打字了,打上你要字点确定。
如图5-1所示
http://photo.mipang.com/uploads/image/100115/1689185_1006884_1adf21dea7.jpg
5-2下面大家依次点击介面右侧的一排按钮,颜色选项,文字挤压选项,等等。注意一点就是在阴影选项里我建议把阴影前面的钩取消,不然最后在和GIF图合并的时候会出现非常明显的黑色阴影。
如图5-2所示
http://photo.mipang.com/uploads/image/100115/1689186_1006884_bd544ae4d5.jpg
5-3在动画选项里可以设定帧数,风格 里可设定动作花样,上面的红圈是预览按键,大家可以看看动态的效果,如果满意就保存。
如图5-3所示
http://photo.mipang.com/uploads/image/100115/1689187_1006884_674d5a42d2.jpg

5-4正确的保存方法如下:
如图5-4所示
http://photo.mipang.com/uploads/image/100115/1689188_1006884_027feac1e7_o.jpg


如果想把动态3D文字放到自己的GIF里面那么就参考
“四,拼接2个GIF动画最终成为一个单一的GIF文件”章节里的相关内容来做,操作大同小异。
至此,就全部完成了。

编辑这个帧子真是费了很多心血,也希望大家看完了多回复也是为了更多的人能够看到,也是对在下的一点鼓励。在这里先谢了



相关软件下载链接说明:由于Adobe ImageReady CS3和Adobe Fireworks CS3 两款软件比较大并且可以在网上很容易找到下载,所以就不在这里提供下载了。只提供其它4个软件,我已经打包到QQ中转了。下面是链接地址:

115网盘:
动态GIF制作教学帖相关软件.rar


下面是传送门想进来的就来吧:
http://3dmgame.chnren.com/bbs/templates/default/images/digest1.gif实况2010绿茵传奇精采进球与搞笑视频!!!绝对原创!!12月5日更新13个视频~~~~

IronMartYn 发表于 2010-1-16 17:23

非常好

学习了,以前一直不会制作gif

感谢LZ分享自己的经验

evalyy 发表于 2010-1-16 17:37

教程贴要支持~

fangwenqing 发表于 2010-1-16 19:48

我对这种帖子还加亮彻底无语!!!

phoenixwws 发表于 2010-1-16 20:10

我对这种帖子还加亮彻底无语!!!
fangwenqing 发表于 2010/1/16 19:48:00http://3dmgame.chnren.com/bbs/images/common/back.gif

加亮怎么了? 有什么问题吗?你的意思是不配了?
有什么不对你说出来?

ericxp628 发表于 2010-1-16 20:47

楼主写教程辛苦了. =3= 我还是比较喜欢坐享其成. 用别人的. XD

饼干_ 发表于 2010-1-16 21:48

很好
要是都动起来地话 我512内存看网页就更慢了

jidatui 发表于 2010-1-16 22:27

楼主写得很好啊,我有空试试,让游戏里的人物动起来。

phoenixwws 发表于 2010-1-17 14:02

很好
要是都动起来地话 我512内存看网页就更慢了
饼干_ 发表于 2010/1/16 21:48:00http://3dmgame.chnren.com/bbs/images/common/back.gif

呵呵。其实也不见得就应用在头像和签名啊。别处也能用到啊。
在说了,既使有影响也是对打开网页速度稍微有点影响。如果你的带宽够大的话,这个问题可以忽略了。

下面是传送门想进的就来吧:
你也想让头像和签名都动起来吗?点我直接把你传送过去。嘿嘿!
http://3dmgame.chnren.com/bbs/templates/default/images/digest1.gif实况2010绿茵传奇精采进球与搞笑视频!!!绝对原创!!12月5日更新13个视频~~~~

a1982a1023 发表于 2010-1-17 15:09

好帖啊谢楼主 学习了

fdsrewgfg 发表于 2010-1-17 15:09

学习了,回去自己做个

linhanlai 发表于 2010-1-19 15:19

呵呵 其实就是
介绍 如何制作自己的GIF动态图

呵呵 懒人党来说 网上直接找好看的动态图 就OK
PS:我不懒

清水长流 发表于 2010-1-19 22:40

不错,难得非常详细,还体贴的提供了工具下载

Fleqin 发表于 2010-1-20 03:15

留脚…学习学习…

peng1987217 发表于 2010-1-20 11:51

学习了 支持

hxxt3 发表于 2010-1-20 13:01

制作的很好啊,受教了,鄙视说不配加亮的小人,有本事自己也弄个来看看啊,支持楼主!

phoenixwws 发表于 2010-1-27 15:59

沉的真快,顶上去

DOS3 发表于 2010-1-27 18:30

努力学习中

cftheone 发表于 2010-2-3 00:24

写得很好,感谢楼主分享。

这贴需要先收藏,然后再慢慢研究。

最后的问候 发表于 2010-2-20 15:38

本来是看视频.然后传送到了这里..谢谢分享.对于四楼那种人.我只能无语.有能耐你也写一个啊.

苍岚0083 发表于 2010-3-26 09:55

收藏了…慢慢研究~谢啦

fsdahai123 发表于 2010-3-26 11:31

这帖子不加亮才没天理,说加亮无语的散一边去,支持LZ

侠盗猎男 发表于 2010-4-4 21:46

下载地址都给了!。谢谢啊!

adonisevr 发表于 2010-4-4 23:13

受教了

Holy_Wood 发表于 2010-4-5 00:51

我头像怎么做GIF?

qq529822078 发表于 2010-4-5 08:35

好帖必须顶

naliaaa 发表于 2010-4-5 13:56

主要是一个ImageReady 。

至于截图,很多软件都可以做到,并不是必须用楼主推荐。

那个GIFMOVGEAR第一次听说,好像蛮好用的。

gogosex 发表于 2010-5-13 10:55

很好很技术~~~我觉的困了~~

kalayakala 发表于 2010-5-13 11:07

对于懒人来说,太麻烦了,有没有东一下鼠标就OK的

proy1987 发表于 2010-5-13 11:28

貌似挺好的方法哦
學習學習
页: [1] 2
查看完整版本: 【原创】想让自己的个性签名和大头像都“动”起来吗?动态GIF制作教程!