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

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





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

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





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





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






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





以上只是個人在以往積累的一丁點經驗，所謂閉門造車，難免有很多不足，只希望能拋磚引玉，大家一起交流心得，共同提高:D