AE to Gif / 如何從AE將影片轉換成GIF動畫

AE to Gif H

如何從AE將影片轉換成GIF動畫

由於近年來分享作品的網站如 Behance  / Dribbble 等成為主流趨勢之一,而GIF動畫檔因為檔案較小不阻礙流量,而且可以像圖片一樣置入在Blog與網頁中,成為創作者大方秀出自己作品的好方式。今天來跟大家分享如何將在AE將製作的影片轉換成GIF影片的轉換流程技巧。


操作步驟

1、先在AE完成動態影片的設定。

AE to Gif 01

2、在 AE 輸出影片
建議以下幾種影片格式:QT H.264、MP4、單張序列等。

AE to Gif 02

3、開啟Photoshop,準備進行影片的轉換。

4、在 PS 匯入影片的指令
在Photoshop中執行:檔案/ 讀入 / 視訊影格到圖層。將指定的影片匯入到 Photoshop。

AE to Gif 03

AE to Gif 04

5、設定影片匯入視窗

5.1 可自行設定影片要匯入的方式如下:
建議匯入整段影片設定:從開始到結束。
只需匯入部分片段設定:先從右邊設定好開始與結束的影片區段。
最後記得要將:將「製作影格動畫」選項打勾後按確定

AE to Gif 05

5.2
匯入後可以看到圖層視窗有許多依照序號排列的圖層,但要如何看到影格?
在Photoshop中執行:視窗 / 時間軸。可將影格操作視窗顯示出來做設定。

AE to Gif 06

AE to Gif 07

5.3
在時間軸操作視窗,可以根據動畫需要自行調整影格的數量與內容:在右上方開起倒三角形,調整影格設定。

AE to Gif 08

AE to Gif 09

6、在 PS 輸出 Gif 動畫
6.1
在 Photoshop中執行:檔案/ 儲存為網頁用。出現儲存為網頁用設定視窗。

AE to Gif 10
6.2
設定 Gif 顏色品質,相對的顏色數量越多,Gif檔案會越大。
欲保留最佳Gif顯示色彩設定如下(適用於點陣型素材、色彩漸層較多類型的影片):
最適化 / 透明 / 無透明混色 / 顏色:256 / 混色:100%。

AE to Gif 11

6.3 
設定Gif 播放選項。
影像尺寸:可根據自己的需求調整影片大小。
品質:環迴增值法。
動畫播放選項:建議設定成「永遠」,可以讓Gif影片自動循環播放。

AE to Gif 12


6.4
全部設定完成後,按下又下方的「儲存」,在另存最佳化檔案視窗中:指定檔案名稱與格式:謹影像。按下確定後視窗會自動關閉,並輸出成GIF檔案。

AE to Gif 13

AE to Gif 14

7、GIF播放
將輸出時所指定的GIF檔案拖拉到瀏覽器中,就可以看到動畫成果喽!

AE to Gif 15































3 則留言:

  1. 請問一下
    我第一次轉檔時是成功的
    但在第二次PS轉存為網頁時都不允許 說是錯誤...
    請問有解決辦法嗎?

    回覆刪除
  2. Hello 郁如:
    很高興收到妳的來信,也謝謝參與MGBoom的教學內容.
    沒有轉檔成功的原因 通常有以下可能:
    1. 轉檔的影片尺寸過大,程式無法負擔此運算( 將影片尺寸等比例縮小)
    2. PS本身此功能發生不穩定的情形( 重新開啟PS再試一次)
    3. 影片格式與gif轉檔發生不相容或衝突( 換一個影片格式)

    當然,如果妳能擷圖分享,會比較容易判斷真正的原因
    希望以上回覆可以給妳一個解決的方向.
    加油,歡迎保持聯絡

    MGBoom Design

    回覆刪除