03網(wǎng)頁圖像制作

1、第3章 網(wǎng) 頁 圖 像 制 作,本章要介紹目前網(wǎng)頁圖像設(shè)計和處理中用得最多的兩個應(yīng)用軟件： 中文版Photoshop CS 中文版Fireworks MX 2004。 中文Photoshop CS是集設(shè)計、圖像處理和圖像輸出于一體的軟件，被廣泛應(yīng)用于Web圖像處理、藝術(shù)創(chuàng)作、插圖制作、影像合成、數(shù)碼照片處理及廣告燈箱設(shè)計等 Fireworks是Macromedia公司推出

2、的“網(wǎng)頁制作三劍客”之一，是專門針對網(wǎng)頁圖像設(shè)計和編輯的軟件，目前在業(yè)界已經(jīng)得到非常廣泛地應(yīng)用。,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)項目一 Photoshop CS處理網(wǎng)頁圖像 一、實訓(xùn)目的與要求 學(xué)習(xí)的目的是將原圖像（一個或幾個圖像）怎樣使用Photoshop CS處理、加工成我們所需要的圖像的方法，重點是掌握針對網(wǎng)頁圖像，而又便于在Photoshop CS中處理的技術(shù)。 本節(jié)中首先要掌握圖像的

3、一些基本知識；孰知中文版Photoshop CS圖像處理軟件的界面；掌握常用操作和使用該工具對圖像處理的方法。,第3章 網(wǎng) 頁 圖 像 制 作,二、實訓(xùn)預(yù)備知識1. 圖像基礎(chǔ)知識 1）圖像的種類 ①位圖圖像：也叫作柵格圖像，是用小方形網(wǎng)格(柵格)即像素來代表圖像，每個像素都被分配一個特定位置和顏色值。位圖圖像與分辨率有關(guān) ②矢量圖形：是由稱謂矢量的數(shù)學(xué)對象所定義的直線和曲線組成的，矢量圖形與分辨率

4、無關(guān)，也就是說用戶可以將它縮放到任意大小和以任意分辨率輸出。,第3章 網(wǎng) 頁 圖 像 制 作,2）像素和顏色深度 像素：是圖像的基本組成單位。像素是一個有顏色的小方塊，圖像由許多小方塊組成，似行列的方式排列。 顏色深度：是指圖像中可用的顏色數(shù)量，也稱作像素深度或位深度，它用來度量在圖像中有多少顏色信息來顯示或打印像素。較大的顏色深度意味著數(shù)字圖像中有更多的顏色和更精確的顏色表示。,第3章 網(wǎng) 頁

5、圖 像 制 作,3）圖像大小 ①像素尺寸：位圖圖像高度和寬度的像素數(shù)目。 ②屏幕顯示大?。簣D像在屏幕中顯示的大小取決于圖像的像素尺寸、顯示縮放比率、顯示器尺寸以及顯示器分辨率設(shè)置等因素。 4）圖像分辨率 指圖像中每單位打印長度顯示的像素數(shù)目，通常用像素／英寸(ppi)表示。相同尺寸的圖像分辨率越高，單位長度上的像素數(shù)越多，圖像越清晰。,第3章 網(wǎng) 頁 圖 像 制 作,5）顏色模式 顏色模式在Ph

6、otoshop中可以確定圖像中能顯示的顏色，還可以影響圖像的通道數(shù)和文件大小。 ①位圖模式：使用兩種顏色值即黑色和白色來表示圖像中的像素，又稱為黑白圖像或一位圖像。不能制作出色彩豐富的圖像。 ②灰度模式：該模式的圖像可以表現(xiàn)出豐富的色調(diào)。圖像中每個像素有一個0(黑)～255(白)之間的亮度值，可以使用最多256級灰度。,第3章 網(wǎng) 頁 圖 像 制 作,③RGB模式：是計算機存儲的最常用的一種顏色模式。絕大部分的可見光譜可以

