一枚金屬外框的唱片圖標(biāo)~如下圖~ 下載地址：http://pan.baidu.com/s/1gd8roND

這系列做點(diǎn)擬物圖標(biāo)，但都是中規(guī)中矩，很快出效果的圖標(biāo)。不會(huì)畫(huà)特別難，超寫(xiě)實(shí)的圖標(biāo)，超寫(xiě)實(shí)圖標(biāo)對(duì)提升個(gè)人技術(shù)很有幫助，但真的太耗費(fèi)時(shí)間了。

跟著做可以鍛煉到中常用的PS基本功和圖層樣式，熟悉之后舉一反三吧~

不會(huì)每一步都有操作演示，我只說(shuō)要注意的地方以及上傳源文件，更多的需要靠自己去想了。

進(jìn)步最快的方式是臨摹，但要會(huì)正確的臨摹方式~

臨摹三部曲：

①先自己做，用自己的方式實(shí)現(xiàn)看得到的效果；

②鍛煉眼睛，揣摩出隱藏的效果；（這點(diǎn)比較困難，但是非常鍛煉水平）

③無(wú)計(jì)可施再看源文件，同時(shí)想有沒(méi)有比原作者更簡(jiǎn)便的實(shí)現(xiàn)方法。(任何一個(gè)原作者都不是神，也會(huì)有使用比較蠢的方式的時(shí)候)

這是LZ最開(kāi)始使用的進(jìn)步方式最快也是最鍛煉水平的方法~

畫(huà)圖標(biāo)的大致流程：

草圖勾畫(huà)→PS搭型→效果光影質(zhì)感添加→后期調(diào)整→完稿

一、草圖勾畫(huà)：

草圖階段可以大致在紙上用筆畫(huà)畫(huà)，勾勒出大概的造型就可以了，因?yàn)槲覀儾皇亲鲇螒騏I圖標(biāo)，大部分靠PS的矢量工具+圖層樣式就可以完成了，而且我的習(xí)慣是直接用PS搭造型，草圖階段比較適用于想法不太明確，僅有模糊印象的人。

這一階段可以幫助你提升自己的手繪水平，建議如果手上功夫差的人在這一階段可以仔細(xì)斟酌一下。

二、PS搭型：

這一階段你需要用PS把造型搭建出來(lái)，摒棄一切效果陰影，僅僅用灰度等級(jí)區(qū)分造型~

你用得到的工具，同時(shí)也是做UI設(shè)計(jì)常用的工具：

做游戲UI常用的是畫(huà)筆工具組，但是我們做APP或者網(wǎng)頁(yè)的UI設(shè)計(jì)，使用最多的就是矢量工具組。

無(wú)論你是做界面，做圖標(biāo)，做按鈕，我建議通通使用矢量圖形，這對(duì)于后期修改很方便。

另外在這一階段，也就是任何項(xiàng)目建立之初，你要學(xué)會(huì)整理圖層以及打包歸類(lèi)：

應(yīng)該注意的地方：

你會(huì)發(fā)現(xiàn)和指針和原圖位置不同，這是有原因的，

一般我們做有角度的控件的時(shí)候，包括上圖傾斜的指針桿，會(huì)在造型的時(shí)候選擇統(tǒng)一的方向，設(shè)置完所有效果之后，將其整個(gè)“轉(zhuǎn)換為智能對(duì)象”進(jìn)行旋轉(zhuǎn)，這樣可以保證圖層樣式中設(shè)置的角度跟隨對(duì)象轉(zhuǎn)變。

不明白我們下面會(huì)看到是什么意思~

造型階段就不一一演示操作步驟了，我覺(jué)得既然基本的造型都可以做到~本階段需要的就是對(duì)圖層的整理和使用矢量工具造型的能力~

三、效果光影質(zhì)感添加

所有的光影，我們?cè)谥谱鲿r(shí)就要確定角度，這里統(tǒng)統(tǒng)設(shè)置為垂直光的90度。

需要把全局光選擇勾選掉，否則會(huì)影響到所有的編輯對(duì)象。

質(zhì)感的實(shí)現(xiàn)：

