創作內容

46 GP

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

作者:Rocaizy│2018-07-19 13:54:26│巴幣:2,202│人氣:5182
──── 圖多,流量注意│建議使用電腦版網頁,方便瀏覽 ────


灰字=看看就好,不是重點。
若已知道APNG跟簽名檔,可以直接從「三、」開始閱讀,前面只是科普。

封面圖:之前畫的塗鴉,《雛子的筆記》櫻木雛子。






一、APNG(Animated PNG)介紹

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

顯示畫質部分看圖比較容易懂。
GIF與APNG比較 (圖大靜待完全載入後做比較)

GIF
    
GIF 支援8 bit顏色 (256種顏色)

APNG
APNG  動態的PNG、支援顏色多

來源如下(可與原影片作比較)

因為GIF是用專門錄製程式做的,所以比一般GIF顯示效果還要漂亮,需要稍微觀察才會發現差別。
可以看到:APNG畫面表現相當出色;GIF則畫面常有顆粒狀雜訊的情況。
尤其GIF在顏色漸層表現上,顆粒狀最為明顯。
我是看的出來啦...。如果看不出來,網路上有很多更清楚的比較圖。

但APNG也因能顯示的色彩較多,相對檔案也大。
如前面提到的比較圖,GIF大小為1.83MB、APNG為6.09MB。
看似差異3倍,但那6.09MB是優化過的大小,沒優化可能超過10MB的大小。

在普遍性方面,APNG不如GIF,是很大的劣勢。
不過2018年6月,全球使用率最高的瀏覽器Google Chrome(59版)也開始支援APNG顯示,因此APNG也開始受到注目了。
目前常用的瀏覽器僅剩下Microsoft的IE、Edge沒有支援。
目前外國網站上有許多線上Video to APNG的網站,也很方便,但畫質跟流暢度普遍不佳。
所以要製作高品質的APNG,建議還是採用APNG Anime Maker製作。

另外,前面提到由於APNG檔案大小較大,導致載入時間也較長。
這問題可以使用APNG Anime Maker的優化功能處理,一定程度上得到解決。





二、簽名檔介紹

當在哈拉區發表文章或回應文章時,如果有簽名檔,就會顯示出來,如紅色虛線框處。
不過這是有限制的,必須要有巴哈姆特帳號且勾選顯示簽名檔,才會看到自己或其他人的簽名檔。


關於簽名檔:轉貼官方介紹──

使用須知

  • 謹 守 網 路 禮 儀 -簽名檔使用亦須遵守巴哈姆特站規,請勿張貼任何涉及猥褻、18禁或人身攻擊謾罵之圖文。
  • 不 放 置 惡 意 圖 文 連 結 -倘若利用簽名檔圖文放置惡意程式連結、從事不法行為,除依站規處分,刪除帳號外;若被害人因此提出相關告訴,巴哈姆特將提供違規者相關資料配合警方調查。

功能說明
  • 如要觀看哈啦區簽名檔,請至哈啦區偏好設定 → 其它顯示設定,勾選「我要看到所有人簽名檔」即可。
  • WEB簽名檔不開放 HTML 的格式。
  • 請使用下方的五種功能鈕來編輯WEB簽名檔。
    未完成會員資料登錄者,只能使用純文字編輯簽名檔;請至會員中心詳實填寫會員資料。
  • 編輯完後按「預覽」可觀看WEB簽名檔。
  • 簽名檔版面顯示大小限制為寬660 x 高125 pixel,超過此大小影像將無法正常顯示。
  • 儲存完後,請記得重新整理網頁,你的簽名檔才會正常顯示。
  • 你可以到哈啦區的測試板去測試你的簽名檔顯示是否正常。

重點:
1.要看到簽名檔請去哈拉區偏好設定,勾選「我要看到所有人簽名檔」。
2.會員資料要填好才能使用有圖片的簽名檔。
3.簽名檔大小必須在『寬660 x 高125 pixel』以內,才能正常顯示。





三、APNG簽名檔製作流程

先上成品
由於巴哈創作顯示頁面寬度小於660 pixel,簽名檔放上來會被切掉,所以用google文件顯示。
成品 點進去後如下所示,圖片是APNG,並且有動態效果。



流程圖:


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

影片轉換成連續圖片的程式,我是用Potplayer播放器的連續截圖功能
這些程式就不提供了,大多數免費程式都有這些功能。



