UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例(13)

來(lái)源:優(yōu)設(shè) 作者:心中永遠(yuǎn)是胡歌 學(xué)習(xí):9105人次

跟大家分享一篇設(shè)計(jì)相機(jī)主題的UI圖標(biāo)實(shí)例,步驟比較多,但有PSD文件可參考,不懂的可以看一下。

PSD鏈接:http://pan.baidu.com/s/1hq3rVPq 密碼:76cv

最終效果:

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

1,新建一個(gè)2000*2000的畫(huà)布

(因?yàn)橹笮枰O(shè)置一些參數(shù)是根據(jù)畫(huà)布大小而定的,所以不想自己調(diào)參數(shù)的話(huà)就跟我設(shè)置同樣大小的畫(huà)布吧)

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

2,新建一個(gè)圖層,然后隨便填充一個(gè)顏色(太簡(jiǎn)單不上圖了)

3,雙擊圖層一,打開(kāi)圖層樣式,使用漸變疊加。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

4、拉好參考線(xiàn),畫(huà)出一個(gè)圓角矩形。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

5、再畫(huà)一個(gè)圓角矩形,圓角半徑設(shè)置如圖,顏色設(shè)置為灰色。將圖層取名為右邊。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

6、按住Ctrl點(diǎn)擊“右邊”圖層的縮略圖,得到此圖層的選區(qū),并且新建一個(gè)圖層取名為“右邊白邊”。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

7、選擇選框工具,然后在圖上右建單擊一下選擇“描邊”,設(shè)置如圖,然后確定。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

8、給“右邊白邊”的圖層建立個(gè)白蒙板,用黑色畫(huà)筆涂抹圖中紅色區(qū)域。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

9、雙擊“右邊”圖層,打開(kāi)圖層樣式,使用漸變疊加,然后確定。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

10、然后將“右邊”復(fù)制一層,并且雙擊打開(kāi)圖層樣式,更改下漸變?cè)O(shè)置。然后確定,然后更改圖層不透明度為50%。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

11、再新建一個(gè)圖層,取名為右邊陰影,按住alt點(diǎn)擊“右邊 拷貝”圖層縮略圖,得到圖層的選區(qū)。

12、將前景色改為灰色,再將畫(huà)筆設(shè)置為軟角畫(huà)筆。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

13,設(shè)置好畫(huà)筆大小和流量,給左邊兩個(gè)角添加一些陰影,紅色區(qū)域。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

14、將前景色設(shè)置為一個(gè)屎黃色。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

15、用畫(huà)筆畫(huà)出這樣。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

16、畫(huà)一個(gè)圓角矩形,圓角半徑為200。并且降低不透明度,要對(duì)齊好來(lái)。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

17、再畫(huà)一個(gè)圓角矩形,設(shè)置如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

18、將上面這個(gè)圓角矩形的左下角的半徑設(shè)置為400,其他三只角不用管了。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

19、新建一個(gè)圖層取名為“黑線(xiàn)”,并且用鋼筆工具沿著邊勾出這么一條路徑。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

20、我們還需要對(duì)這條路徑做一點(diǎn)修改,用鋼筆工具來(lái)控制這個(gè)控制柄,使這一段路徑變的更圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

21、接下來(lái)就是描邊了,前景色設(shè)置為純黑色,畫(huà)筆大小設(shè)置為25。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

22、選擇鋼筆工具,在圖上右鍵點(diǎn)擊一下選擇“描邊路徑”,設(shè)置如圖,然后確定。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

效果如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

23、新建一個(gè)圖層取名為“左邊”,用鋼筆勾出如圖路徑,并且轉(zhuǎn)化為選區(qū),把“左邊”圖層放到最大的圓角矩形圖層上面,然后給“左邊”圖層建立剪切蒙板。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

24、新建一個(gè)圖層,取名為“左邊陰影”,也建立一個(gè)剪切蒙板。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

25、我們要畫(huà)陰影啦,前景色為灰色,畫(huà)筆設(shè)置為軟角畫(huà)筆,流量降低。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

26,按住alt,點(diǎn)擊“左邊”圖層的縮略圖得到選區(qū),用畫(huà)筆在”左邊陰影”圖層上畫(huà)出陰影,紅色區(qū)域。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

然后前景設(shè)置為屎黃色。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

用畫(huà)筆在這畫(huà)一點(diǎn)黃色,別太多了,效果如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

27、新建一個(gè)圖層取名為“黑線(xiàn)高光”,在“黑線(xiàn)”圖層的上面。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

28、用鋼筆勾出這樣的路徑。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

29、設(shè)置好畫(huà)筆,前景色為純白色,要軟角畫(huà)筆,畫(huà)筆大小為20,然后再鋼筆描邊。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

效果如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

用以上的方法畫(huà)出其他幾條高光。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

30、降低“黑線(xiàn)高光”圖層的不透明度為65%。

31、新建一個(gè)圖層取名為“陰影”,放到下面,要剪切蒙板。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

32、前景色設(shè)置為灰色,畫(huà)筆設(shè)置為軟角,降低畫(huà)筆流量,畫(huà)出陰影,紅色區(qū)域。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

