前端必会技能-gif动画图片制作

标签: flash相关 ps相关 flash gif photoshop | 发表时间:2013-01-15 18:40 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2924

一、大雾,起……

//zxx: 标题没有任何意思,当然,本作选入中学语文教科书另当别论

今天微博上晒支付宝年支付的人爆棚,看着自己可怜巴巴的那点支出,实在不好意思拿出来;尤其对比 @老赵 10万+的支出。

除了这个,我还对活动页面上右上角,动啊动的效果感兴趣:
支付宝年度壮胆活动动画效果截图

职业病——脑子立马反应是:如果我来实现这个效果,考虑到是针对桌面设备,从性能以及兼容性角度权衡,会制作gif动画图片实现。firebug瞅瞅,啊拉,原来也是用的gif动画图片。又想到数日未更新博客,要不,就讲讲如何制作gif动画,毕竟这是前端人员必备的基础技能!

二、flash与gif动画图片制作

flash君,搞咩纳塞,冷落你这么久,今天终于可以护你一回了。
flash软件圣光开启

双击flash,圣光乍现,亮瞎双眼……

flash软件适合制作有规律的运动轨迹动画效果,如果gif动画就是几个静态帧——转photoshop吧,没必要高射炮打蚊子——大材小用。一般而言,web中的gif效果都是比较简单的,一般都是使用PS搞定,因此,这里的介绍比较简单(我就偷懒少截两个图啦~~

比方说制作那个logo超级马里奥跳啊跳的效果。//zxx: 需要一定flash基础,没有接触者直接一下段

我表示我没有那几个logo的素材,我去自己项目中找了找,有银行们的logo,就代替演示吧!

  1. 导入(拖入或文件→导入到舞台或库)
  2. 舞台大小限定(右键空白舞台→文档属性→舞台大小 截图偷懒),这一步也可以最后执行
  3. 四张图片转换成元件(右键舞台图片→转换成元件→任意命名的影片剪辑 截图偷懒)
  4. 再新建3个层,四个元件分散到四个层中
    时间轴四个层 张鑫旭-鑫空间-鑫生活
  5. 排排好,底对齐(全选→对齐面板→底对齐等)
    flash对齐
  6. 动画搞起(新建关键帧,创建传统补间什么的),时间轴面板截图如下:
    时间轴面板截图 张鑫旭-鑫空间-鑫生活
  7. 大功告成,导出就可以哈!(文件→导出→导出影片→选择gif动画)
    flash导出gif图像 张鑫旭-鑫空间-鑫生活

效果预览:
最后导出的gif动画效果就是下图:
银行logo超级玛丽效果

fla源文件右键这里下载: logo-jump.fla

三、photoshop制作gif动画

本例子以那个会动的箭头示意。

  1. 打开一定版本的photoshop。
  2. 箭头图片拖进去,带背景色——因为有投影效果。
  3. 一定PS处理,将动画部分与背景色分离,如下截图:
    PS图层处理
  4. 分析动画,总共有5个停顿点,右上→左下→右上→左下→恢复右上。于是我们啪啪啪啪再复制四个图层,将图层按照移到对应的左下角或右上角,如下截图:
    动画停顿点与图层 张鑫旭-鑫空间-鑫生活
  5. 此时,打开动画(时间轴)面板,会看到对应的几个图层:
    动画(时间轴)面板与对应图层 张鑫旭-鑫空间-鑫生活
  6. 确定工作区域,也就是一个动画循环所用的时候。因为1秒30帧,大致我们这个gif一个循环1.5秒,因此,我们拖动下图所示(默认从工作区最右侧拖出来)的位置:
    确定工作区域大小 动画时长 张鑫旭-鑫空间-鑫生活
  7. 现在对每个图层时间轴的起始位置进行控制。拖动每个图层条条的起始与终止位置。
    每层元素的起始与终止位置 张鑫旭-鑫空间-鑫生活

    一直到类似下面效果,不必太精准:
    起始与终止位置控制全部效果 张鑫旭-鑫空间-鑫生活

  8. 由于当前gif动画时间总长短,间隔也很短,因此,为了精确控制,我们需要增加显示比例,拖下图所示的条条,放大时间轴比例:
    拖动滑块控制比例 张鑫旭-鑫空间-鑫生活

    缩放比例为刚才工作区域结束位置正好在时间轴面板的结束位置为准。现在我们可以精确拖动,确保每个时间段的宽度是一样的!
    缩放比例控制后的面板

  9. 我们可以点击左下的▶模样的按钮预览,如果OK,文件→存储为web所用格式,然后设置动画循环为永远(面板右下位置),如下图示意:
    gif图片保存时候的循环设置
    其他就是平常web图片的常规设置,你随意。
  10. 保存,结束!

上面演示的最终效果就是下面这个:
我的账单有话说

PSD源文件下载点击这里: attention.psd

四、结束语

最近有冲动想买个绘图板,闲暇之余画个漫画什么的?恩,先冷静一段时间,如果还想买的话就买吧。或者诸位谁有二手的绘图板可以转让的,我愿意接受。低档次,初学者入门级的,几百块钱的货就可以了,先谢谢啦!

感谢阅读!

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2924

(本篇完)

有话要说,点击 这里发表评论。

相关 [前端 技能 gif] 推荐:

前端必会技能-gif动画图片制作

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2924. //zxx: 标题没有任何意思,当然,本作选入中学语文教科书另当别论. 今天微博上晒支付宝年支付的人爆棚,看着自己可怜巴巴的那点支出,实在不好意思拿出来;尤其对比 @老赵 10万+的支出. 除了这个,我还对活动页面上右上角,动啊动的效果感兴趣:.

为什么前端监控要用 GIF 打点

- - IT瘾-tuicool
为什么前端监控要用GIF打点?. 我们知道,目前主流的前端监控(百度统计/友盟/谷歌统计)都在用GIF进行打点. 但是,为什么这些系统都会使用GIF,难道是因为没有其他的解决方案吗. 所谓的前端监控,其实是在满足一定条件后,由Web页面将用户信息(UA/鼠标点击位置/页面报错/停留时长/etc)上报给服务器的过程.

【GIF】 Davidope超炫的GIF作品

- 浩 - 廉清波
这些让人看了头晕的 GIF 动画出自设计师 Davidope之手. dvdp 是两家设计工作室的创意总监以及老板,他说自己喜欢生活在危险中,因为他一天要喝掉两公升的可乐并抽掉两包烟,进来看看,一起头晕吧. 新鲜提示:如果你喜欢连战的这篇文章,请点击文章底部的 “推荐” 或 “引用” 按钮把文章收藏到自己的博客.

GIF vs APNG vs WebP

- - JayXon
GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年. (这就是为什么 GIF 文件头的 magic number 是 GIF89a). APNG 相对新一些,是 Mozilla 在 2004 年推出的,十几年的科技进步是不容小觑的,所以 APNG相对于 GIF 的优势十分明显,后面会分析.

周末gif福利08.27

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/27/weekly-gifs-2/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

周末gif福利08.28

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/28/weekly-gifs-3/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

每周GIF福利08.21

- Kindy - FeedzShare
来自: 热豆腐 - FeedzShare  . 发布时间:2011年08月21日,  已有 2 人推荐. 热豆腐计划推出周末福利计划,将会挑选一些好玩的动态gif图分享给大家. 由于动态图比较大,加载可能有点慢,可以先打开然后干点别的,一会儿再过来看,很欢乐的哦~. 猛击查看原文:http://www.redoufu.com/2011/08/21/weekly-gifs/.

周末gif福利09.11

- Lionheart - 热豆腐
09年6月~10年1月图宴礼包(new!). 猛击查看原文:http://www.redoufu.com/2011/09/11/gif-collection-3/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

周末gif福利09.18

- kxxoling - 热豆腐
09年6月~10年1月图宴礼包(new!). 猛击查看原文:http://www.redoufu.com/2011/09/18/gif-collection-6/. 热豆腐Copyright © 2009-2011 每天的视觉盛宴. 新浪围脖:http://t.sina.com/redoufu 邮箱:nicidoggy囧qq.com(把'囧'替换成@) ).