雖然越來越多的人開始使用寬帶，速度已經不像早些年那樣限制著網絡，但近年來的網頁卻沒有越來越繁雜，正相反，以簡約為風尚的網頁設計正悄悄流行在網絡世界中。這種風格不但節約了帶寬，更重要的是，大多數人更喜歡在清新的環境中尋找他們所需的信息，簡單精巧的設計，使獲取信息變得更加方便快捷。今天，我們就來設計幾款最常用的網頁小巧按鈕。
第一款：像素按紐
這是目前最為流行的一種按紐，在每個以像素為主題的網站上幾乎都能看到它的身影。想要最大程度的減小網頁大小，這種按紐可是不二法門。這種按紐簡單大方，除了個性化的網站之外，用於公司網頁也非常合適。
新建一個Photoshop文檔，RGB模式，白色背景。
新建一層，復位色板，將前景色設為一種淺灰色，如例子中的RGB（239，239，239），用矩形選框工具選擇一個小矩形，大概為40×11像素大小（可以參考信息面板，或者直接在矩形選框的工具選項中設定好矩形的固定大小，然後在畫布上點擊即可），填充前景色後取消選擇。
下面我們來製作按紐的立體效果。這裡，我們完全用添加圖層樣式的方法，雙擊圖層，打開圖層樣式對話框，我們來依次添加：
首先選擇斜面和浮雕樣式，設置結構為內斜面，方法為平滑，深度為1％，方向在上，大小和軟化均為2像素，陰影角度為146度，使用全局光，高度為30度，光澤保持默認，高光和暗調的混合模式與顏色都不變，不過不透明度分別設為100％和43％；
其次是內陰影模式，模式為正常，顏色為白色，不透明度為100％，角度為146度，使用全局光，距離為1像素，阻塞為100％，大小為0，品質不變；
接下來是描邊，將描邊大小設為1像素，位置在外部，混合模式為正常，不透明度為100％，填充類型為顏色，描邊顏色設為黑色；
最後是投影樣式，將陰影顏色設為黑色，不透明度為22％，角度為120度，取消全局光，距離為3像素，擴展為0，大小為0，品質保持默認不變。
好了，現在你可以選擇細一些的字體，最好是專門的像素字體，在按紐上寫上文字。在設置文字選項的時候，有一項需要特別注意，那就是要將文字消除鋸齒的方式設為無，否則字體會出現模糊。整個製作過程如圖01所示。
圖01
如果覺得灰色太單調，你也可以為按紐添加各種顏色，過程和前面的大致相同，但有些地方有些細微差別。
在新建圖層、設置選區後，設置你的前景色，如這裡我們將前景色設為RGB（106，175，5），填充選區後取消選擇。然後開始設定圖層樣式。在斜面和浮雕樣式中，將深度設為100％，大小和軟化為1像素，注意要將陰影的高光模式設為顏色減淡，不透明度為65％，暗調的不透明度也要減低一些；和剛才不同，我們取消了內陰影樣式，在描邊樣式中，將描邊顏色設為一種較深的灰色，如RGB（132，132，132），當然，你也可以用黑色描邊；對於投影樣式，由於按紐本身的顏色較深，相對的，我們可以將陰影的不透明度設的稍微高一些，40％即可。最後，寫上文字。（圖02）
圖02你還可以將這兩種按紐結合起來，作為鼠標翻轉動畫來裝飾你的網頁。
第二款：漸變按紐
相對於第一款按紐來說，接下來我們要介紹的這種類型的按紐實用性更強，而且顏色也更豐富。你在許多網站上都會看到它。
首先，仍是新建RGB模式的Photoshop文檔，白色背景。
這次我們用矢量工具來處理選區。選擇圓角矩形工具，繪圖方式為填充像素，將工具選項中的圓角半徑設為3像素，復位色板，用黑色在畫布上繪製一個圓角矩形。（圖03）
圖03
這裡，我們用黑色繪製圓角矩形，是為了能看清按紐形狀，但這個按紐本身是需要用白色填充的，所以，一旦你對圓角矩形的形狀滿意之後，按Ctrl+Shift+Delete，用白色填充圖層中的不透明區域。
雙擊圖層，進入圖層樣式，先選擇漸變疊加樣式，混合模式為正常，不透明度為56％，漸變樣式為線性，漸變從黑色到白色，選擇與圖層對齊，角度為90度，縮放為150％，如圖04所示；
圖04
接下來，我們為按紐添加立體感，選擇斜面和浮雕樣式，在樣式中選擇內斜面，方法為平滑，深度為1％，方向為上，大小為1像素，軟化為0像素，陰影的角度為120度，使用全局光，高度為30度，保持高光和暗調的默認混合模式及顏色不變，高光的不透明度為75％，暗調為36％；（圖05）
圖05
現在，我們來為按紐添加顏色，選擇顏色疊加樣式，將混合模式設為顏色，設置疊加顏色為RGB（91，145，191），不透明度為100％，如圖06所示；
圖06
最後，我們再用描邊的方式修飾按紐，設置描邊大小為1像素，位置在外部，混合模式為正常，不透明度為100％，填充類型為顏色，將顏色設為RGB（129，129，129）這種灰色。（圖07）
圖07你可以將這種樣式保存下來，這樣，在製作同類型的按鈕時就很方便了，如果想要改變按紐的顏色，只需進入漸變疊加樣式，修改漸變色即可。
下面，我們要在按紐上寫上文字。選擇文本工具，在按紐上點擊，Photoshop會自動新建文字層。將前景色設為白色，寫上按紐文字。這裡，我選擇的字體是Verdana Bold。寫好之後，選擇按紐層，將文字層與之鏈接，居中對齊文字層。最好在給文字添加一些圖層效果，使它更為醒目：雙擊文字層，打開圖層樣式，先選擇外發光，將發光的混合模式設為正常，不透明度為60％，發光顏色為RGB（76，144，148）（這個顏色是和按紐顏色相對應的），方法為較柔軟，擴展為100％，大小為1像素，品質保持不變；然後選擇投影樣式，混合模式為正片疊底，顏色為剛才我們選擇的外發光的顏色，不透明度為75％，角度為120度，使用全局光，距離為1像素，擴展為0％，大小為2像素，品質保持默認狀態。這樣，這個漸變按紐就完成了。（圖08）
圖08
第三款：簡單的Mac按紐
這款按紐的知名度很高，製作方法也有很多種，這裡，我們用了一種較為簡單的，但效果同樣好。
1.新建RGB文檔，白色背景。用矩形選框工具選擇一個矩形，作為按紐的基礎。新建一個通道，復位通道色板，在選區內填充白色後取消選擇。（圖09）
圖09
先將通道做高斯模糊處理，半徑為3.5像素，隨即用色階工具調整，將輸入色階分別設為117，1.00，141，使通道中的白色矩形成圓角化。（圖10）
圖10
2.載入通道選區，回到RGB通道，新建圖層1，復位色板，將前景色設為RGB（209，209，209），選擇線性漸變工具，用從前景色到背景色的漸變填充選區。打開描邊對話框，將寬度設為1像素，顏色為默認的前景色，位置居外，完成之後不要取消選擇。（圖11）
圖11 3.下面我們來製作按紐的高光部分。新建圖層2，選擇選框工具，按住Shift鍵，同時按向上的方向鍵3次，將選區向上移動30像素（圖12a）。在選區內填充白色，載入通道1的選區，反選，刪除多餘的白色圖像，取消選擇。用半徑為0.3像素的高斯模糊濾鏡輕微的模糊白色高光，將圖層2的不透明度減低到75％。（圖12b）
圖12a
圖12b
4.將圖層1和圖層2合併，為圖層添加內陰影樣式：陰影的混合模式和顏色不變，不透明度降低到53％，角度為-45度，使用全局光，距離為2像素，阻塞為1％，大小為3像素，品質不變。（圖13）
圖13
5.現在你可以為按紐添加文字部分了，添加一些投影效果可能會更理想（圖14）。如果想要改變按紐的顏色，可以使用色相／飽和度工具，選擇著色模式，按需要調整顏色。用這個方法你還可以做出透明效果的導航欄。（圖15）
圖14
圖15第四款：塑料按紐（一）
這個按紐一點也不輸於剛才我們所介紹的Mac按紐，儘管方法有些相似，但質感更強。如果你不滿足於一種製作透明按紐的方法，那麼這個一定不會讓你失望。
1.不用說，第一步仍是新建RGB模式的白色背景文檔。復位並翻轉色板，以白色為前景色，新建一層，選擇圓角矩形工具，點擊工具欄上的下拉三角，打開幾何選項，在圓角矩形選項中設置矩形為固定大小，98×28像素，然後將圓角半徑設為3像素，選擇消除鋸齒。設置好之後，用鼠標在背景上點擊，圓角矩形會以線框的形式顯示，在鬆開鼠標之前拖動，定位矩形的位置，如圖16所示。這時雖然看不到圖像的變化，但在圖層面板上我們已經注意到圖層1的改變。
圖16
2.雙擊圖層，進入圖層樣式，為了使我們的按紐清晰的顯示出來，我們先來選擇描邊樣式，設置描邊大小為1像素，位置在內部，混合模式為正常，不透明度為62％，描邊顏色為RGB（58，58，58）；
我們用漸變疊加樣式為按紐添加基本的漸變：混合模式為正常，不透明度設為15％，漸變為默認的黑色到白色，不過要選擇反向，將黑色色標的位置從0％移動到40％處，樣式為線性，選擇與圖層對齊，角度為90度，縮放為60％，如圖17所示。
圖17
3.下面，我們為按紐添加立體感，選擇斜面和浮雕，樣式選擇內斜面，方法為平滑，深度為1000％，方向為上，大小為2像素，軟化為3像素，陰影角度為-84度，取消全局光，高度為34度，保持高光和暗調的數值不變，僅將暗調的不透明度降低為16％。（圖18）
圖18
4.接下來的這一步是至關重要的，我們要在這一步中為按紐添加光澤效果。這次我們用一個比較特別的方法——內陰影樣式。在樣式列表中選擇內陰影，將混合模式設為正常，顏色為白色，不透明度為65％，取消全局光後將角度設為-90度，距離為13像素，阻塞和大小均為0，然後，修改等高線，點擊默認的等高線，拖動映射曲線兩端的端點，將它們自上而下改變位置，如圖19a，這樣，我們的視覺就會將白色的內陰影作為反光。（圖19b）
圖19a5.最後，我們為按紐添加一點陰影效果：選擇投影，將投影的不透明度設為14％，取消全局光，將角度設為-134度，距離和大小為1像素，擴展為0％，品質保持默認狀態不變。（圖20）
圖20
6.剩下的工作，就是寫上文字了。這裡，我依然對文字層用了一點投影效果來修飾它。（圖21）
圖21
第五款：塑料按紐（二）
這是另外一種形式的塑料按紐，相對於前面我們所介紹的幾種類型來說，下面我們將要介紹的這種按鈕顯得更活潑，更適合用於輕鬆的網站。這種方法適合製作各種不規則的按紐。
1.前幾步的過程和上幾個圓角按紐的製作過程相似，新建文檔，新建圖層1，用矩形選框工具選擇一個矩形形狀，新建通道1，填充白色，取消選擇。
高斯模糊通道，調節色階，使矩形圓角化（具體數值可參考上面幾個例子），載入選區，回到RGB通道，選擇作為按紐顏色的前景色，在圖層1內填充選區，取消選擇，然後用變形工具將圓角矩形變形。（圖22）
圖22
2.下面我們來製作按紐的高光部分。不同於前面的幾個例子，這次我們來手工製作按紐的高光。選擇自由鋼筆工具，在按紐的上部勾勒一條路徑，然後轉化為選區，新建一層，用白色填充選區，取消選擇。（圖23）
圖23
3.當然，這不會是我們的高光，這個白色區域，只是作為高光部分的選區基礎。現在載入圖層1的不透明區域通道，從選擇菜單的修改命令組中選擇收縮命令，將選區收縮1像素，反選，確定在圖層2中，刪除選區圖像。載入圖層2的不透明區域，現在這個選區才是我們真正所需要的高光選區。（圖24）
圖24 4.接下來，我們要清除選區內的白色，連續按4次Delete鍵，這樣，選區中的像素就被清除的差不多了。將前景色設為白色，選擇線性漸變工具，將漸變設為從前景色到透明，從選區的頂部到底部做出漸變，取消選擇。你可能需要多試幾次，才能將漸變做的理想。（圖25）
圖25
5.高光完成之後，我們來進行暗調。和剛才一樣，首先用自由鋼筆工具選擇暗調的區域，轉化為選區之後，新建圖層3，將前景色設為黑色，用黑色填充選區。
載入圖層1的不透明區域，將選區收縮1像素，反選，刪除多餘的黑色。載入圖層3的不透明通道，連續做幾次刪除，直到基本清除了選區內的黑色像素。（圖26）
圖26
6.用黑色到透明的漸變填充圖層3的選區後，取消選擇。高斯模糊，半徑為3像素，然後將圖層的不透明度減低到46％。載入圖層1的選區，反選，刪除圖層3內的多餘柔化像素，取消選擇。
現在，我們來為圖層1添加一點投影效果。前面的幾個例子中我們都大量運用了圖層樣式，而這個按紐效果大部分都是靠手工完成，只有這一點要增加一點修飾效果。打開投影樣式，將不透明度減低為50％，角度為90度，距離和大小均為2像素，擴展為0％。（圖27）
圖27
7.最後，我們為按紐添加文字。用黑色添加文字圖層之後，將它移動到圖層1之上，這樣高光就可以對它有影響。複製文字層，將底部的文字層填充為和按紐相同的顏色，圖層混合模式為顏色減淡，用半徑為1.0像素的高斯濾鏡稍加模糊，再將圖層的不透明度減低為60％。（圖28）
圖28
用這種方法，按紐的形狀不再局限於圓形或方形，你可以創造各種形狀的按紐了。
第六款：內嵌按紐
很多時候，按紐會搭配具有個性化的面板。這種組合會使你的網頁看起來更精緻。下面我們就來介紹一種小巧的內嵌式按紐，這種按鈕不但可以用於網頁，對於別的圖像，如手機上的按鍵，播放器上的按紐，也是非常合適的。這個按紐也是通過圖層樣式構造的，分為兩個部分。下面我們來具體的看看製作過程。
1.首先，打開一個需要添加按紐的面板圖像，如圖29所示。設置前景色為RGB（193，194，196），選擇橢圓矢量工具，在工具選項中設置繪圖方式為創建形狀圖層，按住Shift鍵，在圖中繪製一個小小的圓形。（圖30）
圖30
這裡，我們之所以採用形狀圖層，是因為它在放大和縮小時都不會影響圖像的品質。你可以按自己的需要所示調整按鈕的大小。
2.下面我們開始為按紐添加圖層樣式。
首先是內陰影：將陰影的混合模式設為正常，顏色為白色，不透明度為29％，取消全局光，角度為-81度，距離為2像素，阻塞和大小均為0，品質不變；
其次是內發光：混合模式為正常，不透明度為22％，顏色為黑色，發光方法為較柔軟，自邊緣發光，阻塞為0，大小為4像素，品質不變；
然後是漸變疊加：將漸變的混合模式設為屏幕，不透明度為81％，保持漸變色默認狀態，將縮放設為49％；
最後一種樣式是描邊：描邊大小為1像素，位置在外部，混合模式為正常，不透明度為34％，填充顏色為黑色。（圖31）
圖31
3.現在，我們的按紐已經具有立體感了，但是看起來按紐像是粘在面板上的一樣，沒有和面板融為一體。這就是為什麼我們要製作出內嵌的效果的原因了。下面我們就來把按紐嵌入面板中。
點擊按紐層的矢量蒙版縮覽圖，顯示蒙版路徑，在路徑面板中，你會看到名為形狀1矢量蒙版的路徑，複製這條路徑，名為路徑1，選擇直接選擇工具，在畫面的任何地方點擊右鍵，從彈出菜單中選擇自由變換路徑，按住Alt和Shift鍵，拖動定型框的邊角，從中心等比例放大路徑，使路徑1的大小比按紐路徑稍大一些，如圖32所示，確定變形。
圖324.在按紐層下新建圖層1，確定當前工具仍為直接選擇工具，點擊右鍵，從菜單中選擇創建矢量蒙版命令，路徑1的區域將作為蒙版添加到圖層1中。
復位色板，用背景色填充圖層1，看看白色區域和按紐的比例是否合適。如果不滿意，可以通道修改矢量蒙版來改變大小。（圖33）
圖33
5.取消對蒙版路徑的選擇狀態，雙擊圖層1，進入樣式面板，選擇漸變疊加，將混合模式設為正片疊底，不透明度為100％，選擇反向，使漸變從白色到黑色，樣式為線性，與圖層對齊，角度為90度，縮放為75％。有必要的話，還可以改變漸變顏色中點的位置（圖34）。你可以按自己的需要將按紐組合起來，也可以改變按紐的形狀、大小和紋理，創建多樣化的按紐。在改變按紐形狀時，要注意圖層樣式和按紐形狀的配合。這裡例子中，我添加了色相／飽和度調整圖層，用以為按紐上色。（圖35）
圖34
圖35
Michael 滑板圖案設計