實例2 汽車銷售網站標志

實例說明

制作銷售類網站標志所使用的素材，通常是公司所經營的商品。本實例為一個汽車營銷的網站，主體為汽車圖像，為了使其更為美觀，對其形態和色彩進行了編輯。

技術要點

在制作本實例時，首先創建一個標準的網頁文件，然后鍵入文本，并設置文本的金屬效果，接下來導入素材圖像，使用Photoshop CS3的摳像工具進行摳像，最后在網頁中添加文本和設置金屬標志，完成網站標志的制作。

本實例中設置的網站，是一個銷售汽車的網站。為了配合網站主題，該網站用了較為簡約、明快的白色背景，主題圖案為汽車，汽車所在位置為網頁的中心偏右的位置，保持了畫面的平衡感。由于該網頁為網站的首頁，所以其中大部分為文字介紹，圖2-1為本實例完成后的效果。

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

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

3 單擊工具箱中的“橫排文字工具”按鈕，選擇Guidkness中的字母G，在屬性欄內將“設置文本大小”參數設置為60，如圖2-4所示。

4 單擊工具箱中的“移動工具”按鈕，選擇文本，執行菜單欄中的“柵格化”/“文本”命令，將文本進行柵格化。

5 在“圖層”面板選擇文本層，然后按住Ctrl鍵同時單擊文本層的圖層標識圖標，這時會沿文本形成一個選區，如圖2-5所示。

6 單擊工具箱中的“漸變工具”按鈕，在屬性欄中激活“線性漸變”按鈕，確定為線性漸變，單擊“點按可編輯漸變”顯示窗，打開“漸變編輯器”對話框，然后參照圖2-6所示設置漸變顏色為由黑色到白色再到黑色的線性漸變色。

提示

在色彩滑條單擊可以添加色標，選擇色標后可以對其顏色進行編輯。

7 確定選區處于可編輯狀態，參照圖2-7所示在選區內部創建漸變，然后執行菜單欄中的“選擇”/“取消選擇”命令，取消選區。

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

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

10 接下來在菜單欄執行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例2：汽車銷售網站標志/汽車.jpg”文件，單擊“打開”按鈕，打開該文件，如圖2-10所示。

11 確定“背景.jpg”處于可編輯狀態，然后單擊工具箱中的“魔棒工具”按鈕，在屬性欄的“容差”參數欄內鍵入10，在“背景.jpg”圖像的空白處單擊，如圖2-11所示，將圖像的空白處選取。

12 接下來執行菜單欄中的“選擇”/“反選”命令，將圖像進行反選，然后單擊工具箱中的“移動工具”按鈕，拖動選區內的圖像至“汽車銷售網站標志”文件中，如圖2-12所示，這時在“圖層”面板中會出現一個新的圖層——“圖層1”。

13 確定“圖層1”處于可編輯狀態下，按組合鍵Ctrl+T，打開自由變換框，然后參照圖2-13調整圖像的大小和位置。

14 執行菜單欄中的“編輯”/“變換”/“水平翻轉”命令，將圖像進行水平翻轉，如圖2-14所示。

15 使“圖層1”處于可編輯狀態，執行菜單欄中的“圖像”/“調整”/“亮度/對比度”命令，打開“亮度/對比度”對話框，在“亮度”參數欄內鍵入35，在“對比度”參數欄內鍵入10，如圖2-15所示。

16 單擊“圖層”面板中的“創建新圖層”按鈕，在“圖層1”的頂部創建一個新圖層——“圖層2”，然后單擊工具箱中的“矩形選框工具”按鈕，使用該工具在如圖2-16所示的位置繪制一個矩形選區。

17 使選區處于可編輯狀態下，在工具箱中設置前景色的R、G、B值均為248，然后按組合鍵Alt+Delete，填充選區顏色，如圖2-17所示。

18 接下來執行菜單欄中的“選擇”/“取消選擇”命令，取消選區，然后執行菜單欄中的“圖層”/“圖層樣式”/“投影”命令，打開“圖層樣式”對話框，在投影編輯窗口中，雙擊“設置陰影顏色”顯示窗，打開“選擇陰影顏色”對話框，設置R、G、B值均為66，如圖2-18所示，單擊“確定”按鈕，退出該對話框。

19 退出“選擇陰影顏色”對話框后，在“不透明度”參數欄內鍵入75，在“角度”參數欄內鍵入120，在“距離”、“擴展”和“大小”參數欄內分別鍵入1、0、3，如圖2-19所示。

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

