Photoshop, After Effects 匯出webp動態圖

工作的關係,稍微研究了一下關於產動態webp的方式。本來想說Photoshop已經支援webp了,應該也有匯出webp動畫的功能吧。但事與願違。看了一下以前要做gif動畫都會用的「儲存為網頁用」功能,沒有存為webp的檔案類型選項。再看一下「演算視訊」裡面也沒有webp的格式選項。

首先查到了WebPShop這個Plugin,不過他的動態做法是以每個圖層代表不同的時間,圖層上還需標示停留時間,至於原本的時間軸功能無法使用。這樣編輯起來也太麻煩。

WebPShop 做動態webp 需要在每個圖層後面標示靜止時間,編輯方式不直覺。

這時候想到了ffmpeg這個轉檔好幫手,似乎可以將Photoshop或AE的內容先匯出成影片或序列圖(依照時間順序產生一堆以數字為編號的圖檔),再使用ffmpeg轉webp。

這裡就直接先把製作流程介紹一遍:

首先,準備好你的動畫內容。這邊先用AE的畫面來介紹,雖然Photoshop的操作方式,後面也會提到,但我比較推薦用AE來做。效能差非常多。

準備好你的動畫內容

將動畫內容匯出成透明背景mov,點選File->Export->Add to Render Queue

先匯出成mov

點選output module右邊的選項,會出現一個設定視窗。Format選QuickTime,Video Output > Channel 選擇RGB+Alpha,點選ok。如果RGB+ALPHA無法點選,點一下Format Options,將Codec改成Apple PropRes 4444,就可以選取RGB+ALPHA了。

設定匯出格式

ffmpeg是一個command line工具,Mac可以用homebrew安裝,windows可以從官網下載執行檔來安裝

安裝完後,我們直接透過command line來下指令:

ffmpeg -i box_animation.mov -c libwebp_anim box_animation.webp

-i 後面接要input的檔案,也就是我們剛剛產出的mov檔名,-c 後面是codec我們用libwebp_anim來編碼webp動畫,最後是我們要output的檔名。

編碼完成

編碼完成後,我們就可以拉到瀏覽器裡去看看結果拉

使用Photoshop的話,我們可以用演算視訊功能,來導出透明PNG序列檔

選擇演算視訊

設定要輸出的檔名與格式。這邊我們要選擇PNG,演算選項的Alpha色版選擇“直接進行 – 未邊緣調和”,當我們的背景是透明的時候,才能正確地輸出。

選擇要輸出的格式

輸出完後,在command line輸入:

ffmpeg -i box_animation%5d.png -c libwebp_anim box_animation.webp

-i 後面接的是序列檔的檔名與幾位數字(%xd x代表有幾位數,幾位數就是演算視訊視窗中設定的那個),後面就跟上面的設定一樣。

關於webp的codec有兩個:libwebp, linwebp_anim,要做動畫要用後面這個。不然算透明背景的動畫時,會有上一個frame的殘影呦。

用libwebp會出現殘影

當動畫需要loop時,加上-loop x即可。x為數字,設為0時為無限重複:

ffmpeg -i box_animation.mov -c libwebp_anim -loop 0 box_animation.webp
# or
ffmpeg -i box_animation%5d.png -c libwebp_anim -loop 0 box_animation.webp

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料