制作GIF好像挺簡單的，但能不能做得好看就是另一回事了。本篇文章教你如何生成并優化你的GIF動畫，喜歡的朋友往下看吧！

提示：原文最後有關于上面這個GIF動畫的快速教程，喜歡的朋友 可以點擊原作者打開看看，不過是英文的哦！

在InVision，GIF動畫可不僅僅是用來打發時間的。在我們的市場推廣和教育領域，GIF動畫扮演非常重要的角色。我們甚至會在網站主頁上使用GIF動畫，盡管這些動畫可以通過複雜的代碼來實現。

那麼問題來了——這些GIF動畫都是怎麼做出來的呢？我覺得是時候洩露一些秘密了。

設計GIF動畫

1.獨門秘方

這裡介紹我的一個小技巧：所有的GIF動畫都從一段視頻開始。這些視頻一般用ScreenFlow制作，而且我也經常用它制作一些産品視頻。這個軟件我認為很容易掌握，更重要的是它包含了一些很有用的動畫工具。将動畫以視頻格式導出之後，将視頻導入到Photoshop中（文件>導入>視頻幀到圖層）

提示：如果ScreenFlow和After Effect都不是你的菜，你也可以用Keynote做動畫，然後作為視頻格式導出。

2.顔色越少越好

如果想要你的GIF動畫的效果驚人，對顔色的選擇就要特别慎重。這個不僅僅會影響到最終文件的大小，而且使用的顔色越少，在單位體積内可以容納的動畫就越多，這樣就可以做出足夠長的GIF動畫，同時又大小控制在很小的範圍内（對我來說，1MB以下才算是小動畫）

3.多使用運動模糊

ScreenFlow和After Effect都可以導出帶有運動模糊的動畫。這不隻會讓你的動畫看起來更專業，而且當你由于GIF的太大而不得不丢掉一些幀時，你可以丢掉一些模糊的幀而不影響效果。

4.學會偷懶——精簡你的動畫

想像一下如果我為文章開頭的Gif動畫添加一些其他的東西會怎麼樣？比如鼠标滑過顯示用戶名，添加幾個按鈕什麼的，要不給光标來些特效。其實這些都最好不要出現，用戶沒有必要看到交互動畫的所有過程。所以，展示你最想展示的部分就好了——記住你的時間和容量是有限的。

導出GIF動畫

如果你已經懶得看下面的内容了，試着導出你的GIF動畫，如果文件的大小沒有問題的話，那麼恭喜你，可以去幹别的事了。如果文件太大，那我們來試試下面這些步驟。

5.丢掉重複的幀

你的動畫很多時候在一些時間點會停住。如果仔細觀察，你會發現這些時間點上有很多0.03秒的重複幀。删掉這些重複的幀隻留下一個，再将這個幀的持續時間修改長一點，像1秒這樣子。

如果上面的方法還不夠的話，重新導入你的視頻，但這一次勾選“限制到每2幀”。這次應該可以大大縮小動畫的大小。

提示：這麼做不是必須的，但如果你的GIF超過了150幀的話，不這樣很難控制文件的大小。

6.減少顔色值

當Photoshop保存GIF時，在你的右邊有一個“顔色”的選項，嘗試修改一下數值看看效果怎麼樣。在不影響動畫效果的條件下，可以盡量将這個值調小。

7.調整損耗值

老實說，我真不知道“損耗”具體是什麼意思。但我知道将它調到1—10之間是不會影響動畫質量的，還可以縮減一些字節的容量。

如果嘗試了上面所有方法，但還是不能很好的壓縮GIF的體積，怎麼辦？這時你就要重新審視你的動畫，是不是東西太多了，有沒有其他更好的方法實現你想要的效果，又或者可以将你的動畫分割成幾個小部分。相信和大多極具創造性的産品一樣，隻要專注一件事，你的GIF一定會做得更好。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!