當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>按鈕圖標>教程內(nèi)容

photoshop繪制碳纖維風格的網(wǎng)頁導航按鈕

來源:未知 作者:jijuan96 學習:1060人次

制作背景

新建1200 x 600px,透明背景的文檔。設置前景色為#bebebf,背景色為#d2d2d2。



選取”漸變工具”從畫布頭部到底部進行線性漸變。



使用如下設置添加”雜色濾鏡”(濾鏡- 雜色- 添加雜色)



接著添加”模糊濾鏡”(濾鏡- 模糊- 動態(tài)模糊)



在畫布左右邊沿有些太過的動感模糊效果,這不是我們想要的,簡單的用裁剪工具進行裁剪,去除兩邊不好的動感模糊效果區(qū)域。



這樣你會得到一個輕柔的金屬感的背景,可以再次通過調(diào)整動感模糊設置來使金屬感看起來更和諧。
創(chuàng)建導航

選取圓角矩形工具,設置半徑為10px,在畫布中央拖出如下所示的矩形(663*136)。



完成后,設置如下圖層樣式:

內(nèi)陰影



漸變疊加






描邊






效果如下:



接下來,我們將制作碳纖維圖案,新建4 x 4px的文檔,放大到3200%,像下圖一樣給8個格子填充不同顏色。

(提示:借助標尺,把文檔分成8個格子,再新建2 x 1px的文檔,按以下顏色進行填充,填充好后復制到4 x 4px的文檔,這樣的話要復制8次哦)



圖案完成后,去往菜單”編輯- 自定義圖案”,給新圖案命名,然后回到制作導航欄的文檔中。

選擇”矩形”圖層,鼠標指向矩形的”矢量蒙版縮略圖”,按住ctrl,進行單擊,已選中整個矩形,此時新建圖層,保持選區(qū)不變,選擇”油漆桶”,用新圖案填充選區(qū),效果如下所示:



接著把新圖層的混合選項更改為”差值”。結(jié)果又不一樣,有碳纖維的感覺了:



創(chuàng)建導航按鈕

選擇”字體工具”,在矩形底部編寫導航鏈接。




然后給字體設置如下圖層樣式。

陰影



顏色疊加



在鏈接之間添加分隔線,兩條1px的直線相鄰,左邊的為黑色,右邊的為白色,完成后給此圖層設置透明度為50%,混合選項為”柔光”。

學習 · 提示

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

關注大神微博加入>>

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