ps木箱子圖標(biāo)(5)

來(lái)源:藍(lán)色理想 作者:情非得已 學(xué)習(xí):7404人次

圖標(biāo)的制作關(guān)鍵在于對(duì)高光和陰影把控;色彩的選用也很關(guān)鍵,決定了你的作品是否是高品質(zhì)的。通過對(duì)本文的學(xué)習(xí),你可以很好的掌握制作圖標(biāo)的各種技巧,舉一反三的應(yīng)用到其他作品中,喜歡的朋友讓我們一起來(lái)學(xué)習(xí)吧。

最終效果圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第一步

1、按ctrl+N,新建一個(gè)文檔,大小600x500px,命名為"木箱子"

2、創(chuàng)建一個(gè)新層,命名為"黃色塊01",用矩形工具(U)繪制一個(gè)梯形路徑,按Ctrl+ Enter,將路徑轉(zhuǎn)成選區(qū),并填充,顏色 #d9c700

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二步

1、創(chuàng)建一個(gè)新層,命名"木板",在圖層"黃色塊01"下方,用圓角矩形工具(U),繪制一個(gè)圓角矩形路徑,圓角半徑為20px

2、按Ctrl + T,右鍵,選擇"透視",將圓角矩形底部往內(nèi)縮

3、按Ctrl + Enter,將路徑轉(zhuǎn)成選區(qū),并填充紅色#ef0000

4、用選區(qū)工具(M),刪除超出的區(qū)域

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三步

1、在圖層"木板"上方,創(chuàng)建一個(gè)新層,命名為"黃色塊02",用矩形工具(U),繪制一個(gè)矩形路徑,如下圖

2、按Ctrl+ Enter,將路徑轉(zhuǎn)成選區(qū),并填充顏色 #d9c700

3、用選區(qū)工具(M),刪除超出的區(qū)域

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第四步

1、新建一個(gè)圖層,在最上方,命名為"黃色塊03"

2、按住Ctrl鍵,鼠標(biāo)點(diǎn)擊圖層"黃色塊01"的縮覽圖,獲得選區(qū),接著"菜單> 選擇 > 修改 > 收縮",輸入 10px,填充顏色 #d9bb14

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第五步

1、用加深工具(O),在圖層"黃色塊01"不同點(diǎn)進(jìn)行涂抹(如下圖)

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第六步

1、用加深工具(O)涂抹"黃色塊03",如下圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第七步

1、用矩形工具(U),繪制一個(gè)路徑,按Ctrl +Enter將路徑轉(zhuǎn)成選區(qū),此選區(qū)把"黃色塊03",分成2個(gè)區(qū)域

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第八步

1、選擇圖層"黃色塊03",用加深工具(O)涂抹區(qū)域一,如圖

2、按Ctrl + Shift + I 反選選區(qū),用加深工具(O)涂抹區(qū)域二,如下圖,通過對(duì)著2個(gè)區(qū)域明暗處理,產(chǎn)生立體效果。

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第九步

1、給"黃色塊03"添加外發(fā)光樣式

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

 

第十步

1、選擇"黃色塊02",用加深工具(O)涂抹

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十一步

1、新建一個(gè)圖層在頂部,命名為"高光線01"

2、設(shè)置畫筆,大小3px,顏色 #ffffff,硬度 100%,不透明度 100%,流量 90%

3、用鋼筆工具(P),繪制一條直線,如下圖,接著" 右鍵 >描邊路徑"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十二步

1、選擇圖層"高光線01",接著" 菜單 > 濾鏡 > 模糊> 高斯模糊",輸入值 1.0

2、" 菜單 > 濾鏡 > 模糊 > 動(dòng)感模糊",角度 0,距離10px

3、把圖層混合模式改為"疊加",不透明度 50%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十三步

1、新建一個(gè)圖層在"高光線01"上方,命名為"高光線02",再繪制一白色線條

2、"菜單 > 濾鏡 > 模糊 > 動(dòng)感模糊",角度 0,距離 35px

3、把圖層混合模式改為"疊加"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十四步

1、選擇"黃色塊01"和"黃色塊02",右鍵點(diǎn)擊,選擇"復(fù)制圖層",然后按Ctrl +E合并圖層,將新的圖層命名為"黃色塊01+02",接著把圖層混合模式改為"正片疊底",不透明度 30%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十五步

1、新建一個(gè)圖層在"黃色塊01+02"上方,命名為"細(xì)節(jié)"

2、按住Ctrl鍵,鼠標(biāo)點(diǎn)擊"黃色塊01+02"的縮覽圖,獲得選區(qū)

3、按D鍵,使前景色為黑色,背景色為白色

4、"菜單> 濾鏡 > 渲染 > 云彩"

5、"菜單 > 濾鏡 > 雜色 > 添加雜色"

5、"菜單 >濾鏡 > 模糊 > 動(dòng)感模糊"

6、把圖層混合模式改"柔光",不透明度 20%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

 

第十六步

1、按Ctrl +J,復(fù)制"黃色塊03",命名為"黃色塊03_正片疊底",然后把圖層混合模式改為"正片疊底",不透明度 50%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十七步

1、打開素材木質(zhì)紋理.jpg,并復(fù)制到木箱子.psd中,置于圖層"木板"上方,命名為"木質(zhì)紋理"

