自己做 Firefox APNG 動態面板

四個畫框的影像處理

確定畫面之後，就是打開繪圖軟體實際畫出來了，如果你的動畫總共要由四個畫框（frames）來構成，那麼Photoshop編輯的結果就是把這四張圖都畫好存出來。但是因為Personas面板有300KB的大小限制，加上檔案太肥大會影響到預覽和載入的效率，所以這四張圖建議不要「整張畫滿滿」，第二～四格只要記錄「有變化」的部份就好。

對於不熟悉影像處理的人來說，以上的做法看起來好像有點吃力，其實也沒有那麼困難，只要哪個區域的顏色會有變化，就開一個新圖層，把變化之後的色塊塗上去即可，其他部份保持透明不要上色。輸出的時候，把「底圖」關掉，只顯示「有變化」的部份就可以了。

▲塗上底色和機器人未眨眼之前的頭像，當成第一張畫面。

▲眨眼的時候右眼會緊閉，所以畫一塊綠色把原本的眼睛遮住，再畫一段眨眼的黑色。

▲輸出二～四格的時候把底圖圖層旁邊的眼睛關掉，只輸出有變化的部份就好。

▲Photoshop選「File＞Save for Web & Devices」就會進入PNG輸出視窗。

▲實際輸出的二～四格局部畫面。

（下一頁：合成動畫與發佈）