您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁像素圖標(biāo)繪制技巧

 

圖標(biāo)是網(wǎng)頁中的常見元素,主要功能是表意,也包含裝飾及品牌傳遞的作用。存儲(chǔ)為gif、png等位圖格式的圖標(biāo),稱為像素圖標(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透明、圖片格式及兼容性
全透明是指圖片的格式只支持完全透明和不透明兩種狀態(tài),alpha透明是指圖片格式可以支持不同的透明程度。
各種圖片格式對(duì)透明的支持程度以及瀏覽器兼容性見下表




全透明和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è)沒有針對(duì)不同背景優(yōu)化的例子


可以看到,在暗色背景下使用了針對(duì)白色背景優(yōu)化過的全透明圖像。結(jié)果是出現(xiàn)很多白色雜邊,嚴(yán)重影響了品質(zhì)感。


ie6

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

2.矢量工具與像素對(duì)齊

在畫圖標(biāo)的整體大關(guān)系或者畫扁平化風(fēng)格圖標(biāo)時(shí),我們會(huì)用到矢量工具,這里會(huì)碰到一個(gè)新手常常遇到的問題-像素對(duì)齊。


什么是像素對(duì)齊

在位圖文件內(nèi)使用矢量工具時(shí)(例如PS里用形狀工具、鋼筆工具),會(huì)遇到下圖的這種情況。


可以看到右邊的正方形的邊緣是有虛的,這是因?yàn)檫@個(gè)正方形的邊緣沒有與像素的邊緣對(duì)齊。

再看一個(gè)實(shí)際例子


(圖片來源于Dribbble,鏈接地址

可以看到,對(duì)齊了像素的圖形有著更清晰銳利的效果。


PS內(nèi)的設(shè)置幫助我們對(duì)齊像素

我們可以在PS里通過一些設(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ì)齊像素

選擇矢量工具(鋼筆、形狀工具) – 頂部工具欄里找到對(duì)齊邊緣 – 勾選




3.設(shè)置變換矢量圖形時(shí)自動(dòng)對(duì)齊像素。縮放、變換矢量圖形時(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ù)雜程度決定的。見下圖


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

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

在刻畫像素小圖標(biāo)的細(xì)節(jié)時(shí),常會(huì)用到鉛筆工具。這里會(huì)涉及到一些像素畫的技巧。


像素畫基本技巧


更詳細(xì)的像素畫教程網(wǎng)上很多,可以自行百度


次像素的使用

雖然像素畫沒有次像素的概念。但在畫圖標(biāo)時(shí),用好次像素可以使線條、圖形更加平滑。


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

 

1.明確圖標(biāo)的功能

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

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


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

2.信息提煉,畫草稿

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


 

3.畫大關(guān)系

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


 

4.添加細(xì)節(jié)

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


 

5.輸出及管理

輸出的時(shí)候要考慮之前提到的格式問題,盡量與前端溝通決定。網(wǎng)頁中的圖標(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é)一下

 

畫像素圖標(biāo)前

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

思考時(shí)

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

畫的過程中

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

畫完之后

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1843.html
Photoshop CC新功能-智能切圖
設(shè)計(jì)提升秘籍:新版Photoshop CC使用技巧
圖趣網(wǎng)微信
建議反饋
×