聊聊设计高逼格GIF的7个小技巧

对于InVision（一个设计协作平台）来说，GIF不仅仅为了娱乐消遣，它们在InVision的营...





对于 InVision （一个设计协作平台）来说，GIF 不仅仅为了娱乐消遣，它们在 InVision 的营销、教育方面都扮演了一个重要的角色，甚至我们 公司官网的首页 都用 GIF 代替了基于代码的动画。

最终，人们开始好奇我们是如何制作这些 GIF 的？所以我们认为，是时候透露一 些技巧了。

设计GIF

1、秘密武器

这是我的小秘诀： 所有的 GIF 都由视频格式开始 。 我通常用 ScreenFlow 制作 GIF， 这也是我们制作产品视频时使用的工具。ScreenFlow 学起来不仅简单，也很快，但是注意要选择一些漂亮又实用的动画工具。

当我导出动画保存为视频格式后，接下来在 PS 里将其导入，通过选择：

文件→ 导入→视频帧到图层。



专业技巧： 如果 ScreenFlow 和 After Effects 不在你的预算里，你可以在 Keynote 里面制作动画，然后导出为视频。

2、色彩越少=更多乐趣

如果你想要做出令人惊艳的 GIF， 你真的要有选择性的使用颜色。 这不仅 仅是因为颜色会占据大部分的文件大小，而且越少的颜色会让你做出更长、更复杂的 GIF，文件大小也会相对的小。（对我来说，“小”是1MB 以内。)

3、尽可能使用动态模糊效果

软件像 ScreenFlow 和 After Effects 可以让你导出动态模糊的视频。这不仅仅会让你的动画看上去更专业，而且如果考虑到文件大小，你不得不在PS里面放弃帧数 的话，它还可以帮你把某些动作变模糊一点。

4、偷（点）懒

想象一下，我原本可以在文章开头的GIF上面加很多元素。如用户名， 点击加号、在脸上徘徊、展开更多提示和徘徊状态的光标。其实，人们不需要看到图片上的所有信息，所以只要展示你需要展示的部分既可——毕竟，你的时间和文件大小是有限的。

导出GIF

在你对接下来的技巧感到紧张之前，尽管试着导出 GIF 吧。如果导出的是一个 合理的文件大小，说明你做的不错！然后继续做你该做的。如果文件太大，试

试下面这些技巧：

5、放弃复制帧

你的动画很有可能在某些点暂停或静止了。如果你仔细看，你会发现这些瞬间 包含了很多持续了0.03秒的复制帧。如果有10个复制帧，删除其中9个，然后 把剩下那一个帧的持续时间设置长一点，比如1秒。



如果还是没有帮助，试着重新导入视频。但是这次，选择限制每2帧，它会大幅度 缩小文件大小。

6、减少颜色

当在 PS 里保存 GIF 时，你会看到右边有一个 颜色 下拉菜单，然后就选择最适合的那个数字把。在没有把你的 GIF 变成废物前，尽可能降低颜色。

7、调整损耗

说实话，我都不知道损耗是什么意思。但我可以确定的是，如果你把损耗调至1-10之 间时，会减少一些千字节，同时还不会减低 GIF 的质量。



如果你已经尝试过上面提到的所有技巧，但是 GIF 的大小依旧没有被压缩，那你就要退后一步看看。是不是因为你太过于追求完美？还有没有其他方法完成你的目标？是否可以把这个 GIF 变成2个不同的 GIF 呢？

像大部分的创意产品一样，如果你的 GIF 只专注于一件事，你将做的更好。

    关注 设计前沿