【正文】 。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 是 JPG還是 GIF ? ? 圖像在網(wǎng)絡(luò)中的使用，大多采用 JPG和 GIF格式，什么時(shí)候用 JPG，何時(shí)又用 GIF格式呢？ ?對(duì)圖像的優(yōu)化從很大程度上是對(duì)于圖像的顏色進(jìn)行優(yōu)化，而構(gòu)成一幅圖像的色調(diào)有兩種情況，連續(xù)色調(diào)和非連續(xù)色調(diào)。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 為什么要優(yōu)化圖像？ ? 在進(jìn)行網(wǎng)頁創(chuàng)建和利用網(wǎng)絡(luò)傳送圖像時(shí)，要在保證一定質(zhì)量、顯示效果的同時(shí)盡可能減小圖像文件的大小。 在 ImageReady 中，您可以結(jié)合切片組、嵌套表、百分比寬度表以及遠(yuǎn)程翻轉(zhuǎn)（將鼠標(biāo)移到某幅圖像上時(shí)，另一幅圖像發(fā)生變化）來創(chuàng)建動(dòng)畫。 可以使用此調(diào)板來逐幀確定動(dòng)畫的外觀。 ?添加幀以創(chuàng)建翻轉(zhuǎn)動(dòng)畫。 ?使用新圖層替換圖像內(nèi)容。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 創(chuàng)建翻轉(zhuǎn) ?要?jiǎng)?chuàng)建翻轉(zhuǎn)，請(qǐng)將翻轉(zhuǎn)圖像定義為基于圖層的切片或基于圖層的圖像映射。 按鈕本身可能會(huì)發(fā)生變化，或者頁面上可能會(huì)出現(xiàn)另一個(gè)項(xiàng)目（如一幅照片或菜單項(xiàng)列表）。 顯示動(dòng)畫幀可以很方便地查看圖像的哪些狀態(tài)包含動(dòng)畫。 除了翻轉(zhuǎn)狀態(tài)之外，“ Web 內(nèi)容”調(diào)板還能夠顯示切片、圖像映射和動(dòng)畫幀。并且，您可以管理按鈕的狀態(tài)以及這些狀態(tài)中的活動(dòng)。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 設(shè)計(jì) Web頁 翻轉(zhuǎn) ?可以使用 ImageReady 中的“ Web 內(nèi)容”調(diào)板來跟蹤切片及其翻轉(zhuǎn)狀態(tài)。 要試驗(yàn)不同的頁面編排或?qū)С鲰撁娴牟煌问剑?qǐng)使用“圖層復(fù)合”調(diào)板。 在 Photoshop 和 ImageReady 中，都可以使用文本、繪圖和繪畫工具向版面中添加內(nèi)容。 ?網(wǎng)頁設(shè)計(jì)員類似于建筑工人，他們制作的網(wǎng)頁就需要達(dá)到效果圖所需要的效果。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 關(guān)鍵步驟 ?輸入文字，設(shè)置顏色（如：黃色） ?復(fù)制文字圖層，修改文字顏色（如：綠色） ?打開 ”動(dòng)畫“調(diào)板，創(chuàng)建新幀 ?選擇新創(chuàng)建的幀，修改文字副本圖層的透明度為 0 ?選擇第 1幀，單擊”過渡“實(shí)現(xiàn)過渡效果的創(chuàng)建 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 設(shè)計(jì) Web頁 ?Photoshop 和 ImageReady 中的圖形工具和功能簡(jiǎn)化了大多數(shù) Web 設(shè)計(jì)任務(wù)。 動(dòng)畫效果描述：實(shí)現(xiàn)星光閃爍效果。 ? 導(dǎo)出：可以導(dǎo)出 GIF、 SWF動(dòng)畫文件。 ? 存儲(chǔ)為：將已經(jīng)保存過的文件改名存儲(chǔ)，或者改變文件存儲(chǔ)位置。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 關(guān)鍵步驟 ?輸入文字 ?添加一個(gè)空白覆蓋層 ?創(chuàng)建 10幀 ?取消選擇（取消虛線框） ?選擇每一幀中的空白覆蓋層移動(dòng)一下位置 ?設(shè)置延時(shí) 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 保存文件為 GIF等 在 ImageReady CS軟件中，文件有以下幾種保存方式。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 動(dòng)畫效果實(shí)例（ 1） ?逐幀顯示文字，效果如下圖所示。 在 ImageReady CS中，處理圖層是創(chuàng)建動(dòng)畫的基礎(chǔ)。每一幀較前一幀有輕微的變化，當(dāng)連續(xù)、快速地顯示這些幀時(shí)就創(chuàng)造出運(yùn)動(dòng)效果。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 使用動(dòng)畫控制面板 ?使用動(dòng)畫控制面板 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 動(dòng)畫原理 ?動(dòng)畫原理 “動(dòng)畫”就是多幅圖像按一定的先后次序，在設(shè)定的時(shí)間內(nèi)依次顯示。 ?可以使用切片將源圖像分成許多的功能區(qū)域。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 切片 ?切片 是圖像的一塊矩形區(qū)域。 ?（ 2）背景色：通過網(wǎng)頁代碼可以實(shí)現(xiàn)的顏色。 您可以在一個(gè)圖像中設(shè)置多個(gè)鏈接區(qū)域（名為圖像映射區(qū)域），鏈接到其他 Web 頁或多媒體文件。 ImageReady CS是 Photoshop家庭成員，其工作界面和 Photoshop非常相似，各種工具、控制面板、瀏覽窗口都一樣， ImageReady CS只多了一項(xiàng)動(dòng)畫控制面板。 ImageReady功能簡(jiǎn)單易學(xué)，其卓越的網(wǎng)絡(luò)圖像處理制作能力和動(dòng)畫制作能力受到大都用戶的喜愛。 在您存儲(chǔ)圖像和 HTML 文件時(shí)，每個(gè)切片都會(huì)作為獨(dú)立文件存儲(chǔ)，并具有其自己的設(shè)置和顏色調(diào)板，而且會(huì)保留正確的鏈接、翻轉(zhuǎn)效果以及動(dòng)畫效果。 通過將圖像劃分為切片，將能夠更好地控制圖像的功能和文件大小。 ?（ 3）背景圖案：一般體積很小，通常用于填充網(wǎng)頁和表格。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 網(wǎng)頁效果設(shè)計(jì)實(shí)例（ 1） ?網(wǎng)站首頁圖片的設(shè)計(jì) 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 網(wǎng)頁效果設(shè)計(jì)實(shí)例（ 2） ?網(wǎng)站首頁圖片的設(shè)計(jì) 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 網(wǎng)頁切片 ?切片目的：盡可能小的減少網(wǎng)頁文件的體積 ?切片網(wǎng)頁圖片分為： ?（ 1）圖片：一般無法分割的圖片（原圖大?。? 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡效果實(shí)例 閃電 ?制作閃電，效果如下圖所示 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 閃電制作方法 ?從工作區(qū)右上角向工作區(qū)左下角的漸變 ?執(zhí)行“濾鏡” → “渲染” → “分層云彩”命令 ?執(zhí)行“圖像” → “調(diào)整” → “曲線調(diào)整”命令 ，調(diào)整亮度 ?執(zhí)行“圖像” → “反相”命令 ?執(zhí)行“圖像” → “調(diào)整” → “亮度 /對(duì)比度”命令 ?執(zhí)行“圖像” → “調(diào)整” → “色相 /飽和度”命令 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡效果實(shí)例 扭曲文字 ?扭曲文字，效果如下圖所示 要點(diǎn)提示：對(duì)柵格后的文本進(jìn)行旋轉(zhuǎn)扭曲操作 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡效果實(shí)例 火焰字 ?制作火焰字，效果如圖下圖所示 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 火焰字制作方法 ?新建圖片，并色彩模式設(shè)置為“灰度模式” ?輸入文字，然后柵格化“火焰字”文字圖層，并且復(fù)制該圖層 ?選擇“火焰字”副本圖層，執(zhí)行“濾鏡” → “模糊” → “高斯模糊”命令，半徑為 2 ?執(zhí)行“濾鏡” → “風(fēng)格化” → “風(fēng)”命令 ?選擇火苗區(qū)域（按住鍵盤上 Ctrl鍵和 Alt鍵 ） ?執(zhí)行“濾鏡” → “扭曲” → “波紋”命令 ?執(zhí)行“圖像” → “模式” → “索引顏色”命令 ?執(zhí)行“圖像” → “模式” → “顏色表”命令 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡效果實(shí)例 — 發(fā)光 文字 ?使用“徑向模糊”濾鏡功能制作 “秀我風(fēng)采”文字的噴發(fā)光芒效果，效果如圖： 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 網(wǎng)頁效果設(shè)計(jì) ?在網(wǎng)站設(shè)計(jì)與制作過程當(dāng)中，經(jīng)常先使用Photoshop制作網(wǎng)頁的可視化效果。 ★（ 3）然后在對(duì)話框中設(shè)置相應(yīng)的參數(shù)后，點(diǎn)“好”按鈕即可。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡的基本操作 ?在 Photoshop CS中盡管有風(fēng)格各異、用途不同的濾鏡，但它們通常的使用步驟如下： ★（ 1）打開待處理的圖像文件后，對(duì)需處理的部分加以選擇。 濾鏡以像素為單位進(jìn)行處理，濾鏡的處理效果與圖像的分辨率有關(guān)。 通過使用濾鏡，可以為圖像加入各種特效， 讓平談無奇的圖片出現(xiàn)神奇的效果。 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 通道摳圖范例 《 多媒體網(wǎng)頁設(shè)計(jì)教程 》 濾鏡概述 ?在主單菜單上單擊“濾鏡”命令，將打開濾鏡菜單，其分為 4個(gè)部分。再說通俗點(diǎn)：通道中只有一種顏色的不同亮度，是一種灰度圖像。也就是說，通道是利用圖像的色彩值進(jìn)行圖像的修改的，我們可以把通道看作攝像機(jī)的中的濾光鏡。但如果是一幅 CMYK圖像，就有了四個(gè)默認(rèn)通道： Cyan（藍(lán)綠）、 Magenta（紫紅）、 Yellow（黃）、 Black（黑）。它是基于色彩模式這一基礎(chǔ)上衍生出的簡(jiǎn)化操作工具。黑色為完全透明，白色為完全不透明。更改蒙版可以對(duì)圖層應(yīng)用各種效果，不會(huì)影響該圖層上