實例12 制作對話框內容

實例說明

本實例中將制作對話框內的組件部分，該組件由模塊、滑條、按鈕及文字四部分組成。

技術要點

本實例中，首先打開上一實例中的未完成文件，使用工具箱中圓角矩形工具創建各模塊，并使用自定形狀工具繪制按鈕圖形，通過圖層樣式對話框中的相關設置為創建的圖形添加效果，最后使用文本工具，添加所需文字，完成對話框內容的制作。

在本實例的制作中，為了便于編輯，讀者可以將先將導入的源文件中的圖層全部合并，然后在進行其他制作。圖12-1為本實例完成后的效果。

1 運行Photoshop CS3，在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例11：制作對話框/對話框.psd”文件，單擊“打開”按鈕，打開上一實例中保存的文件，如圖12-2所示。

2 按組合鍵Shift+Alt+E，將“對話框.psd”文件中的全部圖層合并，生成“背景”層，以便于以后編輯。如圖12-3所示。

3 單擊“圖層”面板底部的“創建新圖層”按鈕，創建一個新圖層——“圖層1”。選擇工具箱中的“自定形狀工具”下拉按鈕下的“圓角矩形工具”，在屬性欄中單擊“路徑”按鈕，在“半徑”參數欄內鍵入5，在圖12-4所示的位置創建一個圓角矩形路徑。

4 在“半徑”參數欄內鍵入20，在圖12-5所示的位置在創建一個圓角矩形路徑。

5 進入“路徑”面板，單擊“路徑”面板底部的“將路徑作為選區載入”按鈕，加載選區，如圖12-6所示。

6 進入“圖層”面板。選擇工具箱中的“矩形選框工具”，在選區任意處右擊，在彈出的快捷菜單中選擇“描邊”選項，打開“描邊”對話框，在“寬度”參數欄內鍵入2，將“顏色”設置為R、G、B值為159、158、155的灰色，選擇“居外”單選按鈕，在“混合”選項組下的“不透明度”參數欄內鍵入80，如圖12-7所示，單擊“確定”按鈕，退出該對話框。

7 單擊“圖層”面板底部的“添加圖層樣式”下拉按鈕，在彈出的快捷菜單中選擇“投影”選項，打開“圖層樣式”對話框，在“不透明度”參數欄內鍵入20，在“距離”參數欄內鍵入1，在“擴展”參數欄內鍵入21，在“大小”參數欄內鍵入0，如圖12-8所示。單擊“確定”按鈕，退出該項對話框。

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

9 確定“背景.jpg”處于可編輯狀態，選擇工具箱中的“矩形選框工具”，繪制如圖12-10所示的選區。

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

11 確定“對話框內容.psd”文件處于可編輯狀態，選擇工具箱中的“仿制圖章工具”下拉按鈕下的“圖案圖章工具”，在屬性欄中“畫筆”的“主直徑”參數欄內鍵入200，單擊“點按可打開圖案拾色器”下拉按鈕，在打開的選項欄中選擇剛剛創建的“背景.jpg”圖案圖章，按下鼠標左鍵，在“圖層1”的選區內拖動鼠標，將“背景.jpg”圖案圖章填充至選區內，如圖12-12所示。

12 執行菜單欄中的“圖像”/“調整”/“色相/飽和度”命令，打開“色相/飽和度”對話框，在“色相”參數欄內鍵入84，在“飽和度”參數欄內鍵入22，在“明度”參數欄內鍵入83，如圖12-13所示，單擊“確定”按鈕，退出該對話框。

13 按組合鍵Ctrl+D取消選區。選擇工具箱中的“矩形選框工具”，在如圖12-14所示的位置繪制矩形。

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

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

16 按組合鍵Ctrl+D取消選區。單擊“圖層”面板底部的“創建新圖層”按鈕，創建一個新圖層——“圖層2”。

17 選擇工具箱中的“圓角矩形工具”，在屬性欄中單擊“路徑”按鈕，在“半徑”參數欄內鍵入15，在圖12-17所示的位置創建一個圓角矩形路徑。

18 進入“路徑”面板，單擊“路徑”面板底部的“將路徑作為選區載入”按鈕，加載選區。

19 進入“圖層”面板。選擇工具箱中的“漸變工具”，在屬性欄中單擊“點按可編輯漸變”按鈕，打開“漸變編輯器”對話框，參照圖12-18所示設置由R、G、B值為215、205、179的黃色到R、G、B值為227、224、207的淺黃色到R、G、B值為232、231、223的灰白色漸變。

20 參照圖12-19在選區內創建漸變填充。

21 選擇工具箱中的“矩形選框工具”，在選區任意處右擊，在彈出的快捷菜單中選擇“描邊”選項，打開“描邊”對話框，在“寬度”參數欄內鍵入2，將“顏色”設置為R、G、B值為172、157、127的灰色，選擇“居外”單選按鈕，在“混合”選項組下的“不透明度”參數欄內鍵入80，如圖12-20所示。單擊“確定”按鈕，退出該對話框。

