法學網(wǎng)頁圖像處理優(yōu)質(zhì)精選課件

一、網(wǎng)頁圖像處理概述網(wǎng)頁的設計少不了對圖形圖像的制作和處理。圖形圖像設計與處理軟件層出不窮，如Adobe公司推出的Photoshop、Firework軟件、Corel公司推出的CorelDRAW等。本教程介紹的是目前使用最廣泛的圖形圖像設計與制作軟件Photoshop。一、網(wǎng)頁圖像處理概述網(wǎng)頁的設計少不了對圖形圖像的制作和處理。1位圖與矢量圖

1．位圖位圖也稱為點陣圖或像素圖，計算機屏幕上的圖像是由屏幕上的發(fā)光點構成的，每個點用二進制數(shù)據(jù)來描述其顏色與亮度等信息，這些點是離散的，類似于矩陣。多個像素的色彩組合就形成了圖像，稱之為位圖。2．矢量圖矢量圖也稱為向量圖，是用一系列計算機指令來描述和記錄的一幅圖，一幅圖可分解為一系列由點、線、面等組成的子圖，矢量圖記錄的是對象的幾何形狀、線條粗細和色彩等，因此生成的文件存儲容量很小。

位圖與矢量圖2圖像分辨率分辨率是指單位長度上像素的多少，單位長度上像素越多，圖像就越清晰。例如，72dpi表示圖像中每英寸包含72個像素或點。位圖矢量圖圖像分辨率分辨率是指單位長度上像素的多少，單位長度上像3PhotoshopCS工作界面PhotoshopCS工作界面4PhotoshopCS工作界面PhotoshopCS的窗口是由標題欄、菜單欄、工具選項欄、工具箱、工作區(qū)和控制面板6大部分組成。（1）標題欄（2）菜單欄（3）工具選項欄PhotoshopCS工作界面PhotoshopCS5PhotoshopCS工作界面（4）工具箱：Photoshop軟件的所有工具（繪圖、選擇工具、調(diào)整工具等）都置于工具箱中，用戶需要使用什么工具，只要在工具箱中選擇即可。（5）控制面板：控制面板是Photoshop軟件中非常重要的輔助作圖工具，其總是浮動在活動窗口中最前面，供用戶隨時訪問。（6）工作區(qū)：工作區(qū)是圖像編輯區(qū)，顯示了當前正在編輯的圖像內(nèi)容。PhotoshopCS工作界面（4）工具箱：Photosh6Photoshop工具箱工具箱上的工具大致分為以下四大類：（1）選項區(qū)工具。包括選區(qū)工具組、套索工具組、魔術棒工具。（2）繪制工具。包括畫筆工具組、歷史畫筆工具組、橡皮擦工具組、漸變工具組、吸管工具。（3）編輯工具。包括印章工具組、亮化工具組、模糊工具組、鋼筆工具組。（4）輔助工具。包括移動工具、裁剪工具、手形工具、縮放工具、注釋工具組等。Photoshop工具箱工具箱上的工具大致分為以下四大類：7圖層控制面板圖層控制面板如下圖所示，主要用來對圖層進行管理和操作，包括添加圖層、刪除圖層、合并圖層等。圖層控制面板圖層控制面板如下圖所示，主要用來對圖層進行管理和8圖層基本概念圖層概念：我們可以把圖層想像成是一張一張疊起來的透明膠片，每張透明膠片上都有不同的畫面，改變圖層的順序和屬性可以改變圖像的最后效果。通過對圖層的操作，使用它的特殊功能可以創(chuàng)建很多復雜的圖像效果。圖層面板：圖層面板上顯示了圖像中的所有圖層、圖層組和圖層效果，我們可以使用圖層面板上的各種功能來完成一些圖像編輯任務，例如創(chuàng)建、隱藏、復制和刪除圖層等。

圖層類型：1.背景圖層2.一般圖層3.圖層組圖層基本概念圖層概念：我們可以把圖層想像成是一張一張疊起9圖層操作1.新建圖層2.復制圖層3.顏色標識4.刪格化圖層5.合并圖層6.蓋印圖層7.圖層疊加模式圖層操作1.新建圖層10圖層管理

1.選擇圖層

2.隱藏、顯示圖層內(nèi)容

3.更改圖層順序

4.鏈接圖層

5.調(diào)整圖層內(nèi)容（對齊、分布）

6.鎖定圖層

7.從圖層取樣圖層管理1.選擇圖層11Photoshop顏色模式（1）常見的顏色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。1．RGB模式RGB模式是在Photoshop中處理圖像時接觸最多的顏色模式，RGB顏色是由紅、綠、藍三原色構成。2．CMYK模式CMYK顏色模式是一種專門用來印刷的顏色，CMYK顏色是由青色、品紅、黃色、黑色四種印刷顏色組成。

Photoshop顏色模式（1）常見的顏色模式有：RGB、C12Photoshop顏色模式（2）3．灰度模式灰度模式采用了256級不同強度的灰度來描述圖像。其值為0%時，表示為黑色，值為100%時，表示為白色。

4．Lab模式Lab模式是國際照明委員會（CIE）于1976年公布的一種色彩模式。L表示亮度，范圍在0~100之間。a和b則表示顏色過渡的變化值。

Photoshop顏色模式（2）3．灰度模式13Photoshop顏色模式（3）5．HSB模式HSB模式是一種可以調(diào)整圖像顏色效果的色彩值，Photoshop圖像不能直接保存為HSB模式，執(zhí)行“圖像”→“調(diào)整”→“色相/飽和度”命令后，才能對圖像進行HSB模式調(diào)整。

6．Bitmap模式Bitmap模式又稱為位圖模式，它是使用黑、白兩種顏色來描述圖像的一種方式，因為位置模式的圖像也稱作黑白圖像。7．索引顏色模式索引顏色模式也稱作映射顏色。在這種模式下，只能存儲一個8bit色彩深度的文件，即最多256種顏色，而且顏色都是預先定義好的。Photoshop顏色模式（3）5．HSB模式14合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是“圖像”→“圖像大小”命令，打開如下圖所示的對話框。用戶在像素大小或文檔大小中調(diào)整“寬度”和“高度”值。若勾選對話框底部的“約束比例”復選框，會在寬度和高度間建立等比例效果。單擊“好”按鈕后，圖像將按新的寬度和高度對整個圖像進行縮放，從而改變圖像的尺寸大小。

合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是15合成圖像--調(diào)整圖像色調(diào)調(diào)整圖像色調(diào)，其最直觀方法是“圖像”→“調(diào)整”→“色彩平衡”命令，打開下圖所示對話框。用戶可根據(jù)圖像最終效果進行調(diào)整和設置。單擊“好”按鈕后，圖像將按新的色調(diào)整生成效果圖。

合成圖像--調(diào)整圖像色調(diào)調(diào)整圖像色調(diào)，其最直觀方法是“圖像”16選擇鋼筆工具,選擇目標對象替換頁面上其他位置的圖層內(nèi)容。扭曲文字，效果如下圖所示GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。Photoshop蒙版原理可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；（6）單擊工具箱中文字工具，在選文字工具選項欄上設置字體為“黑體”、大小為“22點”、文字顏色為“白色”。ImageReadyCS介紹圖層樣式可以創(chuàng)建出投影、發(fā)光、浮雕、描邊等特殊效果。Photoshop:窗口->工作區(qū)->復位調(diào)板位置逐幀顯示文字，效果如下圖所示。3、在圖層2當中畫星—會閃的星星閃爍的星光效果，如下圖所示。翻轉(zhuǎn)(ImageReady)PhotoshopCS工作界面使用“徑向模糊”濾鏡功能制作“秀我風采”文字的噴發(fā)光芒效果，效果如圖：綜合實例二：企業(yè)標志制作2、輸入文字，然后柵格化“火焰字”文字圖層，并且復制該圖層它是基于色彩模式這一基礎上衍生出的簡化操作工具。JPEG圖像文件格式主要用于圖像瀏覽及超文本文檔，如HTML文檔等。色彩調(diào)整實例制作“感受中國”頁面圖像，效果如下圖所示

