網頁設計與制作-綜合實例運用-(5)[283頁]

1、第4章 Photoshop CS在網頁設計中的應用4.1 Photoshop CS簡介 4.2 利用工具繪制網頁圖像4.3 網頁圖像的處理4.4 使用文字工具制作網頁特效文字本章小結4.1 Photoshop CS簡介Photoshop CS是Adobe公司推出的圖像處理軟件，它功能強大且操作簡便，被廣泛地應用于圖像處理和網頁設計等領域。4.1.1 Photoshop CS 的工作界面Photoshop CS的工作界面是編輯、處理圖像的操作平臺，它主要由菜單欄、工具欄、面板、文檔窗口和工具選項欄等組成，如圖4-1所示。 1菜單欄Photoshop CS提供了9個菜單，參見圖4-1，利用 Pho

2、toshop菜單可以進行所有的圖像處理操作。 圖4-1 Photoshop CS的工作界面2工具箱在Photoshop提供的工具欄中，每種工具均有其指定的用途，用戶編輯和處理圖像時，只要用鼠標單擊某一工具，就可使用該工具。按照工具的作用分組，最上方是選框、裁切工具，接下來是繪圖、編輯工具，然后是文字路徑工具，最后是吸管、注釋及看圖工具。當啟動Photoshop時，工具箱出現在工作界面的左側，工具箱中所包含的工具不僅有默認的工具，而且在工具圖標的右下角有一個三角形按鈕，用鼠標右鍵單擊此按鈕會彈出更多的隱藏工具，如圖4-2所示。這些工具可用于創(chuàng)建文字、選區(qū)、繪圖、取樣、編輯、移動、注釋和查看圖像，

3、還允許更改前景色和背景色、使用不同的模式等。 圖4-2 工具欄3面板通常面板是浮動在Photoshop 界面上，而且常放在界面的右邊，也可以將它拖放在界面的任何位置。默認情況下，浮動面板以組合的方式堆疊在一起，可以利用下列技巧重新排列浮動面板，使其更符合自己的操作習慣。(1) 如果要讓某個面板顯示在所屬群組的最前面，單擊浮動面板的標簽，或在“窗口”菜單中選擇浮動面板名即可。(2) 如果要移動整個浮動的面板組，只需將鼠標指針移動到浮動面板最上面的藍色條上，按住左鍵并拖曳，即可將其放到屏幕所需的位置。 (3) 如果要重新排列或分離浮動面板組，只需拖曳浮動面板的標簽，將其拖曳到現有的群組之外，就會建

4、立新的群組。(4) 如果要將浮動面板移動到另一個群組中，只需將浮動面板的標簽拖曳到另一個群組中即可。(5) 如果要顯示浮動面板菜單，只需將鼠標指針放在浮動面板右上角的三角形上并單擊，從彈出的菜單中選擇即可。(6) 如果要更改浮動面板大小，則拖曳浮動面板的任何角點，或拖曳浮動面板右下角的小方框即可實現。但并不是所有浮動面板的大小都是可以調整的。(7) 如果要將面板縮小到只剩下標題，單擊“最小化/最大化”按鈕，或是單擊兩下浮動面板索引標簽即可。 4工具選項欄大部分工具的屬性顯示在工具選項欄內。選項欄與圖像內容相關，并且隨工具的不同而變化。選項欄可放在工作區(qū)域內的任何位置。如圖4-3所示是矩形選框工

5、具選項欄。 圖4-3 矩形選框工具選項欄4.1.2 Photoshop CS的新增功能Photoshop具有界面友好、易學易用等優(yōu)點，目前已被應用于印刷、廣告設計、封面制作、網頁圖像制作和照片編輯等領域。在Photoshop CS版本中，主要增加了以下新功能和新特性。(1) 匹配顏色命令：通過立即匹配一幅圖像與另一幅圖像的色彩模式，使包裝照片、時裝照片及更多照片之間達到外觀一致。(2) 柱狀圖調色板：隨時根據對圖像的調整更新柱狀圖調色板。 (3) 陰影/高光校正：使用陰影/高光校正功能，可快速改進圖像曝光過度或高光不足區(qū)域的對比度，同時保持照片的整體平衡。(4) 路徑文本：Photoshop

6、CS對文字的處理功能更上一層樓，字繞路徑排列可以直接在Photoshop中實現。(5) 改進的文件瀏覽器：新版本的“文件瀏覽器”新增了圖片的管理功能?？焖兕A覽標記和排序圖像，搜索和編輯元數據及關鍵字，以及從改進的文件瀏覽器自動共享成批文件。(6) 集成數碼相機原始文件支持：通過來自大多數主要數碼相機型號的完整原始數據文件，獲得更為真實、更高質量的輸出。(7) 全面的16位支持：升級后的軟件將可以為16位顏色的圖像提供更好的支持，同時無論是Macromedia還是Windows用的版本都對代碼進行了優(yōu)化和簡化設計，借助核心功能對16位圖像的擴展支持，執(zhí)行更為精確的編輯和潤色操作。 (8) 圖層組