7、用紅(R)、綠(G)和藍(B)三種色光按不同比例和強度的混合來表示，該模式的圖像只使用RGB三種顏色，并為這三種顏色分配從0～255的強度值。 ④CMYK模式：是一種印刷模式，與RGB模式不同的是，RGB是加色法，CMYK是減色法。,第3章 網(wǎng) 頁 圖 像 制 作,黑白位圖圖像 灰度圖像 RGB圖像 CMYK模式圖像,,,,,第3章 網(wǎng) 頁 圖 像 制 作,6）圖像文件格式 ①BMP(

8、Bit Map Picture) BMP圖像文件是一種Windows標(biāo)準的點陣式圖形文件格式，支持RGB、索引顏色、灰度和位圖顏色模式，但不支持Alpha通道。 ②TIFF(Tagged Image File Format) TIFF(標(biāo)記圖像文件格式)用于在應(yīng)用程序之間和計算機平臺之間交換文件。TIFF是一種靈活的位圖圖像格式，實際上被所有繪畫、圖像編輯和頁面排版應(yīng)用程序所支持。,第3章 網(wǎng) 頁 圖 像 制 作

9、,③GIF(Graphics Interchange Format) GIF(圖形交換格式)是CompuServer提供的一種圖形格式，是一種LZW壓縮格式。GIF格式還支持灰度模式、動畫格式、透明背景，但不支持Alpha通道。④JPEG格式(Joint Photographic Experts Group) JPEG(聯(lián)合圖片專家組)是目前所有格式中壓縮率最高的格式。目前絕大多數(shù)彩色和灰度圖像都使用JPEG格式壓縮圖

10、像，當(dāng)對圖像的精度要求不高而存儲空間又有限時，JPEG是一種理想的壓縮方式。,第3章 網(wǎng) 頁 圖 像 制 作,⑤PSD格式(Photoshop格式) 是Adobe公司開發(fā)的圖像處理軟件Photoshop中自建文件的標(biāo)準格式。PSD格式存取速度比其他格式快很多，功能也很強大，可存放圖層、通道、遮罩等多種設(shè)計草稿。 ⑥PNG格式（Fireworks格式） PNG（Portable Network Graphic）便

11、攜式網(wǎng)絡(luò)圖像是由W3C針對Web圖像設(shè)計而開發(fā)的，能夠以無損壓縮方式較高地壓縮圖像，在32位色深時支持1～16位的Alpha通道。,第3章 網(wǎng) 頁 圖 像 制 作,7）文件壓縮 許多圖像文件格式使用壓縮技術(shù)以減少位圖圖像數(shù)據(jù)所需的存儲空間。 無損技術(shù)對圖像數(shù)據(jù)進行壓縮時不去掉圖像細節(jié)。 有損技術(shù)通過去掉圖像細節(jié)來壓縮圖像。,第3章 網(wǎng) 頁 圖 像 制 作,RLE(行程長度受限編碼)：是一種無損壓縮技術(shù)

12、。 LZW(Lemple-Zif-Wdlch)：是一種無損壓縮技術(shù)，這種技術(shù)最適合用于壓縮包含大面積單色彩的圖像。 CCITT編碼：是一種黑白圖像無損壓縮技術(shù)的系列，CCITT是“國際電話電報咨詢委員會”的法語拼寫的縮寫。 ZIP編碼：是一種無損壓縮技術(shù)，為PDF文件格式所支持。對于壓縮包含大面積單色彩的圖像是最有效的。 PEG(聯(lián)合圖片專家組)：是一種有損壓縮技術(shù)，JPEG壓縮為連續(xù)色調(diào)

