对于 InVision (一个设计协作平台)来说,GIF 不仅仅为了娱乐消遣,它们在 InVision 的营销、教育方面都扮演了一个重要的角色,甚至我们公司官网的首页都用 GIF 代替了基于代码的动画。
最终,人们开始好奇我们是如何制作这些 GIF 的?所以我们认为,是时候透露一些技巧了。
设计GIF
1、秘密武器
这是我的小秘诀:所有的 GIF 都由视频格式开始。我通常用 ScreenFlow 制作 GIF,这也是我们制作产品视频时使用的工具。ScreenFlow 学起来不仅简单,也很快,但是注意要选择一些漂亮又实用的动画工具。
当我导出动画保存为视频格式后,接下来在 PS 里将其导入,通过选择:文件→导入→视频帧到图层。
2、色彩越少=更多乐趣
如果你想要做出令人惊艳的 GIF,你真的要有选择性的使用颜色。这不仅仅是因为颜色会占据大部分的文件大小,而且越少的颜色会让你做出更长、更复杂的 GIF,文件大小也会相对的小。(对我来说,“小”是1MB 以内。)
3、尽可能使用动态模糊效果
软件像 ScreenFlow 和 After Effects 可以让你导出动态模糊的视频。这不仅仅会让你的动画看上去更专业,而且如果考虑到文件大小,你不得不在PS里面放弃帧数的话,它还可以帮你把某些动作变模糊一点。
想象一下,我原本可以在文章开头的GIF上面加很多元素。如用户名,点击加号、在脸上徘徊、展开更多提示和徘徊状态的光标。其实,人们不需要看到图片上的所有信息,所以只要展示你需要展示的部分既可——毕竟,你的时间和文件大小是有限的。
导出GIF
在你对接下来的技巧感到紧张之前,尽管试着导出 GIF 吧。如果导出的是一个合理的文件大小,说明你做的不错!然后继续做你该做的。如果文件太大,试
试下面这些技巧:
5、放弃复制帧
你的动画很有可能在某些点暂停或静止了。如果你仔细看,你会发现这些瞬间包含了很多持续了0.03秒的复制帧。如果有10个复制帧,删除其中9个,然后把剩下那一个帧的持续时间设置长一点,比如1秒。
当在 PS 里保存 GIF 时,你会看到右边有一个颜色下拉菜单,然后就选择最适合的那个数字把。在没有把你的 GIF 变成废物前,尽可能降低颜色。
说实话,我都不知道损耗是什么意思。但我可以确定的是,如果你把损耗调至1-10之间时,会减少一些千字节,同时还不会减低 GIF 的质量。
像大部分的创意产品一样,如果你的 GIF 只专注于一件事,你将做的更好。