雖然越來(lái)越多的人開(kāi)始使用寬帶，速度已經(jīng)不象早些年那樣限制著網(wǎng)絡(luò)，但近年來(lái)的網(wǎng)頁(yè)卻沒(méi)有越來(lái)越繁雜，正相反，以簡(jiǎn)約為風(fēng)尚的網(wǎng)頁(yè)設(shè)計(jì)正悄悄流行在網(wǎng)絡(luò)世界中。這種風(fēng)格不但節(jié)約了帶寬，更重要的是，大多數(shù)人更喜歡在清新的環(huán)境中尋找他們所需的信息，簡(jiǎn)單精巧的設(shè)計(jì)，使獲取信息變得更加方便快捷。今天，我們就來(lái)設(shè)計(jì)幾款最常用的網(wǎng)頁(yè)小巧按鈕。

第一款：像素按紐

這是目前最為流行的一種按紐，在每個(gè)以像素為主題的網(wǎng)站上幾乎都能看到它的身影。想要最大程度的減小網(wǎng)頁(yè)大小，這種按紐可是不二法門(mén)。這種按紐簡(jiǎn)單大方，除了個(gè)性化的網(wǎng)站之外，用于公司網(wǎng)頁(yè)也非常合適。

新建一個(gè)Photoshop文檔，RGB模式，白色背景。

新建一層，復(fù)位色板，將前景色設(shè)為一種淺灰色，如例子中的RGB（239，239，239），用矩形選框工具選擇一個(gè)小矩形，大概為40×11像素大?。梢詤⒖夹畔⒚姘?，或者直接在矩形選框的工具選項(xiàng)中設(shè)定好矩形的固定大小，然后在畫(huà)布上點(diǎn)擊即可），填充前景色后取消選擇。

下面我們來(lái)制作按紐的立體效果。這里，我們完全用添加圖層樣式的方法，雙擊圖層，打開(kāi)圖層樣式對(duì)話(huà)框，我們來(lái)依次添加：

首先選擇斜面和浮雕樣式，設(shè)置結(jié)構(gòu)為內(nèi)斜面，方法為平滑，深度為1％，方向在上，大小和軟化均為2像素，陰影角度為146度，使用全局光，高度為30度，光澤保持默認(rèn)，高光和暗調(diào)的混合模式與顏色都不變，不過(guò)不透明度分別設(shè)為100％和43％；

其次是內(nèi)陰影模式，模式為正常，顏色為白色，不透明度為100％，角度為146度，使用全局光，距離為1像素，阻塞為100％，大小為0，品質(zhì)不變；

接下來(lái)是描邊，將描邊大小設(shè)為1像素，位置在外部，混合模式為正常，不透明度為100％，填充類(lèi)型為顏色，描邊顏色設(shè)為黑色；

最后是投影樣式，將陰影顏色設(shè)為黑色，不透明度為22％，角度為120度，取消全局光，距離為3像素，擴(kuò)展為0，大小為0，品質(zhì)保持默認(rèn)不變。

好了，現(xiàn)在你可以選擇細(xì)一些的字體，最好是專(zhuān)門(mén)的像素字體，在按紐上寫(xiě)上文字。在設(shè)置文字選項(xiàng)的時(shí)候，有一項(xiàng)需要特別注意，那就是要將文字消除鋸齒的方式設(shè)為無(wú)，否則字體會(huì)出現(xiàn)模糊。整個(gè)制作過(guò)程如圖01所示。


圖01

如果覺(jué)得灰色太單調(diào)，你也可以為按紐添加各種顏色，過(guò)程和前面的大致相同，但有些地方有些細(xì)微差別。

在新建圖層、設(shè)置選區(qū)后，設(shè)置你的前景色，如這里我們將前景色設(shè)為RGB（106，175，5），填充選區(qū)后取消選擇。然后開(kāi)始設(shè)定圖層樣式。在斜面和浮雕樣式中，將深度設(shè)為100％，大小和軟化為1像素，注意要將陰影的高光模式設(shè)為顏色減淡，不透明度為65％，暗調(diào)的不透明度也要減低一些；和剛才不同，我們?nèi)∠藘?nèi)陰影樣式，在描邊樣式中，將描邊顏色設(shè)為一種較深的灰色，如RGB（132，132，132），當(dāng)然，你也可以用黑色描邊；對(duì)于投影樣式，由于按紐本身的顏色較深，相對(duì)的，我們可以將陰影的不透明度設(shè)的稍微高一些，40％即可。最后，寫(xiě)上文字。（圖02）


圖02

你還可以將這兩種按紐結(jié)合起來(lái)，作為鼠標(biāo)翻轉(zhuǎn)動(dòng)畫(huà)來(lái)裝飾你的網(wǎng)頁(yè)。

第二款：漸變按紐

相對(duì)于第一款按紐來(lái)說(shuō)，接下來(lái)我們要介紹的這種類(lèi)型的按紐實(shí)用性更強(qiáng)，而且顏色也更豐富。你在許多網(wǎng)站上都會(huì)看到它。

首先，仍是新建RGB模式的Photoshop文檔，白色背景。

這次我們用矢量工具來(lái)處理選區(qū)。選擇圓角矩形工具，繪圖方式為填充像素，將工具選項(xiàng)中的圓角半徑設(shè)為3像素，復(fù)位色板，用黑色在畫(huà)布上繪制一個(gè)圓角矩形。（圖03）


