扁平化UI圖標(biāo)設(shè)計(jì)教程

2022-12-26 14:37:02 來源/作者： / 己有：25人學(xué)習(xí)過

二、長投影

步驟 1:

矩形工具，前景色#000000, 在三角箭頭圖層以及圓環(huán)圖層下方畫出形狀如下圖

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

自由變換，選擇45度

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

為矩形形狀添加圖層蒙版

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

在圖層蒙版位置按住CMD+左鍵單擊圓角矩形形狀圖層，然后選擇>反向

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

使用油漆桶工具，前景色設(shè)置為#000000,抹去超出圓角矩形的陰影

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

如下圖使用鋼筆工具

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

 

不透明度設(shè)置為 20%

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

步驟2:

步驟1是三角箭頭的陰影，步驟2是圓環(huán)的陰影，類似同上，不再贅述。

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)

Photoshop簡單設(shè)計(jì)四種扁平化設(shè)計(jì)圖標(biāo)