13、的圖像，為照片提供最好的效果。,第3章 網(wǎng) 頁 圖 像 制 作,8）圖像捕捉常用軟件(1)Super Capture Super Capture(超級屏捕)是一款非常優(yōu)秀的Windows專業(yè)圖像捕捉軟件，可以將超出屏幕范圍的超長網(wǎng)頁存到一個文件中；特別值得一提的是，它還可以輕松抓取Windows XP/Windows 2000下的所有特殊菜單(目前還沒有其他一款抓屏軟件可以做到),第3章 網(wǎng) 頁 圖 像 制 作,(

14、2)Hyper Snap 該軟件提供專業(yè)級影像效果，也可以輕松地抓取屏幕畫面。支持抓取使用DirectX技術(shù)的游戲畫面及DVD，并且采用新的去背景功能，將抓取后的圖形去除不必要的背景；其預(yù)覽功能可以正確地顯示出該圖打印出來時會是什么模樣。2. 圖像軟件Photoshop CS 的界面 1）Photoshop的工作界面,,,,工具箱,第3章 網(wǎng) 頁 圖 像 制 作,3. 中文Photoshop CS基本操作 1)創(chuàng)建

15、新圖像文件 2)打開圖像文件 3)瀏覽圖像文件 4)保存圖像文件 5)關(guān)閉文件 6)恢復(fù)圖像文件 7)屏幕的顯示模式 8)使用導(dǎo)航器控制圖像顯示,第3章 網(wǎng) 頁 圖 像 制 作,9)設(shè)置圖像大小 Photoshop CS中可以根據(jù)實際需要調(diào)整圖像的大小，但調(diào)整尺寸后，會影響圖像的質(zhì)量。10)設(shè)置畫布的大小 Photoshop CS中可以根據(jù)需要來調(diào)整畫布的大小。注意： 一定要搞清楚設(shè)

16、置圖像大小和設(shè)置畫布的大小的區(qū)別,4．圖像處理,,,原圖像 炭筆素描效果圖,,,嘴角局部液化效果圖 雙眼局部馬賽克效果圖,第3章 網(wǎng) 頁 圖 像 制 作,5．圖像羽化 羽化是指柔化選區(qū)的邊界，使選區(qū)的邊界的一個柔和的過渡效果，羽化值越大，過渡效果越明顯，邊界越模糊。6．

17、Photoshop的圖層 圖層的基本概念 在中文Photoshop CS中，將許多圖層想象成一疊透明的紙，在一個層內(nèi)沒有圖像的地方，可以透過該層看到底下的圖層。圖層可以使用戶在不破壞其他元素的情況下，對其中的某一個元素進行處理。也可以通過改變圖層的疊放次序或?qū)傩詠砀淖円环鶊D像的合成模式，以達到理想的效果。,第3章 網(wǎng) 頁 圖 像 制 作,1）圖層調(diào)板 Photoshop打開或新建一個圖像文件，得到如圖所示圖層調(diào)板

18、,第3章 網(wǎng) 頁 圖 像 制 作,2）圖層菜單(1)新建 背景圖層    圖層組 圖層組來自鏈接的 通過拷貝的圖層l         通過剪切的圖層,第3章 網(wǎng) 頁 圖 像 制 作,(2)復(fù)制圖層 該命令用來將當(dāng)前層復(fù)制到當(dāng)前圖像或者其他圖像中。 (3)刪除圖層

19、 該命令包含三個刪除圖層子命令：“圖層”表示刪除當(dāng)前圖層；“鏈接圖層”表示刪除具有鏈接關(guān)系的圖層：“隱藏圖層”表示刪除所有隱藏的圖層。,第3章 網(wǎng) 頁 圖 像 制 作,(4)圖層屬性 該命令用來設(shè)置當(dāng)前圖層的兩個參數(shù)：圖層名稱與眼睛圖標(biāo)格和操作狀態(tài)格的顏色。 (5)圖層樣式 該命令用于設(shè)置圖層的各種樣式，每種樣式都能使圖像產(chǎn)生神奇的效果。圖層樣式包括混合模式和其他樣式，圖層樣式的內(nèi)容在下一節(jié)介紹。 (6)新填

