在Photoshop中創(chuàng)建精細的工具圖標

2013-12-6    藍藍設計的小編

轉載藍藍設計(   m.sillybuy.com  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網站建設 、平面設計服務

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中,   請點這里

藍藍設計:本教程主要使用Photoshop制作金屬質感的工具型App圖標,主要通過圖層樣式來完成,喜歡的朋友一起來學習吧。
1.首先我們來做下背景,這個背景我是先畫了個圓做了些效果(投影,內陰影)定義成圖案。

e8bea75e8a4e4507a9c39fca2b6b0ef2 用PS創(chuàng)建超寫實的工具圖標

2.用圓角矩形工具,畫部的漸變,在這一步我先畫個半徑為47的大圓角矩形,在用剪切畫個35的小圓角矩形,最后填充投影和漸變疊加。


b53777a3477d45e4812a6be9710f0322 用PS創(chuàng)建超寫實的工具圖標 01c11d6772e54808a7d20679171ea459 用PS創(chuàng)建超寫實的工具圖標 6a4b4906240f44d3a83e531e69c929e2 用PS創(chuàng)建超寫實的工具圖標

3.這一步我們在畫個半徑為35的小圓角矩形和上面鏤空的一樣大小就可以了。做圖層樣式:內發(fā)光和漸變疊加。在找張?zhí)O果手機的背景填充下就可以了。


62191eee468b4eec8a2f0a3ff87d7b04 用PS創(chuàng)建超寫實的工具圖標 63b1fbbb97814370b7917111b872e733 用PS創(chuàng)建超寫實的工具圖標 c8f893435b7f49518692db2df8daf1f3 用PS創(chuàng)建超寫實的工具圖標

4.復制個小的圓角矩形,做個內發(fā)光,把填充設為0。


62cda6f06df2457aa2b07a5c568acb71 用PS創(chuàng)建超寫實的工具圖標 79699b6e982340fab95534f3f692b9db 用PS創(chuàng)建超寫實的工具圖標

5.第五步把第二步的大圓角矩形復制一個,調整圖層放在最上邊,調整下形狀和位置,在做投影和漸變疊加。


7f76d47393c149dcb9c1846e44b25e19 用PS創(chuàng)建超寫實的工具圖標 8ec31e5b6260491799c68e411c0e50c5 用PS創(chuàng)建超寫實的工具圖標 c99151ed483d41c49b220583158470cb 用PS創(chuàng)建超寫實的工具圖標

6.這一步我們來給整體做個金屬拉絲效果,我做的思路大概(先把兩個形狀工具復制一份,把圖層樣式去掉只留下外輪廓就好,然后合并圖層,這樣就出來邊框圖形的選區(qū)了,下一步就是新建給圖層做金屬拉絲,調整下混合模式和透明圖就好)


0a962c3b54544e81aa876c6b3f326c06 用PS創(chuàng)建超寫實的工具圖標 3615c6d708274e0c87abc29e5a67656b 用PS創(chuàng)建超寫實的工具圖標

7.這一步我又做了個邊框整體覆蓋圖層,整體過度自然些。


ac11c644312b484f9676fa040b6a530a 用PS創(chuàng)建超寫實的工具圖標 17e9359a918b47779840368559ff080d 用PS創(chuàng)建超寫實的工具圖標

8.我們在給邊框加個拼接的感覺吧,這一步就很好做了,用矩形工具畫個長方形添加白色投影就行了,在復制個把投影反向就ok了,兩邊同理。到這一步我們底部邊框就做完了,下面我們來繪制鉗子吧。


a7006439e2644d75b6b84a9e74a8a6e2 用PS創(chuàng)建超寫實的工具圖標

9.我們來開始繪制鉗子吧,我把鉗子整體分為三個部分,首先我們把背景鎖上,用鋼筆工具來勾畫鉗子的頭部吧,先勾出頭部的底層大概分為5塊。


d847901c66044375af3e0da51ecd2545 用PS創(chuàng)建超寫實的工具圖標 fb1d690f8f03416b9bdf658b7714f519 用PS創(chuàng)建超寫實的工具圖標

10.我們來把鉗子的開口做下吧,也是用鋼筆工具勾畫出它的形狀就可以,填充黑色。


87334e4baff24b788ae02e3f219b8788 用PS創(chuàng)建超寫實的工具圖標

11.我們再把鉗子張開的軸承那里畫下吧,還有鉗子剪斷東西那加兩個漸變圖形。


3ab1a71f067840af8faa1da0c9170fd4 用PS創(chuàng)建超寫實的工具圖標 2f44d275bbe24499bea8bb107d95aeaa 用PS創(chuàng)建超寫實的工具圖標 11fe4a6ab50a4820ae38b24e1472eade 用PS創(chuàng)建超寫實的工具圖標 9b80b970e14948f28b4029b8f7bb8f95 用PS創(chuàng)建超寫實的工具圖標 b45178b23c29474eb2f7b25af9d40621 用PS創(chuàng)建超寫實的工具圖標

12.這一步我們畫下把手吧,先畫下橡膠感覺的黑色部分,用鋼筆工具勾出底部形狀,填充漸變顏色。


