設(shè)計(jì)師個(gè)人私貨！幫你打造超棒GIF動(dòng)畫的7個(gè)秘訣

編者按：同學(xué)們喜聞樂(lè)見的大多是來(lái)自設(shè)計(jì)師個(gè)人的經(jīng)驗(yàn)分享，由于是過(guò)來(lái)人，他的技巧可能就能解決你現(xiàn)在的問(wèn)題，實(shí)用性很強(qiáng)，今天針對(duì)Gif動(dòng)畫方面，分享7個(gè)鮮為人知的技巧，全是私人藏品，在這方面有問(wèn)題的同學(xué)來(lái)瞧瞧有木有你想要的答案吧。

@十萬(wàn)個(gè)為什麼：在InVision，GIF可不是消磨時(shí)間的玩意——它們?cè)谑袌?chǎng)和教育方面扮演著強(qiáng)有力的角色。更有甚者，我們?cè)谑醉?yè)上用的就是GIF，而不是基于代碼的炫酷動(dòng)畫。

實(shí)際上，人們開始詢問(wèn)，“那些GIF你們?cè)趺醋龀鰜?lái)的？”是時(shí)候透露一下秘密了。

另外，很多同學(xué)在問(wèn)有沒有清晰度高，體積小的圖片格式？今天順便一起送上：《濃縮的精華！從零開始帶你認(rèn)識(shí)最新的圖片格式WEBP》

設(shè)計(jì)GIF

1、秘密武器

這就是我不可告人的小秘密：所有的GIF是從視頻文件開始的。我通常在ScreenFlow(www、telestream、net)里制作，我們也用它來(lái)制作產(chǎn)品視頻。它足夠簡(jiǎn)單，學(xué)起來(lái)很快，內(nèi)置了一些非常有用的動(dòng)畫工具。

將動(dòng)畫導(dǎo)出成視頻文件后，我通過(guò)文件>導(dǎo)入>視頻幀作為圖層將它導(dǎo)入到Photoshop里。

高級(jí)技巧：如果ScreenFlow或AfterEffects超出你的預(yù)算，可以在Keynote里創(chuàng)作你的動(dòng)畫，然后導(dǎo)出成視頻。是的，最后有這個(gè)選項(xiàng)。

2、更少的顏色=更多的樂(lè)趣

如果想要驚艷的GIF，你得精挑細(xì)選地使用顏色。它不僅會(huì)使文件大小激增，使用更少的顏色也能讓你制作更長(zhǎng)、更復(fù)雜的GIF，而且文件仍然可以相對(duì)較小。(對(duì)我來(lái)說(shuō)，！MB以下才算小)

關(guān)于如何挑選最合適的色，阿里同學(xué)有篇筆記：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》

3、可能的話，使用運(yùn)動(dòng)模糊

像ScreenFlow和AfterEffects這樣的軟件，能輸出帶有運(yùn)動(dòng)模糊效果的視頻。這不僅使你的動(dòng)畫看起來(lái)更專業(yè)，而且為了壓縮文件尺寸，要從Photoshop中的GIF里刪掉一些幀，還能幫你蒙混過(guò)關(guān)。

4、懶(某種程度來(lái)說(shuō))

想像一下，本文開頭的那個(gè)GIF，我本來(lái)還能加很多東西進(jìn)去。帶有用戶名的小提示、一個(gè)鼠標(biāo)指針點(diǎn)擊加號(hào)按鈕、鼠標(biāo)滑過(guò)頭像觸發(fā)更多提示和懸停狀態(tài)。人們不用看到每個(gè)細(xì)節(jié)就能了解情況，所以就只展示需要展示的部分——時(shí)間和文件大小是有限的。

導(dǎo)出GIF

下面這些訣竅可能會(huì)讓你有些緊張，在這之前，先嘗試直接導(dǎo)出GIF。如果文件大小可以接受，那么很好！繼續(xù)這么做。如果它太大了，繼續(xù)往下看。

5、刪除重復(fù)的幀

你的動(dòng)畫很可能在某處會(huì)暫時(shí)停止。仔細(xì)觀察，你會(huì)發(fā)現(xiàn)這些片段包含了一大堆重復(fù)的幀，每個(gè)0、03秒。如果有！0個(gè)重復(fù)幀，刪掉9個(gè)，把剩下的那個(gè)時(shí)間設(shè)長(zhǎng)一些，比如說(shuō)！秒。

如果這沒用，嘗試重新導(dǎo)入視頻，但這次要選間隔幀。它會(huì)顯著縮減文件大小。

高級(jí)技巧：這不是一條鐵律，但如果你的GIF有超過(guò)！50幀，你就得花好一陣子來(lái)削減文件大小。

6、縮減色彩

在Photoshop中保存GIF時(shí)，右邊能看到一個(gè)下拉菜單寫著“顏色”。隨便調(diào)調(diào)。只要GIF不會(huì)變成一團(tuán)糟，設(shè)得越低越好。

7、調(diào)整失真率

老實(shí)說(shuō)，我甚至不知道失真率是什么意思。但我的確知道，如果你把它設(shè)置成！和！0之間的某個(gè)數(shù)，就能在不降低畫質(zhì)的情況下剔除很多kb。

這些都不管用！求助！

如果上面方法都嘗試過(guò)，但GIF大小就是壓不下去，這時(shí)候需要倒退一步。你想做的是不是太多了？有沒有其他方式達(dá)成你的目標(biāo)？如果把它拆分成幾個(gè)不同的GIF呢？就像大多數(shù)創(chuàng)意產(chǎn)品一樣，如果你專注于一件事，你的GIF會(huì)表現(xiàn)更好。