像素圖標(biāo)繪制技巧介紹

《像素圖標(biāo)繪制技巧介紹》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、像素圖標(biāo)繪制技巧介紹圖標(biāo)是網(wǎng)頁(yè)中的常見(jiàn)元素，主要功能是表意，也包含裝飾及品牌傳遞的作用。存儲(chǔ)為gif、png等位圖格式的圖標(biāo)，稱(chēng)為像素圖標(biāo)，大小通常為16px、24px、32px等。當(dāng)然像素圖標(biāo)也可以理解為像素風(fēng)格的圖標(biāo)，不一定是位圖格式存在，本文中我們按格式去理解。與像素圖標(biāo)相對(duì)的是矢量圖標(biāo)，通常以svg格式及字體格式存在，大小可以隨意調(diào)整。這篇文章主要介紹個(gè)人的一些像素圖標(biāo)繪制經(jīng)驗(yàn)，不足之處還請(qǐng)各位高手多多指教。一、基本知識(shí)1.圖片格式與透明全透明、alpha透明、圖片格式及兼容性全透明是指圖片的格式只支

2、持完全透明和不透明兩種狀態(tài)，alpha透明是指圖片格式可以支持不同的透明程度。各種圖片格式對(duì)透明的支持程度以及瀏覽器兼容性見(jiàn)下表全透明和alpha透明對(duì)圖標(biāo)有什么影響那么這些東西對(duì)我們做像素圖標(biāo)有什么影響呢？看下圖可以看到，全透明的圖標(biāo)需要根據(jù)應(yīng)用場(chǎng)景的背景色進(jìn)行優(yōu)化，背景色變化了就要重新優(yōu)化，如果不想優(yōu)化并且要通用的話，就必須限制設(shè)計(jì)的表現(xiàn)手法，這樣通常會(huì)讓圖標(biāo)邊緣鋸齒感增強(qiáng)。而半透明的圖標(biāo)不用優(yōu)化，也可以多處通用。我們看一個(gè)沒(méi)有針對(duì)不同背景優(yōu)化的例子可以看到，在暗色背景下使用了針對(duì)白色背景優(yōu)化過(guò)的全透明圖

3、像。結(jié)果是出現(xiàn)很多白色雜邊，嚴(yán)重影響了品質(zhì)感。ie6這樣看來(lái)，用支持Alpha透明的PNG-24才是王道呀?？上?，在ie6下，PNG-24的Alpha透明需要ie特有的css濾鏡配合才能實(shí)現(xiàn)，所以如果你的產(chǎn)品有很多ie6用戶(hù)，在做圖標(biāo)前，先跟前端溝通。2.矢量工具與像素對(duì)齊在畫(huà)圖標(biāo)的整體大關(guān)系或者畫(huà)扁平化風(fēng)格圖標(biāo)時(shí)，我們會(huì)用到矢量工具，這里會(huì)碰到一個(gè)新手常常遇到的問(wèn)題-像素對(duì)齊。什么是像素對(duì)齊在位圖文件內(nèi)使用矢量工具時(shí)（例如PS里用形狀工具、鋼筆工具），會(huì)遇到下圖的這種情況。可以看到右邊的正方形的邊緣是有虛的

4、，這是因?yàn)檫@個(gè)正方形的邊緣沒(méi)有與像素的邊緣對(duì)齊。再看一個(gè)實(shí)際例子（圖片來(lái)源于Dribbble，鏈接地址）可以看到，對(duì)齊了像素的圖形有著更清晰銳利的效果。PS內(nèi)的設(shè)置幫助我們對(duì)齊像素我們可以在PS里通過(guò)一些設(shè)置方便地對(duì)齊像素，以CS6為例。1.將網(wǎng)格線設(shè)置為以像素為單位的，方便我們隨時(shí)查看是否對(duì)齊像素。順便提一句，網(wǎng)格顯示/隱藏的快捷鍵ctrl+'。首選項(xiàng)–參考線、網(wǎng)格和切片–根據(jù)自己需要設(shè)置網(wǎng)格大小，單位選擇像素。2.使用矢量工具時(shí)，勾選對(duì)齊邊緣，繪制的圖形會(huì)自動(dòng)對(duì)齊像素選擇矢量工具（鋼筆、形狀工具）–頂部工