#步驟1 使用Potplayer播放器的連續截圖功能,將影片轉換成連續圖片,並設定好擷取尺寸。
YT影片網路上有很多方法可以弄到,可以自己找找看。
快捷鍵: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)。
綠色3範圍的媒體資訊 FPS=30.00 ,表示「每秒顯示畫格數目」,而我是設定一畫格截取一張,理論上可以參考,但看看就好。 一秒幾張還是看截取的結果計算比較準確。




#步驟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分頁上,即可觀看。
如果確認後,就完成APNG簽名檔的製作了。





四、簽名檔顯示設定

1.將APNG圖片上傳到圖床網站。
不推薦最常用的imgur、google雲端。
主要原因是用簽名檔顯示這兩個空間外連的圖片時,你自己看很正常,但其他人看到你的簽名檔時有機會死圖。
確認是否有死圖方法:使用瀏覽器無痕模式測試板看自己的簽名檔。
個人使用:imgbox ,建議註冊會員,方便管理圖片。
到目前為止,請朋友幫忙看簽名檔測試,也都沒有死圖問題。
註冊好後上傳圖片。
點選圖片會進入該圖片專屬的頁面,但別使用該連結,請右鍵點選在新分頁中開啟圖片


進到該分頁後的網址"https://images2.imgbox.com/a7/e9/XkEeIveM_o.png",才是要我們需要的外連網址。




2.進到個人偏好設定,點選「編輯簽名檔」,頁面下方顯示如下圖。
簽名檔編號1~9,表示可以設定9種簽名檔。
每次發表文章/回應文章都可以設定要顯示哪一種簽名檔。
或者可以到個人偏好設定中,選擇固定要顯示的簽名檔。


3.編輯簽名檔
點選「增加圖片的連結
將APNG檔的網址"https://images2.imgbox.com/a7/e9/XkEeIveM_o.png"填入視窗中。


此時,簽名檔會顯示如下。

可點選預覽測試,但建議還是使用瀏覽器無痕模式測試板測試簽名檔,或請有巴哈帳號的朋友幫你確認。

4.設定完成後,按下「儲存」即可。
由於流程很複雜,所以只用一個APNG做示範,比較好理解。
實際上我是做3個APNG,並將3個檔案總和控制在10MB上下,方便快速載入。
之後每次發表、回應文章就可選擇想要展示的簽名檔。


────── 完成 ──────



本想增加APNG圖片套用外框的示範文章,但光APNG簽名檔就佔了很長的篇幅,為避免過於複雜而取消。
成品 點進去會發現圖片有框。其實也不是多難的技術就是了。
如有時間,會打一篇文章示範套用外框在APNG圖片。



這篇有點不務副業,跑來介紹APNG簽名檔。

附上最近畫的進度,未完成。
這張作品比較不趕,所以對於背景會很仔細去畫。
最慢大概下個月完成,畢竟現在還是夏天。




文長,看完謝謝你。

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4062976
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 6 篇留言

燕陳
謝謝分享

07-20 07:58

Rocaizy
謝謝啦。 做了APNG簽名檔就順便打篇教學。07-20 21:57
御風
很詳細的教學,很心動,決定晚點來做一個自己的APNG簽名檔

07-22 21:57

Rocaizy
這篇挺複雜的,有耐心看完,很謝謝你啊。07-22 22:39
最速風騷大神彩砲
感謝板大分享教學 只是連續截圖的部分沒提醒影片要按下播放才會執行 我一度卡在這裡煩惱一會呢

09-02 14:24

Rocaizy
有點晚才看到回文通知。 不過,還謝謝你的補充!09-04 22:59
中澤 倉艮
收藏了,實用感謝分享!

02-14 18:23

かんう
感謝分享~

09-14 16:24

場場
試著做了幾個(小於10MB) 但傳到圖床(imgbox)後通通都不會動了@@

10-24 11:04

Rocaizy
謝謝你的回應啊。
這個圖床我是還能用。
至於製作我建議改用Honeycam,UI更直觀、功能更多樣,只是免費版有浮水印。10-25 09:41
我要留言提醒:您尚未登入,請先登入再留言

46喜歡★rocaizy91234 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:遊戲王-第十九屆台大崇高... 後一篇:巴哈姆特 22 週年慶賀...

追蹤私訊切換新版閱覽

作品資料夾

sakima55免費10首
【音樂AI】SUNO AI試玩 https://home.gamer.com.tw/artwork.php?sn=5901304看更多我要大聲說17小時前


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

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