第2章網(wǎng)頁圖像設(shè)計與制作學(xué)習(xí)目標(biāo)：了解色彩的搭配認(rèn)識Photoshop工作界面掌握Photoshop圖像處理掌握網(wǎng)站Logo、網(wǎng)站Banner制作、導(dǎo)航欄制作掌握Photoshop頁面草圖設(shè)計主要內(nèi)容2.1圖像基礎(chǔ)及色彩應(yīng)用2.2

網(wǎng)頁圖像設(shè)計2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.1矢量圖形和位圖圖像計算機圖形圖像一般可以分為兩大類——矢量圖形和位圖圖像。

1.矢量圖形矢量圖形使用直線和曲線來描述圖形，它們是通過數(shù)學(xué)公式計算獲得，所以矢量圖形文件體積一般較小。矢量圖形最大的優(yōu)點是無論放大、縮小或旋轉(zhuǎn)等不會失真。制作矢量圖形常用的軟件有Freehand、Illustrator、CorelDraw等。矢量圖形2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.1矢量圖形和位圖圖像2.位圖圖像位圖圖像也稱為點陣圖或柵格圖像，位圖圖像由像素點組成。即圖像由一個個的顏色方格所組成，與分辨率有關(guān)，單位面積內(nèi)像素越多，分辨率越高，圖像的效果越好。制作位圖圖像常用的軟件有Photoshop、PhotoImpact等。位圖圖像2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.2常用的色彩模式1.HSB顏色模式HSB顏色模式基于人眼對色彩的觀察，把顏色分為色相（H）、純度（S）、明度（B）三個要素，即色彩的三要素。（1）色相色相也叫色調(diào)，是顏色的基本屬性。色相是從物體反射或透過物體傳播的顏色。在0到360度的標(biāo)準(zhǔn)色輪上，按位置度量色相。例如紅、橙、黃、綠、青、藍(lán)、紫等。通過色相，人們才能區(qū)分彩色，人們通常說的顏色，其實就是指色相。如紅色、橙色或綠色。色相2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.2常用的色彩模式1.HSB顏色模式（2）純度純度也叫飽和度，是指色彩的鮮艷程度。飽和度表示色相中灰色分量所占的比例，它使用從0%（灰色）至100%（完全飽和）的百分比來度量。飽和度大，顏色就鮮艷，飽和度小，顏色看起來顯得灰暗。（3）明度明度也叫亮度，指顏色的深淺。在無色彩中，明度最高的色為白色，明度最低的色為黑色，中間存在一個從亮到暗的灰色系列。在有色彩中，任何一種純度色都有自己的明度特征。例如，黃色為明度最高的色，紫色為明度最低的色。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.2常用的色彩模式2.RGB色彩模式RGB模式是基于自然界中3種基色混合的，紅（R）、綠（G）、藍(lán)（B）3種基色按照從0到255的亮度值在每個色階中分配，當(dāng)不同亮度的基色混合后，便會得到256×256×256種顏色，約為1670萬種顏色。3.CMYK色彩模式CMYK模式以打印在紙上的油墨的光線吸收特性為基礎(chǔ)。純青色（C）、洋紅（M）、黃色（Y）、黑色（K）。CMYK模式中，為每個像素的每種印刷油墨指定一個百分比值。最亮（高光）顏色指定的印刷油墨顏色百分比較低，而較暗（暗調(diào)）顏色指定的百分比較高。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理配色是網(wǎng)頁設(shè)計中很重要的一個環(huán)節(jié)。配色的效果很大程度上決定了瀏覽者對網(wǎng)站的第一印象。自然界中的色彩可以分為非彩色和彩色兩大類。黑、白和各種深淺不一的灰色屬于非彩色，其它顏色屬于彩色。1.基于色相的配色（1）紅色紅色給人以活力、熱情、積極、溫暖、前進(jìn)的感覺。在很多使用了紅色的網(wǎng)站中，紅色所擔(dān)任的角色都是強調(diào)色，因為紅色比較鮮明，易吸引人們的眼球。紅色除了具有較佳的明視效果之外，另外紅色也常用來表示警告、危險、禁止、防火等。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理1.基于色相的配色（2）黃色黃色的明度是色相中最高的，黃色給人明亮、快樂、希望、活潑和輕快的感覺。另外除了紅色，黃色也常用來表示警告、危險、禁止、防火等。（3）橙色橙色是介于紅色和黃色之間的混合色，給人明亮、快樂、希望、收獲、活潑和輕快的感覺，橙色加入少許的黑色或白色，給人穩(wěn)重、含蓄和明快的感覺，加入較多的白色給人甜膩的感覺，橙色與淺灰色搭配給人舒適的感覺。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理1.基于色相的配色（4）綠色綠色給人和平、寧靜、希望、生長的感覺。在網(wǎng)站設(shè)計中，綠色所傳達(dá)的清爽、理想、希望、生長的意象，符合服務(wù)業(yè)、衛(wèi)生保健業(yè)的要求。（5）藍(lán)色藍(lán)色給人平靜、博大、安詳、潔凈、永恒的感覺。深藍(lán)色作為網(wǎng)頁的主色調(diào)，表達(dá)了一種凝重的氣氛，顯得更加規(guī)矩。藍(lán)色適合運用在高科技、醫(yī)療、文教、工業(yè)等為主題的網(wǎng)站。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理1.基于色相的配色（6）紫色紫色給人優(yōu)雅、高貴、魅力、自傲、輕率、神秘、驚恐的感覺。紫色中加入黑色，會變的沉悶、傷感，還有一點恐怖的感覺。加入少許的紅色給人危機感，加入少許的白色，給人優(yōu)雅、充滿女性的嫵媚。（7）黑色和白色黑色給人一種深沉、安全的感覺，可與任何顏色搭配。白色給人純潔、無辜、恢復(fù)、中立、永恒的感覺。（8）灰色灰色被認(rèn)為是萬能色，可以和任何彩色搭配。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理2.色彩在網(wǎng)頁中的情感作用網(wǎng)頁的色彩表現(xiàn)是豐富多彩的，不同色彩作用于人的視覺感官，最后形成的一系列的色彩心理反應(yīng)。（1）色彩的冷暖紅色、橙色、黃色等顏色，讓人聯(lián)想到火焰、太陽等，產(chǎn)生溫暖的感覺，以這些顏色為主導(dǎo)的色調(diào)稱為“暖色調(diào)”。青色、綠色、藍(lán)色等顏色讓人聯(lián)想到太空、冰雪等，產(chǎn)生寒冷的感覺，以這些顏色為主導(dǎo)的色調(diào)稱為“冷色調(diào)”。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.3網(wǎng)頁配色原理2.色彩在網(wǎng)頁中的情感作用（2）色彩的輕重色彩的輕重在不同的領(lǐng)域起著不同的作用，明度高的亮色感覺輕，明度低的暗色感覺重。（3）色彩的前進(jìn)與后退在同一距離觀察不同的色彩時，暖色感覺比較前進(jìn)，冷色感覺比較后退。（4）色彩的興奮與平靜暖色系中，明亮、純度高的色彩給人興奮的感覺，深暗、渾濁的色彩給人沉靜的感覺。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配色彩的搭配只有遵循一定的規(guī)律，才能使頁面統(tǒng)一，使頁面更有針對性。下面主要介紹網(wǎng)頁配色時要注意的幾個原則以及網(wǎng)頁配色的技巧。1. 網(wǎng)頁色彩搭配原則（1）色彩的鮮明性網(wǎng)頁的色彩要鮮艷，

