最近忙暈了，所以這次的作業(yè)沒有做，沒得交了， ：(   轉(zhuǎn)一篇自己不久前貼在BLOG上的設計心得，以彌補罪過，呵呵，會的朋友看起來應該很簡單，但希望對一些朋友有幫助。

　　圖標設計是UI設計中的比較基礎部分，也是最終用戶看到的直接用來評價軟件質(zhì)量的一個標準。在很多朋友看來，圖標設計就像畫圖一樣簡單，但是隨著工作的進行，問題也不像開始想的那么簡單了，去年畢業(yè)后我去以前公司任職UI設計師后，開始了我個人的第一個UI設計任務----設計一個桌面小時鐘，方案很快就完成了（圖片１），老總也很爽快地拍板通過，然后就跟研發(fā)人員一起把程序?qū)崿F(xiàn)出來，在桌面上顯示出來（圖片２），這時老總搖著頭說：“肯定不行”。
　　很快就一年了，最近在幾個UI論壇上都經(jīng)?？吹接信笥褑栍嘘P圖標在軟件里顯示后出現(xiàn)邊緣鋸齒（毛刺）怎么解決的問題，群或者其他同行群里也不鮮人問，有空我都會說一下，今天在兩個群里都有朋友問起，覺得還是把自己對于這個問題的解決方法整理一下貼出來供大家參考，也方便以后有朋友問起直接給他看。

圖片１　　圖片２

　　就從今天在群里提問的那位朋友說起吧，他把圖標做成ICO和GIF后放到程序里，運行后出現(xiàn)了邊緣鋸齒（毛刺）現(xiàn)象　
　　

　　我給這位朋友的建議是：
　　1.在輸出 gif 或 ico 前對邊緣進行處理，處理的目標是讓邊緣更平滑，具體的方法是把邊緣像素的顏色調(diào)得接近一點，相對顏色深一點，這樣可以使其不太破碎而且輪廓更清晰。但這方法比較費時，而且不是每一個圖都可以用，特別是在線條比較細的時候。
　　2.不使用透明圖標，把圖標的背景色和即將應用界面的背景顏色設成一樣。這個方法比較干脆，缺點是這個圖標在被用的時候背景不一定一樣，而且在不同操作系統(tǒng)下軟件的默認背景顏色也不同（比如winXP是#ECE9D8，win2000及以下系統(tǒng)是#C0C0C0，這個值直接由桌面主題定義），如果圖標的背景顏色跟環(huán)境的背景顏色不同那就比較難看了，所以有時會做幾種背景顏色，還不一定滿足，麻煩。
　　3.第三個方法是在第二個方法的基礎上進來改進的，思路是保留圖標邊緣的羽化部分，又不讓圖標背景區(qū)域太大，具體做法是：　
      我們先把要處理的圖標層定義為圖層1，新建一個圖層2，疊在圖層1下面，把圖標的區(qū)域選出來得到選區(qū)1，把選區(qū)1擴大一個像素得到選區(qū)2，再把選區(qū)2作為填充區(qū)域填充圖層2，把圖層1和圖層2合并為新圖層命名為圖層3，這個時候再對圖層3進行邊緣像素化，然后轉(zhuǎn)成程序能接受的應用格式(ico、gif、bmp)，應用到程序里就沒有邊緣鋸齒（毛刺）的問題了。注意轉(zhuǎn)換為gif或ico時粉紅色部分是透明的，而轉(zhuǎn)換為bmp是粉紅色部分就是透明色了，一般默認的透明色是#FF00FF，也可以自己定義。

      這里面還有一個背景顏色(圖層2)的選擇問題，如果能確定程序最終顯示的背景顏色，那設成跟它一樣就萬事大吉了，如果是其他顏色，本人的經(jīng)驗是盡量設成灰度色。

　
　　還有一個問題，就是我在前公司第一次做的那個桌面時鐘界面的時候，當時研究了一下其他軟件，都很少有把軟件的外殼做成非矩形狀的，那時才明白就是為了避免邊緣鋸齒問題，看看人家QQ吧，也是直來直去的，最多就在邊角搞一個六度角，但這樣用戶已經(jīng)可以接受了。
　

      現(xiàn)在的軟件技術也已經(jīng)支持邊緣的平滑了，但那是更高一級的設計了，我們還是選想辦法配合好我們自己人把手頭的項目做好吧。
　　我所知道的方法就這些，希望有更好方法的朋友不也指點一下，讓大家能更好地進步！

補充：

      邊緣像素化的笨方法
      簡單說一下我平時用的外框邊緣像素化的方法，我都是利用索引圖沒有透明通道這個特點來得到一個邊緣像素化了的選區(qū)，具體做法是：
接上面第3點，新建一個大小相等的文件，把填充后的圖層2拖到新文件里，刪掉新文件的背景層，只保留一個剛拖進來的圖層，再把新文件的顏色改為索引色，這時可看到圖層的邊緣已經(jīng)出現(xiàn)鋸齒了，這就是我們要的邊沿像素化的效果，把文件再改回RGB色，把圖層2拖回原來文件，繼續(xù)。