第14章 ImageReady CS2的基本應用

第14章知識要ImageReadyCS2的基本應用

ImageReadyCS2簡介

ImageReadyCS2工作界面

制作網(wǎng)頁動畫

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

翻轉(zhuǎn)應用實例14.1ImageReadyCS2概述

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

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

14.2ImageReadyCS2工作界面

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

ImageReadyCS2工作界面14.2.1工具箱

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

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

。14.2.2控制調(diào)板

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

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

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

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

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

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

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

14.5.2切片類型 在ImageReady中，定義有3種類型的切片，即用戶切片、自動切片、子切片，如圖10所示。圖10切片的類型14.5.3切片調(diào)板 用戶可使用【切片】調(diào)板對分割區(qū)域進行編輯，設置與切片相關的各項參數(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)建以后，可以將各個分割區(qū)域中的圖像作為單獨文件輸出。 具體的制作過程請參看課本14.5.5節(jié)。

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

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

【W(wǎng)eb內(nèi)容】調(diào)板使用戶能夠創(chuàng)建和查看圖像中的翻轉(zhuǎn)狀態(tài)以及設置其選項，除了翻轉(zhuǎn)狀態(tài)之外，還能顯示切片、圖像映射和動畫幀，顯示切片和圖像映射可幫助用戶跟蹤圖像中包含翻轉(zhuǎn)效果的各個圖素，顯示動畫幀可以很方便地查看圖像的哪些狀態(tài)包含動畫，如圖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)按鈕的效果以及鼠標暫停時圖像的變化，運用切片和【W(wǎng)eb內(nèi)容】調(diào)板制作翻轉(zhuǎn)按鈕。 具體的制作過程請參看課本14.7.3節(jié)。14.8應用實例 小動畫設計 運用【動畫】調(diào)板