1、第12章 Web圖形和動畫,12.1 關(guān)于Web圖像 12.2 切片 12.3 制作翻轉(zhuǎn)圖像或按鈕 12.4 制作動畫 12.5 優(yōu)化并輸出Web圖像 12.6 應(yīng)用實例 12.7 習(xí)題與實驗指導(dǎo),主目錄,12.1 關(guān)于Web圖像,12.1.1 常用的Web圖像格式,Web圖像主要有三種圖像文件格式，分別為JPEG、GIF、PNG格式。 GIF格式： 通過減少圖像中的顏色數(shù)目來壓縮文件，因此適合顏色比較少的圖像，如圖標(biāo)、符號、邊框等。另外GIF格式還可以保存透明圖像和動畫圖像。 JPEG格式： 通過刪除圖像中的數(shù)據(jù)信息來壓縮文件，雖然也是有損壓縮，但是不會改變圖像的顏色數(shù)目，因此適合色彩豐富，

2、文件較大的圖像，但是不支持透明圖像。 PNG格式： 采用無損壓縮方式來減少文件的大小，兼有GIF和JPG的色彩模式，不但能把圖像文件壓縮到極限又能保留所有與圖像品質(zhì)有關(guān)的信息，支持透明圖像，不支持動畫圖像。,12.1.2 設(shè)計Web圖像,Web圖像通常是低分辨率的，一般設(shè)置為72像素/英寸，而且通常采用RGB色彩模式。一個Web頁面是各種圖像，文字和符號等信息內(nèi)容的綜合體，如何合理編排優(yōu)化各種內(nèi)容是Web圖像設(shè)計的關(guān)鍵。Web圖像設(shè)計包括如下內(nèi)容： 背景設(shè)計 文本設(shè)計 圖片設(shè)計 圖標(biāo)設(shè)計 動畫設(shè)計,本章目錄,12.2 切片,使用“切片工具”可以將一幅圖像切割成若干個小圖像，每個圖像切片都包含獨

3、立的調(diào)色板、URL鏈接對象和優(yōu)化設(shè)置，可以提高圖像的上傳下載速度。一般應(yīng)用于網(wǎng)絡(luò)的大圖或設(shè)計網(wǎng)頁以及制作各種圖標(biāo)、圖像，用戶還可以利用切分制作翻轉(zhuǎn)使用的圖片組。,12.2.1 創(chuàng)建切片,1用戶自定義切片 使用“切片工具” 繪制切片的基本步驟如下： （1）從工具箱中選擇“切片工具”工具。 （2）單擊選項欄中的切片列表，從中選擇一項：正常、約束長寬比、固定大小。 （3）移動切片工具到圖像上，并在要創(chuàng)建切片的區(qū)域上拖動。按住Shift鍵可產(chǎn)生正方形切片，按住AltShift鍵可以單擊點為中心向外擴(kuò)展正方形，如下圖所示。,用戶自定義切片,2基于圖層的切片 使用“新建基于圖層的切片”菜單命令創(chuàng)建基于圖層

4、的切片的基本步驟如下： （1）在“圖層調(diào)板”新建一個“圖層1”。 （2）在該圖層里，使用“矩形”工具 繪制一矩形。 （3）選擇 “圖層新建基于圖層的切片”命令，自動創(chuàng)建切片，如下圖所示。,基于圖層的切片,3基于參考線的切片 創(chuàng)建基于參考線的切片的基本步驟如下： （1）向圖像中添加參考線。 （2）選擇“切片工具”，然后在選項欄中單擊“基于參考線的切片”，如下圖所示。,基于參考線的切片,4自動切片提升到用戶切片 在創(chuàng)建新的用戶切片或基于圖層的切片時，將會生成附加自動切片來占據(jù)圖像的其余區(qū)域。換句話說，自動切片填充圖像中用戶切片或基于圖層的切片未定義的空間。每次添加或編輯用戶切片或基于圖層的切片時，

5、都會重新生成自動切片?？梢詫⒆詣忧衅D(zhuǎn)換為用戶切片。,12.2.2 修改切片, 移動切片： 用“切片選擇”工具選擇要移動的用戶切片，然后按住鼠標(biāo)左鍵不放，拖動“切片”即可改變用戶切片的位置，如右圖所示。 改變切片大?。?拖動“用戶切片”四周的手柄則可以改變大小，如右圖所示。,如果要修改切片，首先要選擇切片。通過“切片選擇”工具單擊圖片可選則切片，按住Shift鍵可以選擇多個切片。,移動切片,改變切片大小, 復(fù)制切片： 選定一個或多個“用戶切片”，按Ctrl鍵不放，拖動切片，即可復(fù)制切片，如右圖所示。 刪除切片： 選定一個或多個“用戶切片”，單擊右鍵，在彈出的菜單中選擇“刪除切片”選項，或者按D