7、合：允許用戶對圖像進行非破壞性的編輯和操作，類似Adobe公司的After Effects軟件的層調整功能。通過將同一文件的不同圖層組合另存為“圖層組合”，可更有效地為客戶創(chuàng)建不同設計。(9) Macromedia Flash文件導出：使用ImageReady CS創(chuàng)建SWF動畫，并帶有矢量藝術作品和可變文本。(10) 可自定義的鍵盤快捷方式：自定義、保存并打印理想鍵盤快捷方式摘要，可以方便地使用最常用的功能。 4.1.3 創(chuàng)建簡單的網頁圖像下面通過完成如圖4-4所示的首頁圖像的制作來熟悉Photoshop CS的基本功能。 圖4-4 首頁圖像1新建文件啟動Photoshop后，如果要在一個新

8、的圖像中進行創(chuàng)作，則需要先建立一個新的圖像。具體操作步驟如下：步驟1 選擇“文件”“新建”命令，彈出如圖4-5所示的對話框，這里設置“寬度”為800像素，“高”為600像素，“背景內容”選擇白色。圖4-5 “新建”對話框步驟2 在“圖層”面板中單擊“創(chuàng)建新的圖層”圖標，新建一個圖層“圖層1”，如圖4-6所示。圖4-6 新建圖層步驟3 選擇“編輯”“填充”命令，在彈出的“填充”對話框中選擇用“前景色”填充，效果如圖4-7所示。圖4-7 填充效果2導入圖像導入圖像的操作步驟如下：步驟 1 選擇“文件”“打開”命令，打開要導入的3幅圖片，如圖4-8圖4-10所示。圖4-8 打開圖片1 圖4-9 打開

9、圖片2 圖4-10 打開圖片3 步驟2 對圖4-8所示的圖片用工具箱中的矩形選框工具進行適當選取，如圖4-11所示。選擇“選擇”“羽化”命令，彈出如圖4-12所示的“羽化選區(qū)”對話框, 設置“羽化半徑”為5, 然后選擇“編輯”“拷貝”命令復制選區(qū)。圖4-11 選擇區(qū)域 圖4-12 設定“羽化半徑” 步驟3 將圖4-7所示的圖像作為當前編輯窗口，選擇“編輯”“粘貼”命令，效果如圖4-13所示。步驟4 用同樣的方法對圖4-9和圖4-10進行選取和羽化，然后粘貼到圖4-7中，適當地調整位置后，效果如圖4-14所示。 圖4-13 粘貼圖片 圖4-14 粘貼3幅圖片并調整位置 3添加文字和應用樣式文字是

10、信息的基本載體，是網頁圖像處理中最重要的一環(huán)，下面就講述圖像中文字的應用。具體步驟如下：步驟1 單擊工具箱中的“設置前景色”，設置前景色為白色，在工具箱中選擇“橫排文字”工具，將鼠標指針置于圖像窗口中，在圖像上想要輸入文本處用鼠標拖出文本框，在文本框內輸入文字“健康自然山莊”。步驟2 輸入文字后可使用“字符”面板對文字進行更多地調整, 如圖4-15所示, 調整后的效果如圖4-16所示。 圖4-15 “字符”面板 圖4-16 輸入文字 步驟3 對“健康自然山莊”文字圖層選擇“圖層”“圖層樣式”“描邊”命令，彈出如圖4-17所示的“圖層樣式”對話框，設置填充顏色為紫色。選擇“投影”選項，設置“投影

11、顏色”為黑色，效果如圖4-18所示。 圖4-17 設置文字圖層樣式 圖4-18 對文字添加樣式后的效果 步驟4 使用同樣的方法，輸入其他文字并設置文字樣式，選擇“圖層”“合并圖層”命令合并圖層。步驟5 在工具箱中選擇“切片工具”，然后在圖像上方的文字部分繪制矩形區(qū)域，并調整大小。同樣對圖像中其他圖片繪制切片。效果如圖4-19所示。 圖4-19 切割圖片4保存輸出圖像“存儲為Web所用格式”是Photoshop CS中最重要的功能之一，它可以用來設置圖片大小和下載時間，還可以進行圖像的優(yōu)化等設置。保存輸出圖像的步驟如下：步驟1 處理完圖片后，選擇“文件”“存儲為Web所用格式”命令，彈出如圖4-

12、20所示的“存儲為Web格式”對話框，對話框左上角有4個標簽，通過它們，可以選擇4種不同的視圖，即原稿、優(yōu)化、雙聯和四聯。 圖4-20 “存儲為Web所用格式”對話框步驟2 單擊“存儲”按鈕，彈出如圖4-21所示的“將優(yōu)化結果存儲為”對話框。在“保存類型”下拉菜單中選擇“HTML和圖像”格式。步驟3 單擊“保存”按鈕。至此，頁面制作和圖像優(yōu)化完畢，網頁最終效果如圖4-22所示。 圖4-21 “將優(yōu)化結果存儲為”對話框 圖4-22 網頁效果 4.2 利用工具繪制網頁圖像 4.2.1 創(chuàng)建選擇區(qū)域在Photoshop中選擇所需內容有多種途徑，可以先試一下位于工具箱中的幾種選擇工具：若所需內容的顏色

13、比較單一或相近，可用“魔棒”工具快速選??；若內容與其他部分顏色區(qū)別較大，即邊界比較好勾勒，可用“套索”工具選?。蝗羲鑳热菔蔷匦位驁A形等比較規(guī)則的圖形，可使用“矩形”選框工具或“橢圓”選框工具。1選框工具選框工具位于工具箱的左上角，它包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具。要選取它可以直接單擊，或者按M快捷鍵，如圖4-23所示。 圖4-23 選框工具1) 矩形選框工具矩形選框工具可以建立矩形選取范圍。在使用矩形選框工具之前通常先在工具選項欄中進行必要的設置，如圖4-24所示。 圖4-24 矩形選框工具選項欄矩形選框工具選項欄分為3部分：修改選擇方式、“羽化”與“消除鋸齒”、