具體要求：1、加強圖像綠色調(diào)；2、調(diào)整圖像“寬度”值為“698像素”、“高度”值為“179像素”。選擇鋼筆工具,選擇目標對象色彩調(diào)整實例制作“感受中國”頁面17色彩調(diào)整實例步驟“感受中國”頁面圖像制作步驟如下：（1）執(zhí)行“文件”→“打開”命令，打開原始圖像。（2）執(zhí)行“圖像”→“調(diào)整”→“色彩平衡”命令，在彈出的“色彩平衡”調(diào)整對話框中將綠色中間值設置為“+80”，點擊“好”按鈕。（3）執(zhí)行“圖像”→“圖像大小”命令，在彈出“圖像大小”調(diào)整對話框中取消“約束比例”復選框，設置“寬度”值為“698”、“高度”值為“179”，點擊“好”按鈕。（4）執(zhí)行“文件”→“存儲為”命令來存儲效果圖，選擇JPG或PNG格式。色彩調(diào)整實例步驟“感受中國”頁面圖像制作步驟如下：（1）執(zhí)18使用選擇工具中文版PhotoshopCS提供的選取工具分為兩大類，一類是規(guī)則選取工具也稱為框選工具，另一類是建立不規(guī)則選區(qū)的工具也稱為套索類工具。

1．規(guī)則的框選工具在使用時，只需在圖像中拖動鼠標指針或單擊鼠標左鍵，即可出一個選擇區(qū)域。。

2．套索選擇工具可用于徒手畫的方式描繪出不規(guī)則形狀的選取區(qū)域。被選定的圖像區(qū)域邊界上會顯示出一條流動的虛線，對虛線以內(nèi)的選定區(qū)域可以進行任意操作。使用選擇工具中文版PhotoshopCS提供的選取工具19三、Photoshop合成圖像選擇工具組面板

框選工具組套索工具組三、Photoshop合成圖像選擇工具組面板框選工具組套20三、Photoshop合成圖像選區(qū)的操作（1）增加選區(qū)(按住鍵盤上Shift鍵

)（2）減少選區(qū)(按住鍵盤上Alt鍵

)（3）填充選區(qū)(前景顏色填充（Alt+Delete）或背景顏色填充（Ctrl+Delete）

)（4）描邊選區(qū)（5）移動選區(qū)（6）平滑選區(qū)（7）羽化選區(qū)（8）反向選擇三、Photoshop合成圖像選區(qū)的操作21法學網(wǎng)頁圖像處理優(yōu)質(zhì)精選課件22合成圖像實例

合成照片，效果如下圖所示

最終效果圖素材一素材二合成圖像實例合成照片，效果如下圖所示最終效果圖素材一素材23圖像格式（1）

Photoshop保存文件過程中，有多種圖像格式可供用戶選擇，不同的格式圖像的色彩品質(zhì)、容量大小都有一程度的差異。不同的文件格式可以用擴展名來區(qū)分，如PSD、JPG、GIF、PNG等。

1．PSD（.PSD）格式

PSD圖像文件是Photoshop軟件自身格式，也稱為原文件格式，是惟一能支持全部圖像色彩模式的格式。以PSD格式保存的圖像可以包含圖層、通道及色彩模式。

2．JPEG(.JPG；.JPE)格式

JPEG圖像文件格式主要用于圖像瀏覽及超文本文檔，如HTML文檔等。支持多種色彩模式。使用JPEG格式保存的圖像經(jīng)過高倍率的壓縮，可使圖像文件容量變得較小，但在壓縮過程中會丟失部分數(shù)據(jù)。

圖像格式（1）Photoshop保存文件過程中，有多種圖像24圖像格式（2）3．GIF（.GIF）格式它在壓縮過程中，圖像的像素資料不會被丟失，然而丟失的卻是圖像的色彩。GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。4．PND（.PNG）格式

PNG圖像格式文件(或者稱為數(shù)據(jù)流)由一個8字節(jié)的PNG文件署名(PNGfilesignature)域和按照特定結構組織的3個以上的數(shù)據(jù)塊(chunk)組成。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。另外PNG也被稱為專業(yè)網(wǎng)頁圖像格式，其最大的優(yōu)點就是能儲存透明背景的圖像。

圖像格式（2）3．GIF（.GIF）格式25圖像格式（3）

5．BMP（.BMP）格式

BMP圖像文件格式是一種標準的點陣式圖像格式，支持RGB、灰度和位圖色彩模式，但不支持Alpha通道。

6．TIFF（.TIF）格式

TIFF圖像文件格式可以在許多不同的平臺和應用軟件間交換信息，其應用相當廣泛。該格式支持RGB、CMYK、位圖、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。

圖像格式（3）5．BMP（.BMP）格式26可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；做圖的邊緣淡化效果；包括移動工具、裁剪工具、手形工具、縮放工具、注釋工具組等。（3）背景圖案：一般體積很小，通常用于填充網(wǎng)頁和表格。ImageReady界面5、選擇火苗區(qū)域（按住鍵盤上Ctrl鍵和Alt鍵）復習：Photoshop合成圖像閃爍的星光效果，如下圖所示。（1）增加選區(qū)(按住鍵盤上Shift鍵)將優(yōu)化結果存儲為：可將當前文件保存為HTML文件格式。PSD圖像文件是Photoshop軟件自身格式，也稱為原文件格式，是惟一能支持全部圖像色彩模式的格式。（6）工作區(qū)：工作區(qū)是圖像編輯區(qū)，顯示了當前正在編輯的圖像內(nèi)容。索引顏色模式也稱作映射顏色?？梢允褂肐mageReady中的“Web內(nèi)容”調(diào)板來跟蹤切片及其翻轉(zhuǎn)狀態(tài)。最后一定要“應用蒙版”才可以使更改生效。替換頁面上其他位置的圖層內(nèi)容?！铮?）然后在對話框中設置相應的參數(shù)后，點“好”按鈕即可。單擊“好”按鈕后，圖像將按新的寬度和高度對整個圖像進行縮放，從而改變圖像的尺寸大小。（1）創(chuàng)建圖像文件，在“新建”對話框中設置圖像寬度為400像素，高度為100像素?！铮?）然后在對話框中設置相應的參數(shù)后，點“好”按鈕即可。編輯文本在Photoshop中可以制作出多種特殊效果的文字，常出現(xiàn)在各種廣告、招牌中。在設計網(wǎng)頁過程中，文字工具可以創(chuàng)作出網(wǎng)頁標題、導航文本、網(wǎng)站LOGO等項目?？蛇\用不同濾鏡，以產(chǎn)生一些意想不到的特效；編輯文本在Ph27文本工具的使用單擊工具箱中的按鈕，系統(tǒng)彈出文字工具選項欄，如下圖所示。用戶可以在其中設置出各式各樣的字體和字形。用鼠標左鍵在工作區(qū)中的任意位置單擊，可出現(xiàn)輸入文字的閃爍光標提示，即可開始輸入所需文字。文本工具的使用單擊工具箱中的按鈕，系統(tǒng)彈出文字工具選項欄，如28調(diào)整文本格式

選擇需要調(diào)整格式的文本，單擊文字工具選項欄右端按鈕，系統(tǒng)彈出字符調(diào)整面板，如下圖所示，用戶可根據(jù)要求自行設置。調(diào)整文本格式選擇需要調(diào)整格式的文本，單擊文字工具選項29編輯文本實例

制作文字標題，效果如下圖所示

編輯文本實例制作文字標題，效果如下圖所示30編輯文本操作步驟

（1）創(chuàng)建圖像文件，在“新建”對話框中設置圖像寬度為442像素，高度為51像素。（2）設置前景顏色RGB值分別為（153、204、1），通過按Alt+Delele鍵用前景顏色填充畫布。（3）單擊圖層面板上的新建圖層按鈕，創(chuàng)建新的空白圖層1。（4）單擊工具箱中的矩形框選按鈕，在適當位置繪制矩形選區(qū)并以白色填充。（5）單擊工具箱中文字工具，在選文字工具選項欄上設置字體為“黑體”、大小為“20點”、文字顏色為“白色”。在工作區(qū)域內(nèi)輸入“TheNewImpression”。單獨選擇“TheNew”文本，將其顏色設置為“黑色。（6）單擊工具箱中文字工具，在選文字工具選項欄上設置字體為“黑體”、大小為“22點”、文字顏色為“白色”。在工作區(qū)域內(nèi)輸入“最新印象”。單獨選擇“印象”文本，將其顏色設置為“黑色”大小設置為“30點”。（7）執(zhí)行“文件”→“存儲”命令，保存圖像，文件格式按要求設定。編輯文本操作步驟（1）創(chuàng)建圖像文件，在“新建”對話框中設置31創(chuàng)建變形文本單擊文本選項欄上創(chuàng)建變形文本按鈕，彈出變形文字對話框，單擊變形文字對話框中的“樣式”下拉列表，系統(tǒng)彈出變形效果列表項，如下圖所示。變形效果列表項變形文字對話框創(chuàng)建變形文本單擊文本選項欄上創(chuàng)建變形文本按鈕，彈出變形文字32柵格化文本柵格化文本圖層功能是將文本圖層轉(zhuǎn)換成圖形化圖層。被柵格化的文本內(nèi)容不能再進行文本格式調(diào)整，比如字體就無法再進行設置。方法：在圖層控制面板中用鼠標右鍵單文本圖層，在彈出的下拉菜單中選擇“柵格化圖層”命令即可，如下圖所示。柵格化文本柵格化文本圖層功能是將文本圖層轉(zhuǎn)換成圖形化圖層。33制作漸變文字效果實例

