photoshop圖層樣式和路徑繪制UI小圖標(biāo)(3)

作者佚名　  出處:jjying
相信很多和我一樣的設(shè)計(jì)愛(ài)好者和初學(xué)者都是通過(guò)photoshop這樣的圖形軟件而熟悉設(shè)計(jì)的。雖然軟件只是工具，創(chuàng)意還是完全來(lái)自我們的大腦，但是軟件 使用技法很大程度上決定了我們作品的細(xì)節(jié)處理。今天想和大家交流的就是我在UI設(shè)計(jì)中的主要繪圖方法：路徑＋圖層樣式。希望能帶給一些設(shè)計(jì)初學(xué)者一點(diǎn)啟 發(fā)。

路徑＋圖層樣式的特點(diǎn)：

方便修改
作為設(shè)計(jì)師，改無(wú)止境經(jīng)常是掛在我們嘴邊的。面對(duì)很多形狀上需要做出的改變，用鋼筆描出來(lái)的路徑顯然比象素化的圖層更容易修改，所以對(duì)于一些復(fù)雜的外形，我在日常工作當(dāng)中盡量保持原來(lái)的路徑，不到必須的時(shí)候都不會(huì)象素化。而圖層樣式更是如此，PS內(nèi)置的圖層效果功能已經(jīng)比較強(qiáng)大，通過(guò)他來(lái)定義的風(fēng)格可以隨意地用參數(shù)來(lái)確定效果，并且隨意地修改。

便于大量套用
PS當(dāng)中的路徑一般都通過(guò)圖層樣式來(lái)定義視覺(jué)風(fēng)格，這樣帶來(lái)的好處是只要做出一個(gè)圖層樣式，我們就能方便地復(fù)制、粘貼樣式來(lái)把風(fēng)格應(yīng)用到很多其他元素上。當(dāng)我們?cè)诮缑嬷邪咽褂猛粯邮降脑囟兼溄又蟾悄芊奖愕恼迟N圖層就可全部刷新效果。

可部分地進(jìn)行矢量操作
矢量是個(gè)非常優(yōu)越的特性，雖然這是AI的拿手絕活，但是photoshop中的路徑也已經(jīng)基本夠用，并且面對(duì)著大量旋轉(zhuǎn)、縮放等操作時(shí)如果不使用路徑，那操作都將變得不可逆。

控制精確
PS對(duì)象素的操作只能精確到1x1的單象素，而對(duì)于路徑的描點(diǎn)，我們卻可以把精確度提高到遠(yuǎn)小于1象素。對(duì)于UI這類非常講求精確的設(shè)計(jì)來(lái)說(shuō)是很有利的。

容易陷入思維定勢(shì)
以上幾點(diǎn)其實(shí)歸結(jié)起來(lái)只是給我們的設(shè)計(jì)帶來(lái)方便，或者說(shuō)特別適合懶人。所以當(dāng)路徑＋樣式成為主要制圖方法的時(shí)候必須時(shí)常提醒自己不要局限于圖層樣式里的那些效果，畢竟好設(shè)計(jì)還是在于創(chuàng)意。

下面我想以一個(gè)實(shí)際的例子來(lái)和大家交流一下我的圖標(biāo)制作過(guò)程。





這是一枚風(fēng)格比較簡(jiǎn)單的圖標(biāo)，造型上也并不復(fù)雜，又碰上需要處理多種分辨率的情況，所以非常適合使用路徑＋圖層樣式的制作方法。





確定透視之后，把整體的形狀用鋼筆勾勒出來(lái)或者取PS形狀工具中基本造型進(jìn)行變形和組合。比如光盤(pán)的造型是從圓形變形而來(lái)，而驅(qū)動(dòng)器兩側(cè)的面是用兩個(gè)形狀相減而來(lái)。







驅(qū)動(dòng)器的前面板是個(gè)膠囊形，圖層樣式中使用了向上的1象素白色投影來(lái)作為驅(qū)動(dòng)器上表面和前面板接縫處的高光；用1象素的外發(fā)光來(lái)作為描邊；上深下淺的漸變給面板增加凹進(jìn)去的感覺(jué)；用光澤來(lái)給面板兩端加深顏色增加圖標(biāo)的細(xì)節(jié)；而漸變方式的內(nèi)描邊則來(lái)表現(xiàn)前面板的邊緣高光。完成之后把前面板復(fù)制一下，合并到新的圖層（也就是在新復(fù)制出的面板下面新建一個(gè)新的圖層，然后將面板合并到此圖層，這樣就能保留圖層效果，得到一個(gè)象素化的面板）。對(duì)此新建的面板進(jìn)行垂直鏡像，高斯模糊并且使用蒙板使其顯得若有若無(wú)，成為圖標(biāo)中的倒影，而盤(pán)體兩側(cè)的倒影因?yàn)榉瓷涞氖球?qū)動(dòng)器底部，所以無(wú)從復(fù)制，我們只能手工使用畫(huà)筆來(lái)描繪。





