一、基本知識
1.圖片格式與透明
全透明、alpha透明、圖片格式及兼容性
全透明是指圖片的格式只支持完全透明和不透明兩種狀態(tài)，alpha透明是指圖片格式可以支持不同的透明程度。
各種圖片格式對透明的支持程度以及瀏覽器兼容性見下表
全透明和alpha透明對圖標(biāo)有什么影響
那么這些東西對我們做像素圖標(biāo)有什么影響呢？看下圖
可以看到，全透明的圖標(biāo)需要根據(jù)應(yīng)用場景的背景色進行優(yōu)化，背景色變化了就要重新優(yōu)化，如果不想優(yōu)化并且要通用的話，就必須限制設(shè)計的表現(xiàn)手法，這樣通常會讓圖標(biāo)邊緣鋸齒感增強。而半透明的圖標(biāo)不用優(yōu)化，也可以多處通用。
我們看一個沒有針對不同背景優(yōu)化的例子
可以看到，在暗色背景下使用了針對白色背景優(yōu)化過的全透明圖像。結(jié)果是出現(xiàn)很多白色雜邊，嚴(yán)重影響了品質(zhì)感。
ie6
這樣看來，用支持Alpha透明的PNG-24才是王道呀?？上?，在ie6下，PNG-24的Alpha透明需要ie特有的css濾鏡配合才能實現(xiàn)，所以如果你的產(chǎn)品有很多ie6用戶，在做圖標(biāo)前，先跟前端溝通。
2.矢量工具與像素對齊
在畫圖標(biāo)的整體大關(guān)系或者畫扁平化風(fēng)格圖標(biāo)時，我們會用到矢量工具，這里會碰到一個新手常常遇到的問題-像素對齊。
什么是像素對齊
在位圖文件內(nèi)使用矢量工具時（例如PS里用形狀工具、鋼筆工具），會遇到下圖的這種情況。
可以看到右邊的正方形的邊緣是有虛的，這是因為這個正方形的邊緣沒有與像素的邊緣對齊。
再看一個實際例子
（圖片來源于Dribbble，鏈接地址）
可以看到，對齊了像素的圖形有著更清晰銳利的效果。
PS內(nèi)的設(shè)置幫助我們對齊像素
我們可以在PS里通過一些設(shè)置方便地對齊像素，以CS6為例。
1.將網(wǎng)格線設(shè)置為以像素為單位的，方便我們隨時查看是否對齊像素。順便提一句，網(wǎng)格顯示/隱藏的快捷鍵ctrl+’。
首選項 – 參考線、網(wǎng)格和切片 – 根據(jù)自己需要設(shè)置網(wǎng)格大小，單位選擇像素。
2.使用矢量工具時，勾選對齊邊緣，繪制的圖形會自動對齊像素
選擇矢量工具（鋼筆、形狀工具） – 頂部工具欄里找到對齊邊緣 – 勾選
3.設(shè)置變換矢量圖形時自動對齊像素?？s放、變換矢量圖形時也可以自動對齊了，注意這個是CS6才有的功能。
首選項 – 常規(guī) – 勾選將矢量工具變換與像素網(wǎng)格對齊
從Ai復(fù)制到Ps怎樣保留可編輯性
從Ai復(fù)制矢量圖形到Ps時,應(yīng)當(dāng)選擇粘貼為形狀圖層,這樣就可以在Ps內(nèi)繼續(xù)編輯圖形,用形狀選擇工具將錨點一一調(diào)整以對齊像素。
像素對齊并不是絕對的
個人觀點：是否要像素對齊應(yīng)該是根據(jù)想要的效果和圖形復(fù)雜程度決定的。見下圖
左邊五角星需要平滑、飽滿的效果，并沒有對齊像素，但是不能說他比對齊像素的五角星差。
3.鉛筆工具與像素畫技巧
在刻畫像素小圖標(biāo)的細節(jié)時，常會用到鉛筆工具。這里會涉及到一些像素畫的技巧。
像素畫基本技巧
更詳細的像素畫教程網(wǎng)上很多，可以自行百度
次像素的使用
雖然像素畫沒有次像素的概念。但在畫圖標(biāo)時，用好次像素可以使線條、圖形更加平滑。
二、繪制像素圖標(biāo)的流程
1.明確圖標(biāo)的功能
圖標(biāo)主要功能是表意，即以圖形化的方式表達網(wǎng)頁上的一項操作的意義。但在表意外還有裝飾性及品牌性的功能需要考慮。裝飾性是指圖標(biāo)的視覺效果能夠帶來品質(zhì)感、美感；品牌性是指圖標(biāo)的風(fēng)格應(yīng)該與產(chǎn)品品牌特性保持一致。
在不同的需求下，表意、裝飾性、品牌性的權(quán)重是不一樣的。例如網(wǎng)頁的favicon，首先要考慮品牌性（與產(chǎn)品自身品牌形象保持一致），其次要考慮裝飾（針對不同平臺及使用場景，需要提供多種尺寸以達到圖片不虛化）。
那么假設(shè)現(xiàn)在我們要畫一個SNS網(wǎng)站功能菜單的icon——私信和收藏。
先看應(yīng)用場景
可以看到在這里，表意更多依靠文字。圖標(biāo)主要是用來引導(dǎo)視線，增強視覺比重，輔助于文字的。同時一列圖標(biāo)會對網(wǎng)頁的風(fēng)格產(chǎn)品影響，應(yīng)與網(wǎng)站風(fēng)格保持一致。所以這里的圖標(biāo)，表意、裝飾、品牌的權(quán)重差不多一致。
2.信息提煉，畫草稿
接下來我們要思考如何表達私信、收藏夾。根據(jù)要表達的內(nèi)容，提煉出最具代表性的相關(guān)事物、圖形、色彩等視覺元素。然后畫一些草稿表達自己的想法，當(dāng)然草稿也可以打在腦子里。
3.畫大關(guān)系
思路確定了，繪制的過程就很簡單。在PS新建16*16像素大小的文件，主要使用矢量工具畫出整體的形狀、大關(guān)系，用矢量工具時注意該對齊像素的地方要對齊。
4.添加細節(jié)
接下來用鉛筆工具繪制細節(jié)，細節(jié)的程度根據(jù)需要決定。這里我們不準(zhǔn)備把圖標(biāo)畫的特別有質(zhì)感，所以高光、反光相對不要太強烈，細節(jié)變化不用太多。
5.輸出及管理
輸出的時候要考慮之前提到的格式問題，盡量與前端溝通決定。網(wǎng)頁中的圖標(biāo)通常使用CSS Sprite方法，把圖標(biāo)放在一張圖上以減少服務(wù)器請求。所以這里也要跟前端溝通，確定好圖標(biāo)排列的方式。
此外在畫一組圖標(biāo)時還需要考慮圖標(biāo)的視覺風(fēng)格及視覺大小的一致性。
全部圖標(biāo)畫完以后，要養(yǎng)成良好的存檔習(xí)慣，確定更新的流程及負責(zé)人。
三、總結(jié)一下
畫像素圖標(biāo)前
要注意輸出格式及應(yīng)用場景,因為這對繪制時的技法會有影響，所以不明確要多跟前端溝通。
思考時
首先要明確圖標(biāo)的作用，裝飾、表意、品牌權(quán)重不同，表現(xiàn)方法也不同，通常表意性越強，圖標(biāo)越符號化。明確作用后提煉概念，轉(zhuǎn)換為日常生活中常見的事物，要注意除非是約定俗成很常見，否則少用抽象的符號表達。多用手繪畫畫草稿，比較不同方案。
畫的過程中
先矢量工具鋪大關(guān)系，再鉛筆工具細化，要注意對齊像素會更清晰銳利，次像素可以更平滑。一套圖標(biāo)要有視覺上的一致性。
畫完之后
輸出過程中保持和前端的溝通，畫好的圖標(biāo)要良好存檔，確定更新流程及負責(zé)人。
]]> 畫這個自然要知道什么是像素圖。電腦中的圖形分矢量圖和位圖（像素圖）兩種。
矢量圖：
像素圖：
區(qū)別在于矢量圖根據(jù)的是數(shù)學(xué)公式，所以可以無限放大。
像素圖是由點組成，因此放大后你就能看到放大的點[
],這些點成為像素[pixel],像素圖創(chuàng)作需要的是點繪。
2. 優(yōu)點
就因為它由很小的點組成，我認(rèn)為它最適合運用到帶液晶屏的電子設(shè)備上。
如：掌上游戲機：別懷疑所有的掌上游戲機，gameboy什么的都是像素圖，當(dāng)然我的文曲星也屬于這類。
電腦屏幕：桌面圖標(biāo)、網(wǎng)頁gif、QQ秀、字體等。
手機：手機上的手機電池、信號等圖都是。
玩具：有沒有感覺樂高玩具都像是像素一樣。
3. 工具
不像矢量圖需要專門的工具。像素只需要[開始]>[所有程序]>[附件]>[畫圖]
不是開玩笑的。最簡單的就是最有效的，這一款免費的無需安裝的及破解的綠色軟件。
要是復(fù)雜的創(chuàng)作還是選用photoshop吧，功能上很多優(yōu)勢，最低版本都可以。
當(dāng)然像素也分很多類，需要不同的工具，我只介紹上面這兩種軟件。
像素不需要技術(shù)，需要的是細心。
4. 基本元素舉例
在Photoshop里工具就是鉛筆工具?？旖萱I是[B]，導(dǎo)航器最好放大到400%。
點：
線：
角：
面：
友情提示：常用的線條可以設(shè)置為畫筆，選中線條>編輯>定義畫筆預(yù)設(shè)。之后用鉛筆工具時就右鍵就會看到在列表的最后。
5. 字體
自然在圖形中需要出現(xiàn)字體。這個就不需要你費事了，有專門的字體，推薦幾個。
英文
中文
友情提示：如果字體不想變形，一定要成倍放大。如英文字體上面舉例的都是8號，放大就要變成16號，依此類推，當(dāng)然圖形也是如此。
]]>