14、“樣式”。(1) 修改選擇方式分為4種：“新選區(qū)”、“添加到選區(qū)”、“從選區(qū)減去”和“與選區(qū)交叉”。 新選區(qū)：就是去掉原來的選擇區(qū)域重新選擇區(qū)域。 添加到選區(qū)：在原來的選擇區(qū)域基礎上增加新的選擇區(qū)域，從而形成最終的選擇區(qū)域，最終的選擇區(qū)域為兩次選擇區(qū)域的并集，如圖4-25圖4-27所示。 圖4-25 原選區(qū) 圖4-26 增加選區(qū) 圖4-27 最終的選擇區(qū)域 從選區(qū)減去：在原來的選擇區(qū)域中減去新的選擇區(qū)域與原來的選擇區(qū)域相交的部分，形成最終的選擇區(qū)域，如圖4-28圖4-30所示。圖4-28 原選區(qū) 圖4-29 減去的選擇區(qū)域 圖4-30 最終的選擇區(qū)域 從選區(qū)交叉：新的選擇區(qū)域與原來的選擇區(qū)域相

15、交的部分為最終的選擇區(qū)域，如圖4-31圖4-33所示。圖4-31 原選區(qū) 圖4-32 選擇交集 圖4-33 最終的選擇區(qū)域 (2) 羽化：即通過建立選區(qū)和選區(qū)周圍像素之間的轉換來模糊邊緣，丟失選區(qū)邊緣的一些細節(jié)。因此，羽化可以消除選擇區(qū)域的正常硬邊界，也就是使區(qū)域邊界產生一個過渡。可以通過輸入羽化值來控制選區(qū)羽化效果，如圖4-34圖4-36所示?！跋忼X”通過軟化邊緣像素和背景像素之間的顏色轉換，使選區(qū)的鋸齒邊緣平滑，因為只是更改了邊緣像素，所以沒有細節(jié)丟失。圖4-34 羽化=0 圖4-35 羽化=5 圖4-36 羽化=10 (3) 樣式：規(guī)定了繪制的矩形選框的形狀?！皹邮健毕吕斜砜蛑杏?

16、個選項，其含義如下： 正常：該選項是默認的選擇方式，也是最常用的選框樣式，在這種方式下，可以繪制任意大小的矩形，如圖4-37、圖4-38所示。 圖4-37 “樣式”設置為“正?！?圖4-38 用正常選擇方式選擇圖片 固定長寬比：在這種樣式下可以任意設定矩形的寬度和高度比，如圖4-39所示，只需在其文本框中輸入相應的數字即可，系統(tǒng)默認的比例是11，如圖4-40所示。圖4-39 固定長寬比寬高=11 圖4-40 用固定長寬比選擇方式選擇圖片 固定大?。涸谶@種方式下，可以通過輸入寬度和高度的數值來確定矩形的大小，如圖4-41和圖4-42所示，寬和高分別為65像素和66像素。圖4-41 固定大?。簩?

17、65像素，高=66像素 圖4-42 用固定大小選擇方式選擇圖片 2) 橢圓選框工具要選取橢圓選框工具，需要單擊并按住工具箱的矩形選框工具，再從彈出菜單中選擇橢圓選框工具，然后釋放鼠標即可。其工具選項欄的內容與用法和矩形選框工具選項欄大致相同，如圖4-43所示。這里介紹“消除鋸齒”復選框。Photoshop中的圖像是由像素組成的，而像素實際上是正方形的色塊，因此當進行圓形選取或其他不規(guī)則選取時就會產生鋸齒邊緣?！跋忼X”的原理就是在鋸齒之間填入中間色調，這樣就從視覺上消除了鋸齒現象，如圖4-44和圖4-45所示為兩種不同的視覺效果。 圖4-43 橢圓選框工具選項欄圖4-44 沒有消除鋸齒效果

18、圖4-45 消除鋸齒效果 2套索工具如果所要選取的圖形不規(guī)則，這時就可以選用套索工具。與選框工具一樣，套索工具及其快捷鍵也是很有用的。套索工具如圖4-46所示，可用來繪制直線、線段或徒手描繪外框的選取范圍，它包含套索工具、多邊形套索工具和磁性套索工具。1) 套索工具選中套索工具后，將鼠標指針移到圖像上后即可拖動鼠標選取所需要的范圍，如圖4-47所示。 圖4-46 套索工具 圖4-47 用套索工具選取圖形 2) 多邊形套索工具多邊形套索工具與套索工具的使用方法有很多相似的地方，所不同的是它的選取區(qū)域是不規(guī)則的多邊形。由于多邊形套索工具比較容易控制，所以使用它來選取圖像細節(jié)部分是很方便的。使用多邊

19、形套索工具時，不用像使用套索工具那樣連續(xù)地拖動選取框的線，而是單擊多邊形套索來設置選取點。Photoshop會在點與點之間插入直線來構成選取框，可以根據需要設置任意多個點，點與點之間的距離既可以很近也可以很遠。如圖4-48所示為多邊形套索工具選項欄，使用多邊形套索工具可進行如圖4-49所示的選擇。 圖4-48 多邊形套索工具選項欄 圖4-49 用多邊形套索工具選取圖形 3) 磁性套索工具磁性套索工具是一種具有可識別邊緣功能的套索工具，可在圖像中選取不規(guī)則、但圖形顏色和背景顏色反差較大的圖形。使用該工具時，選框線會自動被吸到對象的邊界線上，如圖4-50所示。通常情況下，使用磁性套索工具很少能一次