20、充圖層 在填充層中可以填充純色、漸變和圖案三種內(nèi)容。,第3章 網(wǎng) 頁 圖 像 制 作,(7)新調(diào)整圖層 調(diào)整圖層主要用來控制色調(diào)和色彩的調(diào)整，它存放的是圖像的色調(diào)和色彩，而不存放圖像。 (8)更改圖層內(nèi)容 用來更改調(diào)整層類型、設(shè)置圖層內(nèi)容選項和更改填充層內(nèi)容等功能。允許直接將一種圖層內(nèi)容改成另一種圖層內(nèi)容。 (9)圖層內(nèi)容選項 該命令用來設(shè)置圖層參數(shù)。,第3章 網(wǎng) 頁 圖 像 制 作,(

21、10)文字 用來編輯文字圖層的文本，如果當(dāng)前層不是文本圖層，則該命令無效。 (11)柵格化 用于文字、圖形、填充等類型圖層的柵格化，即將特殊的圖層轉(zhuǎn)化為普通圖層。 (12)基于圖層的切片 以當(dāng)前圖層為基礎(chǔ)建立一個切片。,第3章 網(wǎng) 頁 圖 像 制 作,(13)圖層蒙版 圖層蒙版的運用在Photoshop中占有很重要的地位，它可以控制圖層中的不同區(qū)域如何被隱藏或者顯示，在多個圖像的拼合處理中特別有

22、用。 圖層蒙版采用灰度區(qū)域來表示透明度，例如白色區(qū)域為蒙版作用范圍，而黑色區(qū)域則為透明區(qū)域。 要新建圖層蒙版，首先選擇要創(chuàng)建蒙版的圖層，然后選擇菜單[添加圖層蒙版]命令。,第3章 網(wǎng) 頁 圖 像 制 作,(14)鏈接 將相關(guān)的圖層鏈接起來是常用的圖層操作之一，這樣可以將某些圖層操作同時作用于具有鏈接關(guān)系的所有圖層。 (15)合并圖層 主要有：向下合并、合并可見圖層、拼合圖層等。 (16)修邊

23、 該命令用于修整在圖像的復(fù)制、粘貼等操作過程中，產(chǎn)生的圖像邊緣雜色或雜點等。,第3章 網(wǎng) 頁 圖 像 制 作,3)圖層樣式 圖層樣式使得利用圖層處理圖像更加方便，用戶可以使用Photoshop提供的圖層樣式進行一些參數(shù)設(shè)置后，能在圖像上制作出特殊效果。 (1)圖層樣式設(shè)置（2）應(yīng)用圖層樣式 “金色池塘”文字應(yīng)用“斜面和浮雕”圖層樣式后圖像的效果圖,第3章 網(wǎng) 頁 圖 像 制 作,,第3章 網(wǎng)

24、頁 圖 像 制 作,(3)修改圖層樣式 (4)復(fù)制圖層樣式 (5)刪除圖層樣式,第3章 網(wǎng) 頁 圖 像 制 作,7．摳圖技巧 我們對圖像的處理往往是局部的，這就要求我們能夠精確地選?。〒福┏鲞@些部分，摳圖在Photoshop中首先進行的是精確定位選擇區(qū)域，這將直接影響到圖像處理的優(yōu)劣。Photoshop為此提供了很多圖像選取工具，如：選框工具、套索工具、魔術(shù)棒工具、鉛筆和鋼筆工具等，還提供了一些與建立和編輯選區(qū)相關(guān)的命

25、令。,第3章 網(wǎng) 頁 圖 像 制 作,1)使用選框工具建立選區(qū)2)使用套索工具建立選區(qū) (1)套索工具 (2)多邊形套索工具 (3)磁性套索工具3)使用魔術(shù)棒工具建立選區(qū)4)使用色彩范圍建立選區(qū),第3章 網(wǎng) 頁 圖 像 制 作,5)選區(qū)修改 (1)先把選區(qū)轉(zhuǎn)換成路徑，再用“鋼筆”工具來改變路徑，直至符合要求后再將路徑轉(zhuǎn)換回選區(qū)。 (2)使用快速蒙版 6)選區(qū)操作 (1)移動選區(qū) (

26、2)復(fù)制選區(qū) (3)保存選區(qū),第3章 網(wǎng) 頁 圖 像 制 作,三、實訓(xùn)步驟實訓(xùn)1 圍棋圖像“搏奕”標(biāo)題制作 1)棋盤制作 (1) 新建一個文件名為圍棋；圖像寬度和高度均為373像素 (2)圖像色彩接近木質(zhì)的深黃色 (3)制作木紋效果，分以下四步進行： ①在木質(zhì)黃色上創(chuàng)建紋理 ②將顆粒連貫紋理,第3章 網(wǎng) 頁 圖 像 制 作,③進一步調(diào)整顏色 ④使棋盤的木紋有扭曲

