UI教程,設(shè)計(jì)相機(jī)主題UI圖標(biāo)實(shí)例(13)
跟大家分享一篇設(shè)計(jì)相機(jī)主題的UI圖標(biāo)實(shí)例,步驟比較多,但有PSD文件可參考,不懂的可以看一下。
PSD鏈接:http://pan.baidu.com/s/1hq3rVPq 密碼:76cv
最終效果:
1,新建一個(gè)2000*2000的畫(huà)布
(因?yàn)橹笮枰O(shè)置一些參數(shù)是根據(jù)畫(huà)布大小而定的,所以不想自己調(diào)參數(shù)的話(huà)就跟我設(shè)置同樣大小的畫(huà)布吧)
2,新建一個(gè)圖層,然后隨便填充一個(gè)顏色(太簡(jiǎn)單不上圖了)
3,雙擊圖層一,打開(kāi)圖層樣式,使用漸變疊加。
4、拉好參考線(xiàn),畫(huà)出一個(gè)圓角矩形。
5、再畫(huà)一個(gè)圓角矩形,圓角半徑設(shè)置如圖,顏色設(shè)置為灰色。將圖層取名為右邊。
6、按住Ctrl點(diǎn)擊“右邊”圖層的縮略圖,得到此圖層的選區(qū),并且新建一個(gè)圖層取名為“右邊白邊”。
7、選擇選框工具,然后在圖上右建單擊一下選擇“描邊”,設(shè)置如圖,然后確定。
8、給“右邊白邊”的圖層建立個(gè)白蒙板,用黑色畫(huà)筆涂抹圖中紅色區(qū)域。
9、雙擊“右邊”圖層,打開(kāi)圖層樣式,使用漸變疊加,然后確定。
10、然后將“右邊”復(fù)制一層,并且雙擊打開(kāi)圖層樣式,更改下漸變?cè)O(shè)置。然后確定,然后更改圖層不透明度為50%。
11、再新建一個(gè)圖層,取名為右邊陰影,按住alt點(diǎn)擊“右邊 拷貝”圖層縮略圖,得到圖層的選區(qū)。
12、將前景色改為灰色,再將畫(huà)筆設(shè)置為軟角畫(huà)筆。
13,設(shè)置好畫(huà)筆大小和流量,給左邊兩個(gè)角添加一些陰影,紅色區(qū)域。
14、將前景色設(shè)置為一個(gè)屎黃色。
15、用畫(huà)筆畫(huà)出這樣。
16、畫(huà)一個(gè)圓角矩形,圓角半徑為200。并且降低不透明度,要對(duì)齊好來(lái)。
17、再畫(huà)一個(gè)圓角矩形,設(shè)置如圖。
18、將上面這個(gè)圓角矩形的左下角的半徑設(shè)置為400,其他三只角不用管了。
19、新建一個(gè)圖層取名為“黑線(xiàn)”,并且用鋼筆工具沿著邊勾出這么一條路徑。
20、我們還需要對(duì)這條路徑做一點(diǎn)修改,用鋼筆工具來(lái)控制這個(gè)控制柄,使這一段路徑變的更圓。
21、接下來(lái)就是描邊了,前景色設(shè)置為純黑色,畫(huà)筆大小設(shè)置為25。
22、選擇鋼筆工具,在圖上右鍵點(diǎn)擊一下選擇“描邊路徑”,設(shè)置如圖,然后確定。
效果如圖。
23、新建一個(gè)圖層取名為“左邊”,用鋼筆勾出如圖路徑,并且轉(zhuǎn)化為選區(qū),把“左邊”圖層放到最大的圓角矩形圖層上面,然后給“左邊”圖層建立剪切蒙板。
24、新建一個(gè)圖層,取名為“左邊陰影”,也建立一個(gè)剪切蒙板。
25、我們要畫(huà)陰影啦,前景色為灰色,畫(huà)筆設(shè)置為軟角畫(huà)筆,流量降低。
26,按住alt,點(diǎn)擊“左邊”圖層的縮略圖得到選區(qū),用畫(huà)筆在”左邊陰影”圖層上畫(huà)出陰影,紅色區(qū)域。
然后前景設(shè)置為屎黃色。
用畫(huà)筆在這畫(huà)一點(diǎn)黃色,別太多了,效果如圖。
27、新建一個(gè)圖層取名為“黑線(xiàn)高光”,在“黑線(xiàn)”圖層的上面。
28、用鋼筆勾出這樣的路徑。
29、設(shè)置好畫(huà)筆,前景色為純白色,要軟角畫(huà)筆,畫(huà)筆大小為20,然后再鋼筆描邊。
效果如圖。
用以上的方法畫(huà)出其他幾條高光。
30、降低“黑線(xiàn)高光”圖層的不透明度為65%。
31、新建一個(gè)圖層取名為“陰影”,放到下面,要剪切蒙板。
32、前景色設(shè)置為灰色,畫(huà)筆設(shè)置為軟角,降低畫(huà)筆流量,畫(huà)出陰影,紅色區(qū)域。
效果如圖。
32、畫(huà)一個(gè)圓,雙擊圖層打開(kāi)圖層樣式,使用漸變疊加和投影。
33、復(fù)制這個(gè)圓形圖層,雙擊圖層打開(kāi)圖層樣式,把投影關(guān)掉,更改漸變。
34、ctrl+t(自由變換),如圖。
35、將這兩個(gè)圖層放到一個(gè)組里,取名為按鈕,然后復(fù)制一個(gè),然后ctrl+t(自由變換)變小,如圖。
46、畫(huà)一個(gè)圓角矩形,設(shè)置如圖。
雙擊圖層打開(kāi)圖層樣式,設(shè)置如圖。
47、畫(huà)一個(gè)只有描邊的圓。
再畫(huà)一個(gè),如圖。
48、按住atl再畫(huà)個(gè)矩形,然后調(diào)整好矩形的大小和位置。
49、畫(huà)一個(gè)白色的圓角矩形,圓角半徑為20,雙擊圖層打開(kāi)圖層樣式,設(shè)置如圖。
50,畫(huà)一個(gè)黑色的圓,取名為“黑圓”。
畫(huà)一個(gè)白色的方形,降低透明度,建立剪切蒙板。
51、畫(huà)一個(gè)小白圓,添加外發(fā)光。
52、打上字,SAMSUNG
53、畫(huà)鏡頭了,一個(gè)白圓。
一個(gè)漸變圓。
再加一個(gè)漸變圓
將這兩個(gè)漸變圓放到一個(gè)組里,并且復(fù)制一個(gè),然后ctrl+t(自由變換)往下移。
54、畫(huà)一個(gè)灰色的圓,然后斜面浮雕。
55、再加一個(gè)黑色的圓,也是像上面的一樣斜面浮雕。
56、加一個(gè)漸變圓。
7、畫(huà)一個(gè)填充色為黑色,描邊色為淡灰色的圓。
58,再畫(huà)一個(gè)更小一點(diǎn)的漸變圓。
再畫(huà)一個(gè),填充為黑色,描邊為黑白漸變色。
59.點(diǎn)擊這個(gè)漸變圓的縮略圖,得到它的選區(qū),然后新建一個(gè)圖層,用畫(huà)筆在兩側(cè)畫(huà)上高光。
60、用以上方法畫(huà)出第三個(gè)。
61,加一個(gè)紫色的漸變圓。
62、畫(huà)一個(gè)這樣的形狀取名為“四角。
63、復(fù)制“四角”圖層,ctrl+t,縮小一點(diǎn),然后進(jìn)行透視。
64、將“四角拷貝”復(fù)制一層,然后縮小一些。
65、按alt點(diǎn)擊小的“四角”圖層,得到選區(qū)之后選擇大的“四角”圖層,然后按delete刪除,得到如圖。
66、添加圖層樣式,如圖。
67、給這個(gè)圖層建立個(gè)白色蒙板,拉一個(gè)黑白漸變,將上部分隱藏起來(lái)。
68、再?gòu)?fù)制這個(gè)圖層,ctrl+t,進(jìn)行縮小,如圖。
69、該畫(huà)里面的圓環(huán)了,跟前邊的一樣,就不多說(shuō)了,直接跟著過(guò)程做吧。
70、畫(huà)一個(gè)小圓,打開(kāi)圖層樣式,使用漸變,并且降低圖層不透明度為50。
71、再畫(huà)一個(gè)比它更小一些的黑圓,放在它中間,如圖。
72、最后要做鏡頭陰影了。畫(huà)三個(gè)不同大小的圓加到一起做成陰影的形狀,然后合并這三個(gè)圓,把陰影圖層放到鏡頭圖層的下面。
73、把陰影的邊緣模糊一下,濾鏡 – 模糊 – 高晰模糊。
74、將陰影圖層降低不透明度為40%。
75、給陰影圖層建立蒙板,拉一個(gè)黑白漸變。
76、打上字:BAMBUNG ZOOMLEBNB。
到最后再整體看一下,哪里該調(diào)整的,哪里沒(méi)做好的再改一下,最后就得到的最終效果。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps網(wǎng)頁(yè)設(shè)計(jì)
- 相機(jī)圖標(biāo)
- 教程
- 繪制
- UI教程
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂(lè)圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫(huà)制作,用PS繪制簡(jiǎn)約沙漏插畫(huà)效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
推薦教程
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- UI教程:設(shè)計(jì)電池icon
- ps設(shè)計(jì)盒子圖標(biāo)
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- ps日歷圖標(biāo)
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- UI知識(shí),做UI的工作方式與流程
- PS繪制磚塊ICO圖標(biāo)
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)