實例5 制作手繪風格網頁

實例說明

在本實例中，將制作一個手繪風格網頁。手繪風格網頁一個比較突出的特點就是圖形和色彩的不規則性。在本實例中，將使用紋理、分層云彩等工具，產生出不規則的花紋，使其效果更為自然寫意。

技術要點

在制作本實例時，首先將網頁填充，然后設置其出現畫布紋理，創建一個新圖層，使用分層云彩工具使該層生成不規則紋理，接下來設置網頁主體圖案，使用橡皮擦工具形成不規則的邊緣，最后添加文本，完成網頁的設置。

不規則的圖形是比較難以實現的，由于本實例制作的網頁位手繪風格網頁，所以需要制作不規則的污跡、筆觸等效果，為了實現這些效果，在本實例中將使用分層云彩等工具，配合橡皮擦工具手動完成不規則紋理的制作，圖5-1為本實例完成后的效果。

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

2 將工具箱內的“設置前景色”顯示窗中的顏色設置為R、G、B值分別為185、165、140的淺棕色，按組合鍵Ctrl+A，全選視圖。在工具箱單擊“矩形選框工具”按鈕，右擊視圖，在彈出的快捷菜單中選擇“填充”選項，這時會彈出“填充”對話框。在該對話框內的“使用”下拉式選項欄中選擇“前景色”選項，如圖5-3所示，單擊“確定”按鈕退出該對話框，使用前景色將“背景”層填充。

3 在菜單欄執行“濾鏡”/“紋理”/“紋理化”命令，打開“紋理化”對話框，在該對話框內的“紋理”下拉式選項欄中選擇“畫布”選項，在“縮放”參數欄內鍵入60，在“凸現”參數欄內鍵入2，在“光照”下拉式選項欄中選擇“左上”選項，如圖5-4所示，單擊“確定”按鈕，退出該對話框，使背景出現畫布紋理效果。

4 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新圖層——“圖層1”，單擊工具箱中的“矩形選框工具”按鈕，按組合鍵Ctrl+A，全選視圖，將“圖層1”使用前景色填充。

5 在菜單欄執行“濾鏡”/“渲染”/“分層云彩”命令，使“圖層1”成為如圖5-5所示的效果。

6 在“圖層”面板中選擇“圖層1”，在“不透明度”參數欄內鍵入10，在“圖層1”的“不透明度”參數欄內鍵入10%，單擊“創建新圖層”按鈕，創建一個新圖層——“圖層2”。

7 在工具箱內將“設置前景色”顯示窗內的顏色設置為R、G、B值分別為245、225、190的淺黃色，在工具箱中單擊“矩形選框工具”按鈕，在如圖5-6所示的位置繪制一個矩形選區。

8 使用前景色填充選區，如圖5-7所示。

9 在“圖層”面板中選擇“圖層2”，按住鼠標左鍵將其拖動至“創建新圖層”按鈕，在“圖層”面板會出現“圖層2副本”層。

10 在“圖層”面板中選擇“圖層2副本”層，在工具箱內將“設置前景色”顯示窗內的顏色設置為黑色，在菜單欄執行“濾鏡”/“渲染”/“分層云彩”命令，使“圖層2副本”成為如圖5-8所示的效果。

11 在“圖層”面板的“不透明度”參數欄內鍵入20，將“圖層2副本”的不透明度參數為20%，如圖5-9所示。

12 按住Ctrl鍵單擊“圖層2”圖層縮覽圖，設置該層為選區，在“圖層”面板中單擊“創建新的填充或調整圖層”按鈕，在彈出的快捷菜單中選擇“色相/飽和度”選項，打開“色相/飽和度”對話框，在 “色相”參數欄內鍵入-2，在“飽和度”參數欄內鍵入-5，在“明度”參數欄內鍵入-10，如圖5-10所示，單擊“確定”按鈕，退出該對話框。

13 退出“色相/飽和度”對話框后，在“圖層”面板會出現一個新圖層——“色相/飽和度1”層，如圖5-11所示。

14 選擇“色相/飽和度1”層，在“圖層”面板單擊“添加圖層樣式”按鈕，在彈出的快捷菜單中選擇“描邊”選項，打開“圖層樣式”對話框，設置“描邊”復選框。

