第14章 ImageReady CS2的基本應(yīng)用

第14章知識(shí)要ImageReadyCS2的基本應(yīng)用

ImageReadyCS2簡介

ImageReadyCS2工作界面

制作網(wǎng)頁動(dòng)畫

優(yōu)化網(wǎng)頁圖像切片圖像映射

翻轉(zhuǎn)應(yīng)用實(shí)例14.1ImageReadyCS2概述

ImageReadyCS2同PhotoshopCS2一樣，也具有處理網(wǎng)頁圖像的能力，但是ImageReadyCS2在網(wǎng)頁圖像處理功能方面更專業(yè)、更全面，是一款強(qiáng)大的網(wǎng)絡(luò)圖像和動(dòng)畫圖像的處理工具，它提供了很多網(wǎng)絡(luò)方面的功能，比如優(yōu)化圖像、制作Gif動(dòng)畫以及許多網(wǎng)頁特效等。

14.1ImageReadyCS2概述ImageReadyCS2具有如下的新功能：切片管理功能圖像優(yōu)化功能圖像映射功能制作翻轉(zhuǎn)圖像功能

14.2ImageReadyCS2工作界面

ImageReadyCS2的界面如圖1所示。圖1

ImageReadyCS2工作界面14.2.1工具箱

ImageReadyCS2工作界面中的工具箱與PhotoshopCS2中的工具箱相比，少了許多圖像的繪制工具，但是多了一個(gè)新的工具——【圖像映射】，使用此工具可以給圖像的某個(gè)區(qū)域設(shè)置超級(jí)鏈接，目的是為了實(shí)現(xiàn)網(wǎng)頁的跳轉(zhuǎn)。

在ImageReadyCS2中圖像的映射工具分成了兩組。一組是【矩形圖像映射工具】、【圓形圖像映射工具】、【多變形圖像映射工具】；另外一組是【圖像映射選擇工具】

。14.2.2控制調(diào)板

ImageReadyCS2與PhotoshopCS2相比，少了幾個(gè)控制調(diào)板，它們分別是【導(dǎo)航器】、【通道】和【路徑】等，但是同時(shí)增加了以下幾個(gè)調(diào)板：切片：可以將網(wǎng)頁圖像分割成多個(gè)小塊，提高網(wǎng)頁圖像的下載速度；圖像映射：把圖像上的某塊區(qū)域鏈接到一個(gè)URL上；優(yōu)化：設(shè)置圖像的優(yōu)化參數(shù)；顏色表：主要用于圖像的優(yōu)化；Web內(nèi)容：制作翻轉(zhuǎn)效果；動(dòng)畫：制作Gif動(dòng)畫。14.2.3圖像窗口

ImageReadyCS2的圖像顯示窗口共有4種不同的顯示方式，分別是：【原稿】、【優(yōu)化】、【雙聯(lián)】、【四聯(lián)】。需要切換窗口之間的顯示模式，只需單擊窗口上方的標(biāo)簽名稱即可。如圖2所示。