驅(qū)動(dòng)器的上表面用了3層來(lái)表現(xiàn)，底下的一層主要表現(xiàn)大致的光影和外部描邊，上面一層區(qū)分開(kāi)驅(qū)動(dòng)器上表面的兩個(gè)顏色。最后通過(guò)漸變疊加表現(xiàn)一下驅(qū)動(dòng)器的兩個(gè)側(cè)面。






因?yàn)槭且龅氖且粋�(gè)光盤(pán)驅(qū)動(dòng)器，所以增加了一張半藏的光盤(pán)。光盤(pán)也是用路徑做了3個(gè)同心圓，一個(gè)用來(lái)作為中間不全反射的白色部分，另兩層則使用徑向的漸變效果來(lái)模擬光盤(pán)的樣子，一層的疊加控制灰度，另外一層控制顏色。為了和整個(gè)圖標(biāo)的風(fēng)格相符合，漸變用得還是比較柔和的顏色。最后在驅(qū)動(dòng)器的正面加上光盤(pán)插孔，因?yàn)榧?xì)節(jié)不多，只需要用灰色畫(huà)個(gè)很窄的橢圓即可。





圖標(biāo)大體完工。結(jié)束時(shí)在驅(qū)動(dòng)器邊緣的地方新建圖層加入一些漸變效果來(lái)增強(qiáng)高光，并且加入了DVD的標(biāo)志來(lái)表現(xiàn)這是個(gè)DVD光盤(pán)驅(qū)動(dòng)器。

這樣圖標(biāo)在48x48分辨率下就完工了，然后我們可以直接對(duì)源文件進(jìn)行縮放來(lái)制作32x32的版本：





一般不建議同時(shí)縮放圖層效果，因?yàn)閷?duì)于描邊等一般都精確到象素的效果來(lái)說(shuō)在各個(gè)分辨率下保持一致有助于控制統(tǒng)一性，所以我們需要手工調(diào)整一下效果，比如縮小光澤和內(nèi)發(fā)光等的尺寸。調(diào)整之后得到的圖象有些圖層會(huì)產(chǎn)生錯(cuò)位，稍微調(diào)整一下位置即可得到比較理想的效果。





接下來(lái)就是一般最令人頭痛的16x16圖標(biāo)。很多時(shí)候在這樣的分辨率下即使只是1px的邊緣模糊成2個(gè)象素也足以使圖標(biāo)的整體效果變樣。所以我覺(jué)得這樣的小圖標(biāo)主要是修改其邊緣。用路徑和圖層樣式的好處在這里十分明顯。先把32x32大小的文件調(diào)整成16x16：






我首先去掉了dvd標(biāo)志的圖層，因?yàn)樵谶@種尺寸下，肯定怎么都看不清了。由于路徑描點(diǎn)精確到亞象素（暫時(shí)這么叫吧，呵呵），所以經(jīng)過(guò)縮放之后常�？吹铰窂降倪吘壊辉谡麛�(shù)的象素坐標(biāo)上，這樣的結(jié)果就讓本來(lái)大小為1象素的效果如描邊等被需化了。經(jīng)過(guò)簡(jiǎn)單的調(diào)整把描點(diǎn)重新移動(dòng)到畫(huà)面中象素的邊緣即可保證圖標(biāo)的清晰。將所有移位的描點(diǎn)都處理過(guò)之后16象素的圖標(biāo)也完成了，當(dāng)然，雖然16象素與32等圖標(biāo)大小只差一倍，但因?yàn)榘笏厣�，所以很多部位必須進(jìn)行取舍以在保證圖標(biāo)元素不丟失的同時(shí)仍然突出細(xì)節(jié)。比如在這里，因?yàn)轵?qū)動(dòng)器前面板只剩3象素高，所以光盤(pán)插入孔也沒(méi)必要繼續(xù)存在，只需在光盤(pán)和面板接觸的面板之間淡淡的加上一個(gè)深色的圖層略微做一下區(qū)分。另外，16象素下的路徑往往在經(jīng)過(guò)我們的調(diào)整后變化較大，常會(huì)改變?cè)瓉?lái)的透視，所以需要我們不斷調(diào)試取得比較好的效果保證不失真。





以上只是個(gè)人在以往積累的一丁點(diǎn)經(jīng)驗(yàn)，所謂閉門(mén)造車(chē)，難免有很多不足，只希望能拋磚引玉，大家一起交流心得，共同提高:D