5、具欄里找到對(duì)齊邊緣–勾選3.設(shè)置變換矢量圖形時(shí)自動(dòng)對(duì)齊像素?？s放、變換矢量圖形時(shí)也可以自動(dòng)對(duì)齊了，注意這個(gè)是CS6才有的功能。首選項(xiàng)–常規(guī)–勾選將矢量工具變換與像素網(wǎng)格對(duì)齊從Ai復(fù)制到Ps怎樣保留可編輯性從Ai復(fù)制矢量圖形到Ps時(shí),應(yīng)當(dāng)選擇粘貼為形狀圖層,這樣就可以在Ps內(nèi)繼續(xù)編輯圖形,用形狀選擇工具將錨點(diǎn)一一調(diào)整以對(duì)齊像素。像素對(duì)齊并不是絕對(duì)的個(gè)人觀點(diǎn)：是否要像素對(duì)齊應(yīng)該是根據(jù)想要的效果和圖形復(fù)雜程度決定的。見(jiàn)下圖左邊五角星需要平滑、飽滿(mǎn)的效果，并沒(méi)有對(duì)齊像素，但是不能說(shuō)他比對(duì)齊像素的五角星差。3.鉛筆工具

6、與像素畫(huà)技巧在刻畫(huà)像素小圖標(biāo)的細(xì)節(jié)時(shí)，常會(huì)用到鉛筆工具。這里會(huì)涉及到一些像素畫(huà)的技巧。像素畫(huà)基本技巧更詳細(xì)的像素畫(huà)教程網(wǎng)上很多，可以自行百度次像素的使用雖然像素畫(huà)沒(méi)有次像素的概念。但在畫(huà)圖標(biāo)時(shí)，用好次像素可以使線條、圖形更加平滑。二、繪制像素圖標(biāo)的流程1.明確圖標(biāo)的功能圖標(biāo)主要功能是表意，即以圖形化的方式表達(dá)網(wǎng)頁(yè)上的一項(xiàng)操作的意義。但在表意外還有裝飾性及品牌性的功能需要考慮。裝飾性是指圖標(biāo)的視覺(jué)效果能夠帶來(lái)品質(zhì)感、美感；品牌性是指圖標(biāo)的風(fēng)格應(yīng)該與產(chǎn)品品牌特性保持一致。在不同的需求下，表意、裝飾性、品牌性的權(quán)重

7、是不一樣的。例如網(wǎng)頁(yè)的favicon，首先要考慮品牌性（與產(chǎn)品自身品牌形象保持一致），其次要考慮裝飾（針對(duì)不同平臺(tái)及使用場(chǎng)景，需要提供多種尺寸以達(dá)到圖片不虛化）。那么假設(shè)現(xiàn)在我們要畫(huà)一個(gè)SNS網(wǎng)站功能菜單的icon——私信和收藏。先看應(yīng)用場(chǎng)景可以看到在這里，表意更多依靠文字。圖標(biāo)主要是用來(lái)引導(dǎo)視線，增強(qiáng)視覺(jué)比重，輔助于文字的。同時(shí)一列圖標(biāo)會(huì)對(duì)網(wǎng)頁(yè)的風(fēng)格產(chǎn)品影響，應(yīng)與網(wǎng)站風(fēng)格保持一致。所以這里的圖標(biāo)，表意、裝飾、品牌的權(quán)重差不多一致。2.信息提煉，畫(huà)草稿接下來(lái)我們要思考如何表達(dá)私信、收藏夾。根據(jù)要表達(dá)的內(nèi)容，提

8、煉出最具代表性的相關(guān)事物、圖形、色彩等視覺(jué)元素。然后畫(huà)一些草稿表達(dá)自己的想法，當(dāng)然草稿也可以打在腦子里。3.畫(huà)大關(guān)系思路確定了，繪制的過(guò)程就很簡(jiǎn)單。在PS新建16*16像素大小的文件，主要使用矢量工具畫(huà)出整體的形狀、大關(guān)系，用矢量工具時(shí)注意該對(duì)齊像素的地方要對(duì)齊。4.添加細(xì)節(jié)接下來(lái)用鉛筆工具繪制細(xì)節(jié)，細(xì)節(jié)的程度根據(jù)需要決定。這里我們不準(zhǔn)備把圖標(biāo)畫(huà)的特別有質(zhì)感，所以高光、反光相對(duì)不要太強(qiáng)烈，細(xì)節(jié)變化不