<点图片看大图>
在InVision,Gif动画不仅仅只是为了增加画面效果,他们起到了很关键的宣传和教育意义。我们甚至把这些Gif动画放在我们官网主页上,而不是用代码做出的小动画。
最终,人们会好奇“如何做出这些高质量的Gif动画呢?”,因此我们有必要在这里和大家讲下了。
设计GIFs动画
<点图片看大图>
这是我的小诀窍,我所有的Gifs都以视频开始。我经常在一些录屏软件里制作它们,我的一些制作产品视频也是这样做的。它学起来很容易而且很快,但是它们却包含有些很有用的动画制作工具。
当我把它们按视频格式出后,我通过文件—导入—视频帧到图层。
专业技巧:假如你们有安装录屏软件或者AE,你也可以在Keynote里创建,然后导出视频。当然还有最后一步导入到PS中。 2.少一点颜色,多一些欢乐。如果你想创作出令人振奋的GIF动画,你需要非常严格的控制颜色的运用。不仅仅是因为它增加文件容量大小,而且运用更少的颜色可以使你GIF更长,当然文件大小相对来说也会更小。(对我来说不大于1MB)。
3. 必要的话,运用动态模糊
<点图片看大图>
<点图片看大图>
录屏软件和AE允许你的项目带有动态模糊。这不仅使你的动画更加专业,也可以帮助你修饰一些不足如果你的动画导入到PS中丢失了一些帧数。
4.学会偷懒想象一下你把所有其他的信息全部加入到文章顶部的GIF中,一些细小的带有名字的工具提示、可点击的按钮,鼠标经过他们的浮动效果,更多的工具条提示和浮动状态提示。人们不需要从这个图片中看到一切,因此只需要把有用的信息展示给用户,时间和文件大小都是制约这些的因素。
导出GIF动画在你仔细阅读下面的提示之前,先尝试导出你的GIF,假如文件大小很合理,那么表示你做的很好!继续做你想做的。假如文件很大,尝试下下面的提示。
5.丢掉那些重复的帧数有时候你的动画特别喜欢停顿或停止。如果你仔细观察,你会注意到这些时刻包含有大量重复的关键帧在这0.03秒时间内,假如有10个关键帧,那么删掉9个,然后设置剩下的一个关键帧时间更长一些,比如1秒钟。
<点图片看大图>
如果还是没有用,尝试下重新导入视频,但是这次选择每两帧导入一次。会很显著的降低你文件的大小。
<点图片看大图>
专业技巧提示:如果你的GIF超过150帧,那么将会很难把你文件大小降下来,但是这不是一个硬性的规则。
6.减少颜色
当你在PS中保存你的GIF时,你会在右边看到一个关于颜色的下拉菜单,尽量设置低一点但是不要你的GIF变成一团垃圾。
<点图片看大图>
7. 调整你的损耗
老实说吧,我不知道你会损耗什么。但是我确定如果你设置它为1到10之间,你会扔掉很多无用的字节,对你GIF质量却没有任何影响。
<点图片看大图>