以引人注目。網(wǎng)站的用色要有

自己的風(fēng)格，怎樣才能給瀏覽

者留下深刻的印象是需要考慮

的問題。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配1. 網(wǎng)頁色彩搭配原則（2）色彩的獨特性不同的色彩給瀏覽者不同的印象。如藍(lán)色是很多企業(yè)的首選色。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配1. 網(wǎng)頁色彩搭配原則（3）色彩的合適性色彩搭配要合適，就是說色彩和所要表達(dá)的內(nèi)容氣氛相適合。如粉色體現(xiàn)女性網(wǎng)站的柔美性。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配1. 網(wǎng)頁色彩搭配原則（4）色彩的聯(lián)想性不同色彩會產(chǎn)生不同的聯(lián)想，如藍(lán)色想到天空，綠色想到植物等，選擇的色彩要和網(wǎng)頁內(nèi)容相關(guān)聯(lián)。如看到紅色的剪紙就想到中國的民間藝術(shù)。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配2.網(wǎng)頁色彩搭配的技巧網(wǎng)頁顏色搭配直接影響到瀏覽者的情緒。好的色彩搭配會讓瀏覽者心情舒暢，能夠使瀏覽者愿意花時間瀏覽你的網(wǎng)頁。因此，在網(wǎng)頁色彩搭配要注意一些技巧，使網(wǎng)頁更具有活力和生命力。（1）使用單色先選定一種色彩，然后通過調(diào)整透明度或飽和度，產(chǎn)生新的色彩用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。（2）使用對比色先選定一種色彩，然后選擇它的對比色（互補色）。對比色可以產(chǎn)生強烈的視覺效果，合理的使用對比色可以使整個頁面色彩豐富而不凌亂。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.4網(wǎng)頁色彩搭配2.網(wǎng)頁色彩搭配的技巧（3）使用相鄰色色相上色彩相鄰的顏色，如紅色和黃色，藍(lán)色和綠色是相鄰色，使頁面達(dá)到統(tǒng)一。（4）使用黑色黑色與任何一個具有表現(xiàn)力的色彩都能夠和諧的搭配在一起，網(wǎng)頁上大面積的黑色搭配一點色彩，網(wǎng)頁就感覺很酷。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.5實例——常見的幾種配色方案1.暖色調(diào)紅色、橙色、黃色是“暖色”，暖色與黑色搭配可以到達(dá)較好的效果。采用暖色調(diào)的網(wǎng)站顯得熱烈、興奮。下圖所示的網(wǎng)頁采用了暖色調(diào)為主。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.5實例——常見的幾種配色方案2.冷色調(diào)青色、綠色、藍(lán)色是“冷色”，冷色與白色搭配可以到達(dá)教好的效果。采用冷色調(diào)的網(wǎng)站顯得平靜、潔凈。下圖所示的網(wǎng)頁采用了冷色調(diào)為主。2.1

圖像基礎(chǔ)及色彩應(yīng)用2.1.5實例——常見的幾種配色方案3.非彩色黑色、白色、灰色是“非彩色”，他們可以和任意一種顏色搭配。具有緩沖和調(diào)和作用，如下圖所示。主要內(nèi)容2.1圖像基礎(chǔ)及色彩應(yīng)用2.2

