ps設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程(3)

來源:站酷 作者:thackeraybh 發(fā)布 學(xué)習(xí):2377人次

在教程中,我將解釋,通過發(fā)光和投影來制作真實(shí)的效果,也就是一個(gè)留聲機(jī)的app圖標(biāo)。使用PS強(qiáng)大的圖層樣式,我將告訴你怎樣在短時(shí)間內(nèi)完成這強(qiáng)大的效果。

先看看效果圖

我們也將使用一種方式來快速改變紋理的顏色,并且我將分享在打造真實(shí)效果過程中的一些經(jīng)驗(yàn)。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

01 首先畫出標(biāo)志的草圖,我先畫出大體的新裝,然后再上面添加一些細(xì)節(jié)元素,例如磁口和旋鈕。我想讓草圖看起來有點(diǎn)三維效果,但又不使用透視。于是我增加了圓角來讓圖標(biāo)看起來像是個(gè)打開的箱子。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

02 將您的早禿掃描進(jìn)PS。選擇漸變工具將您的背景填充成黑灰的漸變。下一步,使用圓角矩形工具繪制512px*512px的方形,將圓角設(shè)置為90px,F(xiàn)在按住Opt或者Alt并且選擇圖形,新建一個(gè)文件夾命名為Icon,然后給這個(gè)文件夾加上遮蔽蒙版。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

03 對于圖標(biāo)的顏色選擇是非常重要的。為了能體現(xiàn)質(zhì)感,我選擇深棕色取代原本的黑色,旋鈕也改成了淺棕色。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

04 通過圖層樣式選項(xiàng),我們能增加一些有趣的效果。為了體現(xiàn)膠片的質(zhì)感,我選擇了漸變疊加,混合模式為線性減淡,樣式為徑向,然后選擇漸變類型為雜色來體現(xiàn)出紋路的效果。復(fù)制該圖層,將漸變樣式改成實(shí)底,來創(chuàng)建反光效果。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

05 現(xiàn)在創(chuàng)建一些區(qū)域來做投影,你可以將它的混合模式選擇為線性減淡或者顏色減淡。這將會(huì)制作出真實(shí)的明暗關(guān)系。對于磁頭和旋鈕可以加入投影樣式來作為物體的反光。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

06 為了獲得更真實(shí)的投影效果,如圖防止一個(gè)灰色的方形,添加外發(fā)光然后將混合模式設(shè)置為線性減淡。我使用50%的灰度然后設(shè)置圖層透明度來獲得投影效果。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

07 紋理對于表現(xiàn)真實(shí)效果是非常重要的,你能自己拍攝或是上網(wǎng)那個(gè)搜集素材。這里,我使用了一張木質(zhì)的紋理。我調(diào)了一下色階和色相,然后創(chuàng)建了一個(gè)遮蔽蒙版,將混合模式設(shè)置為疊加。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

08 當(dāng)你對所有的圖層樣式設(shè)置滿意后,復(fù)制文件夾。在這里,你可以圖層>圖層樣式>新建圖層來幫助你通過蒙版來控制它們。

Photoshop設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程,PS教程,

09 你現(xiàn)在能復(fù)制或刪除一些圖層樣式來得到你想要的效果。有些部分太亮或太暗,所以我就選擇圖層然后使用筆刷在遮蔽蒙版上修改。

10 新建一個(gè)圖層,將它放在最上方,并且加上內(nèi)發(fā)光和光澤。在光澤中我使用了相同的疊加顏色,使整個(gè)圖標(biāo)更加統(tǒng)一。這樣你就完成了一個(gè)仿真的app圖標(biāo)效果

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

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

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

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