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,超過此大小影像將無法正常顯示。
- 儲存完後,請記得重新整理網頁,你的簽名檔才會正常顯示。
- 你可以到哈啦區的測試板去測試你的簽名檔顯示是否正常。
重點:
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雲端。
主要原因是用簽名檔顯示這兩個空間外連的圖片時,你自己看很正常,但其他人看到你的簽名檔時有機會死圖。
確認是否有死圖方法:使用瀏覽器無痕模式去測試板,看自己的簽名檔。 到目前為止,請朋友幫忙看簽名檔測試,也都沒有死圖問題。
註冊好後上傳圖片。
點選圖片會進入該圖片專屬的頁面,但別使用該連結,請右鍵點選在新分頁中開啟圖片。
進到該分頁後的網址"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簽名檔。
附上最近畫的進度,未完成。
這張作品比較不趕,所以對於背景會很仔細去畫。
最慢大概下個月完成,畢竟現在還是夏天。
文長,看完謝謝你。