21 確定“花邊.jpg”處于可編輯狀態，執行菜單欄中的“選擇”/“色彩范圍”命令，打開“色彩范圍”對話框，在“顏色容差”參數欄內鍵入200，如圖2-21所示，然后單擊顯示窗中的白色區域，再單擊“確定”按鈕，退出該對話框。

22 退出“色彩范圍”對話框后，在“花邊.jpg”圖像中會出現一個選區，執行菜單欄中的“選擇”/“反選”命令，將選區進行反選，然后使用“移動工具”拖動選區內的圖像至“汽車銷售網站標志.psd”文件中，如圖2-22所示。

23 將花邊圖像拖動至“汽車銷售網站標志.psd”文件中，在“圖層”面板中出現一個新圖層——“圖層2”。按組合鍵Ctrl+T，調整“圖層2”圖像的位置和大小，如圖2-23所示。

24 雙擊鼠標，結束自由變換框，然后拖到“圖層2”至“圖層”面板底部的“創建新圖層”按鈕處，復制“圖層2”得到“圖層2副本”。

25 確定“圖層2副本”處于可編輯狀態，執行菜單欄中的“編輯”/“變換”/“水平翻轉”命令，將該層圖像進行水平翻轉，然后參照圖2-24所示調整圖像位置。

26 接下來參照設置“圖層2副本”的方法，繪制出其他三個頂角的花邊效果，如圖2-25所示。

提示

讀者在設置其他花邊圖像時，應注意適當設置圖像的水平翻轉和垂直翻轉。

27 單擊工具箱中的“畫筆工具”下拉按鈕，在彈出的下拉式按鈕中選擇“鉛筆工具”選項，在屬性欄中單擊“點按可打開畫筆預設選取器”下拉按鈕，在“主直徑”參數欄內鍵入1，將“畫筆”大小設為1，然后按住Shift鍵在如圖2-26所示的位置繪制一條直線。

提示

在使用“鉛筆工具”繪制直線時，按住Shift鍵時，可以水平或垂直繪制。

28 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內的“設置字體系列”下拉式選項欄中選擇Courier New選項，在“設置字體大小”參數欄內鍵入10，將“設置文本顏色”顯示窗內的顏色設置為黑色，在如圖2-27所示的位置鍵入Click here to enter。

29 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Arial Black選項，在“設置字體大小”參數欄內鍵入12，將“設置文本顏色”顯示窗內的顏色設置為黑色，在如圖2-28所示的位置鍵入INTERNATIONAL SITE。

30 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Arial Black選項，在“設置字體大小”參數欄內鍵入24，將“設置文本顏色”顯示窗內的顏色設置為藍色，在如圖2-29所示的位置鍵入MAKE HASTE。

31 在屬性欄內的“設置字體系列”下拉式選項欄中選擇Courier New選項，將“設置文本顏色”顯示窗內的顏色設置為黑色，然后在“設置字體大小”參數欄內首先鍵入10，在圖2-30（a）所示的位置鍵入The power repidity，然后在“設置字體大小”參數欄內首先鍵入12，在圖2-30（b）所示的位置鍵入THIS SITE REQUIRES FLASH PLUG-IN FOR VIEWING CLICK HERE TO DOWNLOAD COPYRIGHT 2005 KIA MOTORS CORP. ALL RIGHTS RESERVED。

32 接下來將完成的標志素材導入至“汽車銷售網站標志.psd”文件中，執行菜單欄中的“文件”/“打開”命令，彈出“打開”對話框，從該對話框內選擇本書附帶光盤中的“使用Photoshop CS3編輯網頁素材/實例2：汽車銷售網站標志/標志01.psd”和“標志02.psd”文件，單擊“打開”按鈕，打開這兩個文件，如圖2-31所示。

33 確定“標志01.psd”文件處于可編輯狀態，使用工具箱中的“移動工具”，將“標志01”層中的圖像拖動至“汽車銷售網站標志.psd”文件中，這時在“圖層”面板中出現“標志01”層，然后參照圖2-32所示調整該層中圖像的位置。

34 確定“標志02.psd”文件處于可編輯狀態，將“標志02”層中的圖像拖動至“汽車銷售網站標志.psd”文件中，這時在“圖層”面板中出現“標志02”層，參照圖2-33所示效果，調整該層中圖像的位置。

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