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