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

來(lái)源:站酷 作者:全棧UI筆記 學(xué)習(xí):16411人次

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

最終效果:

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

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

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

步驟一:

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

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

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

步驟二:

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

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

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

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

步驟三:

現(xiàn)在打開(kāi)素材,為素材添加圖層樣式并按住ctrl+alt+g鍵創(chuàng)建剪貼蒙版到底座圖層。

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

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

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

步驟四:

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

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

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

步驟五:

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

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

步驟六:

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

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

步驟七:

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

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

步驟八:

繼續(xù)打開(kāi)素材,操作同上:為素材添加圖層樣式轉(zhuǎn)換為智能對(duì)象并創(chuàng)建剪貼蒙版到底座暗色。將圖層打組命名為底座。

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

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

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

步驟九:

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

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

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

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

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
Elyvan2020-04-29 02:49
我的作業(yè):

穆紫黎2018-07-29 08:25
絕對(duì)好看
風(fēng)拂揚(yáng)柳2018-02-23 07:14
瞧瞧
網(wǎng)友4908758432017-11-29 03:15
可以還行,還好我學(xué)過(guò),不然我都看不懂。為素材添加樣式,沒(méi)懂,都要剪切進(jìn)去還添加樣式干嘛。
愛(ài)我2017-11-27 03:23
沒(méi)有看懂......從步驟三開(kāi)始現(xiàn)在打開(kāi)素材,為素材添加圖層樣式并按住ctrl+alt+g鍵創(chuàng)建剪貼蒙版到底座圖層
暖心暖調(diào)2017-11-25 11:45
這樣的教程,看泥馬
夢(mèng)徒長(zhǎng)安2017-11-25 10:36
回復(fù)一下
錑淚啲詩(shī)亼2017-11-25 03:43
謝謝   向您學(xué)習(xí)
幸福百米跑2017-11-25 01:17
努力學(xué)習(xí)
缺錢(qián)可以缺心呢2017-11-25 11:43
好好好 !

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!