鄭州UI設計學習進階之AE導出GIF動畫方法分享-tft每日頭條

AE是當前UI設計師比較常用的工具之一，是一款圖形視頻處理軟件，然而它并不能直接導出GIF格式的圖片，這讓很多設計師很是苦惱。接下來的鄭州UI設計學習進階課程就給大家分享AE導出GIF動畫的幾種方法。

1、使用插件Gifgun

GifGun腳本可以一鍵輸出GIF動圖格式，且操作簡單，效果質量高，腳本還可以自定義設置GIF文件的大小、幀數率等屬性。缺點是導出的GIF質量不算最高，會出現細微的卡幀，尤其在一個物體勻速運動的情況下表現尤為突出，另外較PS導出的GIF，色差會稍大一些。

2、使用AE導出視頻，再使用PS導出GIF

操作比較簡單，生成的圖片質量和大小也可以直接用于開發，但是适合非透明動畫，背景透明時質量不理想。

實現步驟：

1）渲染視頻在AE中Ctrl M渲染視頻，選擇“QuickTime”格式（渲染速度快），“RGB Alpha”通道（能保留透明背景），得到一個帶透明背景的視頻文件；

2）在PS中點擊“文件-導入-視頻幀到圖層”；

3）Ctrl shift alt s導出為web所用格式，将雜邊顔色修改為圖案所應用的界面的背景圖層一緻或改成“無”，即可導出。雖然打開雜邊選項會産生白邊，但是看起來更清晰。

鄭州UI設計學習進階之AE導出GIF動畫方法分享（鄭州UI設計學習進階之AE導出GIF動畫方法分享）1

3、在AE中完成影像制作時，開始輸出。點擊菜單中的“合成”—“添加到渲染隊列A”（快捷鍵Ctrl M）。

實現步驟：

1）點擊輸出模塊的“無損”，進行輸出模塊設置：設置格式為“png序列”，通道為“RGB Alpha”，如果不需要輸出透明通道，那直接選擇RGB通道，點擊确定。

2）點擊“渲染隊列”窗口中的“輸出到”選項，在彈出的“将輸出影片到”對話框中，選擇輸出路徑和文件名後點擊保存。

3）點擊“渲染隊列”窗口中的“渲染”，等待片刻，将影片輸出。

4）影片輸出完成，我們将會看到圖像序列自動在文件名後面加上序号。

5）打開PS,Ctrl O打開png序列，選擇第一個png序列第一個圖像，将“圖像序列”的選擇勾選，打開序列。

6）窗口—打開時間軸，空格鍵預覽動畫。

7）再存儲為WEB所用格式輸出GIF。

想了解更多UI設計技巧，你可以關注“千鋒鄭州校區”微信公衆号，也可以來千鋒鄭州UI設計培訓班試聽體驗，專業大牛講師全程面授，講解潮流高端的技能，讓你理論與實戰兼備，快速上崗就業拿高薪！