網(wǎng)頁圖像設(shè)計2.2網(wǎng)頁圖像設(shè)計2.2.1圖像格式簡介圖像是組成網(wǎng)頁的元素之一，在網(wǎng)頁適當(dāng)位置添加圖像，會使網(wǎng)頁內(nèi)容豐富，更準(zhǔn)確、更快速地傳遞信息，因此掌握圖像的創(chuàng)建、編輯至關(guān)重要。雖然計算機存在很多種圖形文件格式，但Web頁面中通常使用的只有三種，即GIF、JPEG和PNG文件格式。1.GIF格式GIF（圖形交換格式）：文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)、徽標(biāo)或其它具有統(tǒng)一色彩和色調(diào)的圖像。有透明處理功能，支持動畫效果。2.2網(wǎng)頁圖像設(shè)計2.2.1圖像格式簡介2.JPEG格式JPEG（聯(lián)合圖像專家組標(biāo)準(zhǔn)）：文件可以包含數(shù)百萬種顏色，隨著JPEG文件品質(zhì)的提高，文件的大小和下載時間也會隨之增加?？梢酝ㄟ^壓縮JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。這種壓縮是一種有損壓縮格式。3. PNG格式PNG（可移植網(wǎng)絡(luò)圖形）：PNG是MacromediaFireworks固有的文件格式。PNG文件格式是一種替代GIF格式的無專利權(quán)限制的格式，用與在WWW上無損壓縮和顯示圖像。它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介常用的網(wǎng)頁圖像處理軟件有Photoshop和Fireworks。其中Photoshop具有強大的圖像處理功能，使用Photoshop可以方便地處理圖像、設(shè)計網(wǎng)頁草圖、網(wǎng)頁Logo、網(wǎng)頁按鈕等圖像。我們首先來了解一下PhotoshopCS4工作界面。1.操作界面操作界面主要由菜單欄、選項卡欄、應(yīng)用程序欄、工具箱、面板等幾個部分組成。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介

PhotoshopCS4的工作界面2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（1）菜單欄PhotoshopCS4包括文件、編輯、圖像、圖層、選擇、濾鏡、分析、3D、視圖、窗口和幫助11個主菜單。PhotoshopCS4新增了一個3D菜單，3D菜單可以處理和合并現(xiàn)有的3D對象、創(chuàng)建新的3D對象、編輯和創(chuàng)建3D紋理及組合3D對象與2D圖像。菜單欄2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（2）應(yīng)用程序欄PhotoshopCS4中新增了應(yīng)用程序欄，用戶可以更方便地選擇命令從而對圖像進(jìn)行編輯。

應(yīng)用程序欄2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（3）工具箱工具箱位于屏幕左側(cè)。通過工具箱中的工具可以輸入文字、繪畫、繪制、編輯、移動、注釋和查看圖像，或?qū)D像進(jìn)行取樣。工具圖標(biāo)右下角的小三角形表示存在隱藏工具。

2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介

--

工具箱2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（4）選項卡欄選項卡欄與工具箱中的所選工具有關(guān)，會隨著工具箱中所選工具的不同而變化，如圖所示。選項卡欄中的某些設(shè)置對于許多工具是通用的，有些設(shè)置則專用于某個工具。“矩形工具”選項卡欄2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（5）面板面板可以監(jiān)視和修改用戶的圖像。下圖為圖層面板和顏色面板組。

圖層面板和顏色面板組2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介1.操作界面（6）文檔窗口文檔窗口主要用于圖像文件的顯示、編輯。單擊應(yīng)用程序欄，選擇“使所有內(nèi)容在窗口浮動”命令，可以使所有打開的文件浮動在工作區(qū)。文檔窗口顯示圖像的名稱、格式、顯示比例、色彩模式以及當(dāng)前圖層等信息。（7）狀態(tài)欄狀態(tài)欄位于每個文檔窗口的底部，顯示文檔信息。

