UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

2023-12-05 17:23:10 來源/作者: / 己有:0人學(xué)習(xí)過

復(fù)制一層“主體”圖層,更改圖層名為“投影”,將“投影”圖層置于“主體”圖層下層,將圖層填充設(shè)置為0,再添加一個(gè)圖層樣式,我們來增強(qiáng)一下投影效果。

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

原圖畫的是一個(gè)類似橢圓的形狀,我這里偷懶一下,還是畫的圓角矩形,大小為500X360像素,圓角半徑為130像素,添加一個(gè)圖層樣式。

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

下面,我們創(chuàng)建屏幕,設(shè)置前景色為#b4b097,使用圓角矩形工具,畫一個(gè)大小為420*280像素,圓角半徑為100像素的圓角矩形。

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

為這個(gè)“屏幕”圖層添加一個(gè)圖層樣式。

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)

UI教程,設(shè)計(jì)電視機(jī)主題UI圖標(biāo)