效果如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

32、畫(huà)一個(gè)圓,雙擊圖層打開(kāi)圖層樣式,使用漸變疊加和投影。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

33、復(fù)制這個(gè)圓形圖層,雙擊圖層打開(kāi)圖層樣式,把投影關(guān)掉,更改漸變。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

34、ctrl+t(自由變換),如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

35、將這兩個(gè)圖層放到一個(gè)組里,取名為按鈕,然后復(fù)制一個(gè),然后ctrl+t(自由變換)變小,如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

46、畫(huà)一個(gè)圓角矩形,設(shè)置如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

雙擊圖層打開(kāi)圖層樣式,設(shè)置如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

47、畫(huà)一個(gè)只有描邊的圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

再畫(huà)一個(gè),如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

48、按住atl再畫(huà)個(gè)矩形,然后調(diào)整好矩形的大小和位置。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

49、畫(huà)一個(gè)白色的圓角矩形,圓角半徑為20,雙擊圖層打開(kāi)圖層樣式,設(shè)置如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

50,畫(huà)一個(gè)黑色的圓,取名為“黑圓”。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

畫(huà)一個(gè)白色的方形,降低透明度,建立剪切蒙板。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

51、畫(huà)一個(gè)小白圓,添加外發(fā)光。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

52、打上字,SAMSUNG

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

53、畫(huà)鏡頭了,一個(gè)白圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

一個(gè)漸變圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

再加一個(gè)漸變圓

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

將這兩個(gè)漸變圓放到一個(gè)組里,并且復(fù)制一個(gè),然后ctrl+t(自由變換)往下移。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

54、畫(huà)一個(gè)灰色的圓,然后斜面浮雕。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

55、再加一個(gè)黑色的圓,也是像上面的一樣斜面浮雕。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

56、加一個(gè)漸變圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

7、畫(huà)一個(gè)填充色為黑色,描邊色為淡灰色的圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

58,再畫(huà)一個(gè)更小一點(diǎn)的漸變圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

再畫(huà)一個(gè),填充為黑色,描邊為黑白漸變色。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

59.點(diǎn)擊這個(gè)漸變圓的縮略圖,得到它的選區(qū),然后新建一個(gè)圖層,用畫(huà)筆在兩側(cè)畫(huà)上高光。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

60、用以上方法畫(huà)出第三個(gè)。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

61,加一個(gè)紫色的漸變圓。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

62、畫(huà)一個(gè)這樣的形狀取名為“四角。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

63、復(fù)制“四角”圖層,ctrl+t,縮小一點(diǎn),然后進(jìn)行透視。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

64、將“四角拷貝”復(fù)制一層,然后縮小一些。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

65、按alt點(diǎn)擊小的“四角”圖層,得到選區(qū)之后選擇大的“四角”圖層,然后按delete刪除,得到如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

66、添加圖層樣式,如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

67、給這個(gè)圖層建立個(gè)白色蒙板,拉一個(gè)黑白漸變,將上部分隱藏起來(lái)。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

68、再?gòu)?fù)制這個(gè)圖層,ctrl+t,進(jìn)行縮小,如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

69、該畫(huà)里面的圓環(huán)了,跟前邊的一樣,就不多說(shuō)了,直接跟著過(guò)程做吧。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

70、畫(huà)一個(gè)小圓,打開(kāi)圖層樣式,使用漸變,并且降低圖層不透明度為50。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

71、再畫(huà)一個(gè)比它更小一些的黑圓,放在它中間,如圖。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

72、最后要做鏡頭陰影了。畫(huà)三個(gè)不同大小的圓加到一起做成陰影的形狀,然后合并這三個(gè)圓,把陰影圖層放到鏡頭圖層的下面。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

73、把陰影的邊緣模糊一下,濾鏡 – 模糊 – 高晰模糊。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

74、將陰影圖層降低不透明度為40%。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

75、給陰影圖層建立蒙板,拉一個(gè)黑白漸變。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

76、打上字:BAMBUNG ZOOMLEBNB。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

到最后再整體看一下,哪里該調(diào)整的,哪里沒(méi)做好的再改一下,最后就得到的最終效果。

UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
2016-10-27 10:17
新手上路;大神請(qǐng)多多指教
PS教程自學(xué)網(wǎng)網(wǎng)友2016-10-27 10:10
新手上路;大神請(qǐng)多多指教
笨小子2015-05-27 10:32
…………貌似某些步驟中之前做的內(nèi)容和后面不太一致?-_-
笨小子2015-05-27 10:05
…………貌似某些步驟中之前做的內(nèi)容和后面不太一致?-_-
芳菲de青春2015-05-20 07:57
大家說(shuō)出一部電視劇或者電影名字,把名字里的任意一個(gè)字用“屌”字代替,我先來(lái):亮屌
盟盟兒2015-05-20 07:48
老子今天在駕校被教練打了,麻辣個(gè)逼,老紙 今天去駕校學(xué)車(chē),被教練踢了一腳,進(jìn)醫(yī)院了。已經(jīng)報(bào)警,怎么會(huì)有這樣的教練?醫(yī)院檢查說(shuō)沒(méi)事,我也不訛人,但他必須給我道歉。原因是今天練路考,教練叫我看看油還有多少,我擰開(kāi)油箱蓋看了半天也沒(méi)看清楚,光線(xiàn)太暗。我順手摸出打火機(jī)湊近油箱口,就在我準(zhǔn)備按下打火機(jī)的時(shí)候教練一腳把我踹飛了,尼瑪?shù)浆F(xiàn)在勞資還在醫(yī)院輸液。我決定明天就退款,這教練脾氣太壞了。我要換駕校!
笑容最美2015-05-20 06:47
和女友啪啪完,把套套丟在床邊,被我家狗狗給吃了。第二天發(fā)現(xiàn)它便秘拉不出來(lái),帶它去醫(yī)院,當(dāng)醫(yī)生從狗狗菊花里取出套套后說(shuō)了句:居然插的這么深!你難道不考慮它的感受么?然后看我的眼神,我這輩子都忘不了。
zhangduo2015-05-20 06:34
肚子餓,看見(jiàn)同事桌上有瓶酸奶,想都沒(méi)想就喝了。一會(huì)同事來(lái)了大叫到:“我的洗面奶怎么不見(jiàn)了!108塊啊。  我沒(méi)說(shuō)話(huà) 只是默默的走向廁所,一頓摳嗓子,老難受了,把東西拼命的吐,直到吐出酸水,好不容易吐的差不多了,眼淚叭嚓滴回到座位上時(shí),同事抱著一個(gè)瓶子說(shuō):“嚇?biāo)牢伊耍疵婺虧L到桌子下了,我的酸奶怎么又不見(jiàn)了呢。 你奶奶個(gè)熊滴,喝你點(diǎn)酸奶 把人往死里整
Gala2015-05-20 06:13
話(huà)說(shuō)一位老太太買(mǎi)了一頭哈士奇,因?yàn)榈谝粋(gè)字是哈,就給狗起名“哈哈”,結(jié)果有一天遛狗,二貨走失,小區(qū)院里飄蕩著老太太的叫聲:哈哈!哈哈.......
路西法蒙2015-05-20 05:25
剛吃飯的時(shí)候,我爸突然抬頭跟我說(shuō):“我今天幫你拿了塊地.”我就知道我其實(shí)是隱形富二代!之前的貧困都是為了磨礪我!時(shí)機(jī)終于成熟了!家里終于肯讓我大顯身手了!我強(qiáng)忍住內(nèi)心的激動(dòng),用盡量平和又不經(jīng)意的語(yǔ)氣回答他:“哦,哪里的?”“順豐的,我自己下樓去拿的…”
李騰20012015-05-20 05:24
那年剛畢業(yè)時(shí)找工作,面試時(shí)對(duì)面坐著的漂亮女白領(lǐng),是人力資源部經(jīng)理,她問(wèn)我:你能干多長(zhǎng)時(shí)間?我有些詫異,但還是老老實(shí)實(shí)回答:一般半個(gè)小時(shí),狀態(tài)好的時(shí)候四十分鐘。她低聲說(shuō):我是說(shuō)你在這兒能干多久?我環(huán)顧四周,有些羞澀的說(shuō):這我可能放不開(kāi),我從沒(méi)當(dāng)著這么多人,真的不太習(xí)慣。一周以后我被錄取了。
別愛(ài)我happy2015-05-20 04:47
小時(shí)候家里窮,洗不起澡,只能趴在窗戶(hù)上看鄰居阿姨洗澡。哎,命苦。 家里窮,,娶不起老婆,只能睡別人家的老婆。哎,命苦。 家里窮,養(yǎng)不起孩子,只能讓隔壁幫我養(yǎng)。哎,命苦。。。
朕錦衣夜行2015-05-20 02:09
5年前談了個(gè)女朋友,她爹不喜歡我,把她遠(yuǎn)嫁外地了。今天在街上突然碰到她爹,雖然恨他,但叫了聲叔還遞了根中華煙。她爹猛抽了兩口煙:你有今天的成功是我沒(méi)想到的啊,叔后悔啊!當(dāng)初我算準(zhǔn)你小子就是個(gè)要飯的命,怕妮子受苦,所以死活不讓妮子跟著你?扇f(wàn)萬(wàn)沒(méi)想到的是,現(xiàn)在TMD要飯會(huì)這么掙錢(qián)!
羅納尓哆啦A夢(mèng)2015-05-20 08:47
老婆買(mǎi)了大瓶的可樂(lè),讓我擰開(kāi)。我擰了一分鐘都沒(méi)反應(yīng),老婆說(shuō):你還是不是男人啊,這點(diǎn)力氣都沒(méi)有。我說(shuō):那你去找別人擰吧。老婆就抱著可樂(lè)去找隔壁王大哥,過(guò)了15分鐘,隱隱約約聽(tīng)見(jiàn)老婆在隔壁說(shuō);王大哥 用力 用力啊。呵呵,我心里樂(lè)了,都25分鐘了還沒(méi)擰開(kāi)。這回還敢說(shuō)我不是男人。

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!