20、就建立精確選區(qū)，因為某些選區(qū)的邊緣和背景顏色很接近，套索很難分辨，此時就需要其他工具協(xié)助才能完成選區(qū)的創(chuàng)建。 圖4-50 用磁性套索工具選取圖形 3魔棒工具魔棒工具是一種獨特的選取工具，前面介紹的選取工具都是根據在圖或照片中的位置選取像素的，而魔棒工具選擇像素的方式卻有些不同，它是根據顏色值來選取像素，是以圖像中相近的色素來建立選取范圍的。魔棒工具可以用來選擇顏色相同或相近的整片色塊，如圖4-51和圖4-52所示。當用魔棒工具單擊某個點時，與該點顏色相似和相近的區(qū)域將被選中。另外，通過設定魔棒工具選項欄，還可以控制其顏色的相似程度。魔棒工具選項欄如圖4-53所示，主要選項的含義如下。 圖4-5

21、1 魔棒工具 圖4-52 用魔棒工具選取區(qū)域 圖4-53 魔棒工具選項欄 修改選擇方式：包括“新選區(qū)”、“添加到選區(qū)”、“從選區(qū)減去”和“與選區(qū)交叉”4種方式，與矩形選框工具的修改選擇方式相同。 容差：數值越小選取的顏色范圍越接近，數值越大選取的顏色范圍越大。其中可輸入0255之間的數值，系統(tǒng)默認為32，如圖4-54和圖4-55所示為容差值不同時的效果。 用于所有圖層：如果選中該復選框，則顏色選取范圍可跨所有可見圖層，如果不選擇該復選框，魔棒工具只能在當前圖層起作用。 圖4-54 容差=25的效果 圖4-55 容差=100的效果 4利用魔棒工具摳取透明圖像在Photoshop中摳取透明圖像，最

22、原始的做法是用魔棒工具將背景中顏色相近的區(qū)域選出來并刪掉，然后用橡皮擦工具仔細擦去背景中剩余的一些圖片。步驟1 選擇“文件”“打開”命令，打開一幅如圖4-56所示的圖。步驟2 從工具箱中選擇魔棒工具，單擊圖像上的綠色處，選擇如圖4-57所示的區(qū)域。 圖4-56 打開圖像 圖4-57 用魔棒工具選擇區(qū)域 步驟3 在圖4-57中可以看到右上角和右下角的綠色區(qū)域沒有被選中，按住Shift鍵，繼續(xù)使用魔棒工具在沒有被選中的綠色區(qū)域單擊，增加選擇區(qū)域，效果如圖4-58所示。步驟4 按Delete鍵刪除綠色背景，效果如圖4-59所示。 圖4-58 增加選擇區(qū)域 圖4-59 透明效果 5羽化圖像羽化通過建立

23、選區(qū)和選區(qū)周圍像素之間的轉換邊界來模糊邊緣，羽化在處理圖像中應用廣泛。創(chuàng)建羽化效果的具體操作步驟如下。步驟1 打開如圖4-60所示的圖片，單擊工具箱中的矩形選框工具，如圖4-61所示。 圖4-60 打開圖片 圖4-61 矩形選框工具 步驟2 選擇圖片中的部分區(qū)域，如圖4-62所示。在矩形選框工具選項欄的“羽化”文本框中輸入5像素，如圖4-63所示。圖4-62 選擇部分區(qū)域 圖4-63 調整“羽化”值 步驟3 選擇“選擇”“反選”命令，反選效果如圖4-64所示。步驟4 按Delete鍵刪除，羽化后的效果如圖4-65所示。 圖4-64 反選效果 圖4-65 羽化后的效果 4.2.2 基本繪圖工具在

24、處理網頁圖像過程中，繪制圖像是最基本的操作。Photoshop CS提供了非常便捷的繪圖功能。下面介紹Photoshop中的畫筆、鉛筆、圖章、油漆桶和漸變等繪圖工具的使用。1畫筆工具畫筆工具位于工具箱的中部，如圖4-66所示。另外，也可以按快捷鍵B切換到畫筆工具，在畫筆工具選項欄選擇畫筆樣式，如圖4-67所示。圖4-68所示為利用畫筆工具對圖像進行處理后的效果。 圖4-66 畫筆工具 圖4-67 畫筆樣式 圖4-68 畫筆制作效果2鉛筆工具鉛筆工具的工作原理和實際的鉛筆相似，繪制的曲線是硬的、有棱角的，工作方式與畫筆相同，如圖4-69所示為鉛筆工具。使用鉛筆工具，可在圖像或選區(qū)內繪制所需的線條

25、，鉛筆線條的粗細可通過“畫筆預設”選取器來選擇，如圖4-70所示。 圖4-69 鉛筆工具 圖4-70 鉛筆預設選取器 鉛筆工具選項欄中的“自動抹掉”是鉛筆的特殊功能，其被選中后，在用鉛筆繪畫過程中，當圖像的顏色與前景色相同時，鉛筆會自動擦除前景色而填入背景色，如圖4-71和圖4-72所示。圖4-71 起畫點與前景色不同時的效果 圖4-72 起畫點與前景色相同時的效果 3仿制圖章工具和圖案圖章工具仿制圖章工具和圖案圖章工具雖然都稱為圖章工具，但其功能截然不同。仿制圖章工具是一種復制圖像工具。在使用圖案圖章工具時，首先是要定義圖案，然后將圖案復制到圖像中。圖章工具如圖4-73所示，使用仿制圖章工具

