第1篇 使用Photoshop CS3編輯網頁素材

一個優秀的網站，離不開漂亮的素材，網頁使用的圖形圖像素材，通常需要在專業的二維軟件中進行創建和編輯。Photoshop CS3是一款優秀的圖形圖像編輯軟件，在網頁設計中，該軟件通常用于圖片素材的編輯和處理，使用Photoshop CS3中的切片工具，還可以設置網頁布局，與Dreamweaver CS3配合，能夠快速完成網頁制作，在這一部分中，將為讀者講解使用Photoshop CS3編輯網頁素材的方法。

實例1 蒲公英網站網頁背景素材

實例說明

網頁背景素材，通常都是由漂亮的圖片組成的，Photoshop CS3是一款專業的位圖處理軟件，能夠很方便地設置圖片尺寸、分辨率，并能夠對各種類型的位圖進行編輯。在本實例中，將和讀者一道制作蒲公英網站網頁背景素材，由于本實例為本書的第一個實例，所以本實例將使用Photoshop CS3中最基礎的選擇、繪制和編輯工具來完成動畫的設置，使讀者了解Photoshop CS3的工作流程。

技術要點

在制作本實例時，首先需要創建一個1024×768的標準網頁文件，然后導入位圖，設置背景底紋；接下來使用Photoshop CS3自帶的繪制工具配合外部導入的位圖設置網頁上的圖形；最后在網頁中添加文本，完成網頁的制作。

本實例中設計的網站，為一個鄉村搖滾音樂網站。為了配合網站主題，該網站背景為藍綠色底紋，主題圖案為一張卡片上蒲公英飄出的畫面之外，卡片使用了較為鮮艷的金黃色背景，由于網頁還需要添加各種按鈕、文本框等附件，所以會有較多的留白部分，圖1-1為本實例完成后的效果。

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

2 在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例1：蒲公英網站背景素材/背景.jpg”文件，如圖1-3所示，單擊“打開”按鈕，打開該文件。

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

4 確定“蒲公英網頁背景”文件處于可編輯狀態，按組合鍵Ctrl+V粘貼圖像，如圖1-4所示，這時在“圖層”面板中會出現一個新的圖層——“圖層1”。

5 這時讀者可以看到，粘貼的圖像與背景的尺寸不一致，在“圖層”面板選擇“圖層1”，按組合鍵Ctrl+T，在“圖層1”圖像外圍會出現一個自由變換框，拖動該自由變換框的控制點，使其與背景尺寸一致，如圖1-5所示，雙擊鼠標，退出編輯模式。

6 在“圖層”面板底部單擊“創建新圖層”按鈕，創建一個新的圖層——“圖層2”，如圖1-6所示。

7 在工具箱中單擊“圓角矩形工具”按鈕，這時在屬性欄內會出現其編輯參數，在屬性欄激活“填充像素”按鈕，確定繪制屬性，在“設置圓角半徑”參數欄內鍵入20，確定圓角半徑，如圖1-7所示，按X鍵，使前景色和背景色互換。

提示

在默認狀態下，前景色為黑色，背景色為白色，繪制的圖形默認使用前景色，由于需要繪制的圖形應為白色，所以按X鍵，使前景色和背景色互換，繪制出白色的圖形。

8 參照圖1-8所示的位置和尺寸繪制一個圓角矩形。

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

10 選擇“樣式”選項組中的“描邊”復選框，進入描邊編輯窗口，雙擊“設置描邊顏色”顯示窗，打開“選取描邊顏色”對話框，在該對話框內的R、G、B參數欄內均鍵入155，如圖1-10所示，單擊“確定”按鈕退出該對話框，使描邊顏色為淺灰色。

11 退出“選取描邊顏色”對話框后，在描邊編輯窗口內的“大小”參數欄內鍵入2，在“位置”下拉式選項欄中選擇“外部”選項，如圖1-11所示，單擊“確定”按鈕，退出“圖層樣式”對話框。

12 圖層樣式編輯完成后，“圖層2”的效果如圖1-12所示。

