圖標是網頁中的常見元素，主要功能是表意，也包含裝飾及品牌傳遞的作用。存儲為gif、png等位圖格式的圖標，稱為像素圖標，大小通常為16px、24px、32px等。當然像素圖標也可以理解為像素風格的圖標，不一定是位圖格式存在，本文中我們按格式去理解。與像素圖標相對的是矢量圖標，通常以svg格式及字體格式存在，大小可以隨意調整。這篇文章主要介紹個人的一些像素圖標繪制經驗，不足之處還請各位高手多多指教。

一、基本知識

 

1.圖片格式與透明

全透明、alpha透明、圖片格式及兼容性 全透明是指圖片的格式只支持完全透明和不透明兩種狀態，alpha透明是指圖片格式可以支持不同的透明程度。各種圖片格式對透明的支持程度以及瀏覽器兼容性見下表

FEVTE編注：更多PS鼠繪教程交流討論及PS鼠繪作品提交請進入飛特論壇PS作品交流區，地址：http://bbs.fevte.com/forum.php?mod=forumdisplay&fid=156&filter=typeid&typeid=131

全透明和alpha透明對圖標有什么影響那么這些東西對我們做像素圖標有什么影響呢？看下圖

可以看到，全透明的圖標需要根據應用場景的背景色進行優化，背景色變化了就要重新優化，如果不想優化并且要通用的話，就必須限制設計的表現手法，這樣通常會讓圖標邊緣鋸齒感增強。而半透明的圖標不用優化，也可以多處通用。

我們看一個沒有針對不同背景優化的例子

可以看到，在暗色背景下使用了針對白色背景優化過的全透明圖像。結果是出現很多白色雜邊，嚴重影響了品質感。ie6

這樣看來，用支持Alpha透明的PNG-24才是王道呀。可惜，在ie6下，PNG-24的Alpha透明需要ie特有的css濾鏡配合才能實現，所以如果你的產品有很多ie6用戶，在做圖標前，先跟前端溝通。

2.矢量工具與像素對齊

在畫圖標的整體大關系或者畫扁平化風格圖標時，我們會用到矢量工具，這里會碰到一個新手常常遇到的問題-像素對齊。什么是像素對齊

在位圖文件內使用矢量工具時（例如PS里用形狀工具、鋼筆工具），會遇到下圖的這種情況。

可以看到右邊的正方形的邊緣是有虛的，這是因為這個正方形的邊緣沒有與像素的邊緣對齊。

再看一個實際例子

（圖片來源于Dribbble，鏈接地址）

可以看到，對齊了像素的圖形有著更清晰銳利的效果。PS內的設置幫助我們對齊像素

我們可以在PS里通過一些設置方便地對齊像素，以CS6為例。1.將網格線設置為以像素為單位的，方便我們隨時查看是否對齊像素。順便提一句，網格顯示/隱藏的快捷鍵ctrl+'。

首選項 – 參考線、網格和切片 – 根據自己需要設置網格大小，單位選擇像素。

 

2.使用矢量工具時，勾選對齊邊緣，繪制的圖形會自動對齊像素

選擇矢量工具（鋼筆、形狀工具） – 頂部工具欄里找到對齊邊緣 – 勾選

3.設置變換矢量圖形時自動對齊像素。縮放、變換矢量圖形時也可以自動對齊了，注意這個是CS6才有的功能。

首選項 – 常規 – 勾選將矢量工具變換與像素網格對齊

從Ai復制到Ps怎樣保留可編輯性

從Ai復制矢量圖形到Ps時,應當選擇粘貼為形狀圖層,這樣就可以在Ps內繼續編輯圖形,用形狀選擇工具將錨點一一調整以對齊像素。

像素對齊并不是絕對的

個人觀點：是否要像素對齊應該是根據想要的效果和圖形復雜程度決定的。見下圖

左邊五角星需要平滑、飽滿的效果，并沒有對齊像素，但是不能說他比對齊像素的五角星差。

3.鉛筆工具與像素畫技巧

在刻畫像素小圖標的細節時，常會用到鉛筆工具。這里會涉及到一些像素畫的技巧。像素畫基本技巧

更詳細的像素畫教程網上很多，可以自行百度次像素的使用

雖然像素畫沒有次像素的概念。但在畫圖標時，用好次像素可以使線條、圖形更加平滑。