26、可將局部的圖像復制到其他地方或另一個文件中。仿制圖章工具選項欄如圖4-74所示。 圖4-73 圖章工具圖4-74 仿制圖章工具選項欄仿制圖章工具選項欄中有一項與眾不同的是對齊復選框，選中此復選框后，不管停筆后再畫多少次，每次復制都保持其連續(xù)性。這種功能對于用多種畫筆復制一幅圖像是很有用的，這樣在重復使用仿制圖章工具時，可以使粘貼多次的圖像重合。如果取消此復選框，則每次停筆后再畫時，都從原先的起點畫起，此時適用于多次復制同一圖像。多次使用該工具在原粘貼點粘貼圖像后，將出現重影，故可以據此制作出重影的特殊效果。如圖4-75所示的圖案圖章工具選項欄中比仿制圖章工具選項欄多了“圖案”一項，單擊其右側下

27、拉按鈕，則會出現圖案拾色器，里面儲存著定義過的圖案，如圖4-76所示。 圖4-75 圖案圖章工具選項欄圖4-76 圖案拾色器4橡皮擦工具橡皮工具是擦除顏色的工具，橡皮擦工具包括以下3種：橡皮擦工具、背景色橡皮擦工具和魔術橡皮擦工具，如圖4-77所示。 圖4-77 “橡皮擦”工具橡皮擦工具使用方法很簡單，像使用畫筆一樣，只需選中橡皮擦工具后，按住鼠標左鍵在圖像上拖動即可。當作用于圖層為背景層圖片時，相當于使用背景顏色的畫筆，當作用于“圖層”時，擦除后變?yōu)橥该?，如圖4-78和圖4-79所示為使用橡皮擦前后的對比圖。圖4-78 原圖 圖4-79 使用橡皮擦后的效果 橡皮擦工具選項欄如圖4-80所示，

28、其中包括“畫筆”、“模式”、“不透明度”、“流量”和“抹到歷史記錄”選項。圖4-80 橡皮擦工具選項欄5油漆桶工具和漸變工具油漆桶工具和漸變工具都是顏色填充工具，但其填充方式不同。1) 油漆桶工具油漆桶工具用于向顏色相近并相連的區(qū)域填充前景色或指定圖案。具體操作步驟如下：步驟1 打開如圖4-81所示的圖片。步驟2 在工具箱中選擇魔棒工具，如圖4-82所示，單擊圖像，選擇人物衣服區(qū)域，如果沒有選擇完全，還可以按Shift鍵增加選擇區(qū)域，選擇效果如圖4-83所示。 圖4-81 打開圖片 圖4-82 選擇魔棒工具 圖4-83 使用魔棒工具選擇區(qū)域 步驟3 選擇工具箱中的油漆桶工具，選擇前景色為紅色，

29、然后單擊圖像中的選擇區(qū)域，使用前景色填充選區(qū)，效果如圖4-84所示。圖4-84 填充后效果2) 漸變工具使用漸變工具可以創(chuàng)建出兩種以上顏色的漸變效果。漸變方式既可以選擇系統(tǒng)默認值，也可以自定義。漸變方向有線性漸變、徑向漸變、角度漸變、對稱漸變和菱形漸變5種。如果不選擇填充區(qū)域，將對整個圖像進行漸變填充。使用時，首先選擇好漸變方式和漸變顏色，用鼠標在圖像上單擊起點，拖曳后再單擊終點，即可進行漸變填充?？梢杂猛弦肪€段的長度和方向來控制漸變效果。使用漸變工具的具體操作步驟如下：步驟1 打開如圖4-85所示的圖像。 圖4-85 打開圖像步驟2 從工具箱中選擇漸變工具，選擇前景色為藍色，在其工具選項欄中

30、設置透明漸變，“不透明度”設置為55%，如圖4-86所示。圖4-86 設置漸變屬性步驟3 用鼠標在圖像上單擊并拖曳，即可進行漸變填充，效果如圖4-87所示。圖4-87 漸變填充 6圖形工具圖形工具包括矩形工具、圓角矩形工具、橢圓工具、多邊形工具、直線工具和自定義形狀工具。用圖形工具可以繪制出豐富多彩的圖形效果。使用矩形工具繪制矩形，只需選中矩形工具后，在圖像上單擊并拖動即可繪出矩形。繪制矩形的具體操作步驟如下：步驟1 打開如圖4-88所示的圖像。步驟2 從工具箱中選擇矩形工具，如圖4-89所示。此時會出現如圖4-90所示的矩形工具選項欄，包括“形狀圖層”、“路徑”、“填充像素”和選擇多邊形工具

31、種類等。 圖4-88 打開圖像 圖4-89 選擇矩形工具 圖4-90 矩形工具選項欄步驟3 使用矩形工具在圖像上單擊并拖動即可繪制矩形，如圖4-91所示。圖4-91 繪制矩形步驟4 從矩形工具選項欄中的“樣式”下拉列表中選擇樣式，此時效果如圖4-92所示。 圖4-92 對矩形應用樣式4.2.3 利用基本繪圖工具制作大眾汽車標志一個精美的標志在一定程度上可以輔助公司樹立形象，下面將制作如圖4-93所示的大眾汽車標志。步驟1 選擇“文件”“新建”命令，彈出如圖4-94所示的“新建”對話框，將高和寬都設為250。 圖4-93 大眾汽車標志 圖4-94 “新建”對話框 步驟2 在“圖層”面板中，雙擊“

