實例11 制作對話框

實例說明

本實例中將制作對話框，在網站應用中，對話框是必不可少的。對話框制作的尺寸不是固定的，它可以通過編輯設置適應網站的尺寸。在本實例中將為讀者講解對話框邊框及按鈕的制作，對于對話框內容的設置，讀者可以在以后的制作過程中為其添加。

技術要點

本實例中，首先使用圓角矩形工具創建一個圓角矩形，設置圓角矩形選區，將底紋圖像定義圖案，通過圖案圖章工具將底紋圖像刷滿整體個矩形選區內，然后通過圖層樣式對話框中的相關設置為創建的圖形添加效果，完成對話框邊框的制作。

在制作本實例時，將使用標尺工具來規范繪圓角矩形位置，以便更準確地繪制圖形。圖11-1為本實例完成后的效果。

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

2 按Crtl+R組合鍵，打開標尺，參照圖11-2所示創建四條參考線。

3 選擇工具箱中的“自定形狀工具”下拉按鈕下的“圓角矩形工具”按鈕，在“半徑”參數欄內鍵入15，在如圖11-3所示的位置繪制一個圓角矩形。

4 因為制作的對話框頂部圓角比底部圓角大，所以需要在底部在繪制一個圓角半徑較小的矩形。使用“圓角矩形工具”，在屬性欄內將“半徑”參數設置為5，在如圖11-4所示的位置繪制一個圓角矩形，使其與頂部的圓角矩形重疊。

5 接下來導入背景圖像。在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例11：制作對話框/背景.jpg”文件，單擊“打開”按鈕，打開該文件，如圖11-5所示。

6 確定“背景.jpg”處于可編輯狀態，執行菜單欄中“圖像”/“調整”/“色相/飽和度”命令，打開“色相/飽和度”對話框，單擊“著色”單選按鈕，在“色相”參數欄內鍵入29，在“飽和度”參數欄內鍵入50，在“明度”參數欄內鍵入46，如圖11-6所示，單擊“確定”按鈕，退出該對話框。

7 選擇工具箱中的“矩形選框工具”，繪制如圖11-7所示的選區。

8 執行菜單欄中的“編輯”/“定義圖案”命令，打開“圖案名稱”對話框，如圖11-8所示，單擊“確定”按鈕，退出“圖案名稱”對話框。

9 確定“對話框.psd”文件處于可編輯狀態，按住Ctrl鍵，單擊“圖層1”的“圖層縮覽圖”，加載該圖層的選區。

10 選擇工具箱中的“仿制圖章工具”下拉按鈕的“圖案圖章工具”，在屬性欄中“畫筆”的“主直徑”參數欄內鍵入200，單擊“點按可打開圖案拾色器”下拉按鈕，在打開的選項欄中選擇剛剛創建的“背景.jpg”圖案圖章，如圖11-9所示。

11 按下鼠標左鍵，在“圖層1”的選區內拖動鼠標，使用“背景.jpg”圖案填充選區內，如圖11-10所示。

12 確定“圖層1”處于可編輯狀態。單擊“圖層”面板底部的“添加圖層樣式”按鈕，在彈出的快捷菜單中選擇“描邊”選項，進入描邊編輯窗口，在“大小”參數欄內鍵入2，在“不透明度”參數欄內鍵入100，將“顏色”設置為R、G、B值為117、67、26的褐色，將該選區進行描邊，如圖11-11所示。

13 選擇“樣式”選項組中的“斜面和浮雕”復選框，進入斜面和浮雕編輯窗，在“深度”參數欄內鍵入50，其他參數使用默認設置，如圖11-12所示。

14 選擇“樣式”選項組中的“投影”復選框，進入投影編輯窗，在“不透明度”參數欄內鍵入30，在“距離”參數欄內鍵入7，在“擴展”參數欄內鍵入1，在“大小”參數欄內鍵入10，如圖11-13所示。單擊確定按鈕，退出“圖層樣式”對話框。

15 按組合鍵Ctrl+H，取消參考線。選擇工具箱中的“矩形選框”工具，在如圖11-14所示的位置繪制一個矩形。

16 按組合鍵Ctrl+Alt+D打開“羽化選區”對話框，在“羽化半徑”參數欄內鍵入20，如圖11-5所示。單擊“確定”按鈕，退出該對話框。

17 執行菜單欄中的“圖像”/“調整”/“亮度/對比度”命令，打開“亮度/對比度”對話框，在“亮度”參數欄內鍵入35，在“對比度”參數欄內鍵入30，如圖11-16所示。單擊“確定”按鈕，退出該對話框。