2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介2.設(shè)置前景色和背景色顏色是構(gòu)成圖像的元素，可以使用“拾色器”對話框為圖像設(shè)置顏色。在Photoshop中，默認(rèn)的前景色是黑色，背景色是白色。當(dāng)設(shè)置了其它顏色后要恢復(fù)默認(rèn)設(shè)置的顏色，單擊“默認(rèn)前景色和背景色”按鈕。要切換前景色和背景色，單擊“切換前景色和背景色交換”按鈕，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介3.選取圖像在選定區(qū)域內(nèi)可以編輯各種效果，同時保持未選定區(qū)域不會被改動。工具箱中直接創(chuàng)建選區(qū)的工具有“選框工具”、“套索工具”、“魔棒工具”、“快速選擇工具”。若要在整個圖像或選定區(qū)域內(nèi)選擇一種特定顏色或顏色范圍，可以執(zhí)行“圖像”|“色彩范圍”命令。 羽化設(shè)置選區(qū)邊緣像素的模糊程度。數(shù)值越大，邊緣模糊程度越大。4.漸變工具漸變工具可以創(chuàng)建多種顏色間的逐漸過度效果。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介4.漸變工具2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑路徑就是由貝塞爾曲線構(gòu)成的線條或圖形。路徑是不包含像素的矢量對象，與圖像是分開的，不會被打印出來。路徑可以是閉合的，也可以是開放的。路徑有一個或多個直線段或曲線段、方向線、方向點和錨點組成，如圖所示。A.錨點B.直線段C.方向線D.方向點E.曲線段2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑錨點有三種：不帶方向線的路徑由稱為角點的錨點連接，平滑曲線由稱為平滑點的錨點連接，銳化曲線由稱為拐點的錨點連接,如圖所示。角點、平滑點和拐點2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑在Photoshop中使用任何形狀工具、鋼筆工具或自由鋼筆工具進(jìn)行繪圖之前，必須從選項欄中選取繪圖模式。選取的繪圖模式將決定是在自身圖層上創(chuàng)建矢量形狀、還是在當(dāng)前圖層上創(chuàng)建工作路徑或是在當(dāng)前圖層上創(chuàng)建柵格化形狀。矢量形狀：使用形狀或鋼筆工具繪制的直線和曲線。矢量形狀與分辨率無關(guān)。路徑：形狀的輪廓是路徑。路徑可以轉(zhuǎn)換為選區(qū)或者使用顏色填充和描邊。通過編輯路徑的錨點，可以很方便地改變路徑的形狀。柵格化形狀：在當(dāng)前圖層繪制圖像。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑（1）鋼筆工具 繪制直線在不同位置單擊鼠標(biāo)，可以創(chuàng)建由直線段組成的路徑，如圖所示。創(chuàng)建直線段2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑（1）鋼筆工具 繪制曲線單擊鼠標(biāo)繪制第一個錨點，在曲線改變方向的位置單擊并拖曳鼠標(biāo)，除了添加一個錨點外，該錨點兩端還有方向線。方向線的長度和斜度決定了曲線的形狀。若要創(chuàng)建C形曲線，與前一條方向線的相反方向拖曳，然后松開鼠標(biāo)。若要創(chuàng)建S形曲線，與前一條方向線相同的方向拖曳，然后松開鼠標(biāo)，如圖所示。繪制C曲線和S曲線2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑 繪制直線接曲線繪制直線后，將“鋼筆工具”放置在所選直線段的最后錨點上，按【Alt】鍵并拖曳鼠標(biāo)，該錨點的方向線出現(xiàn)，拖動方向點。將鼠標(biāo)定位到所需的下一個錨點位置，然后單擊并拖曳鼠標(biāo)添加一個新錨點及方向線完成這段曲線的繪制，如圖所示。繪制直線接曲線2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑（2）路徑和選區(qū)之間轉(zhuǎn)換將路徑轉(zhuǎn)換為選區(qū)任何閉合路徑都可以轉(zhuǎn)換為選區(qū)。將閉合路徑轉(zhuǎn)換為選區(qū)的操作步驟如下：在路徑面板中選擇要轉(zhuǎn)換為選區(qū)的路徑。單擊路徑面板底部的“將路徑作為選區(qū)載入”按鈕，或按【Ctrl】鍵并單擊路徑面板中的路徑縮覽圖，或在路徑面板右上角單擊，在菜單中選擇“建立選區(qū)”命令。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介5.路徑（2）路徑和選區(qū)之間轉(zhuǎn)換將選區(qū)轉(zhuǎn)換為路徑任何選區(qū)都可以轉(zhuǎn)換為路徑。建立選區(qū)，將選區(qū)轉(zhuǎn)換為閉合路徑的操作步驟如下：單擊路徑面板底部的“建立工作路徑”按鈕，或路徑面板上單擊右上角，在菜單中選擇“建立工作路徑”。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層Photoshop圖層就如同堆疊在一起的透明紙。可以通過更改圖層的順序和屬性，從而改變圖像的合成效果。也可以更改圖層不透明度改變圖層的透明度。（1）添加圖層用戶可以根據(jù)需要創(chuàng)建圖層，執(zhí)行“圖層”|“新建”|“圖層”命令，或單擊圖層面板底部的“創(chuàng)建新圖層”按鈕。（2）刪除圖層對于沒有用的圖層，可以將其刪除。在圖層面板中選擇要刪除的圖層，執(zhí)行“圖層”|“刪除”|“圖層”命令，或在圖層面板底部單擊“刪除圖層”按鈕，或?qū)⒃搱D層直接拖到“刪除圖層”按鈕上。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層（3）合并圖層在圖像設(shè)計過程中，創(chuàng)建的圖層會越來越多，圖層過多會使圖像變大，并且會使圖像的處理速度變慢，因此，可以根據(jù)需要將一些圖層合并或拼合起來。向下合并：將當(dāng)前圖層和下一個圖層合并，并將合并的效果添加到下個圖層上。拼合可見圖層：將所有可見圖層合并，并將合并的效果添加到當(dāng)前圖層或背景層上。隱藏圖層沒有變化。拼合圖像：將所有可見圖層合并，并將合并的效果添加到背景層上。隱藏圖層從圖層中刪除。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層（4）圖層組可以組織和管理圖層。使用組來按邏輯順序排列圖層，并減輕圖層面板中的雜亂情況。單擊圖層面板底部的“創(chuàng)建新組”按鈕可以為圖層添加圖層組。（5）圖層蒙板圖層蒙板的作用是顯示或隱藏圖層的部分圖像并顯示下面的圖層。使用黑色畫筆在圖層蒙板上涂抹，可以在不更改圖像的情況下，隱藏圖層的部分圖像。使用白色畫筆在圖層蒙板上涂抹，可以在不更改圖像的情況下，顯示圖層的部分圖像。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層（6）圖層樣式圖層樣式可以產(chǎn)生多種圖層特效，例如投影、發(fā)光、斜面和浮雕等，利用這些效果，可以迅速改變圖層內(nèi)容的外觀。執(zhí)行“圖層”|“圖層樣式”命令，或在圖層面板中單擊“添加圖層樣式”按鈕，或雙擊該圖層（在圖層名稱或縮覽圖的外部）添加各種樣式，對話框的左側(cè)是圖層樣式的類型，右側(cè)是相對應(yīng)樣式的參數(shù)設(shè)置。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層“圖層樣式”對話框2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介6.圖層投影：在圖層內(nèi)容的后面添加陰影。內(nèi)陰影：緊靠在圖層內(nèi)容的邊緣內(nèi)添加陰影，使圖層具有凹陷外觀。外發(fā)光和內(nèi)發(fā)光：添加從圖層內(nèi)容的外邊緣或內(nèi)邊緣發(fā)光的效果。斜面和浮雕：對圖層添加高光與陰影的各種組合。光澤：應(yīng)用創(chuàng)建光滑光澤的內(nèi)部陰影。顏色、漸變和圖案疊加：用顏色、漸變或圖案填充圖層內(nèi)容。描邊：使用顏色、漸變或圖案在當(dāng)前圖層上描畫對象的輪廓。它對于硬邊形狀（如文字）特別有用。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介7. 實例——制作花中寶貝效果（1）打開“寶貝.jpg”、“花.jpg”文件。（2）工具箱中選擇“移動工具”，將“寶貝”圖片拖到“花”圖片上，如左圖所示。（3）單擊圖層面板底部的“添加圖層蒙版”按鈕，為“圖層1”添加“圖層蒙板”，如右圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.2網(wǎng)頁圖形圖像處理工具簡介7. 實例——制作花中寶貝效果