6、el鍵也可以刪除切片。 組合切片： 對于選定的多個“用戶切片”，可執(zhí)行“組合切片”命令，如右圖所示。,復(fù)制切片,選擇兩個切片圖,組合切片,12.2.3 劃分切片,對要切分的切片單擊“右鍵”，在彈出菜單中選擇“劃分切片”命令。在彈出的劃分切片對話框中輸入水平劃分垂直劃分的參數(shù)，如圖所示。,水平劃分 垂直劃分 水平劃分 垂直劃分,12.2.4 切片屬性, 切片類型：默認(rèn)情況下，切片類型為“圖像”，切片包含圖像數(shù)據(jù)；若選擇無圖像，切片包含純色或HTML文本。 名稱：定義切片的名稱 URL：在URL文本框中輸入鏈接地址，創(chuàng)建超級鏈接。 目標(biāo)：設(shè)置打開鏈接位置的窗口狀態(tài)。 信息文本：切片選項調(diào)板會提示輸

7、入一段文本，在網(wǎng)頁上使用這段文本代替切片。 Alt標(biāo)記：如果在該輸入框輸入內(nèi)容，則當(dāng)光標(biāo)接觸到切片時，這些內(nèi)容就會在光標(biāo)旁的提示信息中顯示出來。 尺寸：設(shè)置切片的尺寸。 切片背景類型：設(shè)置空白切片的背景。,切片選項對話框,用戶可以使用切片選項來指定切片數(shù)據(jù)顯示在Web瀏覽器中的方式，右鍵單擊切片，在快捷菜單中選擇“編輯切片選項”命令，就會彈出切片選項對話框，如下圖所示。,本章目錄,12.3 制作翻轉(zhuǎn)圖像或按鈕,翻轉(zhuǎn)是網(wǎng)頁上的一個按鈕或圖像，當(dāng)鼠標(biāo)移動到它上方時會發(fā)生變化。要創(chuàng)建翻轉(zhuǎn)，至少需要兩個圖像：主圖像表示處于正常狀態(tài)的圖像，而次圖像表示處于更改狀態(tài)的圖像。 目前Photoshop CS3

8、雖然沒有提供翻轉(zhuǎn)功能，但用戶可以通過Photoshop CS3的繪制工具和切片工具來制作用于翻轉(zhuǎn)圖像或按鈕的圖像組，最后使用 Dreamweaver CS3將這些圖像置入網(wǎng)頁中并添加Javascript代碼制作翻轉(zhuǎn)，具體方法如下：,1使用圖層創(chuàng)建主圖像和次圖像。 2將每個圖層存儲為單獨的圖像以創(chuàng)建完成的翻轉(zhuǎn)按鈕組。,本章目錄,12.4 制作動畫,Photoshop CS3能夠制作出網(wǎng)頁GIF動畫。GIF動畫就是設(shè)置好一系列 圖像或幀的順序、裝載時間和播放次數(shù)等，類似于電影膠片的原理。制作 動畫需要結(jié)合應(yīng)用“圖層”和動畫調(diào)板，且處理圖層是創(chuàng)建動畫的關(guān)鍵，如 下圖所示。,12.4.1 幀動畫,本節(jié)

9、通過制作一個簡單的打字動畫來詳細(xì)了解制作幀動畫的基本方法，如下圖所示。,打字動畫,12.4.2 過渡動畫,本節(jié)通過制作一個“跳動的球”動畫來詳細(xì)了解制作過渡動畫的基本方法，如下圖所示。,跳動的球動畫,本章目錄,12.5 優(yōu)化并輸出Web圖像,優(yōu)化網(wǎng)頁圖像是在保證圖像質(zhì)量的前提下盡量使文件體積減小，以便于在網(wǎng)上傳輸。而在制作網(wǎng)頁時要用到很多圖片，如果這些圖片教大，就會影響網(wǎng)頁的瀏覽速度。Photoshop CS3提供了強大的優(yōu)化輸出工具，用戶能夠在壓縮圖像文件大小的同時又能優(yōu)化在線顯示圖像的品質(zhì)。,12.5.1 優(yōu)化并輸出圖像,選擇 “文件”“存儲為Web和設(shè)備所用格式”命令，即可彈出“存儲為W

10、eb和設(shè)備所用格式”對話框，如右圖所示。在對話框中可以選擇輸出JPEG、GIF、PNG等一般常用的網(wǎng)頁圖像的格式，設(shè)置相應(yīng)的優(yōu)化參數(shù)。 視圖的顯示方式可以有優(yōu)化、雙聯(lián)、四聯(lián)，如在四聯(lián)視圖模式下，用戶可以看到原始圖像，也可以看到其他3種不同壓縮方式的預(yù)覽圖，每個預(yù)覽都顯示了文件的大小和下載時間，也可以用工具箱里的工具對預(yù)覽圖進(jìn)行移動、縮放及顏色取樣等操作。,“存儲為Web和設(shè)備所用格式”對話框,12.5.2 Web圖像文件的格式的選擇及其優(yōu)化,1. JPEG。 擅長壓縮圖片，可提供完全的32位顏色，但不允許使圖像的部分透明，如果用了過高的壓縮值，JPEG會導(dǎo)致嚴(yán)重的圖像失真，如右圖所示。 預(yù)設(shè)：