推薦使用紋理貼圖，你會(huì)發(fā)現(xiàn)目前大部分圖標(biāo)有木質(zhì)紋理，金屬紋理等各種材質(zhì)的質(zhì)感表現(xiàn)，如果用PS去畫(huà)，雖然能畫(huà)出來(lái)，但是真的很費(fèi)時(shí)費(fèi)力，LZ以前做3D渲染的時(shí)候喜歡用貼圖，現(xiàn)在用PS畫(huà)更喜歡用貼圖。這不是偷懶，這是采用有效率的方式。

使用紋理貼圖需要注意的是，我們?cè)诰W(wǎng)上找到一張有色紋理貼圖的時(shí)候，記得要對(duì)其進(jìn)行“去色”處理，僅使用黑白灰模式下的貼圖，圖層樣式為“疊加”，這樣可以保證紋理，又不會(huì)掩蓋到圖標(biāo)本身的色彩。

回到我們本次做的圖標(biāo)~

首先是漸變，我不推薦使用圖層樣式的漸變疊加，推薦使用矢量圖形自身的漸變，因?yàn)檫@樣進(jìn)行剪貼蒙板的時(shí)候，會(huì)掩蓋掉貼圖的紋理以及一些其他圖層效果~

這里實(shí)際操作步驟我不說(shuō)了，來(lái)說(shuō)說(shuō)需要注意的地方……

邊框大概就是這么個(gè)意思，基本上琢磨琢磨很容易就可以做到這一步，下面說(shuō)說(shuō)膠片……

膠片上面有螺紋，有反光。

螺紋的實(shí)現(xiàn)方式：

膠片本身的漸變使用的是“角度漸變”，這個(gè)可以做為膠片本身反光的漸變，

在此基礎(chǔ)上，把膠片復(fù)制一層，新復(fù)制的這一層就是做完螺紋的，將其剪貼進(jìn)原膠片圖層，把漸變模式改為“徑向漸變“，之后進(jìn)入漸變編輯框

漸變類(lèi)型→雜色

粗糙度→70%（這個(gè)以實(shí)際效果為準(zhǔn)）

勾選上右側(cè)兩個(gè)選項(xiàng)

RGB的滑塊都劃到最右端

點(diǎn)擊隨機(jī)化，找到自己合適的螺紋粗細(xì)(因?yàn)槭请S機(jī)化，可能需要不斷的點(diǎn)擊出現(xiàn)合適的螺紋)

這是螺紋的實(shí)現(xiàn)方式之一，基本上螺紋都可以靠這種方式實(shí)現(xiàn)……

指針桿的效果：

因?yàn)槭墙饘伲詽u變對(duì)比會(huì)比較強(qiáng)烈~漸變自己調(diào)，沒(méi)必要一模一樣。

這里說(shuō)一下，前面提到的”轉(zhuǎn)換為智能對(duì)象“，因?yàn)槲覀兊膱D標(biāo)，光源選定的是統(tǒng)一角度，圖層樣式里面都是90度。如果不轉(zhuǎn)化為智能對(duì)象

會(huì)出現(xiàn)下面這種情況~

圖一是我們編輯完的，圖二是未轉(zhuǎn)換為智能對(duì)象時(shí)旋轉(zhuǎn)的效果，圖三是轉(zhuǎn)換為智能對(duì)象選擇的效果。

可以看到，如果不轉(zhuǎn)換為智能對(duì)象，角度是不會(huì)跟隨對(duì)象旋轉(zhuǎn)的，這一點(diǎn)以后在做有選擇角度的控件時(shí)，可以記住。

四、后期調(diào)整

一般我們做完一枚圖標(biāo)，還需要從各方面進(jìn)行調(diào)整，包括飽和度，色彩平衡，曲線這些方面，這枚圖標(biāo)我提升了一下飽和度~

五、完稿

一枚圖標(biāo)大致就這么誕生了，其實(shí)如果想細(xì)化下去，可以一直細(xì)化下去，包括光影紋理質(zhì)感，看你想做到什么程度了……

你可能發(fā)現(xiàn)我說(shuō)的看起來(lái)很籠統(tǒng)，因?yàn)榭偙O(jiān)跟我說(shuō)：你聽(tīng)別人說(shuō)一千遍，也不如自己琢磨動(dòng)手一遍，所以我希望你們可以和我一起琢磨，而不是我把每一步都明明白白的寫(xiě)出來(lái)……

授人以魚(yú)不如授之于漁嘛~源文件已經(jīng)上傳了，看不懂就看看源文件吧，我已經(jīng)整理好每個(gè)圖層了~祝你們好運(yùn)嘍！