ps木箱子圖標(5)

來源:藍色理想 作者:情非得已 學習:7404人次

圖標的制作關鍵在于對高光和陰影把控;色彩的選用也很關鍵,決定了你的作品是否是高品質的。通過對本文的學習,你可以很好的掌握制作圖標的各種技巧,舉一反三的應用到其他作品中,喜歡的朋友讓我們一起來學習吧。

最終效果圖

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第一步

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二步

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

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

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三步

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

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第四步

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第五步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第六步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第七步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第八步

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第九步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

 

第十步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十一步

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

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十二步

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

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十三步

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

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十四步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十五步

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

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

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

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

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

5、"菜單 >濾鏡 > 模糊 > 動感模糊"

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

 

第十六步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十七步

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

2、按住Alt鍵,鼠標在圖層"木板"和"木質紋理"之間點擊,則紋理只在木板區(qū)域內顯示;

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十八步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第十九步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十步

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

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十一步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十二步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十三步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十四步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

 

第二十五步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十六步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十七步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十八步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第二十九步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十一步

1、添加文字"Ps",在圖層"psd背景"上方,接著將文字層柵格化,旋轉并調整,最后并給文字添加樣式

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

 

第三十二步

1、用相同操作,制作另外兩個對象

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十三步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十四步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十五步

1、用相同操作,制作另外兩個對象的陰影部分

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十六步

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

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十七步

1、按Ctrl +J,復制"箱子陰影",并命名為"箱子陰影2",按Ctrl + T,調整大小,如圖

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

第三十八步

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

最后加上背景圖,讓我們的圖標更美觀,背景圖片你可以源文件中復制過來,在這里我就不做說明了

Photoshop設計質感的木箱子網頁圖標,PS教程,16xx8.com教程網

 

學習 · 提示

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

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

關注大神微博加入>>

網友求助,請回答!