編者(zhe)按：同(tong)學們(men)喜聞樂(le)見的(de)(de)大多是來(lai)自設(she)計師個(ge)人(ren)(ren)(ren)的(de)(de)經驗分(fen)享，由(you)于是過來(lai)人(ren)(ren)(ren)，他的(de)(de)技巧(qiao)可能(neng)就能(neng)解(jie)決你(ni)現在的(de)(de)問題，實(shi)用性很(hen)強，今天針對(dui)Gif動畫方(fang)面，分(fen)享7個(ge)鮮為人(ren)(ren)(ren)知的(de)(de)技巧(qiao)，全(quan)是私人(ren)(ren)(ren)藏品，在這方(fang)面有(you)問題的(de)(de)同(tong)學來(lai)瞧瞧有(you)木有(you)你(ni)想要(yao)的(de)(de)答案吧。

@十萬(wan)個為(wei)什麼(ma)：在InVision，GIF可(ke)不是(shi)消磨時(shi)間(jian)的(de)玩意——它(ta)們(men)在市場(chang)和(he)教育方(fang)面扮演著強(qiang)有力(li)的(de)角色(se)。更有甚(shen)者，我們(men)在首(shou)頁上用(yong)的(de)就是(shi)GIF，而(er)不是(shi)基于代碼的(de)炫酷動畫(hua)。

實際(ji)上，人們(men)開(kai)始詢問，“那些GIF你們(men)怎么做出來的？”是時候透露一(yi)下秘密了。

另(ling)外(wai)，很(hen)多同學在(zai)問(wen)有沒有清晰度高，體積小的(de)圖片(pian)格式(shi)？今天順便一(yi)起送(song)上：《濃縮的(de)精華！從零開始帶你(ni)認識最(zui)新的(de)圖片(pian)格式(shi)WEBP》

設計GIF

1、秘密武器

這就是(shi)我(wo)不(bu)可告人的(de)小秘密(mi)：所(suo)有的(de)GIF是(shi)從視頻(pin)文件開(kai)始的(de)。我(wo)通常(chang)(chang)在(zai)ScreenFlow(www、telestream、net)里制作，我(wo)們也用它來制作產(chan)品(pin)視頻(pin)。它足夠簡單(dan)，學起來很快，內置了一些非常(chang)(chang)有用的(de)動畫工(gong)具。

將(jiang)動(dong)畫(hua)導(dao)出成視(shi)頻文件(jian)后，我通過(guo)文件(jian)>導(dao)入>視(shi)頻幀作為圖層將(jiang)它(ta)導(dao)入到里。

高級技(ji)巧：如果ScreenFlow或AfterEffects超出(chu)你的(de)預算，可以在Keynote里創作你的(de)動(dong)畫，然后(hou)導出(chu)成視頻。是的(de)，最后(hou)有這個(ge)選項。

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

如果想要(yao)驚艷的(de)GIF，你得精(jing)挑細(xi)選地使(shi)用(yong)顏(yan)色。它不僅會使(shi)文件大小激增，使(shi)用(yong)更少的(de)顏(yan)色也能讓你制(zhi)作更長(chang)、更復雜的(de)GIF，而且文件仍然(ran)可以相對較(jiao)小。(對我(wo)來(lai)說，！MB以下才(cai)算(suan)小)

關于如何挑選最合適(shi)的色，阿里同(tong)學(xue)有篇筆記：《色彩搭(da)配(pei)速成！3個實用方法(fa)幫你全(quan)面搞定配(pei)色》

3、可(ke)能的話，使用運動模糊

像ScreenFlow和(he)AfterEffects這(zhe)(zhe)樣(yang)的(de)軟件，能輸出帶有運動(dong)模糊(hu)效果(guo)的(de)視(shi)頻。這(zhe)(zhe)不(bu)僅使你的(de)動(dong)畫看起來更專業，而且為了壓縮(suo)文件尺(chi)寸，要從Photoshop中(zhong)的(de)GIF里(li)刪掉一些(xie)幀，還能幫(bang)你蒙混過關。

4、懶(lan)(某種程度來說)

想像一(yi)下，本文(wen)開頭的(de)那個(ge)GIF，我本來還能加(jia)很多東西(xi)進去。帶有(you)用戶名的(de)小提示(shi)、一(yi)個(ge)鼠(shu)標指針點擊加(jia)號按鈕、鼠(shu)標滑(hua)過頭像觸發(fa)更(geng)多提示(shi)和(he)懸(xuan)停(ting)狀(zhuang)態。人們不(bu)用看到每個(ge)細節就(jiu)能了解情況，所(suo)以就(jiu)只展示(shi)需(xu)要展示(shi)的(de)部(bu)分——時間和(he)文(wen)件(jian)大(da)小是有(you)限(xian)的(de)。

導出GIF

下面這些訣竅可能會讓你有些緊(jin)張(zhang)，在這之(zhi)前，先嘗試直(zhi)接(jie)導出(chu)GIF。如果(guo)文件大小(xiao)可以接(jie)受，那么很好！繼續這么做。如果(guo)它太大了，繼續往下看。

5、刪除重復(fu)的幀

你的動畫很可能在某處會暫時停止。仔細觀察，你會發現這些片(pian)段包(bao)含(han)了一大堆重(zhong)復的幀，每個0、03秒。如果有！0個重(zhong)復幀，刪掉9個，把(ba)剩下的那(nei)個時間設長(chang)一些，比如說！秒。

如果這(zhe)沒用，嘗試重新導(dao)入視(shi)頻，但(dan)這(zhe)次(ci)要(yao)選間隔(ge)幀。它(ta)會顯著(zhu)縮減文件大小。

高級技巧：這不是一條鐵律，但如(ru)果你的GIF有超(chao)過！50幀，你就得花好(hao)一陣(zhen)子來(lai)削減文件大小。

6、縮減色彩

在Photoshop中保存GIF時，右邊能(neng)看到一(yi)(yi)個下拉菜單(dan)寫著“顏(yan)色”。隨便調調。只要GIF不(bu)會(hui)變(bian)成一(yi)(yi)團糟，設(she)得(de)越低(di)越好。

7、調整失真率

老實說，我甚至不(bu)知道失真率是什么意思。但我的確(que)知道，如(ru)果你把它設置成！和！0之間(jian)的某個數，就能在不(bu)降低畫質的情(qing)況(kuang)下剔除很多kb。

這些都不管用！求助！

如果(guo)(guo)上面方法(fa)都嘗試(shi)過，但GIF大小就是(shi)壓不下去(qu)，這(zhe)時候需要倒退一(yi)步。你想做的是(shi)不是(shi)太多(duo)了？有(you)(you)沒有(you)(you)其(qi)他(ta)方式達成你的目標？如果(guo)(guo)把它拆分成幾(ji)個不同(tong)的GIF呢？就像(xiang)大多(duo)數創意產品一(yi)樣(yang)，如果(guo)(guo)你專(zhuan)注于一(yi)件(jian)事，你的GIF會表現更(geng)好。