實例7 花藝網站引導頁

實例說明

在本實例中，將制作一個花藝網站的引導頁，引導頁通常只包含較為簡單的內容，通過圖像的形式展示網站內容，并吸引用戶注意。由于本實例中花草較難選擇，所以使用了快速蒙版對其進行編輯。

技術要點

本實例在制作過程中，首先設置背景的漸變色，然后使用快速蒙版方式編輯并選擇花盆圖像，設置其局部模糊和倒影效果，最后添加文本，完成網頁的制作。

在使用Photoshop CS3編輯圖像時，有時會遇到邊緣較為復雜，且無法通過選擇顏色的方法來選色的圖像，這時可以進入到快速蒙版模式，使用畫筆工具沿需要的部分繪制，當退出快速蒙版模式后，繪制的區域就變成了選區，使用這種方法，可以準確選擇較為復雜的圖像，并且便于修改，在本實例中，就將為讀者講解蒙版的使用方法。圖7-1為本實例完成后的效果。

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

2 設置前景色為R、G、B值分別為220、235、175的綠色，設置背景色為R、G、B值分別為255、255、235的淺綠色，在工具箱中單擊“漸變工具”按鈕，在屬性欄單擊“點按可編輯漸變”顯示窗，打開“漸變編輯器”對話框，將該對話框內左右側的色標移動至色彩滑條中部，然后單擊色彩滑條最右側，這時會出現一個新的色標，設置該色標為R、G、B值分別為220、235、175的綠色，如圖7-2所示。

3 在“花藝網站引導頁”文件頂部單擊鼠標，然后垂直向下將鼠標拖動至該文件底部，將該文件填充，如圖7-3所示。

4 在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例7：花藝網站引導頁/花盆.jpg”文件，如圖7-4所示，然后單擊“打開”按鈕，打開該文件。

5 確定“花盆.jpg”處于可編輯狀態，在工具箱內單擊“以快速蒙版模式編輯”按鈕，進入快速蒙版編輯模式，在工具箱中單擊“畫筆工具”按鈕，沿花盆和植物繪制填充，直至將其完全填充為紅色，如圖7-5所示。

技巧

可以首先使用較大的筆觸描繪圖像輪廓，是用較小的筆觸描繪細節，然后使用“橡皮擦工具”擦拭多余部分，完成對圖形的描繪。

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

7 按組合鍵Ctrl+Shift+I反選選區，然后按組合鍵Ctrl+C復制選區內的圖像。

8 確定“花藝網站引導頁”文件處于可編輯狀態，按組合鍵Ctrl+V粘貼圖像，這時在“圖層”面板中會出現一個新的圖層——“圖層1”，將粘貼的圖像縮放并移動至圖7-7所示的位置。

9 在“圖層”面板中選擇“圖層1”，將其拖動至“創建新圖層”按鈕處，在“圖層”面板中會出現“圖層1幅本”層。

10 在“圖層”面板中選擇“圖層1”，在菜單欄執行“編輯”/“變換”/“垂直翻轉”命令，將該層圖像垂直翻轉，然后移動至圖7-8所示的位置。

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

12 按D鍵，設置前景色為黑色，背景色為白色，在工具箱內單擊“以快速蒙版模式編輯”按鈕，進入快速蒙版編輯模式，在工具箱內單擊“漸變工具”按鈕，然后設置如圖7-10所示的漸變填充。

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

14 在菜單欄執行“濾鏡”/“模糊”/“高斯模糊”命令，打開“高斯模糊”對話框，在該對話框內的“半徑”參數欄內鍵入3，如圖7-12所示，單擊“確定”按鈕退出該對話框。

15 在工具箱內單擊“以快速蒙版模式編輯”按鈕，進入快速蒙版編輯模式，在工具箱內單擊“漸變工具”按鈕，設置如圖7-13所示的漸變填充。

16 在工具箱中激活“以標準模式編輯”按鈕，進入標準編輯模式，得到圖7-14所示的選區。

17 按Delete鍵，刪除選區內的圖像，并將“圖層1”的不透明度參數為30，效果如圖7-15所示。

