【設計前端手拉手】作圖的，你給我的切圖有毛邊！

來自專欄 以啟山林

【本文共計1505字，預計閱讀時間3min】

【摘要：PS導出png有毛邊的產生原因及解決辦法】

上月的活動頁面中有一個轉盤，其中旋轉抽獎的發光變色效果需要將一小格做成png疊在轉盤上。切好圖後前端小姐姐開始頻繁召喚：

「這個不行，有白邊」

「這個不行，也有毛邊」

「這個毛邊怎麼顏色還不一樣的？？？」

……

為什麼會有毛邊

折騰許久，才明白問題原由——

PS導出png-8格式時會自動設置雜邊顏色來混合透明元素。

現在我要抓一個png來演示一下什麼叫雜邊，到底是哪個幸運鵝呢？

就是它了！這是一個PS中普普通通的圖層，選擇導出-存儲為web所用格式，會在彈出窗口找到一個「雜邊」選項，默認白色，隨便挑幾種顏色試試，並將導出的圖片放回PS中加入背景：

可以看到，對於較為清晰的圖像邊緣，雜邊的顏色即為導出圖片的毛邊顏色，如果圖片需要放在藍色背景上，選擇藍色雜邊，可以最大限度地模擬邊緣色彩過渡；

而對於半透明陰影的處理更加直觀，原本20%#ffffff的陰影部分在各個圖片中表現截然不同：

無雜邊：陰影消失

白色雜邊：陰影為灰色（即原20%#ffffff）

藍色雜邊：陰影為藍灰色

為什麼會這樣？

PS中存儲的png-8只支持布爾透明，即對於一個像素點，你只能選擇全透明或不透明，半透明是不存在的。（只限於PS導出，png-8和其它部分軟體如Firework是支持alpha透明的）這就是陰影消失的原因。

「雜邊」就是PS為了彌補這一功能的「補丁」，你可以預先設定png放置的背景顏色，然後將半透明像素預先混合，模擬實際的半透明效果。

解決方案

1.利用雜邊模擬背景色

雜邊適用於純色背景，預先混合的像素表現尚可，而且文件大小非常喜人，適合移動端等有網速限制的場合。缺點在於不可遷移，如果老闆心血來潮換個背景，圖片的偽裝色就作廢了；而且如果背景有兩種及以上的顏色，一種雜邊顯然不能滿足使用要求。

2.改用png-24（png-32）

真遇到多顏色背景時，只能捨棄一部分大小，選擇png-24格式。

png-24可以展現出更豐富多彩的顏色，而且在勾選上「透明度」之後，還可以存儲8位alpha通道信息，支持半透明。（加上8位後，最終存儲格式其實是png-32）

由上圖可以看出，雖然文件大小突然增加，但實際表現與源文件別無二致，這張圖拿給前端小姐姐，再也不會聽到「作圖的，你給我的切圖有毛邊」這種話了。

——她們只會說：

「作圖的，你這張圖太大了，根本載入不出來！」

綜上，在項目過程中，可以根據實際情況綜合權衡文件大小和質量，選擇適合的解決方案。