（4）前景色設(shè)置為黑色#000000，工具箱中選擇“畫筆工具”，根據(jù)需要調(diào)整畫筆直徑大小60px，硬度0%，在“圖層蒙板”上涂抹寶貝以外的圖像，可以看到寶貝以外的圖像被圖層蒙板遮罩。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例網(wǎng)站Logo也稱為網(wǎng)站標(biāo)志，網(wǎng)站標(biāo)志應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)容以及文化內(nèi)涵和理念。網(wǎng)站Logo在設(shè)計好之后，除了有觀賞價值之外，還要能夠顯示出本身的內(nèi)容，并具有實用性、易于識別。網(wǎng)站Logo與其它宣傳品不同，設(shè)計好之后，一般情況下都不會改動。下面介紹創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）執(zhí)行“視圖”|“標(biāo)尺”命令，顯示出標(biāo)尺，鼠標(biāo)移動到標(biāo)尺的原點位置，拖曳鼠標(biāo)，重新設(shè)置原點位置。鼠標(biāo)移動到標(biāo)尺上，拖出標(biāo)尺輔助線。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（3）設(shè)置前景色為#013399，背景色為白色#ffffff，工具箱中選擇“橢圓工具”，按【shift】鍵繪制正圓形。將“圖層1”重命名為“圓1”。（4）在圖層面板上拖動“圓1”圖層到“創(chuàng)建新圖層”按鈕上，得到“圓1副本”圖層重命名為“圓2”，按【Ctrl+Del】組合鍵填充背景色。（5）執(zhí)行“編輯”|“變換”|“縮放”命令，鼠標(biāo)移動到四個角的任意一個控制點上，按【Shift+Alt】組合鍵對“圓2”縮放到96%，或在選項卡欄W和H后的數(shù)值框直接輸入96%。（6）在圖層面板上拖動“圓2”圖層到“創(chuàng)建新圖層”按鈕上，復(fù)制得到“圓2副本”圖層重命名為“圓3”，按【Alt+Del】組合鍵填充前景色。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（7）同第（5）步，對“圓3”等比縮放到97.9%。（8）在圖層面板上拖動“圓3”圖層到“創(chuàng)建新圖層”按鈕上，復(fù)制得到“圓3副本”圖層重命名為“圓4”，按【Ctrl+Del】組合鍵填充前景色。（9）同第（5）步，對“圓4”等比縮放到98.6%。（10）在圖層面板上拖動“圓4”圖層到“創(chuàng)建新圖層”按鈕上，復(fù)制得到“圓4副本”圖層重命名為“圓5”，按【Alt+Del】組合鍵填充前景色。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（11）同第（5）步，對“圓5”等比縮放到71.3%，得到如左圖所示。（12）圖層面板上，新建“組1”，重命名為“圓”，將圖層“圓1”到圖層“圓5”拖到“圓”的組中，便于圖層管理，如右圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（13）工具箱中選擇“鋼筆工具”，選項卡欄中選擇“路徑”，在路徑面板上新建“路徑1”，繪制如左圖所示的書的右半邊路徑。（14）工具箱中選擇“路徑選擇工具”，選擇左圖所示路徑，按【Alt】鍵拖動鼠標(biāo)復(fù)制該路徑，執(zhí)行“編輯”|“變換路徑”|“水平翻轉(zhuǎn)”命令，與右邊的路徑對齊，如右圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（15）工具箱中選擇“路徑選擇工具”，全選書的左右路徑，選項卡欄中選擇組合方式為“添加到形狀區(qū)域”，將書的左右路徑組合，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（16）工具箱中選擇“鋼筆工具”，選項卡欄中選擇“路徑”，當(dāng)前路徑為“路徑1”，繪制如圖所示的字母DC和星星。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（17）圖層面板上，新建“圖層1”，重命名為“帆船”。（18）在路徑面板上選擇“路徑1”，在彈出菜單中選擇“填充路徑”命令，彈出“填充路徑”對話框，單擊【確定】按鈕，填充效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（19）工具箱中選擇“橢圓工具”，選項卡欄中選擇“路徑”，在路徑面板上新建“路徑2”。按【shift】鍵繪制正圓形路徑，位置與其它圓形中心點對齊。（20）工具箱中選擇“文字工具”，