2、按住Alt鍵,鼠標(biāo)在圖層"木板"和"木質(zhì)紋理"之間點(diǎn)擊,則紋理只在木板區(qū)域內(nèi)顯示;

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十八步

1、選擇圖層"木質(zhì)紋理",用加深工具(O),涂抹邊緣,如下圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第十九步

1、按Ctrl +J,復(fù)制圖層"木質(zhì)紋理",并命名為"木質(zhì)紋理_正片疊底",設(shè)置圖層混合模式為"正片疊底",不透明度 88%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十步

1、創(chuàng)建一個(gè)新層,在"木質(zhì)紋理_正片疊底"上方,命名為"木板底部"

2、用選區(qū)工具(M),繪制一個(gè)矩形選區(qū),并羽化20px,填充黑色,把圖層不透明度設(shè)為 70%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十一步

1、創(chuàng)建一個(gè)新層,在"黃色塊02"下方,命名為"黃色塊02_陰影",如圖所示制作出陰影

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十二步

1、選擇圖層"木質(zhì)紋理",按住Shift鍵,用橢圓選區(qū)工具(M),繪制個(gè)圓形選區(qū),接著按Ctrl+ J,把圓形圖層命名為"圓形背景"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十三步

1、選擇"圓形背景",按Ctrl +J,把復(fù)制的圖層命名為"圓形背景_正片疊底",設(shè)置圖層混合模式"正片疊底"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十四步

1、給"圓形背景"添加圖層樣式

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

 

第二十五步

1、用自定義形狀工具(U),繪制一個(gè)形狀,按Ctrl +Enter,將路徑轉(zhuǎn)成選區(qū)

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十六步

1、在選區(qū)可見情況下,選擇圖層"木質(zhì)紋理",按Ctrl +J,復(fù)制出一個(gè)圖層,命名為"放射形狀",并把圖層放在"木板底部"與"圓形背景_正片疊底"之間

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十七步

1、按Ctrl +J,復(fù)制圖層"放射形狀",命名為"放射形狀_正片疊底",并把圖層的混合模式改為"正片疊底",不透明度 70%

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十八步

1、給"放射形狀",添加圖層樣式

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第二十九步

1、創(chuàng)建一個(gè)新層,在頂部,命名為"psd背景",用鋼筆工具(P)繪制一個(gè)方形區(qū)域,如下圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十步

1、用加深工具(O)和減淡工具,在"psd背景"上涂抹

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十一步

1、添加文字"Ps",在圖層"psd背景"上方,接著將文字層?xùn)鸥窕,旋轉(zhuǎn)并調(diào)整,最后并給文字添加樣式

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

 

第三十二步

1、用相同操作,制作另外兩個(gè)對(duì)象

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十三步

1、創(chuàng)建一個(gè)新層,在"psd背景"下方,命名為"psd陰影01"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十四步

1、創(chuàng)建一個(gè)新層,在"psd陰影01"下方,命名為"psd陰影02"

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十五步

1、用相同操作,制作另外兩個(gè)對(duì)象的陰影部分

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十六步

1、創(chuàng)建一個(gè)圖層,在"木板"下方,命名為"箱子陰影",具體操作如下圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十七步

1、按Ctrl +J,復(fù)制"箱子陰影",并命名為"箱子陰影2",按Ctrl + T,調(diào)整大小,如圖

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

第三十八步

按Ctrl +J,復(fù)制"箱子陰影2",調(diào)整位置和大小,或者繼續(xù)復(fù)制一次直到你覺得效果滿意為止;

最后加上背景圖,讓我們的圖標(biāo)更美觀,背景圖片你可以源文件中復(fù)制過來(lái),在這里我就不做說明了

Photoshop設(shè)計(jì)質(zhì)感的木箱子網(wǎng)頁(yè)圖標(biāo),PS教程,16xx8.com教程網(wǎng)

 

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

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

66688882020-06-17 09:06
交作業(yè)
筱肚兜2018-06-19 08:53
喜歡
流浪情人2018-03-07 12:40
我的作業(yè):
當(dāng)認(rèn)真_天真_成為一種傻2017-04-07 04:59
發(fā)現(xiàn)沒給素材。木紋。只能自己扣下來(lái)
當(dāng)認(rèn)真_天真_成為一種傻2017-04-07 04:58
新手傷不起,弄了一下午。過早的合并了ps..圖層。大概差不多吧、、
當(dāng)認(rèn)真_天真_成為一種傻2017-04-07 04:04
新手傷不起,弄了一下午。過早的合并了ps..圖層。大概差不多吧、、
當(dāng)認(rèn)真_天真_成為一種傻2017-04-07 04:04
發(fā)現(xiàn)沒給素材。木紋。只能自己扣下來(lái)
_眼角De淚水2012-12-04 12:46
向老師學(xué)習(xí)
舊年不再舊約2012-12-03 08:45
感謝分享,學(xué)習(xí)了。
年少為誰(shuí)傾2012-12-03 07:52
關(guān)鍵的步驟不說,神仙也做不出來(lái)!
云飛風(fēng)舞2012-12-03 06:23
想學(xué)習(xí)學(xué)習(xí)
孫帥帥PETS2012-12-03 03:20
還行 蠻不錯(cuò)的

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

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