《梦幻西游》电脑版官方论坛

标题: 应要求而作，动画小教程，图文并茂地教你『让背景动起来』 [打印本页]
作者: 羽er紫陌纤尘    时间: 2009-6-15 00:47
标题: 应要求而作，动画小教程，图文并茂地教你『让背景动起来』
初作教程，粗糙之处不许笑
首先，先贴上效果图





喜欢这效果么？那就往下看吧

首先是做背景图，我个人比较喜欢做飞天上的，比较简单嘛  FC的云海风景就是不错的选择



剪切个远山图，图中突兀的地方用修补等工具抹掉


复制图层两次，拖移，拼合成一幅



复制，拼图的目的呢，其实是为了营造出同个图中有两处完全相同的风景


自此，背景图做好了，保存。
接下来是做美化图，因为人物的名字位置也是不变的，所以在这里也一并做上去，做好后保存成PNG格式的图片。



准备工作都做好了，开始做动图。打开GIF软件，先打开美化图，再导入背景图（保证做出来的动图尺寸大小同美化图）



复制相同桢，第1桢，背景图左对齐，第2桢，背景图右对齐，稍作调整，让背景图的两个相同风景的地方分别在第1、2桢中显示出来。



按Shift键选中这两桢，插入过渡桢（红线圈出的那个图标）。这里我插入的是18桢，因为葫芦的WAS资源动画桢数是10，18+2，正好是10的倍数。



背景的移动就此制作完毕，先预览下效果吧


往这移动的背景上添加人物，这我就不多赘述了，会做动染的同学都会。


在做过渡桢前的调整，如果左右对齐的顺序相反，可以做飞向另一方向的效果。



写完了不清楚的同学可以回帖子询问

[ 本帖最后由 羽ル紫陌纤尘 于 2009-6-17 18:20 编辑 ]
作者: 羽er紫陌纤尘    时间: 2009-6-15 00:52
很郁闷地发现，我不能发附件~~   只得一一传到WY博客相册再转过来……然后这发完了我又发现更郁闷的事——后面3张GIF图居然没动吐血。。。
作者: 元原    时间: 2009-6-15 01:28
LZ辛苦了
学习学习
作者: 泪ル潸然而下    时间: 2009-6-15 04:14
我很笨
作者: 冲动的龙龙    时间: 2009-6-15 04:23
超赞的
作者: 幽忧淑琴    时间: 2009-6-15 07:34
效果挺不错的
作者: 幽忧淑琴    时间: 2009-6-15 07:54
博客相册是不能动的吧还是再转转 转到网易相册就能动了
作者: 羽er紫陌纤尘    时间: 2009-6-15 11:01
沉了…自己捞起来
作者: 黑妹野菊花    时间: 2009-6-15 11:23
标题: ~
·好东西啊顶了·
作者: 羽er紫陌纤尘    时间: 2009-6-15 11:37
图区好冷清
作者: 春天的馒头    时间: 2009-6-15 11:58
让我来教作业吧
开始看教程
教不上别打我啊
作者: 春天的馒头    时间: 2009-6-15 12:32
作者: 1018003    时间: 2009-6-15 12:47
顶个   貌似我还不会作图 馒头学的好快 、


图片动的也好快啊
作者: ＇&蒂法/）’    时间: 2009-6-15 13:35
标题: ~~
好漂亮啊~~弱弱地问下，那个demo里面的莲花一样的背景是笔刷嘛、、

也好漂亮
作者: 羽er紫陌纤尘    时间: 2009-6-15 14:20
回14楼，那花是笔刷，然后又用普通笔刷刷了两下。
馒头很好学呢谢谢馒头捧场，不过我现在是手机上网，看不到图
作者: 羽er紫陌纤尘    时间: 2009-6-15 14:28
看回帖上说馒头的图飞得很快…不好意思，我的失误我没提示清楚
帖数越少，动得越快；
背景图越短，动得越慢。
如果是飞行，可以让图动得快一点；如果是做成走路坐船的话，尽量把背景图做得短一点
作者: 羽er紫陌纤尘    时间: 2009-6-15 14:43
看回帖上说馒头的图飞得很快…不好意思，我的失误我没提示清楚
帖数越少，动得越快；
背景图越短，动得越慢。
如果是飞行，可以让图动得快一点；如果是做成走路坐船的话，尽量把背景图做得短一点
作者: Princess糖    时间: 2009-6-15 14:46
教程真精彩我去试试
作者: 琴ぅ宝宝    时间: 2009-6-15 18:38
大爱教程 我也要学
作者: 西瓜圆圆    时间: 2009-6-15 18:39
图是做出来了   不过  那个啥  合适的背景真的好难找   
作者: ℡┽讓愛詠衡    时间: 2009-6-15 19:22
交个作业.背景和馒头的一样
作者: 红颜若水    时间: 2009-6-15 20:25
好象有点难
作者: 羽er紫陌纤尘    时间: 2009-6-16 01:20
原帖由 红颜若水 于 2009-6-15 20:25 发表
好象有点难