將鼠標(biāo)放在圓形“路徑2”上變成時單擊，

這時文字就會沿著“路徑2”進(jìn)行排列，

輸入文字，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.3

網(wǎng)站Logo設(shè)計實例創(chuàng)建本教材實例網(wǎng)站Logo的操作步驟。（21）執(zhí)行“文件”|“存儲”命令，文件名：logo，在“文件類型”中分別選擇gif和psd兩種格式保存該文件。（22）設(shè)置前景色為#e9186c，更改圖標(biāo)顏色，效果如圖所示。

2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

Banner也稱為橫幅廣告，是互聯(lián)網(wǎng)廣告中最基本的廣告形式。網(wǎng)站Banner可以位于網(wǎng)頁頂部、中部或底部的任意一處?？梢允荊IF、JPG等格式的圖像文件，同時還可使用Java等語言使其產(chǎn)生交互性，用Shockwave等插件工具增強表現(xiàn)力。二級頁面Banner最終效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

二級頁面Banner具體的操作步驟。（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）執(zhí)行“視圖”|“標(biāo)尺”命令，顯示出標(biāo)尺，鼠標(biāo)移動到標(biāo)尺上，在圖像的中間位置拖出標(biāo)尺輔助線。（3）工具箱中選擇“鋼筆工具”，在路徑面板上新建“路徑1”，繪制路徑。（4）新建“圖層1”，設(shè)置前景色為#e4fd7e，填充路徑效果如圖所示。

2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

二級頁面Banner具體的操作步驟。（5）工具箱中選擇“鋼筆工具”，在路徑面板上新建“路徑2”，繪制路徑。在圖層面板上新建“圖層2”，設(shè)置前景色為#f68e15，填充“路徑2”。填充效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

二級頁面Banner具體的操作步驟。（6）工具箱中選擇“鋼筆工具”，在路徑面板上新建“路徑3”，繪制路徑。新建“圖層3”，工具箱中選擇“漸變工具”，編輯漸變色，選擇直線方式填充漸變色，方向從左到右，填充效果如圖所示。

2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

二級頁面Banner具體的操作步驟。（7）圖層面板上新建“圖層4”，工具箱中選擇“橢圓形選框工具”，按【shift】鍵繪制正圓形選區(qū)，在選區(qū)中填充白色，調(diào)整圖層4的不透明度。（8）同理繪制其它正圓形選區(qū)，填充白色并調(diào)整圖層的不透明度，效果如圖所示。

2.2網(wǎng)頁圖像設(shè)計2.2.4

網(wǎng)站Banner設(shè)計實例

二級頁面Banner具體的操作步驟。（9）設(shè)置前景色為#90090f，工具箱中選擇“文字工具”，輸入文字。（10）執(zhí)行“文件”|“存儲”命令，文件名：banner，擴展名：jpg，單擊“保存”按鈕。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例導(dǎo)航欄是組成網(wǎng)頁的元素之一，它的任務(wù)是幫助瀏覽者在網(wǎng)站上方便地查找信息。同時，合理的導(dǎo)航欄可以讓瀏覽者清楚自己瀏覽的網(wǎng)頁在網(wǎng)站中的位置。導(dǎo)航欄的樣式多樣，常見的是簡單的文字、圖片、按鈕，還可以是下拉菜單導(dǎo)航。1.按鈕設(shè)計按鈕在網(wǎng)頁中的應(yīng)用較廣泛，很多導(dǎo)航欄由按鈕組成，先介紹一下常見的按鈕設(shè)計方法。 【案例】水晶按鈕設(shè)計（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）新建“圖層1”，重命名為“按鈕”。工具箱中選擇“矩形工具”，選項卡欄選擇“填充像素”，繪制矩形圖像。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例1.按鈕設(shè)計【案例】水晶按鈕設(shè)計（3）雙擊“按鈕”圖層，彈出“圖層樣式”對話框選擇“漸變疊加”選項，對該選項進(jìn)行相應(yīng)的設(shè)置，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例1.按鈕設(shè)計 【案例】水晶按鈕設(shè)計（4）在對話框中的“樣式”列表框中選擇“內(nèi)發(fā)光”選項，對該選項進(jìn)行相應(yīng)的設(shè)置，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例1.按鈕設(shè)計 【案例】水晶按鈕設(shè)計（5）在對話框中的“樣式”列表框中選擇“描邊”選項，對該選項進(jìn)行相應(yīng)的設(shè)置，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例1.按鈕設(shè)計 【案例】水晶按鈕設(shè)計（6）最終效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計網(wǎng)站中的導(dǎo)航欄在各個頁面中的位置基本上是固定的。導(dǎo)航欄常見的位置一般有4種：在網(wǎng)頁的左側(cè)、右側(cè)、頂部、底部。在同一頁面上出現(xiàn)多種導(dǎo)航時就要合理地運用，協(xié)調(diào)一致。 下圖所示為本書網(wǎng)站首頁導(dǎo)航欄，網(wǎng)站首頁導(dǎo)航欄全部是文字鏈接，只需在Dreamweaver制作網(wǎng)頁時直接輸入文字即可。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計如圖所示為網(wǎng)站二級頁面左側(cè)導(dǎo)航欄，設(shè)計左側(cè)導(dǎo)航欄的具體操作步驟如下。（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）新建“圖層1”，工具箱中選