32、背景”圖層，彈出“新圖層”對話框，保持默認設置，如圖4-95所示。步驟3 選擇“圖層”“新建”“圖層”命令，新建一個“圖層1”。按住Shift鍵用橢圓選框工具在新建文檔的中間繪制一個正圓的選區(qū)，如圖4-96所示。 圖4-95 “新圖層”對話框 圖4-96 繪制正圓 步驟4 設置“前景色”為#759DCD，“背景色”為#003366。選擇漸變工具，在其工具選項欄選擇“徑向漸變”，漸變編輯器里的左邊為前景色，右邊為背景色。然后從圓的左上部向右下部繪制徑向漸變，如圖4-97所示。步驟5 將“前景色”設置為白色，用減淡工具在淡藍色的部分單擊，以增加亮點，如圖4-98所示。 圖4-97 繪制漸變效果 圖

33、4-98 增加亮點 步驟6 選中圓，在“圖層”面板中單擊“圖層1”，選擇“圖層”“復制圖層”命令復制圖層，將此圖層命名為“圖層2”。雙擊“圖層2”，彈出如圖4-99所示的“圖層樣式”對話框，在“樣式”列表中選擇“描邊”選項，然后設置“位置”為“外部”，“大小”為6像素，“顏色”為#999999，單擊“確定”按鈕，顯示效果如圖4-100所示。圖4-99 設置描邊 圖4-100 描邊效果 步驟7 選擇“視圖”“標尺”命令顯示標尺，然后在標尺上拖曳出一些輔助線，如圖4-101所示。步驟8 在“圖層”面板中單擊“圖層1”，選擇“圖層復制圖層”命令復制圖層，將此圖層命名為“圖層3”。雙擊“圖層3”，彈出

34、如圖4-102所示的對話框，在“樣式”列表中選擇“描邊”選項，然后設置“位置”為“外部”，“大小”為9像素，“顏色”為白色。圖4-101 顯示標尺 圖4-102 “圖層樣式”對話框 步驟9 選中“圖層3”，然后選擇“編輯”“自由變換”命令來調整圓的尺寸和位置，此時要同時按住Shift+Alt鍵以保證它能夠和原來的圓成為同心圓，如圖4-103所示。步驟10 選擇“橫排文字”工具，在其工具選項欄中選擇“Lucida sans unicode”字體。先輸入，按Ctrl+T鍵進行簡單變形，然后輸入文字，再進行簡單自由變形，顯示效果如圖4-104所示。圖4-103 變換大小 圖4-104 大眾標志 4.

35、3 網頁圖像的處理4.3.1 色彩模式在Photoshop中，常見的色彩模式包括位圖模式、灰度模式、雙色調模式、HSB(表示色相、飽和度、亮度)模式、RGB(表示紅、綠、藍)模式、CMYK(表示青、洋紅、黃、黑)模式、Lab模式、索引顏色模式、多通道模式以及8位通道和16位通道模式。每一種模式都有自己的優(yōu)缺點和自己的適用范圍，并且各個模式之間都可以進行轉換。 色彩模式除確定圖像中能顯示的顏色數之外，還會影響圖像的通道數和文件大小。這里提到的通道也是Photoshop中的一個重要概念，每個Photoshop圖像都具有一個或多個通道，每個通道都存放著圖像中顏色元素的信息。圖像中默認的顏色通道數取決

36、于其色彩模式。圖像是由像素構成的，像素是位圖圖像的最小單位。將一幅圖放大若干倍就會看到，圖像其實是由很多小方塊組成的。每1個小方塊就是1個像素，它分配著1種顏色，相鄰像素顏色彼此相近。像素所能分配的最大顏色數也叫顏色容量，單位是“位”。4.3.2 調整圖像色彩1利用色階調整圖像色彩“色階”命令允許通過修改圖像的陰影區(qū)、中間色調區(qū)和高光區(qū)的亮度水平來調整圖像的色調范圍和顏色平衡，并可隨時用吸管工具精確地讀出各位置在變化前后的色調值?！懊鞫取笔侵干实拿髁脸潭?，簡單一點說，在電視機上，亮度調節(jié)按鈕控制的就是明度。在非彩色中，明度最高的色為白色，最低的色為黑色。明度越高的圖像對視覺的刺激就越大，看上

37、去就越明亮。下面通過調整網頁圖像的高光與暗調講述色階的具體應用，具體操作步驟如下： 步驟1 選擇“文件”“打開”命令，將要調整的圖像文件打開，如圖4-105所示。步驟2 選擇“圖像”“調整”“色階”命令，彈出如圖4-106所示的“色階”對話框。 圖4-105 打開圖像 圖4-106 “色階”對話框 在“輸入色階”處有3個數值，即“暗調”、“中間調”和“高光”值。直接用鼠標拖曳色調分布圖下面中間的灰色小三角，可改變“中間調”的值，或直接在“輸入色階”的中間一項輸入數據來調節(jié)，它的初始值為1，最大值為9.99，最小值是0.10。圖4-107和圖4-108所示分別是中間調為“0.5”和“1.7”的效