11、已存儲的優(yōu)化設(shè)置 文件格式：JPEG 壓縮品質(zhì)：下拉列表有低、中、高、非常高、最佳5個選項可以選擇。 連續(xù)：在 Web 瀏覽器中以漸進(jìn)方式顯示圖像。 IOC配置文件：隨文件一起保留圖片的 ICC 配置文件。 優(yōu)化：創(chuàng)建文件大小稍小的增強 JPEG。 品質(zhì)：微調(diào)壓縮品質(zhì)。 模糊：指定應(yīng)用于圖像的模糊量。 雜邊：為在原始圖像中透明的像素指定一個填充顏色。,優(yōu)化JPEG,2. GIF格式。 適合單調(diào)顏色的圖片和較小的文件，支持有限的透明度，支持動畫，但其壓縮方法是對顏色單調(diào)區(qū)域優(yōu)化的，因此對較大的圖片效果比較差。優(yōu)化設(shè)置對話框如右圖所示。,優(yōu)化GIF, 預(yù)設(shè)：已存儲的優(yōu)化設(shè)置 文件格式：GIF 減低

12、顏色深度算法：指定用于生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數(shù)量。 仿色算法和仿色：確定應(yīng)用程序仿色的方法和數(shù)量。 透明度：選擇則啟用透明度的相關(guān)設(shè)置。 透明度設(shè)置：確定如何優(yōu)化圖像中的透明像素。 交錯：當(dāng)完整圖像文件正在下載時，在瀏覽器中顯示圖像的低分辨率版本。 損耗：通過有選擇地扔掉數(shù)據(jù)來減小文件大小。 顏色：設(shè)置顏色的數(shù)量。 雜邊：為在原始圖像中透明的像素指定一個填充顏色。 Web靠色：指定將顏色轉(zhuǎn)換為最接近的 Web 調(diào)板等效顏色的容差級別（并防止顏色在瀏覽器中進(jìn)行仿色）。,3. PNG-8 能精確控制透明度，壓縮效果很好，但一些較老的瀏覽器不支持PNG所有的選項，常用

13、于FLASH動畫的圖片制作。優(yōu)化設(shè)置對話框如右圖所示，其具體的設(shè)置可參考GIF格式。 4. PNG-24 PNG-24 適合于壓縮連續(xù)色調(diào)圖像；但它所生成的文件比 JPEG 格式生成的文件要大得多。使用 PNG-24 的優(yōu)點在于可在圖像中保留多達(dá) 256 個透明度級別。優(yōu)化設(shè)置對話框如右圖所示，其具體的設(shè)置可參考GIF格式。,優(yōu)化PNG-8,優(yōu)化PNG-24, 無仿色：根本不應(yīng)用仿色，同時用純黑和純白像素渲染圖像。 擴(kuò)散：應(yīng)用與“圖案”仿色相比通常不太明顯的隨機圖案。仿色效果在相鄰像素間擴(kuò)散。如果選擇此算法，請指定“仿色”百分比以控制應(yīng)用于圖像的仿色量。 圖案：應(yīng)用類似半調(diào)的方塊圖案來確定像素

14、值。 雜色：應(yīng)用與“擴(kuò)散”仿色相似的隨機圖案，但不在相鄰像素間擴(kuò)散圖案。使用“雜色”算法時不會出現(xiàn)接縫。,5. WBMP WBMP 格式是用于優(yōu)化移動設(shè)備（如移動電話）圖像的標(biāo)準(zhǔn)格式。WBMP 支持 1 位顏色，意即 WBMP 圖像只包含黑色和白色像素。其優(yōu)化設(shè)置對話框如下圖所示。 仿色算法和“仿色”選項確定應(yīng)用程序仿色的方法和數(shù)量。為了獲得最佳壓縮比，請使用可提供所需細(xì)節(jié)的最低百分比的仿色?？梢赃x擇以下幾種仿色方法之一：,優(yōu)化WBMP,12.5.3 優(yōu)化切片圖像,（1）選擇 “文件”“存儲為Web和設(shè)備所用格式”菜單命令，在彈出的對話框中進(jìn)行優(yōu)化設(shè)置，選擇“雙聯(lián)”，再選擇“放大鏡”將網(wǎng)頁圖像縮小到能完整預(yù)覽。用戶可以選擇“切片選擇工具”，選擇任何一個切片進(jìn)行獨立的優(yōu)化設(shè)置，也可以選擇所有的切片，對所有的切片進(jìn)行整體的優(yōu)化。然后在右邊的“預(yù)設(shè)”欄里選擇相應(yīng)的優(yōu)化參數(shù)，最后單擊“存儲”按鈕，即可完成優(yōu)化設(shè)置，如右圖所示。,存儲為Web和設(shè)備所用格式,其中，保存類型選擇： HTML和圖像（*.html）：保存切分的網(wǎng)頁框架及相應(yīng)的切分圖片，且切分的圖片放在image文件夾里。 僅圖像（*.jpg）：僅保存切分的圖片。 僅HTML（*.html）：僅保存網(wǎng)頁的框架。,存儲優(yōu)化結(jié)果,（2）在彈出的“將優(yōu)化結(jié)果存儲為”對話框