編者按：同學們喜聞樂見的大多是來自設計師個人的經驗分享，由于是過來人，他的技巧可能就能解決你現在的問題，實用性很強，今天針對Gif動畫方面，分享7個鮮為人知的技巧，全是私人藏品，在這方面有問題的同學來瞧瞧有木有你想要的答案吧。

@十萬個為什麼?：在InVision，GIF可不是消磨時間的玩意——它們在市場和教育方面扮演著強有力的角色。更有甚者，我們在首頁上用的就是GIF，而不是基于代碼的炫酷動畫。

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

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

設計GIF

1. 秘密武器

這就是我不可告人的小秘密：所有的GIF是從視頻文件開始的。我通常在ScreenFlow（www.telestream.net）里制作，我們也用它來制作產品視頻。它足夠簡單，學起來很快，內置了一些非常有用的動畫工具。

將動畫導出成視頻文件后，我通過文件>導入>視頻幀作為圖層將它導入到Photoshop里。

高級技巧：?如果ScreenFlow或After Effects超出你的預算，可以在Keynote里創作你的動畫，然后導出成視頻。是的，最后有這個選項。

2. 更少的顏色 = 更多的樂趣

如果想要驚艷的GIF，你得精挑細選地使用顏色。它不僅會使文件大小激增，使用更少的顏色也能讓你制作更長、更復雜的GIF，而且文件仍然可以相對較小。（對我來說，1MB以下才算小）

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

3. 可能的話，使用運動模糊

像ScreenFlow和After Effects這樣的軟件，能輸出帶有運動模糊效果的視頻。這不僅使你的動畫看起來更專業，而且為了壓縮文件尺寸，要從Photoshop中的GIF里刪掉一些幀，還能幫你蒙混過關。

4. 懶（某種程度來說）

想像一下，本文開頭的那個GIF，我本來還能加很多東西進去。帶有用戶名的小提示、一個鼠標指針點擊加號按鈕、鼠標滑過頭像觸發更多提示和懸停狀態。人們不用看到每個細節就能了解情況，所以就只展示需要展示的部分——時間和文件大小是有限的。

導出GIF

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

5. 刪除重復的幀

你的動畫很可能在某處會暫時停止。仔細觀察，你會發現這些片段包含了一大堆重復的幀，每個0.03秒。如果有10個重復幀，刪掉9個，把剩下的那個時間設長一些，比如說1秒。

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

高級技巧：?這不是一條鐵律，但如果你的GIF有超過150幀，你就得花好一陣子來削減文件大小。

6. 縮減色彩

在Photoshop中保存GIF時，右邊能看到一個下拉菜單寫著“顏色”。隨便調調。只要GIF不會變成一團糟，設得越低越好。

7. 調整失真率

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

這些都不管用！求助！

如果上面方法都嘗試過，但GIF大小就是壓不下去，這時候需要倒退一步。你想做的是不是太多了？有沒有其他方式達成你的目標？如果把它拆分成幾個不同的GIF呢？就像大多數創意產品一樣，如果你專注于一件事，你的GIF會表現更好。

【優設十二月設計師個人私貨人氣榜】

Top 1：90后小哥幫你搞定UI設計圖文排版！
《90后小哥教你做UI！如何搞定界面設計之圖版篇（2）》

Top 2：設計師總結出來的冷知識系列好文合集！
《最終完結篇特制版！那些你不知道的PHOTOSHOP冷知識（四）》

Top 3：學會攝影也可以搞定版式設了！
《跨領域技巧！如何利用6個攝影構圖法搞定設計布局？》

原文鏈接：blog.invisionapp
譯文地址：colachan
譯者：@十萬個為什麼

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量88萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege