LV. 42
GP 4k

【 超越GIF的高畫質動態圖像】APNG簽名檔製作教學

樓主 Rocaizy rocaizy91234
89 -
──── 建議使用電腦版網頁,方便瀏覽 ────


避免篇幅過長,這篇只講重點,介紹「APNG簽名檔製作教學」。
完整篇幅放在我個人創作中,
包含:APNG介紹、簽名檔介紹、簽名檔顯示設定、解決簽名檔別人看會死圖的問題等。
有興趣可以去看看。


GIF跟APNG(Animated PNG)的差別
重點:
1.顯示畫質:APNG >> GIF(僅256色)
2.檔案大小:APNG > GIF
3.普遍性:APNG < GIF

顯示畫質部分,看圖比較容易懂。
GIF與APNG比較 (為增加載入速度,圖片尺寸設定比較小)
GIF↓_____________________________ _______________APNG↓圖大靜待完全載入後再做比較
   
GIF 支援8 bit顏色 (256種顏色)_____________________APNG  動態的PNG、支援顏色多
因為GIF是用專門錄製程式做的,所以比一般GIF顯示效果還要漂亮,需要稍微觀察才會發現差別。
可以看到:APNG畫面表現相當出色;GIF則畫面常有顆粒狀雜訊的情況。
尤其GIF在顏色漸層表現上,顆粒狀最為明顯。


雖然普遍性APNG不如GIF,不過google chrome今年6月起有支援APNG顯示,APNG也開始受到注目了。
目前外國網站上有許多線上Video to APNG的網站,也很方便,但畫質跟流暢度普遍不佳。
所以要製作高品質的APNG,建議還是採用APNG Anime Maker製作。
另外,由於APNG檔案大小較大,導致載入時間也較長。這問題可以使用APNG Anime Maker的優化功能處理,一定程度上得到解決。





先上成品
(為增加載入速度,有做優化過,故畫質略低於正常APNG。畢竟簽名檔載入太久,別人也看不到)
(簽名檔框製作比較複雜,以後有機會再示範。)



超複雜APNG簽名檔製作流程圖:
(本篇只介紹虛線框框處,完整篇幅在小屋創作)


【會用到的程式】
必須:APNG Anime Maker
有類似功能即可:能將影片轉換成連續圖片的程式

影片轉換成連續圖片的程式,我是用Potplayer播放器的連續截圖功能


#步驟1 使用Potplayer播放器的連續截圖功能,將影片轉換成連續圖片,並設定好擷取尺寸。
快捷鍵:Ctrl+G,會跳出連續截圖的視窗。
以下是我個人設定。
藍色1範圍的設定,可依需求調整。
紅色2範圍的設定是重點,要注意。
擷取為自訂尺寸:218 x 122 而這是計算出來的數值。
因為「簽名檔的長寬必須為660 x 125 pixel 以內,才能正常顯示」,所以高必須設定在125 pixel 以下。
另外影片尺寸為1280 x 720,考慮到簽名檔大小,實在沒必要完整擷取,而且電腦也要處理很久。

而保險一點我設定高度 122 pixel ,所以寬度 = 高122 x 尺寸比值1.78 = 約 218 pixel (尺寸比值如綠色3範圍的媒體資訊1.78:1)。




#步驟2 到所擷取之連續圖片的資料夾,挑選要做成APNG簽名檔的連續圖片。
盡量不要太長,適可而止就好,這樣做出來的APNG檔案大小才小,載入速度才快。
載入太久,其他人也看不到,那就無法起到簽名檔的效果了。



#步驟3 打開APNG Anime Maker,設定APNG數值,並輸出。
1.點選「開啟」按鈕,到存放挑選好的連續圖片資料夾,將圖片全選開啟。

2.延遲的設定比較複雜,但很重要。
延遲有兩種單位,幀:每一秒顯示圖片的數目;毫秒:一張圖片顯示的毫秒數。
這時候就要計算擷取圖片一秒內有幾張圖片了,這可以從檔名看出端倪。
例如:AUGUST000016.766,表示整部影片中第16.766秒所擷取的圖片。所以只要知道前面檔名為「AUGUST000016.」的圖片有幾張,就知道一秒顯示幾張圖片了。

我的範例是一秒鐘有31張圖片,故一張圖片顯示的時間為 1秒 / 31張 = 0.03225 秒/張。
代表一張圖片顯示0.03225秒,約等於32毫秒。
因此,延遲設定32,並點選「毫秒」按鈕。
(在這例子中,如果是用「」的話,則延遲設定31,並點選「」按鈕。)
只是我習慣用毫秒。

3.偏移、增值、配置、合成請無視。

4.品質設定、壓縮級別依情況調整,但請勾選有損」、指定選取範圍,點選優化」,並把循環設定為 0 ,能大幅度降低APNG檔的大小。
而且降低畫質的程度也在可接受範圍
前面說過APNG檔案別太大,避免載入速度太慢,其他人也看不到,這樣簽名檔就沒意義了。

5.點選「儲存」,選擇APNG要輸出的位置。




#步驟4 確認APNG檔是否能達到預期效果。
最簡單方法,把APNG拉到google分頁上,即可觀看。




看完,謝謝你。
89
-
未登入的勇者,要加入討論嗎?
板務人員:

7649 筆精華,昨天 更新
一個月內新增 12
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】