動(dòng)畫(huà)技巧，七個(gè)GIF動(dòng)畫(huà)的小提示

<點(diǎn)圖片看大圖>

在InVision，Gif動(dòng)畫(huà)不僅僅只是為了增加畫(huà)面效果，他們起到了很關(guān)鍵的宣傳和教育意義。我們甚至把這些Gif動(dòng)畫(huà)放在我們官網(wǎng)主頁(yè)上，而不是用代碼做出的小動(dòng)畫(huà)。

最終，人們會(huì)好奇“如何做出這些高質(zhì)量的Gif動(dòng)畫(huà)呢？”，因此我們有必要在這里和大家講下了。

設(shè)計(jì)GIFs動(dòng)畫(huà)

<點(diǎn)圖片看大圖>

這是我的小訣竅，我所有的Gifs都以視頻開(kāi)始。我經(jīng)常在一些錄屏軟件里制作它們，我的一些制作產(chǎn)品視頻也是這樣做的。它學(xué)起來(lái)很容易而且很快，但是它們卻包含有些很有用的動(dòng)畫(huà)制作工具。

當(dāng)我把它們按視頻格式出后，我通過(guò)文件—導(dǎo)入—視頻幀到圖層。

專(zhuān)業(yè)技巧：假如你們有安裝錄屏軟件或者AE，你也可以在Keynote里創(chuàng)建，然后導(dǎo)出視頻。當(dāng)然還有最后一步導(dǎo)入到PS中。 2.少一點(diǎn)顏色，多一些歡樂(lè)。

如果你想創(chuàng)作出令人振奮的GIF動(dòng)畫(huà)，你需要非常嚴(yán)格的控制顏色的運(yùn)用。不僅僅是因?yàn)樗黾游募萘看笮?，而且運(yùn)用更少的顏色可以使你GIF更長(zhǎng)，當(dāng)然文件大小相對(duì)來(lái)說(shuō)也會(huì)更小。（對(duì)我來(lái)說(shuō)不大于1MB）。

3. 必要的話(huà)，運(yùn)用動(dòng)態(tài)模糊

<點(diǎn)圖片看大圖>

<點(diǎn)圖片看大圖>

錄屏軟件和AE允許你的項(xiàng)目帶有動(dòng)態(tài)模糊。這不僅使你的動(dòng)畫(huà)更加專(zhuān)業(yè)，也可以幫助你修飾一些不足如果你的動(dòng)畫(huà)導(dǎo)入到PS中丟失了一些幀數(shù)。

4.學(xué)會(huì)偷懶

想象一下你把所有其他的信息全部加入到文章頂部的GIF中，一些細(xì)小的帶有名字的工具提示、可點(diǎn)擊的按鈕，鼠標(biāo)經(jīng)過(guò)他們的浮動(dòng)效果，更多的工具條提示和浮動(dòng)狀態(tài)提示。人們不需要從這個(gè)圖片中看到一切，因此只需要把有用的信息展示給用戶(hù)，時(shí)間和文件大小都是制約這些的因素。

導(dǎo)出GIF動(dòng)畫(huà)

在你仔細(xì)閱讀下面的提示之前，先嘗試導(dǎo)出你的GIF，假如文件大小很合理，那么表示你做的很好！繼續(xù)做你想做的。假如文件很大，嘗試下下面的提示。

5.丟掉那些重復(fù)的幀數(shù)

有時(shí)候你的動(dòng)畫(huà)特別喜歡停頓或停止。如果你仔細(xì)觀察，你會(huì)注意到這些時(shí)刻包含有大量重復(fù)的關(guān)鍵幀在這0.03秒時(shí)間內(nèi)，假如有10個(gè)關(guān)鍵幀，那么刪掉9個(gè)，然后設(shè)置剩下的一個(gè)關(guān)鍵幀時(shí)間更長(zhǎng)一些，比如1秒鐘。

<點(diǎn)圖片看大圖>

如果還是沒(méi)有用，嘗試下重新導(dǎo)入視頻，但是這次選擇每?jī)蓭瑢?dǎo)入一次。會(huì)很顯著的降低你文件的大小。

<點(diǎn)圖片看大圖>

專(zhuān)業(yè)技巧提示：如果你的GIF超過(guò)150幀，那么將會(huì)很難把你文件大小降下來(lái)，但是這不是一個(gè)硬性的規(guī)則。

6.減少顏色

當(dāng)你在PS中保存你的GIF時(shí)，你會(huì)在右邊看到一個(gè)關(guān)于顏色的下拉菜單，盡量設(shè)置低一點(diǎn)但是不要你的GIF變成一團(tuán)垃圾。

<點(diǎn)圖片看大圖>

7. 調(diào)整你的損耗

老實(shí)說(shuō)吧，我不知道你會(huì)損耗什么。但是我確定如果你設(shè)置它為1到10之間，你會(huì)扔掉很多無(wú)用的字節(jié)，對(duì)你GIF質(zhì)量卻沒(méi)有任何影響。

<點(diǎn)圖片看大圖>