商業(yè)網(wǎng)頁設(shè)計與制作 03 網(wǎng)頁圖像制作

第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公司推出的“網(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é)中首先要掌握圖像的一些基本知識；孰知中文版Photoshop

CS圖像處理軟件的界面；掌握常用操作和使用該工具對圖像處理的方法。第3章網(wǎng)頁圖像制作二、實訓(xùn)預(yù)備知識1.

圖像基礎(chǔ)知識1）圖像的種類①位圖圖像：也叫作柵格圖像，是用小方形網(wǎng)格(柵格)即像素來代表圖像，每個像素都被分配一個特定位置和顏色值。位圖圖像與分辨率有關(guān)②矢量圖形：是由稱謂矢量的數(shù)學(xué)對象所定義的直線和曲線組成的，矢量圖形與分辨率無關(guān)，也就是說用戶可以將它縮放到任意大小和以任意分辨率輸出。第3章 網(wǎng)

頁

圖

像

制

作2）像素和顏色深度像素：是圖像的基本組成單位。像素是一個有顏色的小方塊，圖像由許多小方塊組成，似行列的方式排列顏色深度：是指圖像中可用的顏色數(shù)量，也稱作像素深度或位深度，它用來度量在圖像中有多少顏色信息來顯示或打印像素。較大的顏色深度意味著數(shù)字圖像中有更多的顏色和更精確的顏色表示。第3章 網(wǎng)

頁

圖

像

制

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

頁

圖

像

制

作5）顏色模式顏色模式在Photoshop中可以確定圖像中能顯示的顏色，還可以影響圖像的通道數(shù)和文件大小。①位圖模式：使用兩種顏色值即黑色和白色來表示圖像中的像素，又稱為黑白圖像或一位圖像。不能制作出色彩豐富的圖像。②灰度模式：該模式的圖像可以表現(xiàn)出豐富的色調(diào)。

圖像中每個像素有一個0(黑)～255(白)之間的亮度值，可以使用最多256級灰度。第3章 網(wǎng)

頁

圖

像

制

作③RGB模式：是計算機存儲的最常用的一種顏色模式。絕大部分的可見光譜可以用紅(R)、綠(G)和藍(B)三種色光按不同比例和強度的混合來表示，該模式的圖像只使用RGB三種顏色，并為這三種顏色分配從0～255的強度值。④CMYK模式：是一種印刷模式，與RGB模式不同的是，

RGB是加色法，CMYK是減色法。第3章 網(wǎng)

頁

圖

像

制

作黑白位圖圖像灰度圖像RGB圖像CMYK模式圖像第3章 網(wǎng)

頁

圖

像

制

作6）圖像文件格式①BMP(Bit

Map

Picture)BMP圖像文件是一種Windows標(biāo)準(zhǔn)的點陣式圖形文件格式，支持RGB、索引顏色、灰度和位圖顏色模式，但不支持Alpha通道。②TIFF(Tagged

Image

File

Format)TIFF(標(biāo)記圖像文件格式)用于在應(yīng)用程序之間和計算機平臺之間交換文件。TIFF是一種靈活的位圖圖像格式實際上被所有繪畫、圖像編輯和頁面排版應(yīng)用程序所支持。第3章 網(wǎng)

頁

圖

像

制

作③GIF(Graphics

Interchange

Format)GIF(圖形交換格式)是CompuServer提供的一種圖形

格式，是一種LZW壓縮格式。GIF格式還支持灰度模式、動畫格式、透明背景，但不支持Alpha通道。④JPEG格式(Joint

Photographic

Experts

Group)JPEG(聯(lián)合圖片專家組)是目前所有格式中壓縮率最高的格式。目前絕大多數(shù)彩色和灰度圖像都使用JPEG格式壓縮圖像，當(dāng)對圖像的精度要求不高而存儲空間又有限時，JPEG是一種理想的壓縮方式。第3章 網(wǎng)

頁

圖

像

制

作PSD格式(Photoshop格式)是Adobe公司開發(fā)的圖像處理軟件Photoshop中自建文件的標(biāo)準(zhǔn)格式。PSD格式存取速度比其他格式快很多，功能也很強大，可存放圖層、通道、遮罩等多種設(shè)計草稿。⑥PNG格式（Fireworks格式）PNG（Portable

Network

Graphic）便攜式網(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ù)。

