2013-12-6 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)：本教程主要使用Photoshop制作金屬質(zhì)感的工具型App圖標(biāo)，主要通過圖層樣式來完成，喜歡的朋友一起來學(xué)習(xí)吧。
1.首先我們來做下背景，這個(gè)背景我是先畫了個(gè)圓做了些效果(投影，內(nèi)陰影)定義成圖案。
2.用圓角矩形工具，畫部的漸變，在這一步我先畫個(gè)半徑為47的大圓角矩形，在用剪切畫個(gè)35的小圓角矩形，最后填充投影和漸變疊加。
3.這一步我們?cè)诋媯€(gè)半徑為35的小圓角矩形和上面鏤空的一樣大小就可以了。做圖層樣式：內(nèi)發(fā)光和漸變疊加。在找張?zhí)O果手機(jī)的背景填充下就可以了。
4.復(fù)制個(gè)小的圓角矩形，做個(gè)內(nèi)發(fā)光，把填充設(shè)為0。
5.第五步把第二步的大圓角矩形復(fù)制一個(gè)，調(diào)整圖層放在最上邊，調(diào)整下形狀和位置，在做投影和漸變疊加。
6.這一步我們來給整體做個(gè)金屬拉絲效果，我做的思路大概(先把兩個(gè)形狀工具復(fù)制一份，把圖層樣式去掉只留下外輪廓就好，然后合并圖層，這樣就出來邊框圖形的選區(qū)了，下一步就是新建給圖層做金屬拉絲，調(diào)整下混合模式和透明圖就好)
7.這一步我又做了個(gè)邊框整體覆蓋圖層，整體過度自然些。
8.我們?cè)诮o邊框加個(gè)拼接的感覺吧，這一步就很好做了，用矩形工具畫個(gè)長(zhǎng)方形添加白色投影就行了，在復(fù)制個(gè)把投影反向就ok了，兩邊同理。到這一步我們底部邊框就做完了，下面我們來繪制鉗子吧。
9.我們來開始繪制鉗子吧，我把鉗子整體分為三個(gè)部分，首先我們把背景鎖上，用鋼筆工具來勾畫鉗子的頭部吧，先勾出頭部的底層大概分為5塊。
10.我們來把鉗子的開口做下吧，也是用鋼筆工具勾畫出它的形狀就可以，填充黑色。
11.我們?cè)侔雁Q子張開的軸承那里畫下吧，還有鉗子剪斷東西那加兩個(gè)漸變圖形。
12.這一步我們畫下把手吧，先畫下橡膠感覺的黑色部分，用鋼筆工具勾出底部形狀，填充漸變顏色。
13.畫下橙色銜接的地方吧，這一塊我分成了幾部分組合做成的，先看下做完的效果。
14.給把手加個(gè)中間凸起的部分。
15.這一步就要給鉗子加上摩擦的底部了。
16.加上和輪胎一樣的凸起吧，這一步我是在AI里完成的，轉(zhuǎn)過來加了下投影。
17.其實(shí)下面的這個(gè)把手和上面的那個(gè)，可以共用一些元素的，把上面的把手復(fù)制一個(gè)，調(diào)整圖層樣式
18.我們?cè)谡w畫下橙色部分，做以下圖層樣式。
19.這一步我們來刻畫下橙色部分，我用了些比較快速的辦法，就是復(fù)制個(gè)橙色部分，對(duì)它做些圖層樣式，在把它柵格化圖層，把不想要的地方擦去就可以了
20.我們現(xiàn)在來做把手凸起的底層吧，把上面復(fù)制過來的圖形樣式進(jìn)行重新調(diào)節(jié)
21.調(diào)整凸起圖層樣式如下
22.這一步加上反光的部分，這一步我是拿鋼筆工具勾出來的圖形，加了顏色和內(nèi)陰影效果，最后柵格化圖層，調(diào)整下透明圖就ok了，效果如下。
23.這一步我們?cè)诮o鉗子的頭部做個(gè)整體拉絲效果，這一步在制作邊框的時(shí)候我已經(jīng)給大家詳細(xì)說明了制作方法了。
24.最后一步我們給鉗子加個(gè)整體的投影就可以了。
25.給大家一個(gè)鉗子的特寫和完成后的整體效果。
26.完成效果
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com