7个关于设计超棒的Gif动画的小提示

在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质量却没有任何影响。

原文地址：https://medium.com/@InVisionApp/7-tips-for-designing-awesome-animated-gifs-d51af4bae8b7#.4fwyj8eyn