新更:
我文章裡上傳的 GIF 圖有的太大知乎居然無法正常顯示,可我的圖片都是 <10M 的,如果你也點不開某些 GIF 圖,可以去站酷看這篇文章或者直接看視頻教程:
視頻教程(簡潔版)
http://www.icpchaxun.com/video/1166453000683409408
視頻教程(絮叨版)
UI 設計師在作品包裝的時候,對於想展示動效交互的圖一般都非常大,因為大多數都需要對這張 GIF 進行排版設計,這所謂的排版設計 GIF 圖就是下面這種:
這是孔晨的站酷作品(http://www.zcool.com.cn/work/ZMzgxNDc4MDQ=.html)作品展示有很多的 GIF 包裝圖,逼格滿滿。
這種 GIF 圖對作品包裝的加持非常大,唬人杠杠的。不過這類圖都有一個特點,就是圖片分辨率大,通常又不能改,而文件大小又必須在 10M 以內(否則傳不到網站裡),實際上想做到這樣的 GIF 並沒有那麼簡單,其中的坑非常多,我就在網上尋找 GIF 壓縮的解決方案卻找不到靠譜的答案,所以我用瞭 2 天時間探索測試,總結出一套算是靠譜的方案分享出來(當然不是 PS 那種 low 爆的方案啦)。
1、對應場景
本文的教程隻針對大 GIF 輸出的壓縮,也就是說不改變 GIF 的尺寸是前提,所以涉及表情包壓縮那些不在本文考慮范圍內,不過因為表情包 GIF 圖不限制尺寸,要求更低,用本文的方法去壓縮表情包簡直輕松加愉快,其他各類不限制尺寸的 GIF 通通適用。
2、GIF 圖的要求
3、☆☆影響 GIF 大小的 4 個核心要素☆☆
影響 GIF 大小的因素有不少,包括 PS 裡面那些可感知、圖案、顏色數量、WEB 色等等,或多或少都會影響 GIF 大小,但是,我這裡說的 3 個核心要素是影響比例最大的要素,比如 GIF 的顏色數量,其實顏色數量對 GIF 大小影響幅度不算很大,所以不在 3 要素之內。
針對上面最後一條,像素顏色數量舉個例子:
4、GIF 的歷史和新動態圖技術(aPNG、WebP)簡介
嚴禁的技術資料我就不說瞭,這裡用大白話簡單介紹。GIF 是個很古老的技術,所以今天 9012 年瞭依然沒什麼改變,那麼老技術的限制就是圖片有毛邊、顏色又少、大小優化又很爛。而新的動態圖如:aPNG、webP,這 2 種都是可以動態顯示圖片,可惜的是新技術,各設備和瀏覽器支持程度不一樣,說人話就是技術不穩定不是個保守方案。而這 2 個格式在移動端卻又是二分天下,aPNG 是蘋果專用的,webP 是安卓專用的,也就是說移動端可以大膽的用這 2 種格式去實現動態圖,開發都知道這個;額外提的是這 2 種圖制作過程都是先生成 PNG 序列幀,然後通過工具( Isparta )去合成這 2 種格式。
5、為什麼不用 PS?
PS 有幾個坑點:
這裡就按照作品包裝的流程來說,從零到 GIF 壓縮完整說一遍。
步驟一:靜態圖制作
就像文章開頭的示范圖片,你需要先把靜態不動的元素排好版,給會動的動效界面留個地方;大傢都是設計師我就跳過。
步驟二:錄屏
這一步就是要把你想展示的動效交互錄成視頻,大傢八仙過海各顯神通吧,但我這裡簡單說幾個方案:
電腦端錄屏工具:
Windows 可以用來錄屏的工具
步驟三:合成
這一步就是要把靜態圖和視頻融合到一起,下一步就做成視頻瞭,所以說這一步該剪輯的剪輯,該調色的調色。那麼現在就有 2 個選擇:
前面簡單總結過為什麼不用 PS,我這 2 天一直在研究 GIF 壓縮,花 PS 上的時間可不少,這裡就放棄 PS 瞭。而視頻剪輯軟件這裡優先推薦 AE,其實這一步的目的大傢要搞清楚,就是需要調顏色的調顏色,需要裁剪、加速、加東西的,總之就是要把所有編輯、調整的活兒在裡搞定,最後導出視頻再純粹的壓縮 GIF;所以視頻編輯軟件大傢用自己順手的即可,PRE 和 FCP 都可以。而我推薦用 AE 是因為能搞的效果很多,順便可以學學 AE 沒啥壞處,孔晨作品裡的動效多數都是 AE 做的(少部分是 Principle)。
這一步其實很重要,因為錄的視頻可能很大,時間很長,都需要在這一步做裁剪,下面【AE 操作示例】會有示例介紹,這裡總結一下:
步驟四:AE 操作
1、導入素材,這裡隻是把素材放到 AE 裡,還沒有新建畫佈
5974d168b20ce03ebb1c5cf1e89cdadd
提示:如果蘋果導入AE 視頻出現錯誤 81::1 如圖,則通過 QuickTime - 導出 1080p 轉換一下就好(見 GIF 操作)。
2、靜態圖托到右側(見 GIF 圖示),這裡靜態圖就是我們 GIF 的真實尺寸,所以直接拖進去,視頻自動也是這個尺寸
3、視頻同上操作,也托進去,這時候把視頻按我們靜態圖設計的位置擺好即可,中間涉及到調整大小,先單擊視頻,然後拖拽邊角錨點即可,記得按著 shift 保持比例不變。
4、這時我覺得視頻太長,而且有很多邊角料沒用的視頻間隙可以刪掉,所以要做剪輯。AE 按快捷鍵 CMD+Shift+D,咔嚓一下,把視頻一分為二,這樣我們可以一級一級去裁剪,大傢自由發揮
5、裁剪完成後適當加速,開頭說過影響 GIF 大小的要素有時間,所以縮短時長是最實惠的壓縮方案,上面已經剪輯過一部分視頻,這裡再酌情來點加速;然後調整時間軸,這裡其實不用管素材多餘的長度,直接限定 AE 視頻長度即可,見圖理解一哈
6、合成步驟到此結束
步驟五:GIF 壓縮(2 套方案)
細心的人會註意到上面合成的步驟沒有導出視頻就結束瞭,這時候有 2 套壓縮方案選擇:
一定有人問哪個好,沒跑瞭。那我分開說一下:
Gifski
GIFGUN
這 2 個軟件我會交替使用,最便捷的當然是 Gifski,但單純從壓縮質量和效果來說,GIFGUN 比 Gifski 好一些,我測試過不少圖,GIFGUN 能壓縮的很小,當然也是因為 GIFGUN 的壓縮參數更多一些。
1、安裝插件安裝方面我這裡不細說瞭,百度有很多,這裡貼一個 B 站 UP 主的視頻:http://www.bilibili.com/video/av51905975?from=search&seid=13263881613802650582
2、我們上一步做到合成瞭,這時候安裝完插件去窗口裡選擇即可
3、打開後界面非常簡單,我們選擇小齒輪進入設置界面,這裡常用的功能隻有【幀率】、【最大顏色】、【壓縮】,其他選項可以參考我的設置:
保存位置自己設一下幀率:幀率一般來說 20 左右,如圖圖片實在太大也可以設置 12,總之越小圖片就越小最大顏色:因為是 UI 作品的導出,所以顏色上最大 256,最小 128 是我能接受的范圍,顏色再少就沒意義瞭壓縮:這個功能非常給力,他比 PS 那些有的沒的來的更直接,圖片太大直接在裡有選檔位壓縮就行瞭,效果很明顯
這裡我要額外說的建議就是,如果 GIF 壓出來非常小,我們就可以反手把參數調滿,讓 GIF以最高質量展示,反正餘量還有很多;比如想我截圖裡的就是最高顯示質量,反正 10M 以內盡量的大就行瞭。
4、設置完後點保存,生成即可。生成 GIF 後我們檢查壓縮效果和大小,如果大小超過瞭就去上面參數裡慢慢往下調參數壓縮,自己搗鼓吧,這套方案到此結束。
1、Gifski 就是把一個視頻導出成 GIF,安裝方法直接去蘋果商店搜索,或者官網(Mac 和 Win 都有)下載(http://gif.ski/)
2、這時我們回到合成那一步把 AE 裡編輯好的視頻導出
a23f8bf0b4401574ce72e96f2d4cb8cb
3、在蘋果系統中,AE 導出的視頻需要轉碼一下,否則其他軟件識別不瞭,操作如下:
4、把轉碼的視頻拖入到 Gifski 中,我們能看到簡單的參數
尺寸:尺寸一般不動,因為我們把一切都在 AE 裡做好瞭;但如果你隻是弄點表情包其他無所謂的 gif 圖,就可以把尺寸縮小來壓縮,這樣壓縮效果最好。
FPS:我一般保持 20 以上,也能影響 gif 大小,大傢多嘗試即可。
Quality:就是壓縮質量的意思,拉到最右邊就是不壓縮,反之就是壓縮;這其實是我要誇 Gifski 的地方,這裡就是簡單粗暴的讓你控制想壓縮多少比例,而 PS 裡那些參數讓人一看就懵還各種卡真是神經病。
PS:右下角那個大小是 GIF 壓縮的預估大小,是不準的,大傢無視就好。
5、點擊【Convert】壓縮,壓縮完就會有提示啦,我們先看大小是否符合 10M 以內,不符合就重新把視頻拖進去重新調參數壓縮;如果符合 10M 以內就點擊【save】保存,OK,齊活兒!
上面演示中,我壓縮後大於 10M,所以我不用保存,再次拖入視頻重新調參數並壓縮,剩下的就不演示瞭。
6、完事兒
有個細節可能有人會問:文章開頭提到孔晨的 GIF 圖,Dribbble 和站酷都是限制 GIF <10m 的,為什麼他們的 Gif 看起來很絲滑順暢?
這裡解釋下,因為我直接用的 Figma 做的交互動效,也是直接錄的 Figma 演示稿,自己操作都有點卡卡的,更別說錄成視頻瞭,這個鍋應該 Figma 來背。所以如果追求絲滑交互動效的同學,要用 AE 或者 Principle 這種純動效軟件來做,這樣出來都是絲滑流暢的;關於這一點大傢可以直接去 Dribbble 找一些動效視頻用我的方法轉成 Gif 來對比流暢度,總之這套方案還是非常靠譜好用的。下面是我找到一段 Dribbble 視頻和我壓縮的 Gif 圖,大傢對比一下:
Dribbble 源視頻http://www.icpchaxun.com/video/1166430291236802560
2986726caacb4fe4485fe64e139cf27dGIF_1
GIF_2
篇幅看似較長,其實都是圖片撐起來的,為瞭讓更多的人能看完並成功落地,難免會有囉嗦的地方,如果還不太明白的可以看本文的視頻版教程(http://www.bilibili.com/video/av70758707/?p=2);其實真正的內容就是使用瞭 AE 插件 GIFGUN 和工具 Gifski 2 種方案。不同的是我探索這 2 個方案之前看瞭很多國內外 Gif 壓縮資料,也踩瞭很多坑,做瞭各種 GIF 壓縮測試,才篩選出來這 2 種比較靠譜的方案;最後,希望能幫到需要的人。