4be3d5ebb07f446381720ea82e560fcb 用PS創(chuàng)建超寫實的工具圖標 41384d876a614abcbfa9f014477d17e2 用PS創(chuàng)建超寫實的工具圖標 ea3a26dbebf747628218606fe1fe3d7f 用PS創(chuàng)建超寫實的工具圖標

13.畫下橙色銜接的地方吧,這一塊我分成了幾部分組合做成的,先看下做完的效果。


5b02b8fd2e5c400e8d7216e3ef5ab22f 用PS創(chuàng)建超寫實的工具圖標 919de3d6ee454c9b8f472c9356516b1a 用PS創(chuàng)建超寫實的工具圖標

14.給把手加個中間凸起的部分。


81bb9b7f306644ab9083c2275ea2c003 用PS創(chuàng)建超寫實的工具圖標 5bd84f4411dc486eb21f6824076a2018 用PS創(chuàng)建超寫實的工具圖標 710227963f6e4bfdac455ee74f421b27 用PS創(chuàng)建超寫實的工具圖標 c84f9d5cbfdf48b48406c68117c81941 用PS創(chuàng)建超寫實的工具圖標

15.這一步就要給鉗子加上摩擦的底部了。


8ab8a02260b74148bc3176e55e924a58 用PS創(chuàng)建超寫實的工具圖標 1120b76e13ab4eb1880fda7cddc5c49b 用PS創(chuàng)建超寫實的工具圖標 2f2f49c7206e4d88b13d98d4a3e9b34e 用PS創(chuàng)建超寫實的工具圖標

16.加上和輪胎一樣的凸起吧,這一步我是在AI里完成的,轉過來加了下投影。


25679cd125fc42cd93a428678aaf7132 用PS創(chuàng)建超寫實的工具圖標

17.其實下面的這個把手和上面的那個,可以共用一些元素的,把上面的把手復制一個,調整圖層樣式


e970b46e57654795b3d1f9d7fc975c71 用PS創(chuàng)建超寫實的工具圖標 5e52520e03524eefa1788cbe108a9a67 用PS創(chuàng)建超寫實的工具圖標 77e60629678541dbbe6db8d39ea8faba 用PS創(chuàng)建超寫實的工具圖標

18.我們在整體畫下橙色部分,做以下圖層樣式。


fb16da5ed7d54480b79da8276fa2d0ad 用PS創(chuàng)建超寫實的工具圖標 8a0c70a8aa0b48e98322bb6db7530a96 用PS創(chuàng)建超寫實的工具圖標 2eeaf133329441e89a2ed7bf4bb228c8 用PS創(chuàng)建超寫實的工具圖標 c214d16bf5d94ec7ab5d09733f07c852 用PS創(chuàng)建超寫實的工具圖標

19.這一步我們來刻畫下橙色部分,我用了些比較快速的辦法,就是復制個橙色部分,對它做些圖層樣式,在把它柵格化圖層,把不想要的地方擦去就可以了


8eb8a8970dcb4aedb204b6d7468407d0 用PS創(chuàng)建超寫實的工具圖標 27004a97f8094f3a88140f4cfff51403 用PS創(chuàng)建超寫實的工具圖標

20.我們現(xiàn)在來做把手凸起的底層吧,把上面復制過來的圖形樣式進行重新調節(jié)


294c9b371bfd48de9afe9d31605c225b 用PS創(chuàng)建超寫實的工具圖標 476c76753d934af5a66d71d411f0892a 用PS創(chuàng)建超寫實的工具圖標 0badb40d1559425c9edd76534f829d26 用PS創(chuàng)建超寫實的工具圖標 44581dd64ad44138950dc5b578b37316 用PS創(chuàng)建超寫實的工具圖標

21.調整凸起圖層樣式如下


6e974b864621472f9f8b46634d964c4d 用PS創(chuàng)建超寫實的工具圖標 77040b6f0c1d4db0bf4a24c67c88c269 用PS創(chuàng)建超寫實的工具圖標

22.這一步加上反光的部分,這一步我是拿鋼筆工具勾出來的圖形,加了顏色和內陰影效果,最后柵格化圖層,調整下透明圖就ok了,效果如下。


53a6b9759b934127b0c53dd655b48280 用PS創(chuàng)建超寫實的工具圖標

23.這一步我們在給鉗子的頭部做個整體拉絲效果,這一步在制作邊框的時候我已經給大家詳細說明了制作方法了。


4a5a3fab8a7a41418a2029d0b6d25a82 用PS創(chuàng)建超寫實的工具圖標

24.最后一步我們給鉗子加個整體的投影就可以了。


d68266e6136c4604bf7b54bb7a7f3c4e 用PS創(chuàng)建超寫實的工具圖標

25.給大家一個鉗子的特寫和完成后的整體效果。


1576d009188242249fee316c395ddb21 用PS創(chuàng)建超寫實的工具圖標

26.完成效果


1ac533ab5d934643b3eca19f6e3bc500 用PS創(chuàng)建超寫實的工具圖標



 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