![[求救]請教前輩們討厭的bar白邊要怎麼消除](http://attach.mobile01.com/attach/200604/mobile01-8581bf7a2801fd41621592df8ce544c1.jpg)
想請問前輩們 bar的白邊要怎樣才可以消除掉
我在做動態bar的時候預覽主題 發現會有討人厭的白邊 如下圖
![[求救]請教前輩們討厭的bar白邊要怎麼消除](//attach.mobile01.com/attach/200604/mobile01-8581bf7a2801fd41621592df8ce544c1.jpg)
想請問前輩們 bar的白邊要怎樣才可以消除掉
想請問前輩們 bar的白邊要怎樣才可以消除掉
個人積分：255分
文章編號：1148962
個人積分：52分
文章編號：1148967
個人積分：170分
文章編號：1149040
個人積分：52分
文章編號：1149062
個人積分：3072分
文章編號：1149171
個人積分：52分
文章編號：1150900
個人積分：3072分
文章編號：1151159
....
個人積分：2665分
文章編號：1151334
那我來說明一下原理吧~
首先, 大家必須了解gif檔案的特點:
gif本身是只能有兩種像素: 100%不透明或100%透明
這一點, 無論是靜態或動態gif都是一樣.
靜態物件大家通常都是用成jpg或png, 所以對於靜態gif就不多說囉
製作動態gif就會有麻煩了~
首先, 動態gif也可以分成兩種: 矩形(方形/長方形) 或非矩形動態gif
(這個只是針對主題製作的二分法)
矩形動態gif相信很多人都有製作過, 那就是待機動畫和螢幕保護了
這個製作起來是不會出現白邊的問題, 因為矩形的邊緣都是不透明像素
範例: 借用之前所做過的gif一下, 好久不見的暴力熊阿~
這就是矩形動態gif囉
接下來就是非矩形動態gif了..包括圓形, 橢圓形, 心形, 魚形, 還有其他什麼奇怪形啦
這些就是會有麻煩的地方..為什麼呢?
因為要有動態gif, 就要先有構成gif的靜態畫格
要做非矩形動態gif, 靜態畫格的圖檔就只能用gif或png格式
因為像jpg或bmp根本只能做成矩形..
這時候利用png檔就會出現問題, 因為png可以支援各透明度(0-100%), 而gif卻不能
當你的png靜態圖檔有半透明的像素, 轉成gif這些像素就變成白色的了.
舉例來說, 你畫了一張png, 裡面有一顆像素是90%透明度
(注: 透明度=transparency, 0%=完全不透明, 100%=完全透明)
然後你把這張png轉成gif, 那gif會怎麼表現那顆90%透明度的像素?
不可能變100%透明度(完全透明)吧, 那當然會變成0%透明度(完全不透明)了..所以就會看到白色
那麼, 這些半透明像素又從哪裡來呢?
一般如果我們做非矩形的png檔, 邊緣部份都會有半透明的地方
如果沒有的話, 那邊緣就不會有平滑的視覺囉
看看下圖就會清楚:
1. 圓邊矩形bar一隻, 用photoshop的圖形功能畫的
圓邊看起來很平滑對不對?
2. 放大很多倍來看, 有沒有看到圓邊顏色很淡的像素? 那就是半透明的像素了
這些半透明像素如果放在gif裡面, 就會有白邊的狀況出現了.
所以在利用png來製作動態gif的過程中, 如果不要gif出現白邊,
簡單來說, 就要把靜態png裡面這些半透明的地方完全修飾掉
用橡皮擦慢慢擦掉也好, 用反選取的方法把他去掉也可以
反正要確保png裡面只有0%和100%透明的兩種像素
放在動態gif裡面才不會有白色的邊邊.
