ps cs6繪畫像素圖標(biāo)技巧

二、繪制像素圖標(biāo)的流程

圖標(biāo)主要功能是表意，即以圖形化的方式表達(dá)網(wǎng)頁(yè)上的一項(xiàng)操作的意義。但在表意外還有裝飾性及品牌性的功能需要考慮。裝飾性是指圖標(biāo)的視覺效果能夠帶來(lái)品質(zhì)感、美感；品牌性是指圖標(biāo)的風(fēng)格應(yīng)該與產(chǎn)品品牌特性保持一致。

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

可以看到在這里，表意更多依靠文字。圖標(biāo)主要是用來(lái)引導(dǎo)視線，增強(qiáng)視覺比重，輔助于文字的。同時(shí)一列圖標(biāo)會(huì)對(duì)網(wǎng)頁(yè)的風(fēng)格產(chǎn)品影響，應(yīng)與網(wǎng)站風(fēng)格保持一致。所以這里的圖標(biāo)，表意、裝飾、品牌的權(quán)重差不多一致。

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

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

接下來(lái)用鉛筆工具繪制細(xì)節(jié)，細(xì)節(jié)的程度根據(jù)需要決定。這里我們不準(zhǔn)備把圖標(biāo)畫的特別有質(zhì)感，所以高光、反光相對(duì)不要太強(qiáng)烈，細(xì)節(jié)變化不用太多。

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

全部圖標(biāo)畫完以后，要養(yǎng)成良好的存檔習(xí)慣，確定更新的流程及負(fù)責(zé)人。

三、總結(jié)一下

要注意輸出格式及應(yīng)用場(chǎng)景,因?yàn)檫@對(duì)繪制時(shí)的技法會(huì)有影響，所以不明確要多跟前端溝通。

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

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

輸出過(guò)程中保持和前端的溝通，畫好的圖標(biāo)要良好存檔，確定更新流程及負(fù)責(zé)人。