網頁常用小按鈕一

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

　　第一款：像素按鈕

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

　　新建一個ps文檔，RGB模式，白色背景。

　　新建一層，復位色板，將前景色設為一種淺灰色，如例子中的RGB（239，239，239），用矩形選框工具選擇一個小矩形，填充前景色后取消選擇。

　　下面我們來制作按鈕的立體效果。這里，我們完全用添加圖層樣式的方法，雙擊圖層，打開圖層樣式對話框，我們來依次添加：

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

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

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

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

　　好了，現在你可以選擇細一些的字體，最好是專門的像素字體，在按鈕上寫上文字。在設置文字選項的時候，有一項需要特別注意，那就是要將文字消除鋸齒的方式設為無，否則字體會出現模糊。整個制作過程如圖1所示。

圖1

　　如果覺得灰色太單調，你也可以為按鈕添加各種顏色，過程和前面的大致相同，但有些地方有些細微差別。

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

　　第二款：漸變按鈕

　　相對于第一款按鈕來說，接下來我們要介紹的這種類型的按鈕實用性更強，而且顏色也更豐富。你在許多網站上都會看到它。

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

　　這次我們新建一層，用矩形選框工具選擇一個小矩形，然后點擊“選擇->修改->平滑”，設為5像素。選擇漸變工具的由黑到白漸變，在選框內由下往上拉。效果如圖2。

圖2

　　雙擊圖層，進入圖層樣式，我們為按紐添加立體感，選擇斜面和浮雕樣式，在樣式中選擇內斜面，方法為平滑，深度為1％，方向為上，大小為1像素，軟化為0像素，陰影的角度為120度，使用全局光，高度為30度，保持高光和暗調的默認混合模式及顏色不變，高光的不透明度為75％，暗調為36％；

圖3

　　最后，我們再用描邊的方式修飾按紐，設置描邊大小為1像素，位置在外部，混合模式為正常，不透明度為100％，填充類型為顏色，將顏色設為灰色。

圖4

由Ci222編寫,轉裁請保留作者