設(shè)計(jì)GIF動畫技巧
制作GIF好像挺簡單的，但能不能做得好看就是另一回事了。本篇文章教你如何生成并優(yōu)化你的GIF動畫，喜歡的朋友往下看吧！
提示：原文最后有關(guān)于上面這個(gè)GIF動畫的快速教程，喜歡的朋友 可以點(diǎn)擊原作者打開看看，不過是英文的哦！
在InVision，GIF動畫可不僅僅是用來打發(fā)時(shí)間的。在我們的市場推廣和教育領(lǐng)域，GIF動畫扮演非常重要的角色。我們甚至?xí)诰W(wǎng)站主頁上使用GIF動畫，盡管這些動畫可以通過復(fù)雜的代碼來實(shí)現(xiàn)。
那么問題來了——這些GIF動畫都是怎么做出來的呢？我覺得是時(shí)候泄露一些秘密了。
1.獨(dú)門秘方
這里介紹我的一個(gè)小技巧：所有的GIF動畫都從一段視頻開始。這些視頻一般用ScreenFlow制作，而且我也經(jīng)常用它制作一些產(chǎn)品視頻。這個(gè)軟件我認(rèn)為很容易掌握，更重要的是它包含了一些很有用的動畫工具。將動畫以視頻格式導(dǎo)出之后，將視頻導(dǎo)入到Photoshop中（文件>導(dǎo)入>視頻幀到圖層）
提示：如果ScreenFlow和After Effect都不是你的菜，你也可以用Keynote做動畫，然后作為視頻格式導(dǎo)出。
2.顏色越少越好
如果想要你的GIF動畫的效果驚人，對顏色的選擇就要特別慎重。這個(gè)不僅僅會影響到最終文件的大小，而且使用的顏色越少，在單位體積內(nèi)可以容納的動畫就越多，這樣就可以做出足夠長的GIF動畫，同時(shí)又大小控制在很小的范圍內(nèi)（對我來說，1MB以下才算是小動畫）
3.多使用運(yùn)動模糊
ScreenFlow和After Effect都可以導(dǎo)出帶有運(yùn)動模糊的動畫。這不只會讓你的動畫看起來更專業(yè)，而且當(dāng)你由于GIF的太大而不得不丟掉一些幀時(shí)，你可以丟掉一些模糊的幀而不影響效果。
4.學(xué)會偷懶——精簡你的動畫
想像一下如果我為文章開頭的Gif動畫添加一些其他的東西會怎么樣？比如鼠標(biāo)滑過顯示用戶名，添加幾個(gè)按鈕什么的，要不給光標(biāo)來些特效。其實(shí)這些都最好不要出現(xiàn)，用戶沒有必要看到交互動畫的所有過程。所以，展示你最想展示的部分就好了——記住你的時(shí)間和容量是有限的。
導(dǎo)出GIF動畫
如果你已經(jīng)懶得看下面的內(nèi)容了，試著導(dǎo)出你的GIF動畫，如果文件的大小沒有問題的話，那么恭喜你，可以去干別的事了。如果文件太大，那我們來試試下面這些步驟。
5.丟掉重復(fù)的幀
你的動畫很多時(shí)候在一些時(shí)間點(diǎn)會停住。如果仔細(xì)觀察，你會發(fā)現(xiàn)這些時(shí)間點(diǎn)上有很多0.03秒的重復(fù)幀。刪掉這些重復(fù)的幀只留下一個(gè)，再將這個(gè)幀的持續(xù)時(shí)間修改長一點(diǎn)，像1秒這樣子。
如果上面的方法還不夠的話，重新導(dǎo)入你的視頻，但這一次勾選“限制到每2幀”。這次應(yīng)該可以大大縮小動畫的大小。
提示：這么做不是必須的，但如果你的GIF超過了150幀的話，不這樣很難控制文件的大小。
6.減少顏色值
當(dāng)Photoshop保存GIF時(shí)，在你的右邊有一個(gè)“顏色”的選項(xiàng)，嘗試修改一下數(shù)值看看效果怎么樣。在不影響動畫效果的條件下，可以盡量將這個(gè)值調(diào)小。
7.調(diào)整損耗值
老實(shí)說，我真不知道“損耗”具體是什么意思。但我知道將它調(diào)到1—10之間是不會影響動畫質(zhì)量的，還可以縮減一些字節(jié)的容量。
這些方法都沒用！求救！
如果嘗試了上面所有方法，但還是不能很好的壓縮GIF的體積，怎么辦？這時(shí)你就要重新審視你的動畫，是不是東西太多了，有沒有其他更好的方法實(shí)現(xiàn)你想要的效果，又或者可以將你的動畫分割成幾個(gè)小部分。相信和大多極具創(chuàng)造性的產(chǎn)品一樣，只要專注一件事，你的GIF一定會做得更好。
【設(shè)計(jì)GIF動畫技巧】相關(guān)文章：
GIF動畫設(shè)計(jì)的7個(gè)小技巧05-21
PS制作GIF動畫的七個(gè)技巧01-06
動畫角色設(shè)計(jì)技巧07-04
Flash怎么制作滾動的方塊GIF動畫09-12