38、果。圖4-107 中間調為“0.5”的效果 圖4-108 中間調為“1.7”的效果 步驟3 按Alt鍵再單擊“重置”按鈕，即可恢復成預設狀態(tài)。步驟4 對圖像色彩進行調整后，單擊“好”按鈕，效果如圖4-109所示，即可看到原來較暗的圖像已變得較艷麗而清楚了。圖4-109 調整色階后的效果2利用曲線調整圖像色彩“曲線”命令是許多專業(yè)美術人員最喜歡使用的色調修正命令?！扒€”命令將整體的色調范圍分為16個小方塊，可以調整0255范圍內的任意點，同時保持其他15個值不變，還可以單獨對一個顏色通道進行精確的調整。使用相對“色階”命令，用戶可以更精確地控制每個亮度層次光點的變化，不僅可以更有效地調整圖像的

39、色調，更可以制作出許多奇特的色彩效果。步驟1 打開一幅如圖4-110所示的欲調整色彩的圖像文件。步驟2 選擇“圖像”“調整”“曲線”命令，彈出如圖4-111所示的“曲線”對話框。 圖4-110 打開圖像文件 圖4-111 “曲線”對話框 步驟3 色調過暗往往會導致圖像細節(jié)的丟失，這時，可以在曲線中將陰影區(qū)曲線上揚，將陰暗區(qū)減少，這樣調整的同時中間色調區(qū)曲線和高光區(qū)曲線也會微微上揚，結果是圖像的各色調區(qū)將按一定比例加亮，比直接整體加亮顯得更有層次感，如圖4-112和圖4-113所示。圖4-112 調整曲線按一定比例加亮 圖4-113 加亮效果 3調整圖像亮度與對比度“亮度/對比度”命令能對整個圖

40、像進行亮度和對比度的調整。打開如圖4-110所示的圖像，選擇“圖像”“調整”“亮度/對比度”命令，彈出“亮度/對比度”對話框。在該對話框中，拖動對話框中的“亮度”滑塊可以調整圖像的明亮度；拖動“對比度”滑塊可以調整圖像的對比度，對話框中的“亮度”和“對比度”設置如圖4-114所示，調整后的效果如圖4-115所示。 圖4-114 “亮度/對比度”對話框圖4-115 調整“亮度/對比度”后的效果4使用色彩平衡調整圖像色彩打開如圖4-110所示的圖像，選擇“圖像”“調整”“色彩平衡”命令，彈出如圖4-116所示的“色彩平衡”對話框。其中有3個標尺可以控制各主要色彩的增減，還有3個單選按鈕可以選擇調整

41、暗調、中間調或高光，最下方有一個“保持亮度”的功能選項，可以讓用戶在不改變圖像原有亮度的情況下修改圖像的色彩。 圖4-116 “色彩平衡”對話框在“色彩平衡”對話框中主要有以下選項。 色調平衡：選擇需要調節(jié)色彩平衡的色調區(qū)，有“暗調”、“中間調”和“高光”3個選項。 保持亮度：在改變色彩成分的過程中，保持圖像的亮度值不變。此選項僅適用于RGB圖像。 色彩平衡：調節(jié)色彩平衡很簡單，就是調節(jié)圖中的3個滑塊或在文本框中輸入-100100之間的數值即可，而且可以看到，同一滑塊兩側的顏色正好為互補色。這是很自然的，因為在減少綠色的同時，必然會導致洋紅色的增加，這也正是調節(jié)的原理所在，如果圖像的綠色過重，

42、就可以靠增加它的互補色洋紅色來減少色調區(qū)的紅色，如圖4-117所示。調整后的圖像如圖4-118所示。圖4-117 調整色彩平衡 圖4-118 調整色彩平衡后的效果 5調整圖像色相與飽和度“色相/飽和度”命令能單獨調整圖像中一種顏色成分的色相、飽和度。所謂“色相”，即是在色譜上所能看到的紅、橙、黃、綠、藍、靛、紫等不同的色彩特征。所謂“飽和度”，就是一種顏色的鮮艷程度，顏色越濃，飽和度越大；顏色越淡，飽和度越小。打開如圖4-110所示的圖像，選擇“圖像”“調整”“色相/飽和度”命令，彈出如圖4-119所示的對話框。 圖4-119 “色相/飽和度”對話框“色相/飽和度”對話框主要包括以下選項。 編

43、輯：從中選擇所要進行調整的顏色范圍。選擇“全圖”，則會同時調整圖像中的所有顏色。選擇其他顏色，只調整所選顏色的色相、飽和度和亮度。 色相：直接用鼠標拖動“色相”滑塊，或直接在文本框中輸入數據來調節(jié)，直到滿意為止，它的初始值為0，最大值為+180，最小值為-180。文本框中的數值代表了在色輪圖上沿著顏色輪從像素的原始顏色處旋轉到所需要顏色時的旋轉度數，因此范圍是-180180。正值意味著順時針旋轉，負值意味著逆時針旋轉。其調節(jié)過程和效果如圖4-120和圖4-121所示。 圖4-120 調整“色相” 圖4-121 調整色相后的效果 飽和度：指的是色彩的清濁程度，在光譜上它決定于某一種顏色波長的單一