不难的，很简单，我都自己摸索出来的。
就是把背景图移动而已。
作者: 小晚安．◎    时间: 2009-6-16 03:37
很好看
作者: yang_875    时间: 2009-6-16 05:48

楼主...你这是什么软件能说下嘛?谢谢
作者: 羽er紫陌纤尘    时间: 2009-6-16 08:15
那软件啊？应该差不多做动染的都有用这个GIF软件，全称是：Ulead GIF Animator 5.0
该软件制作动染的方法请参考空灵之音的教程
作者: 羽er紫陌纤尘    时间: 2009-6-16 08:18
其实PS附带的软件IR也有这过渡的功能的，只是拿IR做动染比较麻烦，优点是可以随时切换回PS处理图象
作者: 羽er紫陌纤尘    时间: 2009-6-16 19:06
原帖由 西瓜圆圆 于 2009-6-15 18:39 发表
图是做出来了   不过  那个啥  合适的背景真的好难找   

我提供下做好的背景图给你们练习和参考
(, 下载次数: 2)
(, 下载次数: 7)
作者: 宝贝疯子    时间: 2009-6-16 22:26
好漂亮、可是我好笨
作者: 魅娃娃    时间: 2009-6-16 22:47
先占位置 等我做好了再交作业  可能会很糟
作者: 羽er紫陌纤尘    时间: 2009-6-17 08:24
有看不明白的地方可以回帖询问。
这图的原理是让背景图有两个相同的地方A、B处，第一帧显示处，第二帖显示处，中间插入的过渡，你可以看成是在拖动背景图的移动。
作者: ↘若ˉ.嗼殤.    时间: 2009-6-17 09:20
超級愛這貼
我現在就去做 愛死了
辛苦樓主
作者: ＊︷幽晴。″    时间: 2009-6-17 13:33
谢谢楼主辛苦了 学会了呢 开心
作者: 羽er紫陌纤尘    时间: 2009-6-17 14:52
学会了交作业哈～
作者: 夏米乐    时间: 2009-6-17 17:45
有张图很有爱，
作者: ＊︷幽晴。″    时间: 2009-6-17 18:08
因为明天要考试 所以赶紧做了张反正是动了..好看不好看就这样了.
谢谢老师.改天会交个好看的..
不是很生硬吧...还好吧..
反正是做出来了..先复习去了 明天再来交个比较说的过去的作业..
老师再见.

[ 本帖最后由 ＊︷幽晴。″ 于 2009-6-17 18:09 编辑 ]
作者: 羽er紫陌纤尘    时间: 2009-6-17 18:17
原帖由 ＊︷幽晴。″ 于 2009-6-17 18:08 发表
因为明天要考试 所以赶紧做了张反正是动了..好看不好看就这样了.
谢谢老师.改天会交个好看的..
不是很生硬吧...还好吧..http://img459.ph.126.net/LharjQ7p5mR8-IQUVpZELQ==/251666776677 ...

做得不错，不过背景不大合适。
这是我用同个背景做的：


[ 本帖最后由 羽ル紫陌纤尘 于 2009-6-17 18:18 编辑 ]
作者: 63023506    时间: 2009-6-17 18:55
谢谢分享，我喜欢，虽然我不hui 会
作者: kuaileyz    时间: 2009-6-18 05:46
真的好羡慕 好想学习 刚学会基本的动态图 ！看了这编教程马上行动起来 才发现 学不来 如用什么软件处理 怎么把两图合成一个图  不过 要是能像
【献给菜鸟蛋的动态美化合成图教程(终极版本！)】暮凝烟出品   
http://xyq.netease.com/viewthread.php?tid=1064540
那样就容易上手了 不知道LZ能不能花点时间弄个更详细的让菜鸟学习学习   
不过我知道大虾会很忙啦 那能不能加下我QQ312693751 我学习的过程中不懂就问问大虾您
  努力码这么多字 要相信偶的诚意呀