制作漸變文字效果如下圖所示。

操作步驟：（1）創(chuàng)建圖像文件，在“新建”對話框中設置圖像寬度為400像素，高度為100像素。（2）點擊工具箱中的文本按鈕，輸入“漸變文字效果”文本內(nèi)容，設置相應格式。（3）柵格化文本圖層。（4）按住鍵盤上Ctrl鍵并同時在“漸變文字效果”圖層上單擊鼠標左鍵，可載入圖層選區(qū)。（5）點擊工具箱中的（漸變填充）按鈕，在漸變選項欄上選擇“黑色，白色”漸變，用鼠標左鍵在選區(qū)內(nèi)部拖動創(chuàng)建漸變效果。（6）執(zhí)行“選擇”→“取消選擇”命令即可完成效果圖。制作漸變文字效果實例制作漸變文字效果如下圖所示。操作步驟34綜合實例：網(wǎng)站ＬＯＧＯ制作

綜合實例一：網(wǎng)站ＬＯＧＯ制作

重點要求：圖像寬度為234像素，高度為97像素。綜合實例：網(wǎng)站ＬＯＧＯ制作綜合實例一：網(wǎng)站ＬＯＧＯ制作重35綜合實例：網(wǎng)站ＬＯＧＯ制作

綜合實例二：企業(yè)標志制作

綜合實例：網(wǎng)站ＬＯＧＯ制作綜合實例二：企業(yè)標志制作36Photoshop顏色模式（3）Photoshop蒙版原理在這種模式下，只能存儲一個8bit色彩深度的文件，即最多256種顏色，而且顏色都是預先定義好的。（1）圖片：一般無法分割的圖片（原圖大?。Ｖ谱鏖W電，效果如下圖所示方法：在圖層控制面板中用鼠標右鍵單文本圖層，在彈出的下拉菜單中選擇“柵格化圖層”命令即可，如下圖所示。設計Web頁--頁面設計切片目的：盡可能小的減少網(wǎng)頁文件的體積Photoshop顏色模式（2）添加幀以創(chuàng)建翻轉(zhuǎn)動畫。GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。做圖的邊緣淡化效果；（3）填充選區(qū)(前景顏色填充（Alt+Delete）或背景顏色填充（Ctrl+Delete）)3、打開”動畫“調(diào)板，創(chuàng)建新幀CMYK顏色模式是一種專門用來印刷的顏色，CMYK顏色是由青色、品紅、黃色、黑色四種印刷顏色組成。（2）背景色：通過網(wǎng)頁代碼可以實現(xiàn)的顏色。圖像映射將圖像區(qū)域鏈接到URL。為了使人的肉眼感覺不到圖像的切換，一秒鐘至少要顯示24幀。（5）單擊工具箱中文字工具，在選文字工具選項欄上設置字體為“黑體”、大小為“20點”、文字顏色為“白色”。L表示亮度，范圍在0~100之間。內(nèi)容概要（2）合成圖像

2圖層樣式

3蒙版5使用路徑4圖像格式1Photoshop顏色模式（3）內(nèi)容概要（2）合成圖像2圖37圖像格式（1）

Photoshop保存文件過程中，有多種圖像格式可供用戶選擇，不同的格式圖像的色彩品質(zhì)、容量大小都有一程度的差異。不同的文件格式可以用擴展名來區(qū)分，如PSD、JPG、GIF、PNG等。

1．PSD（.PSD）格式

PSD圖像文件是Photoshop軟件自身格式，也稱為原文件格式，是惟一能支持全部圖像色彩模式的格式。以PSD格式保存的圖像可以包含圖層、通道及色彩模式。

2．JPEG(.JPG；.JPE)格式

JPEG圖像文件格式主要用于圖像瀏覽及超文本文檔，如HTML文檔等。支持多種色彩模式。使用JPEG格式保存的圖像經(jīng)過高倍率的壓縮，可使圖像文件容量變得較小，但在壓縮過程中會丟失部分數(shù)據(jù)。

圖像格式（1）Photoshop保存文件過程中，有多種圖像38圖像格式（2）3．GIF（.GIF）格式它在壓縮過程中，圖像的像素資料不會被丟失，然而丟失的卻是圖像的色彩。GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。4．PND（.PNG）格式

PNG圖像格式文件(或者稱為數(shù)據(jù)流)由一個8字節(jié)的PNG文件署名(PNGfilesignature)域和按照特定結構組織的3個以上的數(shù)據(jù)塊(chunk)組成。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。另外PNG也被稱為專業(yè)網(wǎng)頁圖像格式，其最大的優(yōu)點就是能儲存透明背景的圖像。

圖像格式（2）3．GIF（.GIF）格式39圖像格式（3）

5．BMP（.BMP）格式

BMP圖像文件格式是一種標準的點陣式圖像格式，支持RGB、灰度和位圖色彩模式，但不支持Alpha通道。

6．TIFF（.TIF）格式

TIFF圖像文件格式可以在許多不同的平臺和應用軟件間交換信息，其應用相當廣泛。該格式支持RGB、CMYK、位圖、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。

圖像格式（3）5．BMP（.BMP）格式40演示：編輯文本實例

制作文字標題，效果如下圖所示

注意最后保存的文件格式演示：編輯文本實例制作文字標題，效果如下圖所示注意最后保41演示：制作漸變文字效果實例

制作漸變文字效果如下圖所示。

操作步驟：（1）創(chuàng)建圖像文件，在“新建”對話框中設置圖像寬度為400像素，高度為100像素。（2）點擊工具箱中的文本按鈕，輸入“漸變文字效果”文本內(nèi)容，設置相應格式。（3）柵格化文本圖層。（4）按住鍵盤上Ctrl鍵并同時在“漸變文字效果”圖層上單擊鼠標左鍵，可載入圖層選區(qū)。（5）點擊工具箱中的（漸變填充）按鈕，在漸變選項欄上選擇“黑色，白色”漸變，用鼠標左鍵在選區(qū)內(nèi)部拖動創(chuàng)建漸變效果。（6）執(zhí)行“選擇”→“取消選擇”命令即可完成效果圖。演示：制作漸變文字效果實例制作漸變文字效果如下圖所示。操42復習：圖層基本概念圖層概念：我們可以把圖層想像成是一張一張疊起來的透明膠片，每張透明膠片上都有不同的畫面，改變圖層的順序和屬性可以改變圖像的最后效果。通過對圖層的操作，使用它的特殊功能可以創(chuàng)建很多復雜的圖像效果。圖層面板：圖層面板上顯示了圖像中的所有圖層、圖層組和圖層效果，我們可以使用圖層面板上的各種功能來完成一些圖像編輯任務，例如創(chuàng)建、隱藏、復制和刪除圖層等。

圖層類型：1.背景圖層2.一般圖層3.圖層組復習：圖層基本概念圖層概念：我們可以把圖層想像成是一張一43圖層樣式（圖層特效）圖層樣式可以創(chuàng)建出投影、發(fā)光、浮雕、描邊等特殊效果。在圖層面板中，單擊“添加圖層樣式”按鈕或者執(zhí)行“圖層”→“圖層樣式”命令，設置圖層樣式。圖層樣式（圖層特效）圖層樣式可以創(chuàng)建出投影、發(fā)光、浮雕、描邊44圖層不透明度設置圖層不透明度設置：圖層的不透明度決定它遮蔽或顯示它的下一個圖層的程度，如果不透明度為1%的圖層顯得幾乎是透明的，而透明度為100%的圖層顯得完全不透明。演示圖層各種樣式圖層不透明度設置圖層不透明度設置：圖層的不透明度決定它遮蔽或45演示：圖層式樣實例給圖片制作邊框演示：圖層式樣實例給圖片制作邊框46說白了就是FrontPage當中的圖片熱區(qū)合成圖像--調(diào)整圖像大小常見的顏色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。您可以在一個圖像中設置多個鏈接區(qū)域（名為圖像映射區(qū)域），鏈接到其他Web頁或多媒體文件。蒙版可以控制圖層區(qū)域內(nèi)部分內(nèi)容可隱藏或是顯示。不同的文件格式可以用擴展名來區(qū)分，如PSD、JPG、GIF、PNG等。復習：Photoshop合成圖像PhotoshopCS工作界面復習：Photoshop合成圖像可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；每一幀較前一幀有輕微的變化，當連續(xù)、快速地顯示這些幀時就創(chuàng)造出運動效果。路徑由定位點和連接定位點的線段(曲線)構成；2、添加一個空白覆蓋層以PSD格式保存的圖像可以包含圖層、通道及色彩模式。如果頁面編排已準備就緒，可以輸出到Web，您可以使用Photoshop和ImageReady中提供的切片工具，將頁面版式或復雜圖形劃分為多個區(qū)域，并指定獨立的壓縮設置（從而獲得較小的文件大小）。為了使人的肉眼感覺不到圖像的切換，一秒鐘至少要顯示24幀。PhotoshopCS工作界面（3）柵格化文本圖層。Photoshop顏色模式（3）蒙版是Photoshop中的一個重要概念，使用蒙版可保護部分圖層，該圖層不能被編輯。復習：Photoshop合成圖像選擇工具組面板

框選工具組套索工具組說白了就是FrontPage當中的圖片熱區(qū)復習：Photos47復習：Photoshop合成圖像選區(qū)的操作（1）增加選區(qū)(按住鍵盤上Shift鍵

)（2）減少選區(qū)(按住鍵盤上Alt鍵

)（3）填充選區(qū)(前景顏色填充（Alt+Delete）或背景顏色填充（Ctrl+Delete）

)（4）描邊選區(qū)（5）移動選區(qū)（6）平滑選區(qū)（7）羽化選區(qū)（8）反向選擇復習：Photoshop合成圖像選區(qū)的操作48合成圖像實例

合成照片，效果如下圖所示

最終效果圖素材一素材二合成圖像實例合成照片，效果如下圖所示最終效果圖素材一素材49使用路徑路徑是定義和編輯圖像區(qū)域的最佳方法之一，其能用來精確定義具體區(qū)域，并保存這些結果以便以后重復使用。當使用正確時，路徑幾乎不給文件增加額外長度，并且能在文件之間共享，甚至能在文件與其他應用程序之間共享。它是由多個節(jié)點的矢量線條構成的圖像，而不是圖層的本身像素，所以路徑易于修整、重新選擇或移動等操作，可以保存在圖像文件中，也可以單獨輸出。使用路徑路徑是定義和編輯圖像區(qū)域的最佳方法之一，其能用來精50路徑(Path)

所謂路徑(Path),在屏幕上表現(xiàn)為一些不可打印、不活動的矢量形狀。路徑使用鋼筆工具創(chuàng)建，使用鋼筆工具的同級其它工具進行修改。路徑由定位點和連接定位點的線段(曲線)構成；每一個定位點還包含了兩個句柄，用以精確調(diào)整定位點及前后線段的曲度，從而匹配想要選擇的邊界。

“路徑”在PHOTOSHOP中是使用貝賽爾曲線所構成的一段閉合或者開放的曲線段。路徑(Path)

所謂路徑(Path),在屏幕上表現(xiàn)為一些51使用鋼筆摳圖選擇鋼筆工具,選擇目標對象使用“路徑面板”載入選區(qū)或者（Ctrl+Enter)使用鋼筆摳圖選擇鋼筆工具,選擇目標對象52路徑實例1路徑實例153路徑實例2--郵票制作路徑實例2--郵票制作54圖層蒙版蒙版也是Photoshop圖層中的一個重要概念，使用蒙版可保護部分圖層，該圖層不能被編輯。蒙版可以控制圖層區(qū)域內(nèi)部分內(nèi)容可隱藏或是顯示。更改蒙版可以對圖層應用各種效果，不會影響該圖層上的圖像。最后一定要“應用蒙版”才可以使更改生效。

圖層蒙版蒙版也是Photoshop圖層中的一個重要概念，使用55Photoshop蒙版原理Photoshop蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應的變化。黑色為完全透明，白色為完全不透明。Photoshop蒙版原理Photoshop蒙板是將不同灰度56原理：只是將上面一個圖層的透明度降低,慢慢地看到下面一個圖層的顏色?！铮?）打開待處理的圖像文件后，對需處理的部分加以選擇。將優(yōu)化結果存儲為：可將當前文件保存為HTML文件格式。2．套索選擇工具可用于徒手畫的方式描繪出不規(guī)則形狀的選取區(qū)域。要試驗不同的頁面編排或?qū)С鲰撁娴牟煌问?，請使用“圖層復合”調(diào)板。Photoshop保存文件過程中，有多種圖像格式可供用戶選擇，不同的格式圖像的色彩品質(zhì)、容量大小都有一程度的差異。用戶在像素大小或文檔大小中調(diào)整“寬度”和“高度”值。演示：制作漸變文字效果實例Photoshop蒙版的優(yōu)點在設計網(wǎng)頁過程中，文字工具可以創(chuàng)作出網(wǎng)頁標題、導航文本、網(wǎng)站LOGO等項目。（1）圖片：一般無法分割的圖片（原圖大?。?。本教程介紹的是目前使用最廣泛的圖形圖像設計與制作軟件Photoshop。PhotoshopCS工作界面通道實際上可以理解為是選擇區(qū)域的映射?？蛇\用不同濾鏡，以產(chǎn)生一些意想不到的特效；PhotoshopCS工作界面蒙版可以控制圖層區(qū)域內(nèi)部分內(nèi)容可隱藏或是顯示。濾鏡只能用于當前正在編輯的、可見的圖層的選定區(qū)域，如果沒有選定區(qū)域，系統(tǒng)會將整個圖像視為當前選定區(qū)域。Photoshop蒙版原理“感受中國”頁面圖像制作步驟如下：Photoshop蒙版的優(yōu)點1.修改方便，不會因為使用橡皮擦或剪切刪除而造成不可返回的遺憾;2.可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；3.任何一張灰度圖都可用來用為蒙板。

原理：只是將上面一個圖層的透明度降低,慢慢地看到下面一個圖層57Photoshop蒙版的主要作用1.摳圖；2.做圖的邊緣淡化效果；3.圖層間的溶合。按住Ctrl鍵—載入選區(qū)按住Alt鍵—切換到蒙版Photoshop蒙版的主要作用1.摳圖；58蒙版實例蒙版實例59綜合實例—海報設計綜合實例—海報設計60綜合實例—金屬文字制作綜合實例—金屬文字制作61內(nèi)容概要（3）通道

2濾鏡3特效文字4蒙版1網(wǎng)頁效果設計5切片、導出6內(nèi)容概要（3）通道2濾鏡3特效文字4蒙版1網(wǎng)頁效果設計5切62圖層蒙版蒙版是Photoshop中的一個重要概念，使用蒙版可保護部分圖層，該圖層不能被編輯。蒙版可以控制圖層區(qū)域內(nèi)部分內(nèi)容可隱藏或是顯示。更改蒙版可以對圖層應用各種效果，不會影響該圖層上的圖像。圖層蒙版蒙版是Photoshop中的一個重要概念，使用蒙版可63Photoshop蒙版原理Photoshop蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應的變化。黑色為完全透明，白色為完全不透明。Photoshop蒙版原理Photoshop蒙板是將不同灰度64Photoshop蒙版的主要作用1.摳圖2.做圖的邊緣淡化效果3.圖層間的溶合Photoshop蒙版的主要作用1.摳圖65蒙版實例蒙版實例66通道的概念通道這一概念在Photoshop中是非常獨特的，它不象層那樣容易上手，其中的奧妙也要遠遠多于層等。它是基于色彩模式這一基礎上衍生出的簡化操作工具。譬如說，一幅RGB三原色圖有三個默認通道：Red（紅）、Green（綠）、Blue（藍）。但如果是一幅CMYK圖像，就有了四個默認通道：Cyan（藍綠）、Magenta（紫紅）、Yellow（黃）、Black（黑）。由此看出，每一個通道其實就是一幅圖像中的某一種基本顏色的單獨通道。也就是說，通道是利用圖像的色彩值進行圖像的修改的，我們可以把通道看作攝像機的中的濾光鏡。通道的概念通道這一概念在Photoshop中是非常獨特的，它67通道的效果通道的效果68通道與圖層的區(qū)別一個通道層同一個圖像層之間最根本的區(qū)別在于：圖層的各個象素點的屬性是以紅綠藍三原色的數(shù)值來表示的，而通道層中的象素顏色是由一組原色的亮度值組成的。再說通俗點：通道中只有一種顏色的不同亮度，是一種灰度圖像。通道實際上可以理解為是選擇區(qū)域的映射。

