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

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

本篇教程的旨在送你一部收音機(jī),嘿嘿嘿,逗你的,本篇教程主要通過圖層樣式來設(shè)計(jì)一款黃色漸變木質(zhì)復(fù)古收音機(jī)圖標(biāo),整篇教程不難,需要同學(xué)們細(xì)心操作,等不及想動手一試了吧,同學(xué)們一起來練習(xí)下吧。

最終效果:

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

老規(guī)矩先來分析一下,這里我們主要分為三個部分:底座、旋鈕、顯示屏、橫線,大都問題都不大,主要是底座和顯示屏比較麻煩一點(diǎn),需要用到多個圖層來制作高光效果,騷年分析完已經(jīng)成功一半了,離成功還會遠(yuǎn)么?噢耶?。?!

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

步驟一:

首先新建畫布500px*500px畫布,命名為收音機(jī),填充背景顏色#c8beae。

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

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

步驟二:

使用圓角矩形工具繪制一個320px*320px圓角半徑為60px的圓角矩形,顏色設(shè)置#d29b4d并命名為底座,添加圖層樣式。

圖標(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)在打開素材,為素材添加圖層樣式并按住ctrl+alt+g鍵創(chuà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)

步驟四:

現(xiàn)在來繪制底座高光,繪制倆個圓角矩形,使用小黑工具單擊選中內(nèi)步形狀,并減去頂層形狀。

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

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

步驟五:

將混合模式改為濾色,不透明度設(shè)置為40%,添加圖層蒙版,擦除不需要的位置。

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

步驟六:

繼續(xù)使用圓角矩形工具繪制一個283px*278px圓角半徑為60px的圓角矩形,顏色設(shè)置# f8bf86并命名為底座亮色。

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

步驟七:

我們復(fù)制一下底座亮色圖層,將顏色設(shè)置為#96622f,重新命名為底座暗色,并移動到合適的位置。

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

步驟八:

繼續(xù)打開素材,操作同上:為素材添加圖層樣式轉(zhuǎn)換為智能對象并創(chuà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)

步驟九:

現(xiàn)在我們來繪制顯示屏的位置,用圓角矩形工具繪制一個238px*119px圓角半徑為90px的圓角矩形,顏色設(shè)置# a4a29e并命名為顯示屏底座,添加圖層樣式。

圖標(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)