[ 本帖最后由 kuaileyz 于 2009-6-18 05:53 编辑 ]
作者: ＇尕允ζ．    时间: 2009-6-18 07:45
  这个教程不错
作者: 羽er紫陌纤尘    时间: 2009-6-18 08:13
回39楼，做背景图的那个是PS，你可以复制图层，然后拖动复制的图层进行拼图；或者用仿制图章工具…总之能把背景图弄出两个相同的地方就OK。你可以参考我贴出的两张背景例图。
教程很难懂么？我以为我写得很详细了，每个步骤都有配图写了
作者: 记忆BE1腐朽·    时间: 2009-6-18 18:57
收藏了。慢慢看 西西。






      
   
                                                                        
作者: 元原    时间: 2009-6-18 20:31
   我来

[ 本帖最后由 元原 于 2009-6-18 20:32 编辑 ]
作者: dragonboy    时间: 2009-6-18 22:53
LZ你用的GIF软件是什么，可以发上来吗
作者: 羽er紫陌纤尘    时间: 2009-6-19 00:41
原帖由 dragonboy 于 2009-6-18 22:53 发表
LZ你用的GIF软件是什么，可以发上来吗

抱歉  我不知道下载地址 那软件也是朋友传给我的
作者: 失落の海    时间: 2009-6-19 09:49
忘了怎么转换成视频
作者: dragonboy    时间: 2009-6-20 09:47
老师，做美化图能不能再详细一点 不会用PS做那美化图
作者: 羽er紫陌纤尘    时间: 2009-6-20 15:02
做美化那部分你恐怕得去找别人了我美化功底差劲的
我只能说做好的美化图要保存成PNG格式，可以保留透明部分。如果是保存成常用的JPG的话，图中透明部分会自动转换成白色
作者: 悠U雪o°    时间: 2009-6-20 15:57
我拼不出两个相同的背景
作者: ＊Smilèミ笨    时间: 2009-6-20 16:33
LZ我喜欢你的签名
作者: 猪头Rain    时间: 2009-6-20 22:16
我学不会...我不懂做有两处相同的图,我不会做帧那里简单的来说,我不会
作者: 羽er紫陌纤尘    时间: 2009-6-20 22:21
可以参考下我做的那张背景图，先从简单画面的图开始，比如BJ那里的雪景，一些场景的草地，庭院的花草等等，做熟练了再用图案复杂的做。
作者: ＊Smilèミ笨    时间: 2009-6-22 13:57
"复制相同桢，第1桢，背景图左对齐，第2桢，背景图右对齐"
LZ这个左对齐,右对齐是什么意思啊?
作者: 羽er紫陌纤尘    时间: 2009-6-22 17:56
原帖由 ＊Smilèミ笨 于 2009-6-22 13:57 发表
"复制相同桢，第1桢，背景图左对齐，第2桢，背景图右对齐"
LZ这个左对齐,右对齐是什么意思啊?

这么说吧，不是制作出有两处相同风景的背景图么？姑且称左边的为A处，右边的为B处。
第一桢，左对齐，则最左边的A处为可见；第2桢，右对齐，则右边的B处可见。
作者: 1018003    时间: 2009-6-22 18:09
看好多次 还是只有羡慕的份
作者: Ξ：Zack＇    时间: 2009-6-22 20:38
提示: 该帖被管理员或版主屏蔽
作者: 我们的、歌。    时间: 2009-6-22 21:43
咋 办   顶还是不顶?


   不顶吧

都已经说出来了


算了顶吧!


              在问下 那个任务素材! 怎么弄成的?
作者: 顔尛ヽ    时间: 2009-6-25 12:05
我完全没看懂，  那个剪切我就不会。
作者: 多多益善。    时间: 2009-6-25 13:28
努力学习中
作者: 罗纳猪耳朵    时间: 2009-6-28 20:29
怎样把人物放在剑上面？
作者: 吖恋恋    时间: 2009-7-12 20:37

我也来交作业..
怎么传过来就不动了
作者: ⺌咪米糊⺌    时间: 2009-7-12 21:35
有时间来学
作者: 278455187    时间: 2009-7-12 22:18
  等等交作业去
