Photoshop圖層樣式和路徑繪制UI小圖標

2024-08-21 23:27:34

字體：大中小

來源：轉載

供稿：網友

相信很多和我一樣的設計愛好者和初學者都是通過photoshop這樣的圖形軟件而熟悉設計的。雖然軟件只是工具，創意還是完全來自我們的大腦，但是軟件使用技法很大程度上決定了我們作品的細節處理。今天想和大家交流的就是我在ui設計中的主要繪圖方法：路徑＋圖層樣式。希望能帶給一些設計初學者一點啟發。

路徑＋圖層樣式的特點：

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

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

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

控制精確
ps對象素的操作只能精確到1x1的單象素，而對于路徑的描點，我們卻可以把精確度提高到遠小于1象素。對于ui這類非常講求精確的設計來說是很有利的。

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

下面我想以一個實際的例子來和大家交流一下我的圖標制作過程。

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

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

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

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

因為是要做的是一個光盤驅動器，所以增加了一張半藏的光盤。光盤也是用路徑做了3個同心圓，一個用來作為中間不全反射的白色部分，另兩層則使用徑向的漸變效果來模擬光盤的樣子，一層的疊加控制灰度，另外一層控制顏色。為了和整個圖標的風格相符合，漸變用得還是比較柔和的顏色。最后在驅動器的正面加上光盤插孔，因為細節不多，只需要用灰色畫個很窄的橢圓即可。

圖標大體完工。結束時在驅動器邊緣的地方新建圖層加入一些漸變效果來增強高光，并且加入了dvd的標志來表現這是個dvd光盤驅動器。

這樣圖標在48x48分辨率下就完工了，然后我們可以直接對源文件進行縮放來制作32x32的版本：

一般不建議同時縮放圖層效果，因為對于描邊等一般都精確到象素的效果來說在各個分辨率下保持一致有助于控制統一性，所以我們需要手工調整一下效果，比如縮小光澤和內發光等的尺寸。調整之后得到的圖象有些圖層會產生錯位，稍微調整一下位置即可得到比較理想的效果。

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

我首先去掉了dvd標志的圖層，因為在這種尺寸下，肯定怎么都看不清了。由于路徑描點精確到亞象素（暫時這么叫吧，呵呵），所以經過縮放之后常?？吹铰窂降倪吘壊辉谡麛档南笏刈鴺松?，這樣的結果就讓本來大小為1象素的效果如描邊等被需化了。經過簡單的調整把描點重新移動到畫面中象素的邊緣即可保證圖標的清晰。將所有移位的描點都處理過之后16象素的圖標也完成了，當然，雖然16象素與32等圖標大小只差一倍，但因為包含象素少，所以很多部位必須進行取舍以在保證圖標元素不丟失的同時仍然突出細節。比如在這里，因為驅動器前面板只剩3象素高，所以光盤插入孔也沒必要繼續存在，只需在光盤和面板接觸的面板之間淡淡的加上一個深色的圖層略微做一下區分。另外，16象素下的路徑往往在經過我們的調整后變化較大，常會改變原來的透視，所以需要我們不斷調試取得比較好的效果保證不失真。