18 按組合鍵Ctrl+D取消選區。按住Ctrl鍵，單擊“圖層1”的圖層縮覽圖，加載該圖層選區。執行菜單欄中的“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在“收縮量”參數欄內鍵入8，如圖11-17所示，單擊“確定”按鈕，退出該對話框。

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

20 確定“圖層2”處于可編輯狀態。在選區中右擊鼠標，在彈出的快捷菜單中選擇“描邊”選項，在“寬度”參數欄內鍵入8，將“顏色”設置為白色，如圖11-18所示，執行描邊設置。

21 選擇工具箱中的“橡皮擦工具”，在屬性欄中“畫筆”的“主直徑”參數欄內鍵入100，參照圖11-19所示，擦除多余描邊部分。

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

23 確定“圖層3”處于可編輯狀態，選擇工具箱中的“矩形選框工具”，在圖11-20所示的位置繪制一個矩形選區，將前景色設置為R、G、B值為234、236、52的灰色，按組合鍵Alt+Delete，將選區進行填充。

24 單擊“圖層”面板底部的“添加圖層樣式”下拉按鈕，在彈出的快捷菜單中選擇“描邊”選項，進入描邊編輯窗口，在“大小”參數欄內鍵入2，在“不透明度”參數欄內鍵入60，將“顏色”設置為R、G、B值為117、67、26的褐色，將該選區進行描邊操作，如圖11-21所示。

25 選擇“樣式”選項組中的“內陰影”復選框，進入內陰影編輯窗，將“設置陰影顏色”設置為R、G、B值為62、33、33的深棕色，在“不透明度”參數欄內鍵入71，在“距離”參數欄內鍵入0，在“阻塞”參數欄內鍵入6，在“大小”參數欄內鍵入13，如圖11-22所示。

26 選擇“樣式”選項組中的“投影”復選框，進入投影編輯窗，在“不透明度”參數欄內鍵入30，在“距離”參數欄內鍵入0，在“擴展”參數欄內鍵入7，在“大小”參數欄內鍵入10，如圖11-23所示，單擊確定按鈕，退出“圖層樣式”對話框。

27 接下來添加文字。選擇工具箱中的“橫排文字工具”，在屬性欄內的“設置字體系列”下拉式選項欄中選擇Arial選項，設置“字體大小”為26，將“設置文本顏色”顯示窗內的顏色設置為R、G、B值為62、65、68的深灰色。在如圖11-24所示的位置鍵入Windows xp 2008。

28 確定文字層處于可編輯狀態，單擊“圖層”面板底部的“添加圖層樣式”下拉按鈕，在彈出的快捷菜單中選擇“外發光”選項，打開“圖層樣式”對話框，在“不透明度”參數欄內鍵入90，將“設置外發光顏色”設置為R、G、B值為250、236、178的黃色，在“擴展”參數欄內鍵入8，在“大小”參數欄內鍵入8，如圖11-25所示，單擊“確定”按鈕，退出該對話框。

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

30 選擇工具箱中的“矩形選框工具”下拉按鈕下的“橢圓選框工具”，在如圖11-26所示的位置繪制一個橢圓選區，并將其填充為白色。

31 單擊“圖層”面板底部的“添加圖層樣式”按鈕，在彈出的快捷菜單中選擇“描邊”選項，進入描邊編輯窗口，在“大小”參數欄內鍵入2，在“位置”下拉式選項欄中選擇“內部”選項，將“顏色”設置為R、G、B值為152、121、67的黃色，如圖11-27所示。

32 選擇“樣式”選項組中的“顏色疊加”復選框，進入顏色疊加編輯窗口，將“設置疊加顏色”設置為R、G、B值為26、81、218的藍色，在“不透明度”參數欄內鍵入73，如圖11-28所示。

33 選擇“樣式”選項組中的“斜面和浮雕”復選框，進入斜面和浮雕編輯窗，在“深度”參數欄內鍵入246，在“大小”參數欄內鍵入7，在“陰影”選項組中選擇“陰影模式”下拉式選項欄中的“濾色”選項，并在該選項組的“不透明度”參數欄內鍵入22，如圖11-29所示。單擊“確定”按鈕，退出該對話框。

34 使用以上方法，分別創建其他兩個按鈕，中間按鈕為綠色，右側按鈕為紅色，如圖11-30所示。

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

36 將本實例保存，以便下一實例中應用。