![blogtest][0]

在InVision,[GIF可不是消磨时间的玩意][1]——它们在市场和教育方面扮演着强有力的角色。更有甚者,我们在[首页][2]上用的就是GIF,而不是基于代码的炫酷动画。

实际上,人们开始询问,“那些GIF你们怎么做出来的?”是时候透露一下秘密了。

## 设计GIF

### 1. 秘密武器

[这就是我不可告人的小秘密:所有的GIF是从视频文件开始的。][3]我通常在[ScreenFlow][4]里制作,我们也用它来制作产品视频。它足够简单,学起来很快,内置了一些非常有用的动画工具。

将动画导出成视频文件后,我通过**文件>导入>视频帧作为图层**将它导入到Photoshop里。

![gif-post_0000_Layer Comp 1][5]

> **高级技巧:** 如果ScreenFlow或After Effects超出你的预算,可以在Keynote里创作你的动画,然后导出成视频。是的,最后有这个选项。

### 2. 更少的颜色 = 更多的乐趣

如果想要惊艳的GIF,你得[精挑细选地使用颜色][6]。它不仅会使文件大小激增,使用更少的颜色也能让你制作更长、更复杂的GIF,而且文件仍然可以相对较小。(对我来说,1MB以下才算小)

### 3. 可能的话,使用运动模糊

像ScreenFlow和After Effects这样的软件,能输出带有运动模糊效果的视频。这不仅使你的动画看起来更专业,而且为了压缩文件尺寸,要从Photoshop中的GIF里删掉一些帧,还能帮你蒙混过关。

![no-motion-example][7]

![motion-example][8]

### 4. 懒(某种程度来说)

想像一下,本文开头的那个GIF,我本来还能加很多东西进去。带有用户名的小提示、一个鼠标指针点击加号按钮、鼠标滑过头像触发更多提示和悬停状态。人们不用看到每个细节就能了解情况,所以[就只展示需要展示的部分——时间和文件大小是有限的][9]。

## 导出GIF

下面这些诀窍可能会让你有些紧张,在这之前,先尝试直接导出GIF。如果文件大小可以接受,那么很好!继续这么做。如果它太大了,继续往下看。

### 5. 删除重复的帧

你的动画很可能在某处会暂时停止。仔细观察,你会发现这些片段包含了一大堆重复的帧,每个0.03秒。如果有10个重复帧,删掉9个,把剩下的那个时间设长一些,比如说1秒。

![gif-post_0004_Layer-Comp-5][10]

如果这没用,尝试重新导入视频,但这次要选**间隔帧**。它会显著缩减文件大小。

![gif-post_0003_Layer Comp 4][11]

> **高级技巧:** 这不是一条铁律,但如果你的GIF有超过150帧,你就得花好一阵子来削减文件大小。

### 6. 缩减色彩

在Photoshop中保存GIF时,右边能看到一个下拉菜单写着“颜色”。随便调调。只要GIF不会变成一团糟,设得越低越好。

![gif-post_0002_Layer Comp 3][12]

### 7. 调整失真率

老实说,我甚至不知道失真率是什么意思。但我**的确**知道,如果你把它设置成1和10之间的某个数,就能在不降低画质的情况下剔除很多kb。

![gif-post_0001_Layer Comp 2][13]

([这是失真率的意思][14])

### 这些都不管用!求助!

如果上面方法都尝试过,但GIF大小就是压不下去,这时候需要倒退一步。你想做的是不是太多了?有没有其他方式达成你的目标?如果把它拆分成几个不同的GIF呢?就像大多数创意产品一样,如果你专注于一件事,你的GIF会表现更好。

## **福利视频:**极速创作

**注意:**[下载视频文件][15],本文的GIF就是用这个做的!(需要ScreenFlow 5以上打开)

[![](http://embed.wistia.com/deliveries/9c0799063bec8f798c3e87b2651582610d67fba6.jpg?image_crop_resized=640×360)](http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/)

译者注:上图是一段视频,建议前往[原文页面][16]查看(可能需要翻墙)

> **高级技巧:** 在原型中使用GIF,可以创造一些惊艳的过渡效果。

[原文链接][16]

[0]: http://blog.invisionapp.com/wp-content/uploads/2014/12/blogtest.gif
[1]: https://twitter.com/intent/tweet?text=%2522GIFs+aren%2527t+just+for+goofing+around%2522+http%253A%252F%252Fbit.ly%252F1vEneI7+via+%2540invisionapp
[2]: http://invisionapp.com/tour
[3]: https://twitter.com/intent/tweet?text=%2522Here%2527s+my+dirty+little+secret%253A+all+my+GIFs+start+as+videos.%2522+http%253A%252F%252Fbit.ly%252F1vEneI7+via+%2540invisionapp
[4]: http://www.telestream.net/screenflow/overview.htm
[5]: http://blog.invisionapp.com/wp-content/uploads/2014/12/gif-post_0000_Layer-Comp-1.jpg
[6]: https://twitter.com/intent/tweet?text=%2522be+really+selective+about+your+use+of+color.%2522+http%253A%252F%252Fbit.ly%252F1vEneI7+via+%2540invisionapp
[7]: http://blog.invisionapp.com/wp-content/uploads/2014/12/no-motion-example.gif
[8]: http://blog.invisionapp.com/wp-content/uploads/2014/12/motion-example.gif
[9]: https://twitter.com/intent/tweet?text=%2522only+show+what+you+need+to%25E2%2580%2594your+time+and+file+size+are+limited.%2522+http%253A%252F%252Fbit.ly%252F1vEneI7+via+%2540invisionapp
[10]: http://blog.invisionapp.com/wp-content/uploads/2014/12/gif-post_0004_Layer-Comp-5.png
[11]: http://blog.invisionapp.com/wp-content/uploads/2014/12/gif-post_0003_Layer-Comp-4.jpg
[12]: http://blog.invisionapp.com/wp-content/uploads/2014/12/gif-post_0002_Layer-Comp-3.jpg
[13]: http://blog.invisionapp.com/wp-content/uploads/2014/12/gif-post_0001_Layer-Comp-2.jpg
[14]: http://www.pcmag.com/encyclopedia/term/46335/lossy-compression
[15]: http://blog.invisionapp.com/wp-content/uploads/2014/12/invision-gif-source-file.zip
[16]: http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/
[17]: https://twitter.com/andyorsow
[18]: https://twitter.com/invisionapp