GIF动画设计的技巧方法.docx

书山有路勤为径，学海无涯苦作舟

GIF动画设计的技巧方法

在InVision，GIF动画可不仅仅是用来打发时间的。在我们的市场

推广和教育领域，GIF动画扮演非常重要的角色。下面是小编为大家整

理的GIF动画设计的技巧方法，欢迎参考~

?GIF动画设计的技巧方法1.独门秘方

?这里介绍我的一个小技巧：所有的GIF动画都从一段视频开始。

这些视频一般用ScreenFlow制作，而且我也经常用它制作一些产品视

频。这个软件我认为很容易掌握，更重要的是它包含了一些很有用的动

画工具。将动画以视频格式导出之后，将视频导入到Photoshop中(文件

导入视频帧到图层)

?提示：如果ScreenFlow和AfterEffect都不是你的菜，你也可以

用Keynote做动画，然后作为视频格式导出。

?2.颜色越少越好

?如果想要你的GIF动画的效果惊人，对颜色的选择就要特别慎

重。这个不仅仅会影响到最终文件的大小，而且使用的颜色越少，在单

位体积内可以容纳的动画就越多，这样就可以做出足够长的GIF动画，

同时又大小控制在很小的范围内(对我来说，1MB以下才算是小动画)

?3.多使用运动模糊

?ScreenFlow和AfterEffect都可以导出带有运动模糊的动画。这

不只会让你的动画看起来更专业，而且当你由于GIF的太大而不得不丢

掉一些帧时，你可以丢掉一些模糊的帧而不影响效果。

?4.学会偷懒——精简你的动画

?想像一下如果我为文章开头的Gif动画添加一些其他的东西会怎

么样?比如鼠标滑过显示用户名，添加几个按钮什么的，要不给光标来

些特效。其实这些都最好不要出现，用户没有必要看到交互动画的所有

过程。所以，展示你最想展示的部分就好了——记住你的时间和容量是

有限的。

?导出GIF动画

?如果你已经懒得看下面的内容了，试着导出你的GIF动画，如果

文件的大小没有问题的话，那么恭喜你，可以去干别的事了。如果文件

太大，那我们来试试下面这些步骤。

?5.丢掉重复的帧

?你的动画很多时候在一些时间点会停住。如果仔细观察，你会发

现这些时间点上有很多0.03秒的重复帧。删掉这些重复的帧只留下一

个，再将这个帧的持续时间修改长一点，像1秒这样子。

?如果上面的方法还不够的话，重新导入你的视频，但这一次勾选

“限制到每2帧”。这次应该可以大大缩小动画的大小。

?提示：这么做不是必须的，但如果你的GIF超过了150帧的话，

不这样很难控制文件的大小。

?6.减少颜色值

?当Photoshop保存GIF时，在你的右边有一个“颜色”的选项，尝

试修改一下数值看看效果怎么样。在不影响动画效果的条件下，可以尽

量将这个值调小。

?7.调整损耗值

?老实说，我真不知道“损耗”具体是什么意思。但我知道将它调到

1—10之间是不会影响动画质量的，还可以缩减一些字节的容量。

?tips:感谢大家的阅读，本文由我司收集整编。仅供参阅！