網(wǎng)頁設(shè)計(jì)越來越注重細(xì)節(jié)的完美，一種好的字體效果或一個(gè)比較精致的按鈕會(huì)讓你的網(wǎng)頁增色不少。下面我們來探討這種按鈕的制作方法。
1：打開Photoshop新建一個(gè)200像素*200像素的文件，顏色最好是用RGB格式，前景顏色為黑色，用圓角矩形工具半徑設(shè)為4個(gè)像素繪制如圖1所示的圖形。

<圖1>   #p# 2：刪格化圖層（方法在圖2所示的藍(lán)色地方按鼠標(biāo)右鍵，選擇刪格化圖層。），再把這層命名為"按鈕--底"

<圖2>
3：按Ctrl + j 復(fù)制一層把這層命名為“水晶--高光”,把圖3中“1”的位置的勾選上，按一下字母 D 把前，背景設(shè)為黑白，再按Ctrl + Delete 直接填充白色。把圖3中“2”的位置透明度調(diào)為40%，然后向上移動(dòng)到圖3所示的位置。

<圖3>   #p# 4：調(diào)出“按鈕--高光”的選區(qū)(方法：只要按住 Ctrl 用鼠標(biāo)點(diǎn)圖4紅色所示的位置 下同)

<圖4>
5：添加蒙版，再應(yīng)用蒙版，按 Ctrl + J 復(fù)制一個(gè)新層命名為"按鈕--高光1"，把"按鈕--高光1"和"按鈕--高光"圖層中的眼睛圖標(biāo)點(diǎn)去，把這兩層隱藏。我們再回到“按鈕--底”這層，把圖層“鎖定：”后面的框選擇如圖5。

<圖5>   #p# 6：選取漸變工具：設(shè)置如圖6，漸變方向從上到下漸變，效果如圖7,雙擊圖層調(diào)出圖層樣式，選擇描邊數(shù)值為1，顏色為：R:177 G:182 B:187.

<圖6>

<圖7>
7：回到“按鈕--高光”這層，把這層的不透明度調(diào)為100%,如圖8

<圖8>   #p# 8：選擇漸變工具設(shè)置如圖9,方向由下到上。效果如圖10

<圖9>

<圖10>

9：在“按鈕--高光”上新建一層命名為：“按鈕--底1”,調(diào)出“按鈕--底”的選區(qū)，選擇菜單：選擇 > 修改 > 收縮 數(shù)值為3 如圖11

<圖11>   #p# 10：選擇漸變工具設(shè)置如圖12，由上到下繪制漸變，取消選區(qū)效果如圖13。

<圖12>

<圖13>
11：調(diào)出"按鈕--高光"的選區(qū),并把“按鈕--底1”圖層鎖定 如圖14

<圖14>   #p# 12：用漸變工具按垂直方向繪制漸變，設(shè)置如圖15 ，取消選區(qū)效果如圖16

<圖15>

<圖16>
13：回到“按鈕--高光1”這層，把不透明度調(diào)為30，如圖17

<圖17>   #p# 14：在“按鈕--高光1”上新建一層命名為：“按鈕--圖標(biāo)”，選擇一個(gè)自己需要的圖標(biāo)，用鋼筆工具勾出來，然后復(fù)制到“按鈕--圖標(biāo)”這層適當(dāng)?shù)恼{(diào)整大小。再加點(diǎn)投影，效果如圖18

<圖18>
PSD源文件下載

最新評論