22 按組合鍵Ctrl+D取消選區。選擇工具箱中的“圓角矩形工具”，在屬性欄中單擊“路徑”按鈕，在“半徑”參數欄內鍵入15，在如圖12-21所示的位置創建一個圓角矩形的路徑。

23 進入“路徑”面板，單擊“路徑”面板底部的“將路徑作為選區載入”按鈕，加載選區。

24 進入“圖層”面板。選擇工具箱中的“漸變工具”，在屬性欄中單擊“點按可編輯漸變”按鈕，打開“漸變編輯器”對話框，參照圖12-22所示設置由R、G、B值為232、231、223的灰白色到R、G、B值為227、224、207的淺黃色到R、G、B值為192、176、139的蛋黃色的漸變。

25 參照圖12-23在選區內創建漸變填充。

26 選擇工具箱中的“矩形選框工具”，在選區任意處右擊，在彈出的快捷菜單中選擇“描邊”選項，打開“描邊”對話框，在“寬度”參數欄內鍵入2，將“顏色”設置為R、G、B值為172、157、127的灰色，選擇“內部”單選按鈕，在“混合”選項組下的“不透明度”參數欄內鍵入80，如圖12-24所示，單擊“確定”按鈕，退出該對話框

27 按組合鍵Ctrl+D取消選區。單擊工具箱中的“圓角矩形工具”下拉按鈕下的“自定形狀工具”按鈕，這時在屬性欄內會出現其編輯參數，單擊“填充像素”按鈕，單擊“點按可打開自定形狀拾色器”下拉按鈕，打開該選項欄，選擇“標記3”選項。

28 將前景色設置為R、G、B值為144、125、93的淺灰色，按住Shift鍵，在圖12-25所示的位置繪制“標記3”圖形。

29 再次選擇工具箱中的“自定形狀工具”，在屬性欄內單擊“點按可打開自定形狀拾色器”下拉按鈕，打開該選項欄，選擇“三角”選項，在圖12-26所示的位置繪制“三角”圖形。

30 選擇“圖層2”，將該圖層拖動至“圖層”面板底部的“創建新圖層”按鈕處，復制生成“圖層2副本”。

31 按組合鍵Ctrl+T，打開自由變化換。右擊鼠標，在打開的快捷菜單中選擇“旋轉90度（逆時針）”選項，將“圖層2副本”層中的圖形進行旋轉，并將其移動至圖12-27所示的位置。

32 參照圖12-28橫向縮放圖形。

33 按Enter鍵，取消自由變化換。單擊“圖層”面板底部的“創建新圖層”按鈕，創建一個新圖層——“圖層3”。

34 確定“圖層3”處于可編輯狀態。選擇工具箱中的“矩形選框工具”，在圖12-29所示的位置創建一個矩形。

35 在矩形選區中右擊鼠標，在彈出的快捷菜單中選擇“描邊”選項，打開“描邊”對話框，在“寬度”參數欄內鍵入2，將顏色設置為R、G、B值為184、185、176的灰色，在“位置”選項組中選“居外”選項，在“混合”選項組中的“不透明度”參數欄內鍵入100，如圖12-30所示，單擊“確定”按鈕，退出該對話框。

36 將前景色設置為白色，按組合鍵Alt+Delete填充選區。執行菜單欄中的“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在“收縮量”參數欄內鍵入4，如圖12-31所示，單擊“確定”按鈕，退出該對話框。

37 在選區中右擊鼠標，在彈出的快捷菜單中選擇“描邊”選項，打開“描邊”對話框，在“寬度”參數欄內鍵入2，將顏色設置為R、G、B值為55、31、31的灰色，在“位置”選項組中選“居外”選項，在“混合”選項組中的“不透明度”參數欄內鍵入100，如圖12-32所示。單擊“確定”按鈕，退出該對話框。

38 將前景色設置為R、G、B值為128、117、97的灰色，按組合鍵Alt+Delete填充選區，如圖13-33所示。

39 按組合鍵Ctrl+D取消選區。選擇工具箱中的“自定形狀工具”，在屬性欄內單擊“點按可打開自定形狀拾色器”下拉按鈕，打開該選項欄，選擇“選中標記”選項，將前景色設置為白色。在如圖12-34所示的位置繪制該圖形。

40 接下來添加文本。單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇Dutch801 Rm BT選項，在“字體大小”參數欄內鍵入24，將“設置文本顏色”顯示窗內的顏色設置為黑色，在圖12-35所示的位置鍵入Check。

41 現在本實例中對話框內容就制作完成了，由于該對話框中其他對組件的制作與以上制作方法較為相似，讀者可以參照圖12-36自行完成，在本實例中就不再進行詳細的講解。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤“使用Photoshop CS3編輯網頁素材/實例12：制作對話框內容/對話框內容.psd”文件，該文件為本實例完成后的效果。