圖03

這里，我們用黑色繪制圓角矩形，是為了能看清按紐形狀，但這個(gè)按紐本身是需要用白色填充的，所以，一旦你對(duì)圓角矩形的形狀滿(mǎn)意之后，按Ctrl+Shift+Delete，用白色填充圖層中的不透明區(qū)域。

雙擊圖層，進(jìn)入圖層樣式，先選擇漸變疊加樣式，混合模式為正常，不透明度為56％，漸變樣式為線(xiàn)性，漸變從黑色到白色，選擇與圖層對(duì)齊，角度為90度，縮放為150％，如圖04所示；


圖04

接下來(lái)，我們?yōu)榘醇~添加立體感，選擇斜面和浮雕樣式，在樣式中選擇內(nèi)斜面，方法為平滑，深度為1％，方向?yàn)樯?，大小?像素，軟化為0像素，陰影的角度為120度，使用全局光，高度為30度，保持高光和暗調(diào)的默認(rèn)混合模式及顏色不變，高光的不透明度為75％，暗調(diào)為36％；（圖05）


圖05

現(xiàn)在，我們來(lái)為按紐添加顏色，選擇顏色疊加樣式，將混合模式設(shè)為顏色，設(shè)置疊加顏色為RGB（91，145，191），不透明度為100％，如圖06所示；


圖06

最后，我們?cè)儆妹柽叺姆绞叫揎棸醇~，設(shè)置描邊大小為1像素，位置在外部，混合模式為正常，不透明度為100％，填充類(lèi)型為顏色，將顏色設(shè)為RGB（129，129，129）這種灰色。（圖07）


圖07

你可以將這種樣式保存下來(lái)，這樣，在制作同類(lèi)型的按鈕時(shí)就很方便了，如果想要改變按紐的顏色，只需進(jìn)入漸變疊加樣式，修改漸變色即可。

下面，我們要在按紐上寫(xiě)上文字。選擇文本工具，在按紐上點(diǎn)擊，Photoshop會(huì)自動(dòng)新建文字層。將前景色設(shè)為白色，寫(xiě)上按紐文字。這里，我選擇的字體是Verdana Bold。寫(xiě)好之后，選擇按紐層，將文字層與之鏈接，居中對(duì)齊文字層。最好在給文字添加一些圖層效果，使它更為醒目：雙擊文字層，打開(kāi)圖層樣式，先選擇外發(fā)光，將發(fā)光的混合模式設(shè)為正常，不透明度為60％，發(fā)光顏色為RGB（76，144，148）（這個(gè)顏色是和按紐顏色相對(duì)應(yīng)的），方法為較柔軟，擴(kuò)展為100％，大小為1像素，品質(zhì)保持不變；然后選擇投影樣式，混合模式為正片疊底，顏色為剛才我們選擇的外發(fā)光的顏色，不透明度為75％，角度為120度，使用全局光，距離為1像素，擴(kuò)展為0％，大小為2像素，品質(zhì)保持默認(rèn)狀態(tài)。這樣，這個(gè)漸變按紐就完成了。（圖08）


圖08

第三款：簡(jiǎn)單的Mac按紐

這款按紐的知名度很高，制作方法也有很多種，這里，我們用了一種較為簡(jiǎn)單的，但效果同樣好。

1.新建RGB文檔，白色背景。用矩形選框工具選擇一個(gè)矩形，作為按紐的基礎(chǔ)。新建一個(gè)通道，復(fù)位通道色板，在選區(qū)內(nèi)填充白色后取消選擇。（圖09）


圖09

先將通道做高斯模糊處理，半徑為3.5像素，隨即用色階工具調(diào)整，將輸入色階分別設(shè)為117，1.00，141，使通道中的白色矩形成圓角化。（圖10）


圖10

2.載入通道選區(qū)，回到RGB通道，新建圖層1，復(fù)位色板，將前景色設(shè)為RGB（209，209，209），選擇線(xiàn)性漸變工具，用從前景色到背景色的漸變填充選區(qū)。打開(kāi)描邊對(duì)話(huà)框，將寬度設(shè)為1像素，顏色為默認(rèn)的前景色，位置居外，完成之后不要取消選擇。（圖11）


圖11

3.下面我們來(lái)制作按紐的高光部分。新建圖層2，選擇選框工具，按住Shift鍵，同時(shí)按向上的方向鍵3次，將選區(qū)向上移動(dòng)30像素（圖12a）。在選區(qū)內(nèi)填充白色，載入通道1的選區(qū)，反選，刪除多余的白色圖像，取消選擇。用半徑為0.3像素的高斯模糊濾鏡輕微的模糊白色高光，將圖層2的不透明度減低到75％。（圖12b）


圖12a


圖12b

4.將圖層1和圖層2合并，為圖層添加內(nèi)陰影樣式：陰影的混合模式和顏色不變，不透明度降低到53％，角度為-45度，使用全局光，距離為2像素，阻塞為1％，大小為3像素，品質(zhì)不變。（圖13）


圖13

5.現(xiàn)在你可以為按紐添加文字部分了，添加一些投影效果可能會(huì)更理想（圖14）。如果想要改變按紐的顏色，可以使用色相／飽和度工具，選擇著色模式，按需要調(diào)整顏色。用這個(gè)方法你還可以做出透明效果的導(dǎo)航欄。（圖15）


圖14


圖15