圖2圖像窗口14.3制作網(wǎng)頁動(dòng)畫 在制作網(wǎng)頁的過程中，單一靜態(tài)的網(wǎng)頁會(huì)給人以呆板、僵硬的感覺，但如果用戶使用ImageReadyCS2制作一些諸如商家廣告標(biāo)語、發(fā)光旋轉(zhuǎn)的水晶體等簡單的小動(dòng)畫，在吸引網(wǎng)友的眼球的同時(shí)，也為網(wǎng)頁本身增添了幾分趣味性。14.3.1制作動(dòng)畫 所謂動(dòng)畫，就是在一定時(shí)間內(nèi)顯示的一系列圖像或者幀，當(dāng)前幀較之前一幀有一些變化。動(dòng)畫的播放原理與電影的放映非常相似，都是將一些靜止的、連續(xù)動(dòng)作的畫面以較快的速度播放出來，利用圖像在人的肉眼中具有暫存性的原理，從而使人感覺連續(xù)的播放效果。 詳細(xì)的制作過程參看課本14.3.1節(jié)。14.3.2動(dòng)畫播放設(shè)置 在制作好動(dòng)畫之后，就需要考慮播放的問題。這里介紹一些在動(dòng)畫播放之前，需要設(shè)置的一些選項(xiàng)。比如，播放次數(shù)、指定播放延遲的時(shí)間間隔等。設(shè)置播放次數(shù) 在【動(dòng)畫】調(diào)板中，單擊左下方的【播放選項(xiàng)】，從彈出的下拉菜單中可以設(shè)置動(dòng)畫的播放次數(shù)，如圖3所示。圖3設(shè)置播放次數(shù)14.3.2動(dòng)畫播放設(shè)置指定播放延遲 在動(dòng)畫播放的過程中，可以指定單幀或者每一幀的播放時(shí)間。所謂延遲就是表示一個(gè)幀顯示的時(shí)間。延遲時(shí)間以秒為單位顯示。選中要延遲的幀，單擊該幀縮略圖下方的延時(shí)下拉菜單圖標(biāo)，在彈出的下拉菜單中可以進(jìn)行延時(shí)選擇，如圖4所示。圖4延遲下拉菜單14.3.3優(yōu)化動(dòng)畫設(shè)置

在【動(dòng)畫】調(diào)板右上角的彈出菜單中，選擇【優(yōu)化動(dòng)畫】命令，彈出【優(yōu)化動(dòng)畫】對(duì)話框，如圖5所示。圖5【優(yōu)化動(dòng)畫】對(duì)話框14.4優(yōu)化網(wǎng)頁圖像

網(wǎng)頁在網(wǎng)絡(luò)上傳輸時(shí)，由于圖像的原因?qū)⑹咕W(wǎng)頁打開和下載的速度受到很大的影響，因此在制作網(wǎng)絡(luò)圖像時(shí)對(duì)圖像的優(yōu)化是很重要的。

ImageReady就提供了對(duì)網(wǎng)絡(luò)圖像的優(yōu)化功能，它能夠?qū)D像中的每一個(gè)切片進(jìn)行優(yōu)化，使它的文件盡量小，但是又能在Web頁上得到較好的效果。14.4.1優(yōu)化調(diào)板和顏色表調(diào)板 【優(yōu)化】調(diào)板