通道與圖層的區(qū)別一個通道層同一個圖像層之間最根本的區(qū)別在于：69通道摳圖范例通道摳圖范例70濾鏡概述在主單菜單上單擊“濾鏡”命令，將打開濾鏡菜單，其分為4個部分。頂部為最后一次使用過的濾鏡；中間分別是PhotoshopCS版新增濾鏡老版中的13類濾鏡；底部為外掛濾鏡，只有安裝了外掛式濾鏡之后，才會顯示在其菜單中。通過使用濾鏡，可以為圖像加入各種特效，讓平談無奇的圖片出現(xiàn)神奇的效果。濾鏡概述在主單菜單上單擊“濾鏡”命令，將打開濾鏡菜單，其分為71濾鏡使用說明濾鏡只能用于當前正在編輯的、可見的圖層的選定區(qū)域，如果沒有選定區(qū)域，系統(tǒng)會將整個圖像視為當前選定區(qū)域。濾鏡以像素為單位進行處理，濾鏡的處理效果與圖像的分辨率有關。濾鏡不能應用于索引模式和16位通道模式。濾鏡使用說明濾鏡只能用于當前正在編輯的、可見的圖層的選定區(qū)域72濾鏡的基本操作在PhotoshopCS中盡管有風格各異、用途不同的濾鏡，但它們通常的使用步驟如下：★（1）打開待處理的圖像文件后，對需處理的部分加以選擇。★（2）從“濾鏡”菜單中選取相應的濾鏡組，并選擇其下一級子菜單中的一個濾鏡?！铮?）然后在對話框中設置相應的參數(shù)后，點“好”按鈕即可。在點擊“好”按鈕后，系統(tǒng)將濾鏡效果應用于圖像，這將花費一些時間，如要中斷濾鏡的應用，按下鍵盤上Esc鍵。濾鏡的基本操作在PhotoshopCS中盡管有風格各異、用73濾鏡效果實例--閃電制作閃電，效果如下圖所示

濾鏡效果實例--閃電制作閃電，效果如下圖所示74閃電制作方法1、從工作區(qū)右上角向工作區(qū)左下角的漸變2、執(zhí)行“濾鏡”→“渲染”→“分層云彩”命令3、執(zhí)行“圖像”→“調(diào)整”→“曲線調(diào)整”命令，調(diào)整亮度4、執(zhí)行“圖像”→“反相”命令5、執(zhí)行“圖像”→“調(diào)整”→“亮度/對比度”命令6、執(zhí)行“圖像”→“調(diào)整”→“色相/飽和度”命令閃電制作方法1、從工作區(qū)右上角向工作區(qū)左下角的漸變75濾鏡效果實例--扭曲文字扭曲文字，效果如下圖所示

要點提示：對柵格后的文本進行旋轉(zhuǎn)扭曲操作濾鏡效果實例--扭曲文字扭曲文字，效果如下圖所示要點提示：762、添加一個空白覆蓋層圖層面板：圖層面板上顯示了圖像中的所有圖層、圖層組和圖層效果，我們可以使用圖層面板上的各種功能來完成一些圖像編輯任務，例如創(chuàng)建、隱藏、復制和刪除圖層等。例如，72dpi表示圖像中每英寸包含72個像素或點。若勾選對話框底部的“約束比例”復選框，會在寬度和高度間建立等比例效果。復習：Photoshop合成圖像Photoshop蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應的變化。Photoshop蒙版原理Photoshop顏色模式（2）路徑由定位點和連接定位點的線段(曲線)構成；可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；中文版PhotoshopCS提供的選取工具分為兩大類，一類是規(guī)則選取工具也稱為框選工具，另一類是建立不規(guī)則選區(qū)的工具也稱為套索類工具?！铮?）打開待處理的圖像文件后，對需處理的部分加以選擇。Photoshop:窗口->工作區(qū)->復位調(diào)板位置黑色為完全透明，白色為完全不透明。在圖層面板中，單擊“添加圖層樣式”按鈕或者執(zhí)行“圖層”→“圖層樣式”命令，設置圖層樣式。BMP圖像文件格式是一種標準的點陣式圖像格式，支持RGB、灰度和位圖色彩模式，但不支持Alpha通道。蒙版可以控制圖層區(qū)域內(nèi)部分內(nèi)容可隱藏或是顯示。替換頁面上其他位置的圖層內(nèi)容。閃爍的星光效果，如下圖所示。路徑是定義和編輯圖像區(qū)域的最佳方法之一，其能用來精確定義具體區(qū)域，并保存這些結果以便以后重復使用。濾鏡效果實例--火焰字制作火焰字，效果如圖下圖所示

2、添加一個空白覆蓋層濾鏡效果實例--火焰字制作火焰字，效果77火焰字制作方法1、新建圖片，并色彩模式設置為“灰度模式”2、輸入文字，然后柵格化“火焰字”文字圖層，并且復制該圖層3、選擇“火焰字”副本圖層，執(zhí)行“濾鏡”→“模糊”→“高斯模糊”命令，半徑為24、執(zhí)行“濾鏡”→“風格化”→“風”命令5、選擇火苗區(qū)域（按住鍵盤上Ctrl鍵和Alt鍵）6、執(zhí)行“濾鏡”→“扭曲”→“波紋”命令7、執(zhí)行“圖像”→“模式”→“索引顏色”命令8、執(zhí)行“圖像”→“模式”→“顏色表”命令火焰字制作方法1、新建圖片，并色彩模式設置為“灰度模式”78濾鏡效果實例—發(fā)光文字使用“徑向模糊”濾鏡功能制作“秀我風采”文字的噴發(fā)光芒效果，效果如圖：濾鏡效果實例—發(fā)光文字使用“徑向模糊”濾鏡功能制作“秀我風79網(wǎng)頁效果設計在網(wǎng)站設計與制作過程當中，經(jīng)常先使用Photoshop制作網(wǎng)頁的可視化效果。在完成頁面效果的制作之后，使用切片工具制作網(wǎng)頁所需要的素材。網(wǎng)頁效果設計在網(wǎng)站設計與制作過程當中，經(jīng)常先使用Photos80網(wǎng)頁效果設計實例（1）網(wǎng)站首頁圖片的設計網(wǎng)頁效果設計實例（1）網(wǎng)站首頁圖片的設計81網(wǎng)頁效果設計實例（2）網(wǎng)站首頁圖片的設計網(wǎng)頁效果設計實例（2）網(wǎng)站首頁圖片的設計82網(wǎng)頁切片切片目的：盡可能小的減少網(wǎng)頁文件的體積切片網(wǎng)頁圖片分為：（1）圖片：一般無法分割的圖片（原圖大?。?。（2）背景色：通過網(wǎng)頁代碼可以實現(xiàn)的顏色。（3）背景圖案：一般體積很小，通常用于填充網(wǎng)頁和表格。網(wǎng)頁切片切片目的：盡可能小的減少網(wǎng)頁文件的體積83切片切片是圖像的一塊矩形區(qū)域。通過將圖像劃分為切片，將能夠更好地控制圖像的功能和文件大小?？梢允褂们衅瑢⒃磮D像分成許多的功能區(qū)域。在您存儲圖像和HTML文件時，每個切片都會作為獨立文件存儲，并具有其自己的設置和顏色調(diào)板，而且會保留正確的鏈接、翻轉(zhuǎn)效果以及動畫效果。切片切片是圖像的一塊矩形區(qū)域。通過將圖像劃分為切片，將能84圖像切片實例圖像切片實例85內(nèi)容概要（4）ImageReadyCS介紹1動畫圖片制作(實例)2設計Web頁3內(nèi)容概要（4）ImageReadyCS介紹1動畫圖片制作86ImageReadyCSImageReady是集成在AdobePhotoshop中的一個應用程序，是一個網(wǎng)頁GIF動畫編輯工具。ImageReady功能簡單易學，其卓越的網(wǎng)絡圖像處理制作能力和動畫制作能力受到大都用戶的喜愛。ImageReadyCSImageReady是集成在Ado87認識ImageReadyCS認識ImageReadyCS

