二、繪制像素圖標的流程

 

1.明確圖標的功能

圖標主要功能是表意，即以圖形化的方式表達網頁上的一項操作的意義。但在表意外還有裝飾性及品牌性的功能需要考慮。裝飾性是指圖標的視覺效果能夠帶來品質感、美感；品牌性是指圖標的風格應該與產品品牌特性保持一致。

在不同的需求下，表意、裝飾性、品牌性的權重是不一樣的。例如網頁的favicon，首先要考慮品牌性（與產品自身品牌形象保持一致），其次要考慮裝飾（針對不同平臺及使用場景，需要提供多種尺寸以達到圖片不虛化）。那么假設現在我們要畫一個SNS網站功能菜單的icon——私信和收藏。先看應用場景

可以看到在這里，表意更多依靠文字。圖標主要是用來引導視線，增強視覺比重，輔助于文字的。同時一列圖標會對網頁的風格產品影響，應與網站風格保持一致。所以這里的圖標，表意、裝飾、品牌的權重差不多一致。

2.信息提煉，畫草稿

接下來我們要思考如何表達私信、收藏夾。根據要表達的內容，提煉出最具代表性的相關事物、圖形、色彩等視覺元素。然后畫一些草稿表達自己的想法，當然草稿也可以打在腦子里。

 

3.畫大關系

思路確定了，繪制的過程就很簡單。在PS新建16*16像素大小的文件，主要使用矢量工具畫出整體的形狀、大關系，用矢量工具時注意該對齊像素的地方要對齊。

 

4.添加細節

接下來用鉛筆工具繪制細節，細節的程度根據需要決定。這里我們不準備把圖標畫的特別有質感，所以高光、反光相對不要太強烈，細節變化不用太多。

 

5.輸出及管理

輸出的時候要考慮之前提到的格式問題，盡量與前端溝通決定。網頁中的圖標通常使用CSS Sprite方法，把圖標放在一張圖上以減少服務器請求。所以這里也要跟前端溝通，確定好圖標排列的方式。此外在畫一組圖標時還需要考慮圖標的視覺風格及視覺大小的一致性。

全部圖標畫完以后，要養成良好的存檔習慣，確定更新的流程及負責人。

三、總結一下

 

畫像素圖標前

要注意輸出格式及應用場景,因為這對繪制時的技法會有影響，所以不明確要多跟前端溝通。

思考時

首先要明確圖標的作用，裝飾、表意、品牌權重不同，表現方法也不同，通常表意性越強，圖標越符號化。明確作用后提煉概念，轉換為日常生活中常見的事物，要注意除非是約定俗成很常見，否則少用抽象的符號表達。多用手繪畫畫草稿，比較不同方案。

畫的過程中

先矢量工具鋪大關系，再鉛筆工具細化，要注意對齊像素會更清晰銳利，次像素可以更平滑。一套圖標要有視覺上的一致性。

畫完之后

輸出過程中保持和前端的溝通，畫好的圖標要良好存檔，確定更新流程及負責人。