自己做 Firefox APNG 動態面板

上次我們刊出〈為什麼你的 Firefox 面板會動？〉，解釋了APNG這個新的動畫格式，現在就來實際動手做一遍試試看吧。目前APNG的編輯工具不是很完善，你得單格單格的設計好，再送進編輯軟體合成動畫，所以必須要額外準備一套支援圖層的影像處理軟體，並且對圖層的運用有一定的概念才可以。

▲先連上Personas面板的官網，按上方的「Create Your Own」。

▲接下來依序會有製作header和footer的說明。

Personas官網上的教學很清楚簡單，位在上方的header面板圖解析度必須是3000 x 200像素，接受PNG和JPG檔，建議是柔和、反差小、漸層上色的圖形，檔案大小不要超過300KB。底部的footer也適用類似的原則，差別只在解析度改為3000 x 100像素。

了解基本格式之後，比較困難的部份其實是在「構思」，也就是這麼長的一張畫布上面到底要擺什麼東西？這裡我們不會在「美學」的部份卡關太久，只會告訴大家要完成一張「會動的」、「正確的」Persona面板應該怎麼做，所以等一下各位發現我們的作品很醜的時候，請不要笑的太大聲。

我們簡單的構想是這樣的，Mozilla建議header影像的重點畫面要擺在右側，所以小編直接拉一顆很久以前塗鴉的機器人頭像放在這個位置，如果畫面動的太誇張，會干擾使用者的操作，我們就設定讓機器人拋個媚眼，也就是只有眼睛動一動就好了。至於footer的重點畫面跟header相反，是在左側，這裡我們就先直接跳過。