要啟動ImageReadyCS，在Photoshop中執(zhí)行“文件”→“在ImageReadyCS中進行編輯”命令，或者單擊工具箱下端的按鈕，系統(tǒng)彈出ImageReadyCS工作界面。

ImageReadyCS是Photoshop家庭成員，其工作界面和Photoshop非常相似，各種工具、控制面板、瀏覽窗口都一樣，ImageReadyCS只多了一項動畫控制面板。

認識ImageReadyCS認識ImageReadyCS88ImageReady界面動畫調(diào)板ImageReady界面動畫調(diào)板89小技巧恢復默認界面Photoshop:窗口->工作區(qū)->復位調(diào)板位置ImageReady:窗口->工作區(qū)->默認調(diào)板位置小技巧恢復默認界面90ImageReady工具箱ImageReady工具箱91ImageReady專有工具ImageReady專有工具92ImageReady中的圖像映射圖像映射將圖像區(qū)域鏈接到URL。您可以在一個圖像中設置多個鏈接區(qū)域（名為圖像映射區(qū)域），鏈接到其他Web頁或多媒體文件。

說白了就是FrontPage當中的圖片熱區(qū)ImageReady中的圖像映射圖像映射將圖像區(qū)域鏈接到U93網(wǎng)頁切片切片目的：盡可能小的減少網(wǎng)頁文件的體積切片網(wǎng)頁圖片分為：（1）圖片：一般無法分割的圖片（原圖大小）。（2）背景色：通過網(wǎng)頁代碼可以實現(xiàn)的顏色。（3）背景圖案：一般體積很小，通常用于填充網(wǎng)頁和表格。網(wǎng)頁切片切片目的：盡可能小的減少網(wǎng)頁文件的體積94切片切片是圖像的一塊矩形區(qū)域。通過將圖像劃分為切片，將能夠更好地控制圖像的功能和文件大小。可以使用切片將源圖像分成許多的功能區(qū)域。在您存儲圖像和HTML文件時，每個切片都會作為獨立文件存儲，并具有其自己的設置和顏色調(diào)板，而且會保留正確的鏈接、翻轉(zhuǎn)效果以及動畫效果。切片切片是圖像的一塊矩形區(qū)域。通過將圖像劃分為切片，將能95使用動畫控制面板使用動畫控制面板

使用動畫控制面板使用動畫控制面板96動畫原理動畫原理

“動畫”就是多幅圖像按一定的先后次序，在設定的時間內(nèi)依次顯示。在動畫制作過程中將其中一幅圖像稱作“幀”，動畫就是由這樣多幀圖像組成。每一幀較前一幀有輕微的變化，當連續(xù)、快速地顯示這些幀時就創(chuàng)造出運動效果。為了使人的肉眼感覺不到圖像的切換，一秒鐘至少要顯示24幀。在ImageReadyCS中，處理圖層是創(chuàng)建動畫的基礎。通過將動畫的每一幀置于其自身所在的圖層上，在不同的幀上顯示不同的圖層就可完成動畫的創(chuàng)作。

動畫原理動畫原理97動畫效果實例（1）逐幀顯示文字，效果如下圖所示。動畫效果描述：實現(xiàn)“歡迎您來到我的個人網(wǎng)站”文字內(nèi)容，從左到右逐字顯示效果。動畫效果實例（1）逐幀顯示文字，效果如下圖所示。動畫效果描述98關鍵步驟1、輸入文字2、添加一個空白覆蓋層3、創(chuàng)建10幀4、取消選擇（取消虛線框）5、選擇每一幀中的空白覆蓋層移動一下位置6、設置延時0.2秒關鍵步驟1、輸入文字99保存文件為GIF等在ImageReadyCS軟件中，文件有以下幾種保存方式。存儲：保存ImageReady自身文件格式，擴展名為PSD文件。存儲為：將已經(jīng)保存過的文件改名存儲，或者改變文件存儲位置。將優(yōu)化結果存儲為：可將當前文件保存為HTML文件格式。導出：可以導出GIF、SWF動畫文件。保存文件為GIF等100動畫效果實例（2）閃爍的星光效果，如下圖所示。動畫效果描述：實現(xiàn)星光閃爍效果。動畫效果實例（2）閃爍的星光效果，如下圖所示。動畫效果描述：101關鍵步驟1、打開圖片，創(chuàng)建2個空層2、在圖層1當中添加星（畫筆工具，在工具欄當中載入“混合畫筆”，選25）--不變的星星3、在圖層2當中畫星—會閃的星星4、創(chuàng)建新幀5、選擇第1幀隱藏圖層2（有星星的圖層），選擇第2幀隱藏圖層3（空白層，沒星星的）6、設置播放時間0.1秒關鍵步驟1、打開圖片，創(chuàng)建2個空層102動畫實例—文字顏色漸變實現(xiàn)文字從一種顏色漸漸的變成另一種顏色原理：只是將上面一個圖層的透明度降低,慢慢地看到下面一個圖層的顏色。動畫實例—文字顏色漸變實現(xiàn)文字從一種顏色漸漸的變成另一種顏色103關鍵步驟1、輸入文字，設置顏色（如：黃色）2、復制文字圖層，修改文字顏色（如：綠色）3、打開”動畫“調(diào)板，創(chuàng)建新幀4、選擇新創(chuàng)建的幀，修改文字副本圖層的透明度為05、選擇第1幀，單擊”過渡“實現(xiàn)過渡效果的創(chuàng)建關鍵步驟1、輸入文字，設置顏色（如：黃色）104設計Web頁Photoshop和ImageReady中的圖形工具和功能簡化了大多數(shù)Web設計任務。使用Photoshop和ImageReady進行Web頁（網(wǎng)頁）的設計類似于建筑師繪制建筑的效果圖。網(wǎng)頁設計員類似于建筑工人，他們制作的網(wǎng)頁就需要達到效果圖所需要的效果。設計Web頁Photoshop和ImageReady中105設計Web頁--頁面設計在ImageReady中，針對頁面和橫幅、網(wǎng)格、導向線和智能參考線的預設文檔大小簡化了頁面版式。在Photoshop和ImageReady中，都可以使用文本、繪圖和繪畫工具向版面中添加內(nèi)容。在ImageReady中，可以使用圖層、圖層組和編組的圖層來排列和對齊內(nèi)容。要試驗不同的頁面編排或?qū)С鲰撁娴牟煌问剑埵褂谩皥D層復合”調(diào)板。設計Web頁--頁面設計在ImageReady中，針對頁106設計Web頁--切片如果頁面編排已準備就緒，可以輸出到Web，您可以使用Photoshop和ImageReady中提供的切片工具，將頁面版式或復雜圖形劃分為多個區(qū)域，并指定獨立的壓縮設置（從而獲得較小的文件大?。ＴO計Web頁--切片如果頁面編排已準備就緒，可以輸出到W107設計Web頁--翻轉(zhuǎn)可以使用ImageReady中的“Web內(nèi)容”調(diào)板來跟蹤切片及其翻轉(zhuǎn)狀態(tài)。例如，您可以針對某個Web頁創(chuàng)建這樣一個按鈕：只要用戶將指針放置在該按鈕上，該按鈕就會發(fā)光。并且，您可以管理按鈕的狀態(tài)以及這些狀態(tài)中的活動。設計Web頁--翻轉(zhuǎn)可以使用ImageReady中的“W108Web內(nèi)容調(diào)板(ImageReady)Web內(nèi)容”調(diào)板使您能夠創(chuàng)建和查看圖像中的翻轉(zhuǎn)狀態(tài)以及設置其選項。除了翻轉(zhuǎn)狀態(tài)之外，“Web內(nèi)容”調(diào)板還能夠顯示切片、圖像映射和動畫幀。顯示切片和圖像映射可幫助您跟蹤圖像中包含翻轉(zhuǎn)效果的各個圖素。顯示動畫幀可以很方便地查看圖像的哪些狀態(tài)包含動畫。Web內(nèi)容調(diào)板(ImageReady)Web內(nèi)容”調(diào)板109Web內(nèi)容調(diào)板界面Web內(nèi)容調(diào)板界面110翻轉(zhuǎn)(ImageReady)翻轉(zhuǎn)是Web頁上的按鈕或圖像，當查看者將指針移到其上面或者點按它時，頁面就會發(fā)生變化。按鈕本身可能會發(fā)生變化，或者頁面上可能會出現(xiàn)另一個項目（如一幅照片或菜單項列表）。遠程翻轉(zhuǎn)觸發(fā)被翻轉(zhuǎn)的按鈕或圖像以外的Web頁圖素發(fā)生變化。翻轉(zhuǎn)(ImageReady)翻轉(zhuǎn)是Web頁上的按鈕或111創(chuàng)建翻轉(zhuǎn)要創(chuàng)建翻轉(zhuǎn)，請將翻轉(zhuǎn)圖像定義為基于圖層的切片或基于圖層的圖像映射。然后，使用ImageReady中的“Web內(nèi)容”調(diào)板和“圖層”調(diào)板，執(zhí)行以下任何操作來創(chuàng)建不同版本的圖形：添加或更改圖層樣式或移動圖層內(nèi)容來修改圖層內(nèi)容。使用新圖層替換圖像內(nèi)容。替換頁面上其他位置的圖層內(nèi)容。添加幀以創(chuàng)建翻轉(zhuǎn)動畫。創(chuàng)建翻轉(zhuǎn)要創(chuàng)建翻轉(zhuǎn)，請將翻轉(zhuǎn)圖像定義為基于圖層的切片或基于圖112翻轉(zhuǎn)實例—按鈕注意事項：

