Photoshop 繪制碳纖維風(fēng)格的網(wǎng)頁導(dǎo)航按鈕
:ps真功夫 發(fā)布時間:2010-03-22 13:52:42 作者:佚名
我要評論

這是HV-Designs的設(shè)計者Richard Carpenter 應(yīng)HV-Designs讀者的設(shè)計作品。
按照慣例,先來看下最終效果圖:
完成此教程后,Richard Carpenter將會繼續(xù)發(fā)布如轉(zhuǎn)換為CSS代碼的教程,我們共同期待著吧…
Richard Carpenter也是看到一個Flash 菜單后,才有此靈感設(shè)計。 制作背景
新建1200 x 600px,透明背景的文檔。設(shè)置前景色為#bebebf,背景色為#d2d2d2。
選取”漸變工具”從畫布頭部到底部進行線性漸變。
使用如下設(shè)置添加”雜色濾鏡”(濾鏡->雜色->添加雜色)
接著添加”模糊濾鏡”(濾鏡->模糊->動態(tài)模糊)
在畫布左右邊沿有些太過的動感模糊效果,這不是我們想要的,簡單的用裁剪工具進行裁剪,去除兩邊不好的動感模糊效果區(qū)域。
這樣你會得到一個輕柔的金屬感的背景,可以再次通過調(diào)整動感模糊設(shè)置來使金屬感看起來更和諧。
創(chuàng)建導(dǎo)航
選取圓角矩形工具,設(shè)置半徑為10px,在畫布中央拖出如下所示的矩形(663*136)。
完成后,設(shè)置如下圖層樣式:
內(nèi)陰影
漸變疊加
描邊
效果如下:
接下來,我們將制作碳纖維圖案,新建4 x 4px的文檔,放大到3200%,像下圖一樣給8個格子填充不同顏色。
(提示:借助標尺,把文檔分成8個格子,再新建2 x 1px的文檔,按以下顏色進行填充,填充好后復(fù)制到4 x 4px的文檔,這樣的話要復(fù)制8次哦)
圖案完成后,去往菜單”編輯->自定義圖案”,給新圖案命名,然后回到制作導(dǎo)航欄的文檔中。
選擇”矩形”圖層,鼠標指向矩形的”矢量蒙版縮略圖”,按住ctrl,進行單擊,已選中整個矩形,此時新建圖層,保持選區(qū)不變,選擇”油漆桶”,用新圖案填充選區(qū),效果如下所示:
接著把新圖層的混合選項更改為”差值”。結(jié)果又不一樣,有碳纖維的感覺了:
創(chuàng)建導(dǎo)航按鈕
選擇”字體工具”,在矩形底部編寫導(dǎo)航鏈接。
然后給字體設(shè)置如下圖層樣式。
陰影
顏色疊加
在鏈接之間添加分隔線,兩條1px的直線相鄰,左邊的為黑色,右邊的為白色,完成后給此圖層設(shè)置透明度為50%,混合選項為”柔光”。
創(chuàng)建導(dǎo)航球
選取”橢圓選框工具”,新建圖層,在第一個鏈接上方拖出一小型橢圓。如下所示:
選取”漸變工具”,在上述的橢圓選區(qū)中拖出一個從黑(#000000)到灰(#828282)的線性漸變。如下所示:
再一次使用”橢圓選框工具”,在剛剛創(chuàng)建的橢圓里新建一個圓形的選區(qū)。如下所示:
以顏色#8e8e8e填充此圓形選區(qū),保持此選區(qū)為激活狀態(tài),并在灰色圓形圖層上創(chuàng)建新圖層,設(shè)置前景色為白色,用漸變工具從左上角拖出一個從白到透明的徑向漸變。如下所示:
改變漸變類型為線性漸變,仍然保持選區(qū)為激活狀態(tài),再新建圖層,從底部向上拖出此漸變。如下所示:
改變每個圖層的透明度和漸變的位置,以增加球體的高光點。如下所示:
復(fù)制球體到每個按鈕上方。
創(chuàng)建按鈕激活狀態(tài)
選擇某按鈕添加激活狀態(tài),簡單的給此按鈕的球體添加漸變疊加(我沒有這樣操作,只是合并創(chuàng)建球體的所有圖層,然后添加調(diào)整圖層->色相/飽和度,并著色),選擇你覺得合適的顏色。如下所示:
使用”矩形選框工具”選中此按鈕,不要包括分隔線。如下所示:
創(chuàng)建新圖層,保持選區(qū)不變,以顏色#dddddd填充此選區(qū),然后設(shè)置圖層混合模式為”疊加”。
最后,使用”多邊形套索工具”創(chuàng)建三角形,三角形的顏色和背景色是一樣的,然后添加圖層樣式陰影,如下所示:
最后,按鈕激活狀態(tài)效果如下:

完成此教程后,Richard Carpenter將會繼續(xù)發(fā)布如轉(zhuǎn)換為CSS代碼的教程,我們共同期待著吧…
Richard Carpenter也是看到一個Flash 菜單后,才有此靈感設(shè)計。 制作背景
新建1200 x 600px,透明背景的文檔。設(shè)置前景色為#bebebf,背景色為#d2d2d2。

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

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

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

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

這樣你會得到一個輕柔的金屬感的背景,可以再次通過調(diào)整動感模糊設(shè)置來使金屬感看起來更和諧。
創(chuàng)建導(dǎo)航
選取圓角矩形工具,設(shè)置半徑為10px,在畫布中央拖出如下所示的矩形(663*136)。

完成后,設(shè)置如下圖層樣式:
內(nèi)陰影

漸變疊加

描邊

效果如下:

接下來,我們將制作碳纖維圖案,新建4 x 4px的文檔,放大到3200%,像下圖一樣給8個格子填充不同顏色。
(提示:借助標尺,把文檔分成8個格子,再新建2 x 1px的文檔,按以下顏色進行填充,填充好后復(fù)制到4 x 4px的文檔,這樣的話要復(fù)制8次哦)

圖案完成后,去往菜單”編輯->自定義圖案”,給新圖案命名,然后回到制作導(dǎo)航欄的文檔中。
選擇”矩形”圖層,鼠標指向矩形的”矢量蒙版縮略圖”,按住ctrl,進行單擊,已選中整個矩形,此時新建圖層,保持選區(qū)不變,選擇”油漆桶”,用新圖案填充選區(qū),效果如下所示:

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

創(chuàng)建導(dǎo)航按鈕
選擇”字體工具”,在矩形底部編寫導(dǎo)航鏈接。

然后給字體設(shè)置如下圖層樣式。
陰影

顏色疊加

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

創(chuàng)建導(dǎo)航球
選取”橢圓選框工具”,新建圖層,在第一個鏈接上方拖出一小型橢圓。如下所示:

選取”漸變工具”,在上述的橢圓選區(qū)中拖出一個從黑(#000000)到灰(#828282)的線性漸變。如下所示:

再一次使用”橢圓選框工具”,在剛剛創(chuàng)建的橢圓里新建一個圓形的選區(qū)。如下所示:

以顏色#8e8e8e填充此圓形選區(qū),保持此選區(qū)為激活狀態(tài),并在灰色圓形圖層上創(chuàng)建新圖層,設(shè)置前景色為白色,用漸變工具從左上角拖出一個從白到透明的徑向漸變。如下所示:

改變漸變類型為線性漸變,仍然保持選區(qū)為激活狀態(tài),再新建圖層,從底部向上拖出此漸變。如下所示:

改變每個圖層的透明度和漸變的位置,以增加球體的高光點。如下所示:

復(fù)制球體到每個按鈕上方。
創(chuàng)建按鈕激活狀態(tài)
選擇某按鈕添加激活狀態(tài),簡單的給此按鈕的球體添加漸變疊加(我沒有這樣操作,只是合并創(chuàng)建球體的所有圖層,然后添加調(diào)整圖層->色相/飽和度,并著色),選擇你覺得合適的顏色。如下所示:

使用”矩形選框工具”選中此按鈕,不要包括分隔線。如下所示:

創(chuàng)建新圖層,保持選區(qū)不變,以顏色#dddddd填充此選區(qū),然后設(shè)置圖層混合模式為”疊加”。

最后,使用”多邊形套索工具”創(chuàng)建三角形,三角形的顏色和背景色是一樣的,然后添加圖層樣式陰影,如下所示:

最后,按鈕激活狀態(tài)效果如下:

相關(guān)文章
- 今天的教程是教給大家做一個非常有圣誕氛圍的圣誕快樂按鈕,充滿濃濃的圣誕節(jié)日氣息,小伙伴們還不快快打開PS一起來學(xué)習(xí)2021-06-16
ps2021怎么做漂亮的漸變按鈕? ps按鈕樣式的設(shè)計方法
ps2021怎么做漂亮的漸變按鈕?ps中想要設(shè)計一款領(lǐng)券的按鈕,如果添加漸變色會更加顯眼,該怎么設(shè)計漸變色按鈕呢?下面我們就來看看ps按鈕樣式的設(shè)計方法,詳細請看下文介紹2021-05-27如何設(shè)計藍色金屬按鈕?用PS設(shè)計藍色科技金屬質(zhì)感按鈕教程
很多人人物游戲按鈕只能用AI才能設(shè)計,其實不然,一些按鈕不只可以用AI設(shè)計,PS照樣可以,今天我們就教大家制作一個藍色科技金屬質(zhì)感的“play”按鈕,一起來學(xué)習(xí)吧2021-05-18ps怎么設(shè)計配色干凈扁平化按鈕? ps按鈕矢量圖的設(shè)計方法
ps怎么設(shè)計配色干凈扁平化按鈕?很多時候我們會看到各種按鈕,想要設(shè)計一款顏色干凈清爽的扁平化按鈕,該怎么操作呢?下面我們就來看看ps按鈕矢量圖的設(shè)計方法,需要的朋友2021-04-08- 怎么用PS制作按鈕形狀效果?下面這邊文章主要為大家講述了用PS制作按鈕形狀效果的教程,感興趣的小伙伴來學(xué)習(xí)吧2020-12-15
- ps怎么設(shè)計圓形的不銹鋼金屬按鈕圖標?ps中想要設(shè)計一款圓形的按鈕,該怎么設(shè)計這個按鈕矢量圖呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-06-30
- PS怎么設(shè)計可愛的按鈕?ps中想要設(shè)計一款可愛的按鈕,該怎么設(shè)計呢?下面我們就來看看ps設(shè)計按鈕的教程,需要的朋友可以參考下2018-10-30
- ps怎么設(shè)計逼真的玻璃質(zhì)感按鈕?ps中想要設(shè)計一款漂亮的玻璃按鈕,該怎么設(shè)計逼真透明的玻璃按鈕呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-09-23
- ps怎么設(shè)計創(chuàng)意的圓形按鈕?ps中想要設(shè)計按鈕,該怎么設(shè)計創(chuàng)意的按鈕圖標呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-08-09
- PS怎么設(shè)計左右輪播圖的按鈕?網(wǎng)頁中經(jīng)常能見到多張圖片輪播的效果,會有左右按鈕,該怎么設(shè)計這個按鈕呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-08-09