![]()
APNG 動(dòng)態(tài)的PNG、支援顏色多
來(lái)源如下(可與原影片作比較)
因?yàn)镚IF是用專(zhuān)門(mén)錄製程式做的，所以比一般GIF顯示效果還要漂亮，需要稍微觀察才會(huì)發(fā)現(xiàn)差別。
可以看到：APNG畫(huà)面表現(xiàn)相當(dāng)出色；GIF則畫(huà)面常有顆粒狀雜訊的情況。
尤其GIF在顏色漸層表現(xiàn)上，顆粒狀最為明顯。
我是看的出來(lái)啦...。如果看不出來(lái)，網(wǎng)路上有很多更清楚的比較圖。
但APNG也因能顯示的色彩較多，相對(duì)檔案也大。
如前面提到的比較圖，GIF大小為1.83MB、APNG為6.09MB。
看似差異3倍，但那6.09MB是優(yōu)化過(guò)的大小，沒(méi)優(yōu)化可能超過(guò)10MB的大小。
在普遍性方面，APNG不如GIF，是很大的劣勢(shì)。
不過(guò)2018年6月，全球使用率最高的瀏覽器Google Chrome(59版)也開(kāi)始支援APNG顯示，因此APNG也開(kāi)始受到注目了。
目前常用的瀏覽器僅剩下Microsoft的IE、Edge沒(méi)有支援。
目前外國(guó)網(wǎng)站上有許多線(xiàn)上Video to APNG的網(wǎng)站，也很方便，但畫(huà)質(zhì)跟流暢度普遍不佳。
所以要製作高品質(zhì)的APNG，建議還是採(cǎi)用APNG Anime Maker製作。
另外，前面提到由於APNG檔案大小較大，導(dǎo)致載入時(shí)間也較長(zhǎng)。
這問(wèn)題可以使用APNG Anime Maker的優(yōu)化功能處理，一定程度上得到解決。
![]()
二、簽名檔介紹
當(dāng)在哈拉區(qū)發(fā)表文章或回應(yīng)文章時(shí)，如果有簽名檔，就會(huì)顯示出來(lái)，如紅色虛線(xiàn)框處。
不過(guò)這是有限制的，必須要有巴哈姆特帳號(hào)且勾選顯示簽名檔，才會(huì)看到自己或其他人的簽名檔。
![]()
關(guān)於簽名檔：轉(zhuǎn)貼官方介紹──
使用須知
- 謹(jǐn) 守 網(wǎng) 路 禮 儀 －簽名檔使用亦須遵守巴哈姆特站規(guī)，請(qǐng)勿張貼任何涉及猥褻、18禁或人身攻擊謾罵之圖文。
- 不 放 置 惡 意 圖 文 連 結(jié) －倘若利用簽名檔圖文放置惡意程式連結(jié)、從事不法行為，除依站規(guī)處分，刪除帳號(hào)外；若被害人因此提出相關(guān)告訴，巴哈姆特將提供違規(guī)者相關(guān)資料配合警方調(diào)查。
功能說(shuō)明
- 如要觀看哈啦區(qū)簽名檔，請(qǐng)至哈啦區(qū)偏好設(shè)定 → 其它顯示設(shè)定，勾選「我要看到所有人簽名檔」即可。
- WEB簽名檔不開(kāi)放 HTML 的格式。
- 請(qǐng)使用下方的五種功能鈕來(lái)編輯WEB簽名檔。
未完成會(huì)員資料登錄者，只能使用純文字編輯簽名檔；請(qǐng)至會(huì)員中心詳實(shí)填寫(xiě)會(huì)員資料。
- 編輯完後按「預(yù)覽」可觀看WEB簽名檔。
- 簽名檔版面顯示大小限制為寬660 x 高125 pixel，超過(guò)此大小影像將無(wú)法正常顯示。
- 儲(chǔ)存完後，請(qǐng)記得重新整理網(wǎng)頁(yè)，你的簽名檔才會(huì)正常顯示。
- 你可以到哈啦區(qū)的測(cè)試板去測(cè)試你的簽名檔顯示是否正常。
重點(diǎn)：
2.會(huì)員資料要填好才能使用有圖片的簽名檔。
3.簽名檔大小必須在『寬660 x 高125 pixel』以?xún)?nèi)，才能正常顯示。
![]()
三、APNG簽名檔製作流程
先上成品
由於巴哈創(chuàng)作顯示頁(yè)面寬度小於660 pixel，簽名檔放上來(lái)會(huì)被切掉，所以用google文件顯示。
成品 點(diǎn)進(jìn)去後如下所示，圖片是APNG，並且有動(dòng)態(tài)效果。
流程圖：![]()
【會(huì)用到的程式】
必須：APNG Anime Maker
有類(lèi)似功能即可：能將影片轉(zhuǎn)換成連續(xù)圖片的程式
影片轉(zhuǎn)換成連續(xù)圖片的程式，我是用Potplayer播放器的連續(xù)截圖功能。
這些程式就不提供了，大多數(shù)免費(fèi)程式都有這些功能。
#步驟1 使用Potplayer播放器的連續(xù)截圖功能，將影片轉(zhuǎn)換成連續(xù)圖片，並設(shè)定好擷取尺寸。
YT影片網(wǎng)路上有很多方法可以弄到，可以自己找找看。
快捷鍵：Ctrl+G，會(huì)跳出連續(xù)截圖的視窗。
以下是我個(gè)人設(shè)定。
藍(lán)色1範(fàn)圍的設(shè)定，可依需求調(diào)整。
紅色2範(fàn)圍的設(shè)定是重點(diǎn)，要注意。
擷取為自訂尺寸：218 x 122 這是計(jì)算出來(lái)的數(shù)值。
前面提到「簽名檔的長(zhǎng)寬必須為660 x 125 pixel 以?xún)?nèi)，才能正常顯示」，所以高必須設(shè)定在125 pixel 以下。
另外影片尺寸為1280 x 720，考慮到簽名檔大小，實(shí)在沒(méi)必要完整擷取，而且電腦也要處理很久。
而保險(xiǎn)一點(diǎn)我設(shè)定高度 122 pixel ，所以寬度 = 高122 x 尺寸比值1.78 = 約 218 pixel (尺寸比值如綠色3範(fàn)圍的媒體資訊1.78：1)。
綠色3範(fàn)圍的媒體資訊 FPS=30.00 ，表示「每秒顯示畫(huà)格數(shù)目」，而我是設(shè)定一畫(huà)格截取一張，理論上可以參考，但看看就好。 一秒幾張還是看截取的結(jié)果計(jì)算比較準(zhǔn)確。
#步驟2 到所擷取之連續(xù)圖片的資料夾，挑選要做成APNG簽名檔的連續(xù)圖片。
盡量不要太長(zhǎng)，適可而止就好，這樣做出來(lái)的APNG檔案大小才小，載入速度才快。
載入太久，其他人也看不到，那就無(wú)法起到簽名檔的效果了。
#步驟3 打開(kāi)APNG Anime Maker，設(shè)定APNG數(shù)值，並輸出。
1.點(diǎn)選「開(kāi)啟」按鈕，到存放挑選好的連續(xù)圖片資料夾，將圖片全選開(kāi)啟。
2.延遲的設(shè)定比較複雜，但很重要。
延遲有兩種單位，幀：每一秒顯示圖片的數(shù)目；毫秒：一張圖片顯示的毫秒數(shù)。
這時(shí)候就要計(jì)算擷取圖片一秒內(nèi)有幾張圖片了，這可以從檔名看出端倪。
例如：AUGUST000016.766，表示整部影片中第16.766秒所擷取的圖片。所以只要知道前面檔名為「AUGUST000016.」的圖片有幾張，就知道一秒顯示幾張圖片了。
我的範(fàn)例是一秒鐘有31張圖片，故一張圖片顯示的時(shí)間為 1秒 / 31張 = 0.03225 秒/張。
代表一張圖片顯示0.03225秒，約等於32毫秒。
因此，延遲設(shè)定32，並點(diǎn)選「毫秒」按鈕。
(在這例子中，如果是用「幀」的話(huà)，則延遲設(shè)定31，並點(diǎn)選「幀」按鈕。)
只是我習(xí)慣用毫秒。
3.偏移、增值、配置、合成請(qǐng)無(wú)視。
4.品質(zhì)設(shè)定、壓縮級(jí)別依情況調(diào)整，但請(qǐng)勾選「有損」、「指定選取範(fàn)圍」，點(diǎn)選「優(yōu)化」，並把「循環(huán)」設(shè)定為 0 ，能大幅度降低APNG檔的大小。
而且降低畫(huà)質(zhì)的程度也在可接受範(fàn)圍。
前面說(shuō)過(guò)APNG檔案別太大，避免載入速度太慢，其他人也看不到，這樣簽名檔就沒(méi)意義了。
5.點(diǎn)選「儲(chǔ)存」，選擇APNG要輸出的位置。
#步驟4 確認(rèn)APNG檔是否能達(dá)到預(yù)期效果。
最簡(jiǎn)單方法，把APNG檔拉到google分頁(yè)上，即可觀看。
如果確認(rèn)後，就完成APNG簽名檔的製作了。
![]()
四、簽名檔顯示設(shè)定
1.將APNG圖片上傳到圖床網(wǎng)站。
不推薦最常用的imgur、google雲(yún)端。
主要原因是用簽名檔顯示這兩個(gè)空間外連的圖片時(shí)，你自己看很正常，但其他人看到你的簽名檔時(shí)有機(jī)會(huì)死圖。
確認(rèn)是否有死圖方法：使用瀏覽器無(wú)痕模式去測(cè)試板，看自己的簽名檔。 個(gè)人使用：imgbox ，建議註冊(cè)會(huì)員，方便管理圖片。 到目前為止，請(qǐng)朋友幫忙看簽名檔測(cè)試，也都沒(méi)有死圖問(wèn)題。
註冊(cè)好後上傳圖片。
點(diǎn)選圖片會(huì)進(jìn)入該圖片專(zhuān)屬的頁(yè)面，但別使用該連結(jié)，請(qǐng)右鍵點(diǎn)選在新分頁(yè)中開(kāi)啟圖片。
進(jìn)到該分頁(yè)後的網(wǎng)址"https://images2.imgbox.com/a7/e9/XkEeIveM_o.png"，才是要我們需要的外連網(wǎng)址。
2.進(jìn)到個(gè)人偏好設(shè)定，點(diǎn)選「編輯簽名檔」，頁(yè)面下方顯示如下圖。
簽名檔編號(hào)1~9，表示可以設(shè)定9種簽名檔。
每次發(fā)表文章/回應(yīng)文章都可以設(shè)定要顯示哪一種簽名檔。
或者可以到個(gè)人偏好設(shè)定中，選擇固定要顯示的簽名檔。
3.編輯簽名檔
點(diǎn)選「增加圖片的連結(jié)」
將APNG檔的網(wǎng)址"https://images2.imgbox.com/a7/e9/XkEeIveM_o.png"填入視窗中。
此時(shí)，簽名檔會(huì)顯示如下。
可點(diǎn)選預(yù)覽測(cè)試，但建議還是使用瀏覽器無(wú)痕模式去測(cè)試板測(cè)試簽名檔，或請(qǐng)有巴哈帳號(hào)的朋友幫你確認(rèn)。
4.設(shè)定完成後，按下「儲(chǔ)存」即可。
由於流程很複雜，所以只用一個(gè)APNG做示範(fàn)，比較好理解。
實(shí)際上我是做3個(gè)APNG，並將3個(gè)檔案總和控制在10MB上下，方便快速載入。
之後每次發(fā)表、回應(yīng)文章就可選擇想要展示的簽名檔。
本想增加APNG圖片套用外框的示範(fàn)文章，但光APNG簽名檔就佔(zhàn)了很長(zhǎng)的篇幅，為避免過(guò)於複雜而取消。
成品 點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)圖片有框。其實(shí)也不是多難的技術(shù)就是了。 如有時(shí)間，會(huì)打一篇文章示範(fàn)套用外框在APNG圖片。
這篇有點(diǎn)不務(wù)副業(yè)，跑來(lái)介紹APNG簽名檔。
附上最近畫(huà)的進(jìn)度，未完成。
這張作品比較不趕，所以對(duì)於背景會(huì)很仔細(xì)去畫(huà)。
最慢大概下個(gè)月完成，畢竟現(xiàn)在還是夏天。
文長(zhǎng)，看完謝謝你。
創(chuàng)作內(nèi)容
【 超越GIF的高畫(huà)質(zhì)動(dòng)態(tài)圖像】APNG簽名檔製作教學(xué)
三、」開(kāi)始閱讀，前面只是科普。
一、APNG（Animated PNG）介紹
非圖繪 (3)