1、在制作翻轉(zhuǎn)按鈕的時候最好先完成所有效果的設計

2、每個翻轉(zhuǎn)狀態(tài)所看到的效果包括了當前圖層調(diào)板當中所看到的效果翻轉(zhuǎn)實例—按鈕113設計Web頁--動畫在Photoshop和ImageReady中，您都可以使用“動畫”調(diào)板來創(chuàng)建簡單的Web動畫?？梢允褂么苏{(diào)板來逐幀確定動畫的外觀。您可以從Photoshop中將動畫導出為動畫GIF，也可以從ImageReady中將動畫導出為動畫GIF或SWF文件。在ImageReady中，您可以結合切片組、嵌套表、百分比寬度表以及遠程翻轉(zhuǎn)（將鼠標移到某幅圖像上時，另一幅圖像發(fā)生變化）來創(chuàng)建動畫。設計Web頁--動畫在Photoshop和ImageR114設計Web頁--導出和圖像優(yōu)化當頁面或圖形已準備就緒可用于最后的導出時，可以使用“存儲為Web所用格式”對話框(Photoshop)和“優(yōu)化”調(diào)板(ImageReady)來精確指定應如何導出頁面或圖形。設計Web頁--導出和圖像優(yōu)化當頁面或圖形已準備就緒可用于最115為什么要優(yōu)化圖像？在進行網(wǎng)頁創(chuàng)建和利用網(wǎng)絡傳送圖像時，要在保證一定質(zhì)量、顯示效果的同時盡可能減小圖像文件的大小。當前常見的Web圖像格式有三種：JPG格式、GIF格式、PNG格式。為什么要優(yōu)化圖像？在進行網(wǎng)頁創(chuàng)建和利用網(wǎng)絡傳送圖像時，要在116是JPG還是GIF?圖像在網(wǎng)絡中的使用，大多采用JPG和GIF格式，什么時候用JPG，何時又用GIF格式呢？對圖像的優(yōu)化從很大程度上是對于圖像的顏色進行優(yōu)化，而構成一幅圖像的色調(diào)有兩種情況，連續(xù)色調(diào)和非連續(xù)色調(diào)。從各種情況下壓縮測試的效果來看，對于連續(xù)色調(diào)的圖像最好使用JPG格式進行壓縮，而對于不連續(xù)色調(diào)的圖像最好使用GIF格式進行壓縮，以使圖像質(zhì)量和圖像大小有一個最佳的平衡點。是JPG還是GIF?圖像在網(wǎng)絡中的使用，大多采用JPG和117PhotoshopCS工作界面PhotoshopCS工作界面118圖層管理

1.選擇圖層

2.隱藏、顯示圖層內(nèi)容

3.更改圖層順序

4.鏈接圖層

5.調(diào)整圖層內(nèi)容（對齊、分布）

6.鎖定圖層

7.從圖層取樣圖層管理1.選擇圖層119合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是“圖像”→“圖像大小”命令，打開如下圖所示的對話框。用戶在像素大小或文檔大小中調(diào)整“寬度”和“高度”值。若勾選對話框底部的“約束比例”復選框，會在寬度和高度間建立等比例效果。單擊“好”按鈕后，圖像將按新的寬度和高度對整個圖像進行縮放，從而改變圖像的尺寸大小。

合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是120Photoshop蒙版原理Photoshop蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應的變化。黑色為完全透明，白色為完全不透明。Photoshop蒙版原理Photoshop蒙板是將不同灰度121蒙版實例蒙版實例122通道摳圖范例通道摳圖范例123ImageReady專有工具ImageReady專有工具124保存文件為GIF等在ImageReadyCS軟件中，文件有以下幾種保存方式。存儲：保存ImageReady自身文件格式，擴展名為PSD文件。存儲為：將已經(jīng)保存過的文件改名存儲，或者改變文件存儲位置。將優(yōu)化結果存儲為：可將當前文件保存為HTML文件格式。導出：可以導出GIF、SWF動畫文件。保存文件為GIF等125一、網(wǎng)頁圖像處理概述網(wǎng)頁的設計少不了對圖形圖像的制作和處理。圖形圖像設計與處理軟件層出不窮，如Adobe公司推出的Photoshop、Firework軟件、Corel公司推出的CorelDRAW等。本教程介紹的是目前使用最廣泛的圖形圖像設計與制作軟件Photoshop。一、網(wǎng)頁圖像處理概述網(wǎng)頁的設計少不了對圖形圖像的制作和處理。126位圖與矢量圖

1．位圖位圖也稱為點陣圖或像素圖，計算機屏幕上的圖像是由屏幕上的發(fā)光點構成的，每個點用二進制數(shù)據(jù)來描述其顏色與亮度等信息，這些點是離散的，類似于矩陣。多個像素的色彩組合就形成了圖像，稱之為位圖。2．矢量圖矢量圖也稱為向量圖，是用一系列計算機指令來描述和記錄的一幅圖，一幅圖可分解為一系列由點、線、面等組成的子圖，矢量圖記錄的是對象的幾何形狀、線條粗細和色彩等，因此生成的文件存儲容量很小。

位圖與矢量圖127圖像分辨率分辨率是指單位長度上像素的多少，單位長度上像素越多，圖像就越清晰。例如，72dpi表示圖像中每英寸包含72個像素或點。位圖矢量圖圖像分辨率分辨率是指單位長度上像素的多少，單位長度上像128PhotoshopCS工作界面PhotoshopCS工作界面129PhotoshopCS工作界面PhotoshopCS的窗口是由標題欄、菜單欄、工具選項欄、工具箱、工作區(qū)和控制面板6大部分組成。（1）標題欄（2）菜單欄（3）工具選項欄PhotoshopCS工作界面PhotoshopCS130PhotoshopCS工作界面（4）工具箱：Photoshop軟件的所有工具（繪圖、選擇工具、調(diào)整工具等）都置于工具箱中，用戶需要使用什么工具，只要在工具箱中選擇即可。（5）控制面板：控制面板是Photoshop軟件中非常重要的輔助作圖工具，其總是浮動在活動窗口中最前面，供用戶隨時訪問。（6）工作區(qū)：工作區(qū)是圖像編輯區(qū)，顯示了當前正在編輯的圖像內(nèi)容。PhotoshopCS工作界面（4）工具箱：Photosh131Photoshop工具箱工具箱上的工具大致分為以下四大類：（1）選項區(qū)工具。包括選區(qū)工具組、套索工具組、魔術棒工具。（2）繪制工具。包括畫筆工具組、歷史畫筆工具組、橡皮擦工具組、漸變工具組、吸管工具。（3）編輯工具。包括印章工具組、亮化工具組、模糊工具組、鋼筆工具組。（4）輔助工具。包括移動工具、裁剪工具、手形工具、縮放工具、注釋工具組等。Photoshop工具箱工具箱上的工具大致分為以下四大類：132圖層控制面板圖層控制面板如下圖所示，主要用來對圖層進行管理和操作，包括添加圖層、刪除圖層、合并圖層等。圖層控制面板圖層控制面板如下圖所示，主要用來對圖層進行管理和133圖層基本概念圖層概念：我們可以把圖層想像成是一張一張疊起來的透明膠片，每張透明膠片上都有不同的畫面，改變圖層的順序和屬性可以改變圖像的最后效果。通過對圖層的操作，使用它的特殊功能可以創(chuàng)建很多復雜的圖像效果。圖層面板：圖層面板上顯示了圖像中的所有圖層、圖層組和圖層效果，我們可以使用圖層面板上的各種功能來完成一些圖像編輯任務，例如創(chuàng)建、隱藏、復制和刪除圖層等。

圖層類型：1.背景圖層2.一般圖層3.圖層組圖層基本概念圖層概念：我們可以把圖層想像成是一張一張疊起134圖層操作1.新建圖層2.復制圖層3.顏色標識4.刪格化圖層5.合并圖層6.蓋印圖層7.圖層疊加模式圖層操作1.新建圖層135圖層管理

1.選擇圖層

2.隱藏、顯示圖層內(nèi)容

3.更改圖層順序

4.鏈接圖層

5.調(diào)整圖層內(nèi)容（對齊、分布）

6.鎖定圖層

7.從圖層取樣圖層管理1.選擇圖層136Photoshop顏色模式（1）常見的顏色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。1．RGB模式RGB模式是在Photoshop中處理圖像時接觸最多的顏色模式，RGB顏色是由紅、綠、藍三原色構成。2．CMYK模式CMYK顏色模式是一種專門用來印刷的顏色，CMYK顏色是由青色、品紅、黃色、黑色四種印刷顏色組成。

Photoshop顏色模式（1）常見的顏色模式有：RGB、C137Photoshop顏色模式（2）3．灰度模式灰度模式采用了256級不同強度的灰度來描述圖像。其值為0%時，表示為黑色，值為100%時，表示為白色。

4．Lab模式Lab模式是國際照明委員會（CIE）于1976年公布的一種色彩模式。L表示亮度，范圍在0~100之間。a和b則表示顏色過渡的變化值。

Photoshop顏色模式（2）3．灰度模式138Photoshop顏色模式（3）5．HSB模式HSB模式是一種可以調(diào)整圖像顏色效果的色彩值，Photoshop圖像不能直接保存為HSB模式，執(zhí)行“圖像”→“調(diào)整”→“色相/飽和度”命令后，才能對圖像進行HSB模式調(diào)整。

6．Bitmap模式Bitmap模式又稱為位圖模式，它是使用黑、白兩種顏色來描述圖像的一種方式，因為位置模式的圖像也稱作黑白圖像。7．索引顏色模式索引顏色模式也稱作映射顏色。在這種模式下，只能存儲一個8bit色彩深度的文件，即最多256種顏色，而且顏色都是預先定義好的。Photoshop顏色模式（3）5．HSB模式139合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是“圖像”→“圖像大小”命令，打開如下圖所示的對話框。用戶在像素大小或文檔大小中調(diào)整“寬度”和“高度”值。若勾選對話框底部的“約束比例”復選框，會在寬度和高度間建立等比例效果。單擊“好”按鈕后，圖像將按新的寬度和高度對整個圖像進行縮放，從而改變圖像的尺寸大小。

合成圖像--調(diào)整圖像大小改變當前編輯的圖像大小，其常用方法是140合成圖像--調(diào)整圖像色調(diào)調(diào)整圖像色調(diào)，其最直觀方法是“圖像”→“調(diào)整”→“色彩平衡”命令，打開下圖所示對話框。用戶可根據(jù)圖像最終效果進行調(diào)整和設置。單擊“好”按鈕后，圖像將按新的色調(diào)整生成效果圖。

合成圖像--調(diào)整圖像色調(diào)調(diào)整圖像色調(diào)，其最直觀方法是“圖像”141選擇鋼筆工具,選擇目標對象替換頁面上其他位置的圖層內(nèi)容。扭曲文字，效果如下圖所示GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。Photoshop蒙版原理可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；（6）單擊工具箱中文字工具，在選文字工具選項欄上設置字體為“黑體”、大小為“22點”、文字顏色為“白色”。ImageReadyCS介紹圖層樣式可以創(chuàng)建出投影、發(fā)光、浮雕、描邊等特殊效果。Photoshop:窗口->工作區(qū)->復位調(diào)板位置逐幀顯示文字，效果如下圖所示。3、在圖層2當中畫星—會閃的星星閃爍的星光效果，如下圖所示。翻轉(zhuǎn)(ImageReady)PhotoshopCS工作界面使用“徑向模糊”濾鏡功能制作“秀我風采”文字的噴發(fā)光芒效果，效果如圖：綜合實例二：企業(yè)標志制作2、輸入文字，然后柵格化“火焰字”文字圖層，并且復制該圖層它是基于色彩模式這一基礎上衍生出的簡化操作工具。JPEG圖像文件格式主要用于圖像瀏覽及超文本文檔，如HTML文檔等。色彩調(diào)整實例制作“感受中國”頁面圖像，效果如下圖所示

具體要求：1、加強圖像綠色調(diào)；2、調(diào)整圖像“寬度”值為“698像素”、“高度”值為“179像素”。選擇鋼筆工具,選擇目標對象色彩調(diào)整實例制作“感受中國”頁面142色彩調(diào)整實例步驟“感受中國”頁面圖像制作步驟如下：（1）執(zhí)行“文件”→“打開”命令，打開原始圖像。（2）執(zhí)行“圖像”→“調(diào)整”→“色彩平衡”命令，在彈出的“色彩平衡”調(diào)整對話框中將綠色中間值設置為“+80”，點擊“好”按鈕。（3）執(zhí)行“圖像”→“圖像大小”命令，在彈出“圖像大小”調(diào)整對話框中取消“約束比例”復選框，設置“寬度”值為“698”、“高度”值為“179”，點擊“好”按鈕。（4）執(zhí)行“文件”→“存儲為”命令來存儲效果圖，選擇JPG或PNG格式。色彩調(diào)整實例步驟“感受中國”頁面圖像制作步驟如下：（1）執(zhí)143使用選擇工具中文版PhotoshopCS提供的選取工具分為兩大類，一類是規(guī)則選取工具也稱為框選工具，另一類是建立不規(guī)則選區(qū)的工具也稱為套索類工具。

1．規(guī)則的框選工具在使用時，只需在圖像中拖動鼠標指針或單擊鼠標左鍵，即可出一個選擇區(qū)域。。

2．套索選擇工具可用于徒手畫的方式描繪出不規(guī)則形狀的選取區(qū)域。被選定的圖像區(qū)域邊界上會顯示出一條流動的虛線，對虛線以內(nèi)的選定區(qū)域可以進行任意操作。使用選擇工具中文版PhotoshopCS提供的選取工具144三、Photoshop合成圖像選擇工具組面板

框選工具組套索工具組三、Photoshop合成圖像選擇工具組面板框選工具組套145三、Photoshop合成圖像選區(qū)的操作（1）增加選區(qū)(按住鍵盤上Shift鍵

)（2）減少選區(qū)(按住鍵盤上Alt鍵

)（3）填充選區(qū)(前景顏色填充（Alt+Delete）或背景顏色填充（Ctrl+Delete）

)（4）描邊選區(qū)（5）移動選區(qū)（6）平滑選區(qū)（7）羽化選區(qū)（8）反向選擇三、Photoshop合成圖像選區(qū)的操作146法學網(wǎng)頁圖像處理優(yōu)質(zhì)精選課件147合成圖像實例

合成照片，效果如下圖所示

最終效果圖素材一素材二合成圖像實例合成照片，效果如下圖所示最終效果圖素材一素材148圖像格式（1）

Photoshop保存文件過程中，有多種圖像格式可供用戶選擇，不同的格式圖像的色彩品質(zhì)、容量大小都有一程度的差異。不同的文件格式可以用擴展名來區(qū)分，如PSD、JPG、GIF、PNG等。

1．PSD（.PSD）格式

PSD圖像文件是Photoshop軟件自身格式，也稱為原文件格式，是惟一能支持全部圖像色彩模式的格式。以PSD格式保存的圖像可以包含圖層、通道及色彩模式。

2．JPEG(.JPG；.JPE)格式

JPEG圖像文件格式主要用于圖像瀏覽及超文本文檔，如HTML文檔等。支持多種色彩模式。使用JPEG格式保存的圖像經(jīng)過高倍率的壓縮，可使圖像文件容量變得較小，但在壓縮過程中會丟失部分數(shù)據(jù)。

圖像格式（1）Photoshop保存文件過程中，有多種圖像149圖像格式（2）3．GIF（.GIF）格式它在壓縮過程中，圖像的像素資料不會被丟失，然而丟失的卻是圖像的色彩。GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及文字。4．PND（.PNG）格式

PNG圖像格式文件(或者稱為數(shù)據(jù)流)由一個8字節(jié)的PNG文件署名(PNGfilesignature)域和按照特定結構組織的3個以上的數(shù)據(jù)塊(chunk)組成。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)