photoshop-texture-tv-icon-1

編者按:今天@P大點S微博?來一個圖標教程,重點依然是圖層樣式的運用,而且會多次用到布爾運算,這是PS課程中特別重要的一個知識點,不熟悉的同學建議來練個手。

我們從背景的創建開始,我用的尺寸是1000*800像素。創建一個“漸變填充”調整層,設置如下:

45PDDS20151203

畫一個600*600像素的圓,設置填充為0,并添加一個斜面和浮雕。

44PDDS20151203

43PDDS20151203

42PDDS20151203

設置前景色為#312f35,利用布爾運算,畫出下圖中的這個圓環。這個不多贅述,不懂的可以百度下。

41PDDS20151203

為這個圓環添加一個圖層樣式。

40PDDS20151203

39PDDS20151203 38PDDS20151203 37PDDS20151203 36PDDS20151203 35PDDS20151203

設置前景色為黑色#000000,跟剛才一樣的操作方法,利用布爾運算,畫出下圖中的這個小的圓環出來,添加一個圖層樣式。

34PDDS20151203

33PDDS20151203

設置前景色為#aba9a8,畫一個350*350像素的圓,命名為“主體”,并添加一個圖層樣式。

32PDDS20151203

31PDDS20151203 30PDDS20151203 29PDDS20151203

用橢圓工具畫一個330*330像素的正圓,添加一個圖層樣式。

28PDDS20151203

27PDDS20151203 26PDDS20151203

接下來,我們返回到剛才那個命名為“主體”的圓那里,復制一層,命名為“浮雕1”清除圖層樣式,設置填充為0,添加一個斜面浮雕。

25PDDS20151203

24PDDS20151203 23PDDS20151203

接著復制一層“浮雕1”圖層,在圖層樣式中,勾選將內部效果混合成組,并更改斜面浮雕參數,添加一個圖層蒙版,擦拭一下。

22PDDS20151203

21PDDS20151203 20PDDS20151203 19PDDS20151203

復制“浮雕2”圖層,在圖層樣式中更改斜面浮雕的陰影角度,同時調整蒙版。

18PDDS20151203

17PDDS20151203

剛開始,想用一個斜面浮雕搞定這個效果,調節了好幾次等高線,效果不佳,于是放棄,改用了3個斜面浮雕配合蒙版來疊加效果,有大神能搞定的,請告之。

接下來,我們開始添加刻度,這個沒什么好說的,大家應該都會,畫個矩形,變換中心點,旋轉3度,CTRL+SHIFT+ALT+T,輕松搞定。這里我設置的顏色為白色,不透明度7%。

16PDDS20151203

一樣的方法做出那橙色的刻度,顏色為#f6a303。

15PDDS20151203

下面,我們來添加那個類似雷達掃描的漸變,從我們的截圖中,你可以清楚的看到,我們的形狀是利用布爾運算得到的,一個圓和一個旋轉了15度的矩形相交,將這個形狀的顏色設置為#171826,圖層填充設置為0,添加一個漸變疊加,并添加蒙版擦拭下方。

14PDDS20151203

13PDDS20151203

接著我們來添加高光,用橢圓工具畫一個圓,設置顏色為#bbaffd,圖層混合模式為“柔光”,不透明度“81%”,在屬性面板中,將這個形狀羽化35.6像素,并載入“主體”那個圓的選區,為這個高光添加一個蒙版。

12PDDS20151203

11PDDS20151203

接下來,我們完善一下高光,復制這個藍色高光圖層,左移上移一定像素,更改形狀顏色為#e9e5fe,羽化不修改,圖層混合模式依舊為“柔光”,圖層不透明度更改為“56%”。

10PDDS20151203

復制一個剛才那個“主體”圖層,移到最頂層,設置圖層填充為0,添加一個內陰影。

9PDDS20151203

8PDDS20151203

打上文字和添加那三個形狀,形狀圖標的話,利用布爾運算來畫。

7PDDS20151203

最后,我們添加左側的那個按紐,設置前景色為#a09e9f,畫個圓,添加個圖層樣式。

6PDDS20151203

5PDDS20151203 4PDDS20151203 3PDDS20151203 2PDDS20151203

最終效果:

1PDDS20151203

可能是國內最用心做原創PS教程的:

psqr21

【設計干貨+職場秘籍+神器推薦】

教科書級別的蘋果官方人機指南!
《騰訊力作!超實用的IOS 9人機界面指南(1):UI設計基礎》

如何自學成為騰訊高級交互設計師?
《優設訪談!騰訊高級交互設計師C7210的十年設計路》

紋理素材兩大殺器!
《酷站兩連發!專注無縫紋理素材站+多邊形背景生成器》

原文地址:pdadians

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