27、效果 (4)畫棋盤線， ①為了便于畫棋盤線，先預(yù)設(shè)網(wǎng)格參考線 ②復(fù)制一個圖層，在該圖層中畫棋盤線 (5)設(shè)置棋盤線顯示木刻效果2）設(shè)計黑白棋子 黑白棋子不能簡單畫圓，填充黑色和白色，要制作有立體燈光效果。制作步驟如下：,第3章 網(wǎng) 頁 圖 像 制 作,(1)新建2個圖層，分別取名為黑棋和白棋 (2)做黑子棋毛坯 (3)為使棋子添加燈光效果 (4)做白子棋毛坯 (5

28、)提取黑色圍棋子 (6)提取白色圍棋子 (7)復(fù)制圍棋子 3)輸入漢字 4)整體添加燈光陰影效果,第3章 網(wǎng) 頁 圖 像 制 作,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)2 按鈕制作1)利用樣式制作按鈕 （1）新建一個寬600像素，高400像素的圖像文件 (2)新建圖層 （3）圖層上畫出一個矩形選區(qū) （4）點擊“樣式”調(diào)板 （5）選擇“日落天空” （6）按鈕上輸

29、入文字“提交” 按鈕如右圖所示,,第3章 網(wǎng) 頁 圖 像 制 作,2)載入樣式 （1）單擊“樣式”調(diào)板右上方的按鈕，彈出菜單，選擇[載入樣式]命令 (2)在 “載入樣式”對話框中選擇[按鈕]載入 （3）選擇“樣式”調(diào)板中 的不同樣式能制作 不同效果的按鈕 不同效果按鈕如右圖所示,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)3 圖像邊框制作 在網(wǎng)頁中有許

30、多圖像，有些圖像往往需要給它加上邊框才能與背景或其它圖像區(qū)別,,,,未作邊框的圖像 作了紅色邊框的圖像,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)4 摳圖技巧一 將下列圖三幅圖像利用摳圖、渲染等方法制作合成圖，其中使用了魔術(shù)棒工具和磁性套索工具的摳圖技巧,,,第3章 網(wǎng) 頁 圖 像 制 作,,,,,,,,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)5 摳圖技

31、巧二 在實訓(xùn)4中利用了磁性套索工具和魔術(shù)棒工具進行摳圖，它們使用環(huán)境相似，即圖像邊緣的顏色或背景顏色單一，當(dāng)圖像邊緣的顏色或背景顏色豐富多彩時，使用這兩個工具就很難正確摳出圖像，特別是一些細節(jié)部分，如試用“抽出”的方法，抽出圖像，再用“歷史記錄畫筆工具”進行修改，能較準確地摳出圖像。 下頁圖像合成中的女孩就使用了這種摳圖技巧,,,,,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)項目二 Firework MX2004處理網(wǎng)

32、頁圖像一、實訓(xùn)目的與要求 本節(jié)中首先要掌握Fireworks MX 2004圖像處理軟件的界面；掌握該軟件的常用操作；圖象處理；圖像邊框制作及下拉菜單的制作。二、 實訓(xùn)預(yù)備知識 1. 圖像軟件Fireworks MX 2004的界面,第3章 網(wǎng) 頁 圖 像 制 作,工 具 箱,第3章 網(wǎng) 頁 圖 像 制 作,2．中文版Fireworks MX 2004工作模式和首選參數(shù) 1) 工作模式 (1)矢量和位