15 “顏色”顯示窗內的顏色設置為黑色，在描邊編輯窗口內的“大小”參數欄內鍵入3，在“位置”下拉式選項欄中選擇“內部”選項，在“不透明度”參數欄內鍵入50，如圖5-12所示，單擊“確定”按鈕，退出該對話框。

16 設置描邊后的“色相/飽和度1”層效果如圖5-13所示。

17 在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例5：手繪風格網頁/手繪圖像.jpg”文件，單擊“打開”按鈕，打開該文件，如圖5-14所示。

18 確定“手繪圖像.jpg”處于可編輯狀態，按組合鍵Ctrl+A全選圖像，然后按組合鍵Ctrl+C，復制圖層內的圖像。

19 按組合鍵Ctrl+V粘貼圖像，在“圖層”面板中會出現一個新的圖層——“圖層3”，將該層圖像縮放并移動至如圖5-15所示的位置。

20 選擇“圖層3”，按住Ctrl鍵并單擊“圖層2”的圖層縮覽圖，加載選區，在菜單欄中執行“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在該對話框的“收縮量”參數欄內鍵入3，然后單擊“確定”按鈕，退出該對話框。

21 按組合鍵Ctrl+Shift+I反選選區，然后按Delete鍵，刪除選區內的圖像，效果如圖5-16所示。最后按組合鍵Ctrl+D取消選區。

22 在工具箱中單擊“橡皮擦工具”按鈕，在屬性欄內的“點按可打開‘畫筆預設’選取器”下拉式選項欄中選擇“柔角300像素”選項，如圖5-17所示。

23 使用“橡皮擦工具”擦拭“圖層3”圖像邊緣白色的部分，完成效果如圖5-18所示。

24 在“圖層”面板中單擊“創建新圖層”按鈕，創建一個新的圖層“圖層4”，在工具箱中單擊“矩形選框工具”按鈕，在如圖5-19所示的位置繪制一個矩形選區。

25 在工具箱內將“設置前景色”顯示窗內的顏色設置為R、G、B值分別為170、45、45的暗紅色，將設置的選區填充，如圖5-20所示。

26 在工具箱中單擊“橡皮擦工具”按鈕，在屬性欄內的“點按可打開‘畫筆預設’選取器”下拉式選項欄中選擇“半濕描邊油彩筆”選項，并在“主直徑”參數欄內鍵入65，使用“橡皮擦工具”擦拭“圖層4”，完成后的效果如圖5-21所示。

27 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇Impact選項，在“設置字體大小”參數欄內鍵入90，將“設置文本顏色”顯示窗內的顏色設置為黑色，在如圖5-22所示的位置鍵入PERI。

28 鍵入字體后，在“圖層”面板中會出現一個新的圖層——PERI，右擊PERI層，在彈出的快捷菜單中選擇“柵格化文字”選項，將該層柵格化。

提示

某些命令和工具（如濾鏡效果和繪畫工具）不可用于文字圖層。必須在應用命令或使用工具之前柵格化文字。柵格化將文字圖層轉換為正常圖層，并使其內容不能再作為文本編輯。

29 使用“橡皮擦工具”擦拭PERI，完成后的效果如圖5-23所示。

30 將PERI層復制，復制的圖層名稱為“PERI副本”。

31 選擇PERI層，在菜單欄執行“濾鏡”/“模糊”/“動感模糊”命令，打開“動感模糊”對話框，在“角度”參數欄內鍵入0，在“距離”參數欄內鍵入140，如圖5-24所示，單擊“確定”按鈕，退出該對話框，使PERI層圖像呈現動感模糊效果。

32 在“圖層”面板中的“不透明度”參數欄內鍵入40，在PERI層的“不透明度”參數欄內鍵入40%，如圖5-25所示。

33 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇Arial選項，在“設置字體大小”參數欄內鍵入25，將“設置文本顏色”顯示窗內的顏色設置為白色，在如圖5-26所示的位置鍵入Brushwork。

34 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Arial選項，在“設置字體大小”參數欄內鍵入25，將“設置文本顏色”顯示窗內的顏色設置為白色，在如圖5-27所示的位置鍵入WWW.PERI.COM。

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