44、程度。直接用鼠標拖動“飽和度”滑塊，或直接在文本框中輸入數據來調節(jié)飽和度，它的初始值為0，最大值為+100，最小值為-100。調節(jié)飽和度的操作即在色輪圖上從顏色的起始飽和度處向著圓心或遠離圓心移動，直到得到滿意的飽和度為止。“飽和度”為50的效果如圖4-122所示。圖4-122 “飽和度”為50的效果4.3.3 網頁圖像處理實例在網頁制作過程中，經常遇到要處理產品圖像或其他一些圖像的情形，下面就通過實例講述這些圖像的處理。步驟1 打開如圖4-123所示的原始圖像。 圖4-123 原始圖像步驟2 選擇“圖像”“圖像大小”命令，彈出如圖4-124所示的“圖像大小”對話框，可以看到圖像比較大，把“寬

45、度”修改為400，選擇“約束比例”復選框，則“高度”將自動調整。步驟3 設置完相關參數后，單擊“好”按鈕，調整圖像大小后的效果如圖4-125所示。 圖4-124 “圖像大小”對話框 圖4-125 調整圖像大小后的效果 步驟4 如果感覺圖像中的地面太多，可以從工具箱中選擇裁切工具把圖像中的地面部分裁切掉。如圖4-126所示為使用“裁切工具”裁切圖像的效果。圖4-126 裁切圖像 步驟5 調整合適的裁切范圍后，按Enter鍵，裁切后的效果如圖4-127所示。圖4-127 裁切后的效果步驟6 從圖中可以看出圖像色彩太暗，可以選擇“圖像”“調整”“色階”命令，在彈出的“色階”對話框中調整色彩。“色階”

46、對話框有關參數的設置如圖4-128所示。設置完成后，單擊“好”按鈕即可，效果如圖4-129所示。圖4-128 “色階”對話框圖4-129 調整色階后的效果現在，圖像大小和色彩都調整好了，下面就把“背景”圖層轉換為普通圖層，對圖層應用內發(fā)光樣式。步驟7 選擇“窗口”“圖層”命令，打開“圖層”面板，如圖4-130所示。雙擊“背景”圖層，彈出如圖4-131所示的對話框，將“背景”圖層轉換為普通圖層。 圖4-130 “圖層”面板 圖4-131 將“背景”圖層轉換為普通圖層 步驟8 選擇“圖層”“圖層樣式”“內發(fā)光”命令，彈出如圖4-132所示“圖層樣式”對話框。步驟9 在對話框中設置相關參數后，單擊“

47、好”按鈕，效果如圖4-133所示。 圖4-132 “圖層樣式”對話框 圖4-133 內發(fā)光效果 步驟10 選擇“文件”“存儲為Web所用格式”命令，彈出如圖4-134所示的對話框。在對話框中，“優(yōu)化的文件格式”項選擇JPEG，“品質”設置為65，這里適當降低圖像品質，壓縮圖像大小。圖4-134 “存儲為Web所用格式”對話框步驟11 單擊“存儲”按鈕，即可保存優(yōu)化后的文件。 4.4 使用文字工具制作網頁特效文字4.4.1 創(chuàng)建文字文字工具位于工具箱的左上角，包括橫排文字工具、直排文字工具、橫排文字蒙版工具和直排文字蒙版工具。單擊即可選取，也可以按T快捷鍵切換到文字工具，如圖4-135所示。 圖

48、4-135 文字工具1輸入文字使用文字工具可以輸入文字。在使用文字工具之前通常先在選項欄中進行必要的參數設定，如圖4-136所示。 圖4-136 文字工具選項欄在圖像中輸入文字的具體操作步驟如下：步驟1 打開一幅圖片，如圖4-137所示。步驟2 選擇橫排文字工具，如圖4-138所示。 圖4-137 打開圖片 圖4-138 選擇橫排文字工具 步驟3 在橫排文字工具選項欄中設置“字體”為“華文新魏”，“大小”為18點， “清除鋸齒”選擇“渾厚”，“段落樣式”選擇“左對齊文本”，如圖4-139所示。圖4-139 設置文本屬性步驟4 在圖像上要輸入文字處單擊，出現輸入光標，這就是輸入文字的起始位置，如

49、圖4-140所示。圖4-140 確定起始點步驟5 輸入文字，如圖4-141所示。輸入的文字將生成一個新的文字圖層。圖4-141 輸入文字2在文本框中輸入文字選擇“文字”工具后，在圖片上想要輸入文本處拖曳出文本框，在文本框中將出現輸入光標，這就是輸入文本的起始點，如圖4-142所示。 圖4-142 拖曳出文本框輸入所需的文本，如圖4-143所示。如果需要，可以對文本框進行調整大小、旋轉或拉伸等操作。圖4-143 輸入文本【提示】 文本框可以拉伸或旋轉，把鼠標指針放在文本框的頂點上就會出現拉伸的標志，如圖4-144所示。把鼠標指針放在文本框外就會出現旋轉的標志，這時可以旋轉文本框，如圖4-145所示。圖4-144 拉伸文本框圖4-145 旋轉文本框4.4.2 文字的變形使用“文字的變形”命令可以對文字進行多種變形，“變形文字”對話框如圖4-146所示?！白冃挝淖帧睂υ捒蚋鲄岛x如下。 樣式：選擇要進行變形的風格，單擊右側的下拉按鈕打開樣式菜單，如圖4-147所示。 水平和垂直：選擇文字的彎曲方向。 彎曲、水平彎曲和垂直彎曲：用來控制文字彎曲的程度。 圖4-146 “變形文字”對話框 圖4-147 文字樣式 設置變形文字的具體操