33、圖圖形 (2)矢量模式和位圖模式 2)首先參數(shù)的設(shè)置 (1)設(shè)置“常規(guī)”參數(shù)的功能如下： (2)設(shè)置“編輯”參數(shù) (3) 設(shè)置“啟動并編輯”選項卡 (4)設(shè)置“文件夾”參數(shù),第3章 網(wǎng) 頁 圖 像 制 作,(5)設(shè)置“導(dǎo)入”參數(shù)3．中文版Fireworks MX 2004基本操作 1)設(shè)置畫布 (1)更改畫布尺寸 (2)更改畫布顏色 (3)修剪畫布 (4)調(diào)整畫布 (5)

34、旋轉(zhuǎn)畫布,第3章 網(wǎng) 頁 圖 像 制 作,2)設(shè)置圖像大小 3）文檔的基本操作 (1)創(chuàng)建新文檔 (2)打開文檔 (3)保存文檔,第3章 網(wǎng) 頁 圖 像 制 作,三、實訓(xùn)步驟實訓(xùn)1 圖像線框的制作 1) 在Fireworks MX 2004中打開要制作一象素虛線框圖像。 2) 在工具箱選擇“矩形”工具，在圖像工作區(qū)下方“矩形”工具屬性面板作如圖所示的屬性設(shè)置：。,,第3章 網(wǎng) 頁

35、 圖 像 制 作,3)將設(shè)置好的“矩形”工具在圖像邊緣畫出矩形，在菜單欄單擊[修改]→[向下合并]命令合并“層”，得到如圖所示，一像素虛線線框。,,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)2 圖像中下拉菜單制作 1)打開要制作下拉菜單的圖片或頁面。 2)點擊工具箱中的“矩形熱點”工具畫出下拉菜單熱區(qū),,,第3章 網(wǎng) 頁 圖 像 制 作,3) 在菜單欄單擊[修改]→[彈出菜單]→[添加彈出菜單]命令，彈出“彈出菜單編輯器”

36、對話框，,,第3章 網(wǎng) 頁 圖 像 制 作,(1)“內(nèi)容”選項卡的“文本”項填入下拉菜單中各子菜單的名稱； “鏈接”項填入各子菜單要超鏈接的URL； “目標(biāo)”項填入各鏈接的內(nèi)容顯示在哪一類窗口中 (2)“外觀”選項卡各參數(shù)設(shè)置如下： “單元格”圖像； “彈出菜單對齊方式”垂直菜單； “字體”和“大小”根據(jù)各自的愛好； “單元格文字”居中； “彈起狀態(tài)”和“滑

37、過狀態(tài)”指鼠標(biāo)選中和末選時子菜單條的狀態(tài)，根據(jù)愛好選擇不同的顏色和樣式。,第3章 網(wǎng) 頁 圖 像 制 作,(3) “高級”選項卡中進行“單元格”的寬度、高度、邊距、間距、邊框、陰影等設(shè)置。 (4) “位置”選項卡中進行彈出菜單的位置確定。 4)保存：在Fireworks MX 2004中，下拉菜單制作完后保存有2種方式： 一種是將它以擴展名為.pnd的常規(guī)保存； 一種是直接以網(wǎng)頁形式保存。,第3章

38、 網(wǎng) 頁 圖 像 制 作,以網(wǎng)頁形式保存的方法如下： (1) 在菜單欄單擊[文件]→[導(dǎo)出]命令，彈出“導(dǎo)出”對話框。 (2) “導(dǎo)出”對話框中的參數(shù)設(shè)置完后按“保存”鍵即完成保存,,第3章 網(wǎng) 頁 圖 像 制 作,實訓(xùn)3 摳圖 現(xiàn)有海豚騰空和小豬兩幅圖片，經(jīng)過Fireworks MX 2004的摳圖、擦圖、改變圖像大小等處理，將它成為一幅搞笑圖像，,3）,,,,看誰騰空高,第3章 網(wǎng) 頁