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

2022-12-26 10:31:52 來(lái)源/作者: / 己有:69人學(xué)習(xí)過(guò)

步驟十:

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

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

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

步驟十一:

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

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

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

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

步驟十二:

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

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

步驟十三:

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

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

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

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


 

步驟十四:

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

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

步驟十五:

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

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

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

步驟十六:

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

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

步驟十七:

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

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

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

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

步驟十八:

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

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

步驟十九:

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

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

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

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

步驟二十:

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

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

步驟二十一:

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

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

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

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