LZW(Lemple-Zif-Wdlch)：是一種無損壓縮技術(shù)，這種技術(shù)最適合用于壓縮包含大面積單色彩的圖像。

CCITT編碼：是一種黑白圖像無損壓縮技術(shù)的系列，CCITT是“國際電話電報咨詢委員會”的法語拼寫的縮寫。ZIP編碼：是一種無損壓縮技術(shù)，為PDF文件格式所支持。對于壓縮包含大面積單色彩的圖像是最有效的。PEG(聯(lián)合圖片專家組)：是一種有損壓縮技術(shù)，JPEG壓縮為連續(xù)色調(diào)的圖像，為照片提供最好的效果。第3章網(wǎng)頁圖像制作8）圖像捕捉常用軟件(1)Super

CaptureSuper

Capture(超級屏捕)是一款非常優(yōu)秀的Windows專業(yè)圖像捕捉軟件，可以將超出屏幕范圍的超長網(wǎng)頁存到一個文件中；特別值得一提的是，它還可以輕松抓取Windows

XP/Windows

2000下的所有特殊菜單(目前

還沒有其他一款抓屏軟件可以做到)第3章 網(wǎng)

頁

圖

像

制

作(2)Hyper

Snap該軟件提供專業(yè)級影像效果，也可以輕松地抓取屏

幕畫面。支持抓取使用DirectX技術(shù)的游戲畫面及DVD，并且采用新的去背景功能，將抓取后的圖形去除不必

要的背景；其預(yù)覽功能可以正確地顯示出該圖打印出

來時會是什么模樣。2.圖像軟件Photoshop

CS的界面

1）Photoshop的工作界面標(biāo)題欄菜單欄工具屬性欄調(diào)板狀態(tài)欄工具箱圖像編輯窗口工具箱第3章 網(wǎng)

頁

圖

像

制

作中文Photoshop

CS基本操作

1)創(chuàng)建新圖像文件打開圖像文件瀏覽圖像文件保存圖像文件關(guān)閉文件恢復(fù)圖像文件屏幕的顯示模式使用導(dǎo)航器控制圖像顯示第3章 網(wǎng)

頁

圖

像

制

作設(shè)置圖像大小Photoshop

CS中可以根據(jù)實際需要調(diào)整圖像的大小，但調(diào)整尺寸后，會影響圖像的質(zhì)量。設(shè)置畫布的大小Photoshop

CS中可以根據(jù)需要來調(diào)整畫布的大小。注意：一定要搞清楚設(shè)置圖像大小和設(shè)置畫布的大小的區(qū)別4．圖像處理原圖像炭筆素描效果圖嘴角局部液化效果圖雙眼局部馬賽克效果圖第3章 網(wǎng)

頁

圖

像

制

作圖像羽化羽化是指柔化選區(qū)的邊界，使選區(qū)的邊界的一個柔和的過渡效果，羽化值越大，過渡效果越明顯，邊界越模糊。Photoshop的圖層圖層的基本概念在中文PhotoshopCS中，將許多圖層想象成一疊透明的紙，在一個層內(nèi)沒有圖像的地方，可以透過該層看到底下的圖層。圖層可以使用戶在不破壞其他元素的情況下，對其中的某一個元素進行處理。也可以通過改變圖層的疊放次序或?qū)傩詠砀淖円环鶊D像的合成模式，以達到理想的效果。第3章 網(wǎng)

頁

圖

像

制

作1）圖層調(diào)板Photoshop打開或新建一個圖像文件，得到如圖所示圖層調(diào)板圖層菜單圖層混合模式可見圖層當(dāng)前圖層圖層銷定選擇總體不透明度內(nèi)部不透明度圖層圖層操作按鈕透明標(biāo)識第3章網(wǎng)頁圖像制作2）圖層菜單

(1)新建背景圖層圖層組圖層組來自鏈接的l通過拷貝的圖層通過剪切的圖層第3章 網(wǎng)

頁

圖

像

制

作復(fù)制圖層該命令用來將當(dāng)前層復(fù)制到當(dāng)前圖像或者其他圖像中。刪除圖層該命令包含三個刪除圖層子命令：“圖層”表示刪除當(dāng)前圖層；“鏈接圖層”表示刪除具有鏈接關(guān)系的圖層：“隱藏圖層”表示刪除所有隱藏的圖層。第3章 網(wǎng)

頁

圖

像

制

