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

第3章 網(wǎng)

頁(yè)

圖

像

制

作本章要介紹目前網(wǎng)頁(yè)圖像設(shè)計(jì)和處理中用得最多的兩個(gè)應(yīng)用軟件：中文版Photoshop

CS中文版Fireworks

MX

2004。中文Photoshop

CS是集設(shè)計(jì)、圖像處理和圖像輸出于一體的軟件，被廣泛應(yīng)用于Web圖像處理、藝術(shù)創(chuàng)作、插圖制作、影像合成、數(shù)碼照片處理及廣告燈箱設(shè)計(jì)等Fireworks是Macromedia公司推出的“網(wǎng)頁(yè)制作三劍客”之一，是專門(mén)針對(duì)網(wǎng)頁(yè)圖像設(shè)計(jì)和編輯的軟件，目前在業(yè)界已經(jīng)得到非常廣泛地應(yīng)用。第3章 網(wǎng)

頁(yè)

圖

像

制

作實(shí)訓(xùn)項(xiàng)目一

Photoshop

CS處理網(wǎng)頁(yè)圖像一、實(shí)訓(xùn)目的與要求學(xué)習(xí)的目的是將原圖像（一個(gè)或幾個(gè)圖像）怎樣使用Photoshop

CS處理、加工成我們所需要的圖像的方法重點(diǎn)是掌握針對(duì)網(wǎng)頁(yè)圖像，而又便于在Photoshop

CS中處理的技術(shù)。本節(jié)中首先要掌握?qǐng)D像的一些基本知識(shí)；孰知中文版Photoshop

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

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

頁(yè)

圖

像

制

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

Map

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

Image

File

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

頁(yè)

圖

像

制

作③GIF(Graphics

Interchange

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

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

Photographic

Experts

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

頁(yè)

圖

像

制

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

Network

Graphic）便攜式網(wǎng)絡(luò)圖像是由W3C針對(duì)Web圖像設(shè)計(jì)而開(kāi)發(fā)的，能夠以無(wú)損壓縮方式較高地壓縮圖像，在32位色深時(shí)支持1～16位的Alpha通道。第3章 網(wǎng)

頁(yè)

圖

像

制

作7）文件壓縮許多圖像文件格式使用壓縮技術(shù)以減少位圖圖像數(shù)據(jù)所需的存儲(chǔ)空間。無(wú)損技術(shù)對(duì)圖像數(shù)據(jù)進(jìn)行壓縮時(shí)不去掉圖像細(xì)節(jié)。有損技術(shù)通過(guò)去掉圖像細(xì)節(jié)來(lái)壓縮圖像。第3章 網(wǎng)

頁(yè)

圖

像

制

作RLE(行程長(zhǎng)度受限編碼)：是一種無(wú)損壓縮技術(shù)。

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

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

CaptureSuper

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

XP/Windows

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

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

頁(yè)

圖

像

制

作(2)Hyper

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

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

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

來(lái)時(shí)會(huì)是什么模樣。2.圖像軟件Photoshop

CS的界面

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

頁(yè)

圖

像

制

作中文Photoshop

CS基本操作

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

頁(yè)

圖

像

制

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

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

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

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

頁(yè)

圖

像

制

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

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

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

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

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

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

頁(yè)

圖

像

制

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

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

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

頁(yè)

圖

像

制

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

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

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

(6)提取白色圍棋子

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

頁(yè)

圖

像

制

作第3章 網(wǎng)

頁(yè)

圖

像

制

作實(shí)訓(xùn)2

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

作實(shí)訓(xùn)3

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

頁(yè)

圖

像

制

作實(shí)訓(xùn)4

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

頁(yè)

圖

像

制

作第3章 網(wǎng)

頁(yè)

圖

像

制

作實(shí)訓(xùn)5

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

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

頁(yè)

圖

像

制

作實(shí)訓(xùn)項(xiàng)目二

Firework

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

MX

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

MX

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

頁(yè)

圖

像

制

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

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

具

箱第3章 網(wǎng)

頁(yè)

圖

像

制

作中文版Fireworks

MX

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

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

2)首先參數(shù)的設(shè)置設(shè)置“常規(guī)”參數(shù)的功能如下：

(2)設(shè)置“編輯”參數(shù)(3)設(shè)置“啟動(dòng)并編輯”選項(xiàng)卡

(4)設(shè)置“文件夾”參數(shù)第3章 網(wǎng)

頁(yè)

圖

像

制

作(5)設(shè)置“導(dǎo)入”參數(shù)3．中文版Fireworks

MX

2004基本操作

1)設(shè)置畫(huà)布(1)更改畫(huà)布尺寸

(2)更改畫(huà)布顏色

(3)修剪畫(huà)布

(4)調(diào)整畫(huà)布

(5)旋轉(zhuǎn)畫(huà)布第3章網(wǎng)頁(yè)圖像制作2)設(shè)置圖像大小3）文檔的基本操作

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

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

頁(yè)

圖

像

制

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

MX

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

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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

頁(yè)

圖

像

制

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