【優(yōu)化】調(diào)板用來設(shè)置優(yōu)化圖像的格式、品質(zhì)、透明度、下載時(shí)顯示方式等參數(shù)。如圖6所示。圖6【優(yōu)化】調(diào)板14.4.1優(yōu)化調(diào)板和顏色表調(diào)板【顏色表】調(diào)板 【顏色表】調(diào)板用來設(shè)置動(dòng)畫圖像的點(diǎn)選，即顯示圖像中所使用的顏色數(shù)目，如圖7所示，只有當(dāng)在【優(yōu)化】調(diào)板中設(shè)置圖像文件格式為GIF或PNG8，同時(shí)在圖像窗口選擇【優(yōu)化】、【雙聯(lián)】或【四聯(lián)】的窗口模式時(shí)，在【顏色表】調(diào)板中才會(huì)顯示出當(dāng)前圖像的顏色表格。圖7【顏色表】調(diào)板14.4.3根據(jù)文件大小優(yōu)化 在【優(yōu)化】調(diào)板右側(cè)的下拉菜單中，選擇【優(yōu)化文件大小】命令，可以將圖像或切片優(yōu)化到適當(dāng)?shù)奈募笮。@項(xiàng)功能可以將文件快速優(yōu)化到所需的大小，如圖8所示。所需文件大?。褐苯又付ㄋ栉募拇笮?；起點(diǎn)：設(shè)定優(yōu)化的依據(jù)；使用：設(shè)定優(yōu)化的對(duì)象；圖8【優(yōu)化文件大小】對(duì)話框14.4.4優(yōu)化后圖像的輸出 將圖像優(yōu)化后，假如要將優(yōu)化后的圖像應(yīng)用到網(wǎng)頁中，還必須將圖像輸出為網(wǎng)頁中可以使用的圖像格式。通常情況下，網(wǎng)頁中使用的圖像格式大多數(shù)為GIF或JPEG格式。14.5切片 切片是指將一幅完整的圖像劃分成多個(gè)矩形區(qū)域，主要是指用來定義一幅圖像的指定區(qū)域，切片一旦定義好以后，其中的每一個(gè)切片都是一個(gè)獨(dú)立的圖像文件，這些圖像區(qū)域可以用來模擬動(dòng)畫或其他的圖像效果，用來定義網(wǎng)頁上典型的切片式導(dǎo)航條、按鈕條、信息區(qū)和圖片區(qū)等。 利用切片所提供的功能實(shí)現(xiàn)圖像的最優(yōu)化設(shè)置、調(diào)色板、URL、滾動(dòng)及動(dòng)畫效果，在處理含有復(fù)雜圖像及包含有圖文混排的網(wǎng)頁時(shí)，用切片可以提高下載速度和圖像質(zhì)量。14.5.1切片工具 在ImageReady和Photoshop的工具箱中都包含有切片工具組，切片工具組包含兩個(gè)工具，如圖9所示。 切片工具：用于對(duì)圖像進(jìn)行分割操作的工具； 切片選擇工具：用于選擇分割后的圖像切片。圖9切片工具組

14.5.2切片類型 在ImageReady中，定義有3種類型的切片，即用戶切片、自動(dòng)切片、子切片，如圖10所示。圖10切片的類型14.5.3切片調(diào)板 用戶可使用【切片】調(diào)板對(duì)分割區(qū)域進(jìn)行編輯，設(shè)置與切片相關(guān)的各項(xiàng)參數(shù)，如圖11所示，調(diào)板菜單,如圖12所示。圖11【切片】調(diào)板圖12【切片】調(diào)板菜單14.5.4創(chuàng)建切片創(chuàng)建切片的方法有兩種：使用切片工具創(chuàng)建；通過選區(qū)或從參考線創(chuàng)建。圖13使用切片工具分割圖像14.5.5切片文件的輸出 在切片創(chuàng)建以后，可以將各個(gè)分割區(qū)域中的圖像作為單獨(dú)文件輸出。 具體的制作過程請(qǐng)參看課本14.5.5節(jié)。

14.6圖像映射 圖像映射是利用圖像上的熱點(diǎn)將圖像區(qū)域鏈接到URL，用戶不但可以將整幅圖像鏈接到URL，還可以在一個(gè)圖像中設(shè)置多個(gè)鏈接區(qū)域（稱為圖像映射區(qū)域），鏈接到其他Web頁或多媒體文件。 14.6圖像映射 使用圖像映射比使用切片的超鏈接具有更多的靈活性和實(shí)用性: 使用圖像映射，會(huì)將圖像作為一個(gè)文件按原樣導(dǎo)出；而使用切片則會(huì)將圖像作為多個(gè)單獨(dú)的文件（每個(gè)切片一個(gè)文件）導(dǎo)出； 使用圖像映射，用戶可以鏈接圖像中的圓形、多邊形或矩形區(qū)域；而使用切片則只能鏈接矩形區(qū)域。14.6.1圖像映射工具

