圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)(2)

來源:站酷 作者:全棧UI筆記 學(xué)習(xí):16411人次

步驟十:

我們來為顯示屏添加高光位置,用圓角矩形工具繪制一個178px*50px圓角半徑為90px的圓角矩形,顏色設(shè)置# ffffff,高斯模糊12px,命名為顯示屏高光。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十一:

繼續(xù)添加高光位置,操作方式同上,繪制圓角矩形,顏色白色,添加圖層蒙版擦除不需要的位置,適當(dāng)調(diào)節(jié)不透明度。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十二:

現(xiàn)在來繪制邊框使用圓角矩形工具繪制一個238px*119px圓角半徑為90px的圓角矩形,顏色設(shè)置# 16120f并命名為邊框。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十三:

現(xiàn)在我們將邊框填充數(shù)字設(shè)置為0,添加圖層樣式,并移動圖層順序到顯示屏底部。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn


 

步驟十四:

高逼格的顯示屏一下就出來了,有木有!!現(xiàn)在我們來為中心添加數(shù)字。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十五:

現(xiàn)在我們用直線工具繪制直線,線條顏色設(shè)置為#d80202并添加圖層樣式

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十六:

現(xiàn)在我們來繪制線條的位置吧,選擇圓角矩形工具,繪制高度2px的線條,然后復(fù)制,打組后命名為橫條。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十七:

之后我們?yōu)闄M條添加圖層樣式,并添加蒙版,遮擋不需要的位置。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十八:

接下來我們繪制旋鈕吧,只要完成了一個,另一個就可以復(fù)制啦,是不是很開心,首先選擇橢圓工具,繪制一個65px*65px的正圓,顏色為#211f1d。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟十九:

繼續(xù)繪制50px*50px的正圓,并添加圖層樣式。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟二十:

現(xiàn)在我們將旋鈕復(fù)制一下吧,并ctrl+T適當(dāng)縮小一些。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟二十一:

現(xiàn)在我們來繪制最后的部分吧,繪制一個5px*5px的正圓,顏色#4adb43,并添加一下圖層樣式吧,然后將投影制作一下就完成了哦。

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

圖標(biāo)設(shè)計,設(shè)計黃色漸變木質(zhì)復(fù)古收音機(jī)UI圖標(biāo)_www.theoat.com.cn

步驟有點(diǎn)多哦,但是只要勤加練習(xí),會很大程度上提高你的PS水平。

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
Elyvan2020-04-29 02:49
我的作業(yè):

穆紫黎2018-07-29 08:25
絕對好看
風(fēng)拂揚(yáng)柳2018-02-23 07:14
瞧瞧
網(wǎng)友4908758432017-11-29 03:15
可以還行,還好我學(xué)過,不然我都看不懂。為素材添加樣式,沒懂,都要剪切進(jìn)去還添加樣式干嘛。
愛我2017-11-27 03:23
沒有看懂......從步驟三開始現(xiàn)在打開素材,為素材添加圖層樣式并按住ctrl+alt+g鍵創(chuàng)建剪貼蒙版到底座圖層
暖心暖調(diào)2017-11-25 11:45
這樣的教程,看泥馬
夢徒長安2017-11-25 10:36
回復(fù)一下
錑淚啲詩亼2017-11-25 03:43
謝謝   向您學(xué)習(xí)
幸福百米跑2017-11-25 01:17
努力學(xué)習(xí)
缺錢可以缺心呢2017-11-25 11:43
好好好 !

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

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