“單行選框工具”，創(chuàng)建單行選區(qū)。（3）設(shè)置前景色為#87c1ea，

背景色為白色#ffffff，選擇“漸變工具”，

選擇“前景色到背景色的漸變”，以直線方

式從左到右填充漸變色。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計左側(cè)導(dǎo)航欄具體操作步驟如下。（4）工具箱中選擇“矩形選框工具”，選項卡欄中樣式：固定大小，寬度：160px，高度：2px。在文檔上創(chuàng)建矩形選區(qū)，如圖所示。（5）執(zhí)行“編輯”|“定義圖案”命令，彈出“圖案名稱”對話框，單擊按鈕。（6）單擊圖層面板上的按鈕，新建“圖層2”。工具箱中選擇“油漆桶工具”，填充該圖案。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計左側(cè)導(dǎo)航欄具體操作步驟如下。（7）工具箱中選擇“單列選框工具”，在文檔的最右邊創(chuàng)建單列選區(qū)，按【Alt+Del】組合鍵填充前景色，如圖所示。（8）執(zhí)行“文件”|“存儲”命令，文件名：beijing2，擴展名：gif，單擊“保存”按鈕。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計左側(cè)導(dǎo)航欄具體操作步驟如下。（9）新建“圖層3”，工具箱中選擇“圓角矩形工具”，選項卡欄選擇“填充像素”，圓角半徑：4px。（10）當(dāng)前層為“圖層3”，

執(zhí)行“圖層”|“圖層樣式”|“投影”

命令，彈出“圖層樣式”對話框，

在對話框中進(jìn)行相應(yīng)的設(shè)置，如

圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計左側(cè)導(dǎo)航欄具體操作步驟如下。（11）在對話框中的樣式的“樣式”列表框中選擇“斜面和浮雕”選項，在對話框中進(jìn)行相應(yīng)的設(shè)置，

如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.5網(wǎng)頁按鈕和導(dǎo)航欄設(shè)計實例2.導(dǎo)航欄設(shè)計左側(cè)導(dǎo)航欄具體操作步驟如下。（12）單擊【確定】按鈕，設(shè)置樣式后的效果如圖所示。（13）執(zhí)行“文件”|“存儲為”命令，文件名：beijing1，擴展名：gif，單擊“保存”按鈕。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例文字是網(wǎng)頁重要組成元素之一，Photoshop能夠制作網(wǎng)頁上的需要的各種特效文字。文字設(shè)計時應(yīng)遵循以下原則：（1）可讀性文字的主要功能就是給瀏覽者提供信息，因此，在設(shè)計中文字應(yīng)避免繁雜零亂，應(yīng)使人容易認(rèn)識，并且更好的表達(dá)作者的意圖、設(shè)計的主題和構(gòu)想。（2）賦予文字個性文字的設(shè)計與作品的風(fēng)格相一致，更不能相沖突，否則，就會破壞文字效果。一般說來，文字的風(fēng)格大約可以分為端莊秀麗、簡潔爽朗、現(xiàn)代感強、歡快輕盈、蒼勁古樸等。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例（3）美感性文字作為網(wǎng)頁的組成要素之一，除了給瀏覽者提供信息之外，還能夠給人以美的感受。良好的字型設(shè)計，能使人感到愉快。否則，會讓瀏覽者視而不見。（4）創(chuàng)造性可以根據(jù)網(wǎng)站主題的要求，設(shè)計出獨具特色的文字，給人以別開生面的視覺感受，更好地傳達(dá)網(wǎng)頁的內(nèi)容。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例二級頁面特效文字效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）執(zhí)行“視圖”|“標(biāo)尺”命令，顯示出標(biāo)尺。（3）設(shè)置前景色為#75abff,背景色為白色#ffffff，新建“圖層1”，參考2.2.4節(jié)中導(dǎo)航欄背景設(shè)計，制作出如圖所示圖像。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（4）當(dāng)前層為“圖層1”，為“圖層1”添加圖層蒙板。（5）工具箱中選擇“圓角矩形工具”。（6）設(shè)置前景色為白色#ffffff，在圖層蒙板上繪制圓角矩形，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（7）新建“圖層2”，工具箱中選擇“橢圓形選框工具”，按【Shift】鍵繪制正圓形選區(qū)，設(shè)置前景色為#75abff，按【Alt+Del】組合鍵填充到選區(qū)中。按【Ctrl+D】組合鍵取消選區(qū)。（8）將“圖層2”用鼠標(biāo)拖至圖層面板上的新建按鈕上，得到“圖層2副本”，將該圖層的不透明度調(diào)到70%。（9）同步驟（8），設(shè)置“圖層2副本2”的圖層不透明度為35%，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（10）執(zhí)行“文件”|“保存”命令，文件名：bankuai，格式：jpg，單擊“保存”按鈕。（11）下面制作文字效果。執(zhí)行“文件”|“新建”命令，新建文檔。（12）設(shè)置前景色為#da1982，工具箱中選擇“文字工具”，輸入文字，選項卡欄中選擇變形文字，為文字添加變形效果，參數(shù)設(shè)置如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（13）執(zhí)行“圖層”|“柵格化”|“文字”命令。（14）執(zhí)行“圖層”|“圖層樣式”|“描邊”命令，彈出“圖層樣式”對話框，在對話框中進(jìn)行相應(yīng)的設(shè)置，如圖所示。最終效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.6