圖像映射的工具組包含4個(gè)工具，分別是：【矩形圖像映射工具】、【圓形圖像映射工具】、【多邊形圖像映射工具】、【圖像映射選擇工具】，如圖14所示，其中前3個(gè)工具只要用于設(shè)置不同形狀的熱區(qū)，第4個(gè)工具用于選擇已經(jīng)設(shè)置的熱區(qū)。圖14圖像映射工具14.6.2圖像映射調(diào)板 當(dāng)用戶使用圖像映射工具設(shè)置熱區(qū)(如圖15所示)之后，才可以使用【圖像映射】調(diào)板，如圖16所示，反之【圖像映射】調(diào)板呈灰色不可用狀態(tài)。圖15設(shè)置熱區(qū)圖16【圖像映射】調(diào)板14.6.4圖像映射的排列 用戶還可以根據(jù)需要自行指定圖像映射區(qū)域的疊放順序： 選擇【圖像映射選擇】工具，可以直接選擇工具選項(xiàng)欄中按鈕來改變疊放順序，如【置為頂層】、【前移一層】、【后移一層】、【置為底層】等，還可以進(jìn)行分布、排列處理，如圖17所示。圖17【圖像映射選擇】工具選項(xiàng)欄14.7翻轉(zhuǎn) 翻轉(zhuǎn)效果經(jīng)常出現(xiàn)在Web頁上的按鈕或圖像上，當(dāng)用戶將指針移到它上面或者點(diǎn)按時(shí)，它會(huì)發(fā)生變化。 要?jiǎng)?chuàng)建翻轉(zhuǎn)，需將翻轉(zhuǎn)圖像定義為基于圖層的切片或基于圖層的圖像映射，然后，使用【W(wǎng)eb內(nèi)容】調(diào)板和【圖層】調(diào)板，創(chuàng)建不同狀態(tài)的圖像。14.7翻轉(zhuǎn) 翻轉(zhuǎn)效果可執(zhí)行的操作如下：添加或更改圖層樣式或移動(dòng)圖層內(nèi)容來修改圖層內(nèi)容；使用新圖層替換圖像內(nèi)容；替換頁面上其他位置的圖層內(nèi)容；添加幀以創(chuàng)建翻轉(zhuǎn)動(dòng)畫。14.7.1翻轉(zhuǎn)狀態(tài) 每個(gè)翻轉(zhuǎn)具有兩個(gè)或兩個(gè)以上的狀態(tài)，可以在【W(wǎng)eb內(nèi)容】調(diào)板中創(chuàng)建和管理這些狀態(tài)。 默認(rèn)情況下，圖像只具有一種狀態(tài)，即【正?！繝顟B(tài)?！菊！繝顟B(tài)對(duì)應(yīng)于圖像初始打開時(shí)的狀態(tài)，可添加的狀態(tài)還有幾種，如圖18所示。圖18【翻轉(zhuǎn)狀態(tài)選項(xiàng)】對(duì)話框14.7.2WEB內(nèi)容調(diào)板

【W(wǎng)eb內(nèi)容】調(diào)板使用戶能夠創(chuàng)建和查看圖像中的翻轉(zhuǎn)狀態(tài)以及設(shè)置其選項(xiàng)，除了翻轉(zhuǎn)狀態(tài)之外，還能顯示切片、圖像映射和動(dòng)畫幀，顯示切片和圖像映射可幫助用戶跟蹤圖像中包含翻轉(zhuǎn)效果的各個(gè)圖素，顯示動(dòng)畫幀可以很方便地查看圖像的哪些狀態(tài)包含動(dòng)畫，如圖19所示。圖19【W(wǎng)eb內(nèi)容】調(diào)板14.7.3創(chuàng)建翻轉(zhuǎn)效果 網(wǎng)頁中經(jīng)常出現(xiàn)各種翻轉(zhuǎn)按鈕的效果以及鼠標(biāo)暫停時(shí)圖像的變化，運(yùn)用切片和【W(wǎng)eb內(nèi)容】調(diào)板制作翻轉(zhuǎn)按鈕。 具體的制作過程請(qǐng)參看課本14.7.3節(jié)。14.8應(yīng)用實(shí)例 小動(dòng)畫設(shè)計(jì) 運(yùn)用【動(dòng)畫】調(diào)板