作圖層屬性該命令用來設(shè)置當(dāng)前圖層的兩個參數(shù)：圖層名稱與眼睛圖標(biāo)格和操作狀態(tài)格的顏色。圖層樣式該命令用于設(shè)置圖層的各種樣式，每種樣式都能使圖像產(chǎn)生神奇的效果。圖層樣式包括混合模式和其他樣式，圖層樣式的內(nèi)容在下一節(jié)介紹。新填充圖層在填充層中可以填充純色、漸變和圖案三種內(nèi)容。第3章 網(wǎng)

頁

圖

像

制

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

頁

圖

像

制

作文字用來編輯文字圖層的文本，如果當(dāng)前層不是文本圖層，則該命令無效。柵格化用于文字、圖形、填充等類型圖層的柵格化，即將特殊的圖層轉(zhuǎn)化為普通圖層。基于圖層的切片以當(dāng)前圖層為基礎(chǔ)建立一個切片。第3章 網(wǎng)

頁

圖

像

制

作(13)圖層蒙版圖層蒙版的運用在Photoshop中占有很重要的地位，它可以控制圖層中的不同區(qū)域如何被隱藏或者顯示，在多個圖像的拼合處理中特別有用。圖層蒙版采用灰度區(qū)域來表示透明度，例如白色區(qū)域為蒙版作用范圍，而黑色區(qū)域則為透明區(qū)域。要新建圖層蒙版，首先選擇要創(chuàng)建蒙版的圖層，然后選擇菜單[添加圖層蒙版]命令。第3章 網(wǎng)

頁

圖

像

制

作鏈接將相關(guān)的圖層鏈接起來是常用的圖層操作之一，這樣可以將某些圖層操作同時作用于具有鏈接關(guān)系的所有圖層。合并圖層主要有：向下合并、合并可見圖層、拼合圖層等。

(16)修邊該命令用于修整在圖像的復(fù)制、粘貼等操作過程中，產(chǎn)生的圖像邊緣雜色或雜點等。第3章 網(wǎng)

頁

圖

像

制

作3)圖層樣式圖層樣式使得利用圖層處理圖像更加方便，用戶可以使用Photoshop提供的圖層樣式進行一些參數(shù)設(shè)置后，能在圖像上制作出特殊效果。(1)圖層樣式設(shè)置（2）應(yīng)用圖層樣式“金色池塘”文字應(yīng)用“斜面和浮雕”圖層樣式后圖像的效果圖第3章 網(wǎng)

頁

圖

像

制

作網(wǎng)頁圖像制作第3章(3)修改圖層樣式

(4)復(fù)制圖層樣式

(5)刪除圖層樣式第3章 網(wǎng)

頁

圖

像

制

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

頁

圖

像

制

作使用選框工具建立選區(qū)使用套索工具建立選區(qū)

(1)套索工具(2)多邊形套索工具

(3)磁性套索工具使用魔術(shù)棒工具建立選區(qū)使用色彩范圍建立選區(qū)第3章 網(wǎng)

頁

圖

像

制

作5)選區(qū)修改先把選區(qū)轉(zhuǎn)換成路徑，再用“鋼筆”工具來改變路徑，直至符合要求后再將路徑轉(zhuǎn)換回選區(qū)。使用快速蒙版

6)選區(qū)操作(1)移動選區(qū)

(2)復(fù)制選區(qū)

(3)保存選區(qū)第3章網(wǎng)頁圖像制作三、實訓(xùn)步驟實訓(xùn)1

圍棋圖像“搏奕”標(biāo)題制作1)棋盤制作新建一個文件名為圍棋；圖像寬度和高度均為

373像素圖像色彩接近木質(zhì)的深黃色制作木紋效果，分以下四步進行：①在木質(zhì)黃色上創(chuàng)建紋理②將顆粒連貫紋理第3章 網(wǎng)

頁

圖

像

制

作③進一步調(diào)整顏色④使棋盤的木紋有扭曲效果

(4)畫棋盤線，①為了便于畫棋盤線，先預(yù)設(shè)網(wǎng)格參考線②復(fù)制一個圖層，在該圖層中畫棋盤線

(5)設(shè)置棋盤線顯示木刻效果2）設(shè)計黑白棋子黑白棋子不能簡單畫圓，填充黑色和白色，要制作有立體燈光效果。制作步驟如下：第3章 網(wǎng)