網(wǎng)頁中的文字設(shè)計實例設(shè)計步驟。（15）執(zhí)行“文件”|“存儲”命令，文件名：mingzi，格式：gif，單擊“保存”按鈕。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例繪制草圖是為了能夠得到整體的頁面結(jié)構(gòu)，制作者通過網(wǎng)頁草圖與客戶進(jìn)行溝通，從而確定網(wǎng)站外觀、功能和一些特效，知道客戶這樣能減滿意為止，這樣能減少麻煩。同時如果在設(shè)計頁面階段還沒有完全確定整個網(wǎng)站的功能，那么在以后的開發(fā)過程中會浪費很長時間去修改，并且從頁面設(shè)計到網(wǎng)頁制作這個過程是不可逆的過程。同時草圖文件還可以作為Dreamweaver中的跟蹤圖像，使用軟件設(shè)計草圖，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例

2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（1）執(zhí)行“文件”|“新建”命令，新建文檔。（2）打開“sky.jpg”、“建筑.jpg”文件。（3）工具箱中選擇“移動工具”，將“sky.jpg”文件拖到新建“網(wǎng)頁草圖”文件上，圖層重命名為“天空”。將“建筑.jpg”文件拖到新建“網(wǎng)頁草圖”文件上，圖層重命名為“建筑”。（4）當(dāng)前層為“建筑”圖層，按【Ctrl+T】組合鍵調(diào)整圖像大小，按【Enter】確定。（5）為“建筑”圖層添加圖層蒙版。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（6）工具箱中設(shè)置“前景色/背景色”為默認(rèn)的“黑色/白色”（#000000/#ffffff）。工具箱中選擇“漸變工具”，選擇“前景色到背景色的漸變”，在“建筑”圖層蒙版上從左到右拖動鼠標(biāo)填充。（7）工具箱中選擇“畫筆工具”，前景色黑色#000000，畫筆直徑70px，硬度0%，在“建筑”圖層蒙板上涂抹對圖像遮罩，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（8）打開“人物.gif”文檔，執(zhí)行“圖像”|“模式”|“RGB顏色”命令，將圖像轉(zhuǎn)換成RGB顏色模式。（9）工具箱中選擇“移動工具”，把“人物.gif”圖像拖動到“網(wǎng)頁草圖”文件上，該圖層重命名為“人物”。（10）打開images文件夾中的“l(fā)ogo.gif”文件。執(zhí)行“圖像”|“模式”|“RGB顏色”命令。（11）工具箱中選擇“移動工具”，把“l(fā)ogo.gif”圖像拖動復(fù)制到“網(wǎng)頁草圖”文件上，該圖層重命名為“Logo”。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（12）工具箱中選擇“文字工具”，輸入文字，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（13）圖層面板上，新建“組1”，重命名為“top”，并將除背景層以外的圖層拖動到“top”組中，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（14）圖層面板上，新建“組1”，重命名為“導(dǎo)航欄”。在“導(dǎo)航欄”組中新建“圖層1”重命名為“導(dǎo)航欄背景”，工具箱中選擇“矩形選框工具”，在“導(dǎo)航欄背景”圖層上創(chuàng)建矩形選區(qū)。（15）前景色設(shè)置為#f45209，按【Alt+Del】組合鍵填充前景色。按【Ctrl+D】組合鍵取消選區(qū)。（16）設(shè)置前景色為白色#ffffff，工具箱中選擇“文字工具”，輸入文字，效果如圖所示?！皘”與文字之間有一個空格。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（17）圖層面板上，新建“組1”，重命名為“主體”，新建“圖層1”重命名為“主體右”，執(zhí)行“視圖”|“標(biāo)尺”命令，顯示出標(biāo)尺線，并拖出標(biāo)尺輔助線。工具箱中選擇“矩形選框工具”，選項卡欄設(shè)置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū)與標(biāo)尺重合。（18）設(shè)置前景色為#4bb2f5，按【Alt+Del】組合鍵填充前景色，按【Ctrl+D】組合鍵取消選區(qū)，效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（19）工具箱中選擇“矩形選框工具”。選項卡欄設(shè)置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū)，如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4制作網(wǎng)站首頁草圖的具體操作步驟。（20）執(zhí)行“編輯”|“描邊”命令，單擊【確定】按鈕。效果如圖所示。2.2網(wǎng)頁圖像設(shè)計2.2.7網(wǎng)頁草圖設(shè)計實例下面介紹使用PhotoshopCS4