UI教程,設(shè)計電視機主題UI圖標

2024-01-19 17:20:59 來源/作者: / 己有:2人學(xué)習過

復(fù)制一層“屏幕”圖層,轉(zhuǎn)智能對象,添加一個雜色,并將圖層混合模式更改為“柔光”。

UI教程,設(shè)計電視機主題UI圖標

用兩個屏幕的那個圓角矩形相減,得到我們需要的屏幕下部的高光形狀,將這個形狀的顏色設(shè)置為#eaead2,在屬性面板中設(shè)置一個1像素的羽化,并將圖層混合模式更改為“柔光”,不透明度34%。

UI教程,設(shè)計電視機主題UI圖標

設(shè)置前景色為#eaead2,用屏幕的那個圓角矩形和一個橢圓相交,得到我們需要的屏幕頂部的高光形狀,同樣的將圖層混合模式更改為“柔光”,不透明度34%,并添加一個圖層蒙版,適當?shù)牟潦米笥覂蓚?cè)。

UI教程,設(shè)計電視機主題UI圖標

下面,我們來制作按紐,設(shè)置前景色為#b4b097,畫一個正圓,并添加一個圖層樣式。

UI教程,設(shè)計電視機主題UI圖標

UI教程,設(shè)計電視機主題UI圖標