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

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

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

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

便于大量套用
PS當(dāng)中的路徑一般都通過圖層樣式來定義視覺風(fēng)格，這樣帶來的好處是只要做出一個圖層樣式，我們就能方便地復(fù)制、粘貼樣式來把風(fēng)格應(yīng)用到很多其他元素上。當(dāng)我們在界面中把使用同一樣式的元素都鏈接之后更是能方便的粘貼圖層就可全部刷新效果。

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

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

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

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





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





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







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





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