13 在菜單欄中執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例1：蒲公英網站背景素材/繪圖.jpg”文件，如圖1-13所示，單擊“打開”按鈕，打開該文件。

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

15 確定“蒲公英網頁背景”文件為可編輯狀態，按組合鍵Ctrl+V粘貼圖像，這時在“圖層”面板中會出現一個新圖層——“圖層3”，將粘貼的圖像移動至如圖1-14所示的位置。

16 在“圖層”面板中選擇“圖層3”層，然后按住Ctrl鍵單擊“圖層2”的圖層標識圖，加載選區，在菜單欄中執行“選擇”/“修改”/“收縮”命令，打開“收縮選區”對話框，在該對話框的“收縮量”參數欄內鍵入4，如圖1-15所示，然后單擊“確定”按鈕，退出該對話框。

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

18 確定“圖層3”層處于被選擇狀態，在菜單欄中執行“圖像”/“調整”/“色相/飽和度”命令，打開“色相/飽和度”對話框。在“飽和度”和“明度”參數欄中均鍵入15，如圖1-17所示，然后單擊“確定”按鈕，退出該對話框。

19 在菜單欄中執行“文件”/“打開”命令，打開“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例1：蒲公英網站背景素材/蒲公英.jpg”文件，如圖1-18所示，單擊“打開”按鈕，打開該文件。

20 確定“蒲公英.jpg”處于可編輯狀態，在菜單欄中執行“選擇”/“色彩范圍”命令，打開“色彩范圍”對話框，在“顏色容差”參數欄內鍵入55，如圖1-19所示，然后單擊“蒲公英.jpg”中白色的部分，單擊“確定”按鈕，退出該對話框。

21 退出“色彩范圍”對話框后，在“蒲公英.jpg”圖像會出現一個選區，按組合鍵Ctrl+Shift+I反選選區，如圖1-20所示，然后按組合鍵Ctrl+C，復制選區內的圖像。

22 確定“蒲公英網頁背景”文件處于可編輯狀態，按組合鍵Ctrl+V粘貼圖像，這時在“圖層”面板中會出現一個新圖層——“圖層4”。

23 選擇“圖層4”，在菜單欄執行“編輯”/“變換”/“水平翻轉”命令，將該層圖像翻轉，如圖1-21所示。

24 按組合鍵Ctrl+T，出現一個自由變換框，編輯該自由變換框的控制點，縮放“圖層4”層圖像大小，雙擊鼠標，退出編輯模式。然后將其移動至如圖1-22所示的位置。

25 在工具箱單擊“矩形選框工具”按鈕，在如圖1-23所示的位置繪制一個矩形選區。

26 按Delete鍵，刪除選區內的圖像，然后按組合鍵Ctrl+D取消選區，效果如圖1-24所示。

27 在“圖層”面板選擇“圖層4”，按住鼠標左鍵將其拖動至“創建新圖層”按鈕，如圖1-25所示，在“圖層”面板會出現“圖層4副本”層。

28 按住Ctrl鍵并單擊“圖層4”的圖層縮覽圖，加載選區，然后右擊選區，在彈出的快捷菜單中選擇“填充”選項，打開“填充”對話框，在“使用”下拉式選項欄中選擇“前景色”選項，如圖1-26所示，單擊“確定”按鈕，退出該對話框，將選區填充為白色。

29 在工具箱單擊“移動工具”按鈕，按鍵盤上的“←”鍵和“↓”鍵，微調“圖層4”，使蒲公英出現白色邊緣，如圖1-27所示。

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

31 單擊工具箱中的“橫排文字工具”按鈕，選擇DANDELION中的字母D，在屬性欄內將“設置文本顏色”顯示窗內的顏色設置為黑色，如圖1-29所示。

32 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Impact選項，在“設置字體大小”參數欄內鍵入30，將“設置文本顏色”顯示窗內的顏色設置為白色，在如圖1-30所示的位置鍵入Tramp。

33 選擇Tramp中的字母T，在屬性欄內將“設置文本顏色”顯示窗內的顏色設置為R、G、B值分別為255、200、70的橘黃色，如圖1-31所示。

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

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