18 在“圖層”面板選擇“圖層1副本”層，在工具箱內單擊“以快速蒙版模式編輯”按鈕，進入快速蒙版編輯模式，在工具箱內單擊“漸變工具”按鈕，設置如圖7-16所示的漸變填充。

19 在工具箱激活“以標準模式編輯”按鈕，進入標準編輯模式，得到圖7-17所示的選區。

20 在菜單欄執行“濾鏡”/“模糊”/“高斯模糊”命令，打開“高斯模糊”對話框，在該對話框內的“半徑”參數欄內鍵入3，單擊“確定”按鈕退出該對話框，“圖層1副本”模糊效果如圖7-18所示。

21 在菜單欄執行“圖像”/“調整”/“色相/飽和度”命令，打開“色相/飽和度”對話框，在該對話框內的“色相”參數欄內鍵入0，在“飽和度”參數欄內鍵入35，在“明度”參數欄內鍵入5，如圖7-19所示，單擊“確定”按鈕，退出該對話框。

22 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇“微軟簡中圓”選項，在“設置字體大小”參數欄內鍵入40，將“設置文本顏色”顯示窗內的顏色設置R、G、B值分別為45、160、15的綠色，在如圖7-20所示的位置鍵入“絲路花語”。

23 在屬性欄內的“設置字體系列”下拉式選項欄中選擇“微軟簡中圓”選項，在“設置字體大小”參數欄內鍵入25，將“設置文本顏色”顯示窗內的顏色設置為R、G、B值分別為45、160、15的綠色，在如圖7-21所示的位置鍵入“盆栽 / 插花 / 花藝”。

24 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Giddyup Std選項，在“設置字體大小”參數欄內鍵入30，將“設置文本顏色”顯示窗內的顏色設置為R、G、B值分別為45、160、15的綠色，在如圖7-22所示的位置鍵入www.flower.com。

25 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Brush Script Std選項，在“設置字體大小”參數欄內鍵入30，將“設置文本顏色”顯示窗內的顏色設置為R、G、B值分別為45、160、15的綠色，在如圖7-23所示的位置鍵入flower。

26 在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例7：花藝網站引導頁/葉子.jpg”文件，單擊“打開”按鈕，打開該文件，如圖7-24所示。

27 在工具箱中單擊“魔棒工具”按鈕，在“葉子.jpg”文件的白色部分單擊，設置如圖7-25所示的選區。

28 按組合鍵Ctrl+Shift+I反選選區，在菜單欄中執行“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在該對話框的“收縮量”參數欄內鍵入3，然后單擊“確定”按鈕，退出該對話框，設置如圖7-26所示的選區。

29 按組合鍵Ctrl+C復制選區內的圖像。確定“花藝網站引導頁”文件處于可編輯狀態，按組合鍵Ctrl+V粘貼圖像，將其縮放并移動至如圖7-27所示的位置，在“圖層”面板中會出現新的圖層——“圖層2”。

30 在“圖層”面板中雙擊“圖層2”圖層縮覽圖，打開“圖層樣式”對話框。選擇“樣式”選項組中的“投影”復選框，進入投影編輯窗口。設置“陰影顏色”顯示窗內的顏色為R、G、B值分別為45、115、30的綠色，在“不透明度”參數欄內鍵入30，在“角度”參數欄內鍵入120，在“距離”、“擴展”和“大小”參數欄均鍵入7，如圖7-28所示，單擊“確定”按鈕，退出“圖層樣式”對話框。

31 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇“微軟簡中圓”選項，在“設置字體大小”參數欄內鍵入25，將“設置文本顏色”顯示窗內的顏色設置為R、G、B值分別為35、125、10的綠色，在如圖7-29所示的位置鍵入“進入”。

32 現在手繪風格網頁的制作就全部完成了，完成后的效果如圖7-30所示，如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤“使用Photoshop CS3編輯網頁素材/實例7：花藝網站引導頁/花藝網站引導頁.psd”文件，該文件為本實例完成后的效果。