實例8 制作按鈕素材

實例說明

在本實例中，將制作網頁中使用的按鈕，按鈕通常有三種狀態，包括原始狀態、鼠標經過狀態和按下狀態，然后使用其他軟件編輯按鈕，使按鈕能夠形成互動形式，通過本實例，可以使讀者了解按鈕素材的制作方法，并了解怎樣使二維圖像呈現三維質感。

技術要點

在制作按鈕時，首先制作按鈕底部金屬質感部分，金屬質感部分使用漸變色填充圓形完成，制作完成金屬部分后，仍舊通過漸變色填充圓形的方法設置玻璃部分，然后設置高光部分，最后添加符號完成原始狀態按鈕的制作，由于三個按鈕較為相似，所以只需要復制第一個按鈕后，對其進行簡單的編輯，就可以完成其他兩個按鈕的制作。

按鈕是一種網頁中常用的組件形式，為了使按鈕具有更好的視覺效果，通常會使按鈕根據鼠標的狀態產生不同反應，所以在設置按鈕素材時，需要準備幾組圖像。在本實例中，將為讀者講解按鈕素材的制作方法，圖8-1中，左圖為按鈕原始狀態，中圖為按鈕鼠標經過狀態，右圖為按鈕按下狀態。

1 運行Photoshop CS3，執行菜單欄中的“文件”/“新建”命令，打開“新建”對話框。在“名稱”文本框中鍵入“按鈕素材”。在“寬度”參數欄內鍵入1200，在“高度”參數欄內鍵入400，單位設置為“像素”，在“分辨率”參數欄內鍵入72，在“顏色模式”下拉式選項欄中選擇“RGB顏色”選項，在“背景內容”下拉式選項欄中選擇“白色”選項，單擊“確定”按鈕，創建一個新文件。

2 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新的圖層“圖層1”。

3 將前景色設置為白色，將背景色設置為R、G、B值均為155的淺灰色，在工具箱中單擊“橢圓形選框工具”按鈕，按住Shift鍵在如圖8-2所示的位置創建一個正圓形選區。

提示

按住Shift鍵后，設置的圓形選區為正圓。

4 在工具箱中單擊“漸變工具”按鈕，將所設置的圓形選區填充為如圖8-3所示的漸變色。

5 在“圖層”面板中雙擊“圖層1”圖層縮覽圖，打開“圖層樣式”對話框。選擇“樣式”選項組中的“投影”復選框，進入投影編輯窗口。在“不透明度”參數欄內鍵入50，在“角度”參數欄內鍵入120，在“距離”、“擴展”和“大小”參數欄均鍵入5，如圖8-4所示。

6 選擇“樣式”選項組中的“描邊”復選框，進入描邊編輯窗口，將“設置描邊顏色”顯示窗內的顏色設置為R、G、B值均為145的灰色，在“大小”參數欄內鍵入2，在“位置”下拉式選項欄中選擇“外部”選項，如圖8-5所示，單擊“確定”按鈕，退出“圖層樣式”對話框。

7 在“圖層”面板的底部單擊“創建新圖層”按鈕，創建一個新的圖層——“圖層2”。

8 在工具箱中單擊“橢圓形選框工具”按鈕，按住Shift鍵在步驟3所示的圓形中心位置再創建一個正圓形選區。

9 在工具箱中單擊“漸變工具”按鈕，將所設置的圓形選區沿與“圖層1”相反的方向填充“圖層2”，如圖8-6所示。

10 將前景色設置為R、G、B值分別為195、230、250的淺藍色，背景色設置為R、G、B值分別為55、95、235的藍色。

11 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新的圖層——“圖層3”，選擇“圖層3”層，然后按住Ctrl鍵單擊“圖層2”圖層縮覽圖，加載選區，然后在菜單欄中執行“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在“收縮量”參數欄內鍵入4，然后單擊“確定”按鈕，退出該對話框。

12 在工具箱中單擊“漸變工具”按鈕，在屬性欄內單擊“徑向漸變”按鈕，將選區填充為如圖8-7所示的漸變色。

13 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新的圖層——“圖層4”，在工具箱中單擊“橢圓形選框工具”按鈕，在如圖8-8所示的位置繪制一個橢圓選區，并將其填充為白色。

14 按D鍵，設置前景色為黑色，背景色為白色，在工具箱內單擊“以快速蒙版模式編輯”按鈕，進入快速蒙版編輯模式，在工具箱內單擊“漸變工具”按鈕，在屬性欄內單擊“線性漸變”按鈕，設置如圖8-9所示的漸變填充。

15 在工具箱激活“以標準模式編輯”按鈕，進入標準編輯模式，視圖中出現如圖8-10所示的選區。

16 按Delete鍵，刪除選區內的圖像，然后將“圖層4”的圖像旋轉并移動至圖8-11所示的位置。

17 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新的圖層——“圖層5”。

18 在工具箱中單擊“自定形狀工具”按鈕，在屬性欄內單擊“點按可打開‘自定形狀工具’拾色器”按鈕，選擇“標記3”選項，如圖8-12所示。

19 在如圖8-13所示的位置繪制一個圖形。

20 在菜單欄內執行“編輯”/“變換”/“旋轉90度（逆時針）”命令，將其旋轉，然后將其移動至圖8-14所示。

21 在“圖層”面板選擇除了“背景”層之外的所有圖層，按住鼠標左鍵將所選圖層拖動至“創建新圖層”按鈕處，將所選圖層復制，復制圖層名稱為“圖層1副本”、“圖層2副本”、“圖層3副本”、“圖層4副本”、“圖層5副本”，將復制的圖層移動至圖8-15所示的位置。

22 在“圖層”面板中選擇“圖層3副本”層，在菜單欄執行“圖像”/“調整”/“色相/飽和度”命令，打開“色相/飽和度”對話框，在該對話框內的“色相”參數欄內鍵入10，在“飽和度”參數欄內鍵入95，在“明度”參數欄內鍵入5，如圖8-16所示，單擊“確定”按鈕，退出該對話框。

23 退出“色相/飽和度”對話框后，可以看到復制按鈕的效果如圖8-17所示。

24 在“圖層”面板選擇“圖層1副本”、“圖層2副本”、“圖層3副本”、“圖層4副本”、“圖層5副本”這5個圖層，按住鼠標左鍵將所選圖層拖動至“創建新圖層”按鈕處，將所選圖層復制，復制圖層名稱為“圖層1副本2”、“圖層2副本2”、“圖層3副本2”、“圖層4副本2”、“圖層5副本2”，將復制的圖層移動至圖8-18所示的位置。

25 選擇“圖層3副本2”、“圖層4副本2”、“圖層5副本2”三個圖層，將其縮放并移動至如圖8-19所示的位置。

26 在“圖層”面板中雙擊“圖層3副本2”圖層縮覽圖，打開“圖層樣式”對話框。選擇“樣式”選項組中的“內投影”復選框，進入內投影編輯窗口，在“距離”參數欄內鍵入10，在“阻塞”參數欄內鍵入5，在“大小”參數欄鍵入40，如圖8-20所示，單擊“確定”按鈕，退出該對話框。

27 退出“圖層樣式”對話框后可以看到，按鈕內投影效果如圖8-21所示。

28 現在按鈕素材的制作就全部完成了，完成后的效果如圖8-22所示，如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤“使用Photoshop CS3編輯網頁素材/實例8：制作按鈕素材/按鈕素材.psd”文件，該文件為本實例完成后的效果。