作者: 小姳    时间: 2009-7-16 00:38
看了几遍还是不懂。。。
作者: 莫忧    时间: 2009-7-17 10:08
拼图那里不太懂`  详细点?
作者: 莫忧    时间: 2009-7-18 15:13
作者: mazhile    时间: 2009-7-18 17:15
提示: 作者被禁止或删除 内容自动屏蔽
作者: 百命猫妖妖    时间: 2009-7-25 22:17
来顶了这个真的要学学
作者: ēヽo承诺ジo    时间: 2009-7-26 19:43
我要学我要学

晚上就研究

不过感觉不是那么简单那
作者: 夕ご不悔妮儿    时间: 2009-8-21 15:11
好想学，可是好像看不懂。
作者: ┊白礼服丶    时间: 2010-8-28 11:59

哎,~背景怎么玩?
2个人物的动态一个7祯 一个9祯~最小公倍数是63祯~
..毁在了背景.求那神马手帮助..
还有,被老婆教训说:"我觉得吧,你的图背景都太朴素了"
作者: 、summer    时间: 2010-8-28 18:46
第一次见到这种教程咧
坐下慢慢学
作者: 羽er紫陌纤尘    时间: 2010-8-31 19:05
原帖由 ┊白礼服丶 于 2010-8-28 11:59 发表

哎,~背景怎么玩?
2个人物的动态一个7祯 一个9祯~最小公倍数是63祯~
..毁在了背景.求那神马手帮助..
还有,被老婆教训说:"我觉得吧,你 ...

祯数的问题，你可以考虑删掉对人物影响较小的一两祯。
背景……背景你没拼好，不够连贯，没有一直飞的感觉。
作者: ︵me′媚眸の    时间: 2010-8-31 20:19
表示你的签名雷到我
作者: 希若绫绡    时间: 2010-8-31 22:24
这个教程好，感觉跟放电影似的
作者: 孤单残影    时间: 2010-9-1 14:04
我找到灵感了
作者: 羽er紫陌纤尘    时间: 2010-9-10 12:41
原帖由 孤单残影 于 2010-9-1 14:04 发表
我找到灵感了

什么灵感？
运用这个原理，可以做出在天上飞、在地上跑、在水上飘的连续动画，当然，还有个想法：人站立着，前面可以小河流水哗啦啦流过
作者: (ⅱ)·陌離ζ    时间: 2010-9-10 14:20
学习了。、、
作者: ＿墨芷凉°    时间: 2010-9-11 01:11
好东西。。学习中
作者: 春来闻人暖τ    时间: 2010-9-11 11:52
哎。只有看看的份。
作者: 淡≈芯侑琳    时间: 2010-9-12 19:42
占楼，我先学会了，再交作业
作者: 周盛强    时间: 2010-10-11 19:12
看了半天硬是没看懂怎么做图、。。。。。。我什么时候这么呆了
作者: ：皊煜琰°    时间: 2010-10-16 21:01
学习了学校了……。
作者: °妍某七︷。    时间: 2010-10-17 00:22
看明白了，试试去。
作者: °妍某七︷。    时间: 2010-10-17 02:18


弄懂了。
不过背景好像灰常糟糕- -。
作者: ら｀卡玫尔。    时间: 2010-10-17 02:58
顶下
作者: zhang_hua-jun    时间: 2010-10-17 03:40
半走了
作者: zhang_hua-jun    时间: 2010-10-17 09:33
你地四张效果图的飞燕改成骨头  侠客叫 麎ォ倚驀葒樓   骨头叫  黛兮ぉ雅 做好叮咚我
作者: 过境迁才懂。    时间: 2010-10-17 10:53
不懂，我比较笨
作者: 121346106    时间: 2010-11-27 11:00
等下交作业··LZ麻烦告诉怎么交作业·把··刚来报道
作者: 121346106    时间: 2010-11-27 12:07
交作业了， 有些地方出了点错,LZ帮我看看改怎么做 。
作者: 8207171    时间: 2010-12-4 22:40
标题: 回复 1# 的帖子
背景做好后美化是怎么弄的啊……
作者: 金阁    时间: 2010-12-5 10:16
又学一招
作者: 肆无忌惮。    时间: 2010-12-5 10:17
顶一个   HOHOHO
作者: 〃瑶雪若曦︷    时间: 2010-12-7 22:16
好喜欢窝。留住学习
作者: 倾洛。    时间: 2010-12-8 17:06
LZ辛苦了
学习学习
作者: ο⌒＿⌒ο    时间: 2010-12-8 17:37
要坐骑资源
作者: 杏眸兮妤荷．    时间: 2011-2-1 18:39
支持教程.
作者: ♂冰敏泪♀    时间: 2011-2-1 18:43
不错
作者: 小梦熊宝宝    时间: 2011-2-4 13:52
不会



欢迎光临 《梦幻西游》电脑版官方论坛 (http://xyq.netease.com/) Powered by Discuz! X3.3