国产动画音乐分享组

详解在微信推送做GIF动画的基本理念|get技能

秀米XIUMI 2018-11-21 10:24:17

近在秀米公众号的图文推送里,小编加入了GIF动图,小伙伴都问那些动起来的图片是怎么做的,是用秀制作做的吗?很遗憾不是的,是小编用PhotoShop,也就是俗称的PS做的。

做这种小动画的初衷其实是为了减少文章篇幅不必要的长度。像介绍投稿作品的时候,小编希望大家能快速预览到秀的内容,所以选取秀投稿里面两到三张有代表性的截图,做成GIF放到图片模板里面;像在get 技能栏目,比起一系列下来的截图加注释,在同一个GIF里显示操作过程似乎更加直观。

当下,在图文里是用运用GIF的地方其实也已经很多,像“点击上方蓝字关注”,“点击阅读原文”,还有一些二维码的动图。秀米在图文编辑一直没怎么推出一些动态二维码,动态点击提示,一来这些动态图不好实现元素的颜色替换或者二维码替换;二来,公众号那么多元化,咱小队也没太多精力为大家量身定制啊~5555~

但是小编可以为你整理一点做公众号GIF的小技巧的。

首先,做动画的基本思路


在动画行业内,有一个动画制作的12项基本法则,是由迪士尼动画师Ollie Johnston与Frank Thomas用了十余行业经验,在1981年出版的书《TheIllusion of Life : Disney Animation》,提出的。但是毕竟在这里我们不是要谈如何做专业动画,在微信图文,GIF其实也不是非常必要的,很多时候只是一个点睛的作用,所以12项动画法则运用在微信GIF中,可以做适当的取舍。

以下一些术语参考自维基百科词条:动画的12项基本法则

12项法则
微信GIF
VS
挤压与伸展
预期动作
演出方式
接续动作与关键动作
跟随动作与重叠动作
渐快与渐慢
弧形
附属动作
时间控制
夸张
纯熟的手绘技巧
吸引力


●演出方式
接续动作与关键动作




●时间控制


●吸引力

十二项基本原则的详细说明,你有兴趣的话,可以搜索一下,现在我们先从时间控制开始说起。

时间控制
一个简单的动作大概只需要1秒到1秒半之间就可以完成了,比如像点击指示,当然如果您想策划一个更有趣的提示动画可以将时间延长到3秒左右,二维码也是。

然后所谓动画,就是由多张静止的图片连续播放产生的错觉,帧数/秒(fps)是动画的基本单位。通常动画的fps是12帧/秒,电影则是24或者25帧/秒。据研究,一秒播放到30帧,肉眼几乎看不出往后更多帧数播放的差别了。

以下做个示范,这个小动画是一个圆在一秒内完成上下跳动的动作,从左到右分别是6fps,12fps和30fps的差别。
如果要做顺滑动画,可以选24fps或者是30fps。只是要注意的是,动得越顺或者越长的动画,文件的大小就会越大哦~请记住,在秀米,单张图片上传的大小限制是2M哦。

演出方式
演出方式这个词是从英文“staging”翻译过来的,字面不好理解,如果换成“构图”就好理解多了。就像一出舞台表演一样,台上除了有行动演员,也有背后的相对静止灯光,舞台设计,做一个物体的动画的时候,也要考虑说,物体在一个什么样的背景、构图中移动呢?当然,物体在一个纯白色的背景移动,这也是一种设定,不用想得太复杂。

接续动作与关键动作
接续动作,指的是依照某个连续动作从头画到尾的画法,例如以下这个指只设定箭向下的动作,并没有设定回到原来的位置:
关键动作,则是先设定一个起始动作和一个关键动作,然后填补从起始动作到关键动作,和关键动作回到起始动作的动画,例如以下也是刚才的那个箭头,增加了回到原来位置的动画:
关键动作制作起来相对复杂,但是更有逻辑性。


平常小编展示投稿作品预览啊,秀米是用技巧啊这些动画,用的都是接续动作的方法,因为这些都是没有回路的线性内容,就没必要用关键动作,只是设定了循环播放。



吸引力
微信为什么添加小动画?一切为都是为了趣味性,吸引力。说起吸引力,就可以考虑如何策划一个有关键动作的动画,举个美美的例子,公众号姚之彼方的动态二维码的设计:
所以说,关键动作动画是适合用在像顶部引导关注,二维码这些设计上面哦。


如何提升吸引力就得好好研究一下其他8条动画制作基本法则咯,今天就先不一一说了。


用什么软件比较好呢?

其实用什么软件都是次要的,最重要的还是要多看多练习,软件提供的功能无非是将一系列的图片以一定帧数每秒渲染出来;物体位移、旋转;通过调整透明度淡入,淡出这样。所以前期的策划、设计还是很重要的哦。

关于软件,小编的建议就是从photoshop开始摸索,因为其实网络编辑这个职位本来很多时候要求要有修图的技能,所以呀,不要光会用ps修静态图片,点开ps 顶端菜单的的 窗口>工作区>动画,打开新世界的大门吧~~~

推荐一个超好看的
动态二维码合集


正所谓,一山还有一山高,小编从朋友圈扒来的,二维码的动效超好看哦~!长按可识别二维码可查看图文。学海无涯,小伙伴共勉之!

想不想小编下次分享怎么用photoshop做GIF呢?给小编点赞或者 “●●●”,您懂得的~
Copyright © 国产动画音乐分享组@2017