頁

圖

像

制

作(1)新建2個圖層，分別取名為黑棋和白棋

(2)做黑子棋毛坯(3)為使棋子添加燈光效果

(4)做白子棋毛坯(5)提取黑色圍棋子

(6)提取白色圍棋子

(7)復(fù)制圍棋子輸入漢字整體添加燈光陰影效果第3章 網(wǎng)

頁

圖

像

制

作第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)2

按鈕制作1)利用樣式制作按鈕（1）新建一個寬600像素，高400像素的圖像文件

(2)新建圖層圖層上畫出一個矩形選區(qū)點擊“樣式”調(diào)板選擇“日落天空”按鈕上輸入文字“提交”按鈕如右圖所示第3章 網(wǎng)

頁

圖

像

制

作2)載入樣式（1）單擊“樣式”調(diào)板右上方的按鈕，彈出菜單，選擇[載入樣式]命令(2)在“載入樣式”對話框中選擇[按鈕]載入（3）選擇“樣式”調(diào)板中的不同樣式能制作不同效果的按鈕不同效果按鈕如右圖所示第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)3

圖像邊框制作在網(wǎng)頁中有許多圖像，有些圖像往往需要給它加上邊框才能與背景或其它圖像區(qū)別未作邊框的圖像作了紅色邊框的圖像第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)4

摳圖技巧一將下列圖三幅圖像利用摳圖、渲染等方法制作合成圖，其中使用了魔術(shù)棒工具和磁性套索工具的摳圖技巧第3章 網(wǎng)

頁

圖

像

制

作第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)5

摳圖技巧二在實訓(xùn)4中利用了磁性套索工具和魔術(shù)棒工具進行摳圖，它們使用環(huán)境相似，即圖像邊緣的顏色或背景顏色單一，當(dāng)圖像邊緣的顏色或背景顏色豐富多彩時，使用這兩個工具就很難正確摳出圖像，特別是一些細

節(jié)部分，如試用“抽出”的方法，抽出圖像，再用“歷史記錄畫筆工具”進行修改，能較準(zhǔn)確地摳出圖像。下頁圖像合成中的女孩就使用了這種摳圖技巧第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)項目二

Firework

MX2004處理網(wǎng)頁圖像一、實訓(xùn)目的與要求本節(jié)中首先要掌握Fireworks

MX

2004圖像處理軟件的界面；掌握該軟件的常用操作；圖象處理；圖像邊框制作及下拉菜單的制作。二、實訓(xùn)預(yù)備知識1.圖像軟件Fireworks

MX

2004的界面第3章 網(wǎng)

頁

圖

像

制

作標(biāo)題欄 菜單欄面板組工具箱開始頁（圖像編輯窗口）“屬性”面板全屏模式帶有菜單的全屏模式

標(biāo)準(zhǔn)屏幕模式（默認）工

具

箱第3章 網(wǎng)

頁

圖

像

制

作中文版Fireworks

MX

2004工作模式和首選參數(shù)工作模式矢量和位圖圖形

(2)矢量模式和位圖模式

2)首先參數(shù)的設(shè)置設(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)旋轉(zhuǎn)畫布第3章網(wǎng)頁圖像制作2)設(shè)置圖像大小3）文檔的基本操作

(1)創(chuàng)建新文檔

(2)打開文檔(3)保存文檔第3章 網(wǎng)

頁

圖

像

制

作三、實訓(xùn)步驟實訓(xùn)1圖像線框的制作在Fireworks

MX

2004中打開要制作一象素虛線框圖像。在工具箱選擇“矩形”工具，在圖像工作區(qū)下方

“矩形”工具屬性面板作如圖所示的屬性設(shè)置：。第3章 網(wǎng)

頁

圖

像

制

作3)將設(shè)置好的“矩形”工具在圖像邊緣畫出矩形，在菜單欄單擊[修改]→[向下合并]命令合并“層”，得到如圖所示，一像素虛線線框。第3章 網(wǎng)

頁

圖

像

制

作實訓(xùn)2圖像中下拉菜單制作打開要制作下拉菜單的圖片或頁面。點擊工具箱中的“矩形熱點”工具畫出下拉菜單熱區(qū)第3章 網(wǎng)

頁

圖

像

制

作3)在菜單欄單擊[修改]→[彈出菜單]→[添加彈出菜單]命令，彈出“彈出菜單編輯