firewor第6章

1、第6課 圖像的優(yōu)化與導(dǎo)出 掌握手動優(yōu)化和導(dǎo)出圖像方法 掌握通過導(dǎo)出向?qū)?dǎo)出和優(yōu)化圖像的方法6.1 圖像的優(yōu)化和導(dǎo)出 網(wǎng)頁圖像處理完成后還需要進(jìn)行優(yōu)化和導(dǎo)出，才能供網(wǎng)頁編輯軟件使用。6.1 圖像的優(yōu)化和導(dǎo)出 6.2.1 知識講解 6.2.2 典型案例導(dǎo)出嘟嘟手機(jī)網(wǎng)首頁圖像6.1.1 知識講解 在對網(wǎng)頁進(jìn)行優(yōu)化和導(dǎo)出時有手動優(yōu)化和使用向?qū)煞N方式6.1.1 知識講解 1手動優(yōu)化和導(dǎo)出 2通過導(dǎo)出向?qū)?dǎo)出和優(yōu)化圖像1手動優(yōu)化和導(dǎo)出 使用手動優(yōu)化通常先在“優(yōu)化”面板中對圖像進(jìn)行優(yōu)化，然后再使用“導(dǎo)出”命令進(jìn)行導(dǎo)出。1）優(yōu)化面板 選擇【窗口】【優(yōu)化】命令或按【F6】鍵可以打開或者隱藏“優(yōu)化”面板。 在對

2、圖像的優(yōu)化過程中，需要進(jìn)行以下三個方面的優(yōu)化。選擇圖像的格式：由于不同的圖片格式有不同的壓縮顏色信息的方法，所以針對不同的圖像選擇最佳的圖像格式可以大大地減少文件的大小。1）優(yōu)化面板設(shè)置圖像的參數(shù)：在圖像的格式確定以后，還需要設(shè)置相應(yīng)的參數(shù)，才能達(dá)到最佳的圖像壓縮和圖像質(zhì)量的平衡。設(shè)置顏色表：在顏色表中列出了所導(dǎo)出圖像的所有顏色種類，所以對顏色表的優(yōu)化也是必不可少的。“優(yōu)化”面板2）選擇內(nèi)置的優(yōu)化方案 在“優(yōu)化”面板最上方的下拉列表中共提供了7種內(nèi)置的優(yōu)化類型。各種優(yōu)化類型的含義如下。GIF網(wǎng)頁216：強(qiáng)制所有顏色為網(wǎng)頁安全色，該調(diào)色板最多包含216種顏色GIF接近網(wǎng)頁256色：將非網(wǎng)頁安全色

3、轉(zhuǎn)換為與其最接近的網(wǎng)頁安全色，該調(diào)色板最多包含256種顏色。GIF接近網(wǎng)頁128色：將非網(wǎng)頁安全色轉(zhuǎn)換為與其最接近的網(wǎng)頁安全色，該調(diào)色板最多包含128種顏色。2）選擇內(nèi)置的優(yōu)化方案GIF最合適256：是一個只包含圖像中實際使用的顏色的調(diào)色板，該調(diào)色板最多包含256種顏色。JPEG-較高品質(zhì)：將品質(zhì)設(shè)為80、平滑度設(shè)為0，生成的圖像品質(zhì)較高但占用空間較大。JPEG-較小文件：將品質(zhì)設(shè)為60、平滑度設(shè)為2，生成的圖像大小不到“JPEG-較高品質(zhì)”的一半，但品質(zhì)有所下降。動畫GIF接近網(wǎng)頁128：將文件格式設(shè)為“GIF動畫”，并將非網(wǎng)頁安全色轉(zhuǎn)換為與其最接近的網(wǎng)頁安全色，該調(diào)色板最多包含128種顏色

4、。內(nèi)置的優(yōu)化類型 3）GIF和PNG格式的優(yōu)化目前在網(wǎng)頁中能夠使用的圖片格式有GIF，PNG和JPEG 3種。由于GIF和PNG格式的“優(yōu)化”面板中的選項相同，其優(yōu)化方法也大致相同，所以將這兩種格式的優(yōu)化方法放在一起進(jìn)行介紹。在“優(yōu)化”面板的“導(dǎo)出文件格式”下拉列表框中選擇“GIF”、“GIF動畫”或“PNG”選項后，“優(yōu)化”面板，其中各項含義如下?！八饕{(diào)色版”下拉列表框：用于設(shè)置索引顏色調(diào)色板，一共有以下9個選項。最合適：該顏色表是根據(jù)圖像中已有的顏色建立顏色表，是文檔圖像真正包含的顏色組成的源于文檔的實際顏色，是使用最多的顏色類型，可以用最小的文件體積生成最佳的圖像質(zhì)量。3）GIF和PN

5、G格式的優(yōu)化Web最適色：該顏色表是以網(wǎng)絡(luò)安全色為用色標(biāo)準(zhǔn)，當(dāng)圖像中的顏色超出了網(wǎng)絡(luò)安全色時，會自動將超出的顏色替換為最為相近的網(wǎng)絡(luò)安全色，即兼顧了色彩的豐富性同時又考慮到了瀏覽器的兼容性。Web216色：該顏色表是標(biāo)準(zhǔn)的216種網(wǎng)絡(luò)安全色的顏色表，既可以用于Windows操作系統(tǒng)，也可以用于Macintosh操作系統(tǒng)。由于它可以在各種8位顯示平臺的瀏覽器中保持很好的一致性，因而也是最為保險的顏色表。精確：該顏色表是包含圖像中使用的所有顏色品種的顏色表，只有當(dāng)圖像中的顏色小于256色時，才可以使用該顏色表，當(dāng)圖像中的顏色數(shù)超過256時會自動轉(zhuǎn)換為“最合適”模式的顏色表。Macintosh：是與

6、Macintosh系統(tǒng)相匹配的顏色表，提供了Macintosh系統(tǒng)規(guī)定的256色。3）GIF和PNG格式的優(yōu)化Windows：是與Windows系統(tǒng)相匹配的顏色表，提供了Windows系統(tǒng)中規(guī)定的256色?；叶鹊燃墸涸谠擃伾碇邪?56個級別的灰度顏色，使用此顏色表可以將當(dāng)前圖像轉(zhuǎn)換為灰度級別圖像。黑白：該顏色表是僅由黑色和白色組成的雙色顏色表，可以將圖像轉(zhuǎn)換為只有黑色和白色兩種顏色的圖像。一致：是一種基于RGB像素值的比較精確的數(shù)值顏色表，通過對像素點的顏色分布進(jìn)行數(shù)學(xué)描述來減少圖像保存的顏色信息，從而減少圖像的大小。自定義：允許用戶使用自定義的顏色表對圖像進(jìn)行優(yōu)化。3）GIF和PNG格

7、式的優(yōu)化“失真”數(shù)值框：用于設(shè)置圖像的壓縮失真率?！吧濉保簡螕簟吧濉庇覀?cè)的 按鈕，在彈出的調(diào)色板中可以選擇一種顏色，通過將對象顏色與畫布顏色混合來使對象看起來更平滑。“顏色”下拉列表框：用于設(shè)置圖像中的最大顏色數(shù)。“抖動”數(shù)值框：由于GIF格式的圖像只能包含256種顏色，要實現(xiàn)更為豐富的色彩，就需要設(shè)置抖動，通過抖動可以模擬出當(dāng)前調(diào)色板中沒有的顏色。3）GIF和PNG格式的優(yōu)化“透明效果類型”下拉列表框：用于設(shè)置圖像的透明模式，有“不透明”、“索引色透明”和“Alpha透明”三種透明模式。不透明：在選擇該模式后，在圖像中未定義顏色的區(qū)域以畫布的顏色顯示。索引色透明：是將調(diào)色板的某些顏色設(shè)置

8、為透明色，在圖像中所有這些顏色的像素點都會被作為透明點顯示。Alpha透明：該模式為通道透明色，即將在繪圖區(qū)域中沒有繪制圖像的部分設(shè)置為透明色?！皟?yōu)化”面板5）JPEG圖像格式的優(yōu)化 在“優(yōu)化”面板的“導(dǎo)出文件格式”下拉列表框中選擇“JPEG”格式后，“優(yōu)化”面板主要包含色板、品質(zhì)、選擇性品質(zhì)和平滑幾項參數(shù)，其中品質(zhì)和平滑這兩個參數(shù)對JPEG格式的圖像質(zhì)量和文件體積的影響較大。 選擇“JPEG”選項后的“優(yōu)化”面板5）JPEG圖像格式的優(yōu)化品質(zhì)：在“品質(zhì)”數(shù)值框中可以設(shè)置輸出的圖像品質(zhì)，取值范圍在1100之間。值越大，圖像的質(zhì)量就越好，但文件的體積也就越大；取值越小，文件的體積也就越小，但是圖

9、像的質(zhì)量就越差。選擇性品質(zhì)：單擊“優(yōu)化”面板中的“選擇性品質(zhì)”按鈕 ，打開“可選JPEG設(shè)置”對話框，選中 復(fù)選框可以啟用選擇性品質(zhì)功能，并激活對話框中的其他選項，其中各項含義如下。啟用選擇性品質(zhì)功能 5）JPEG圖像格式的優(yōu)化“品質(zhì)”文本框：用于設(shè)置選擇部分的品質(zhì)?！案采w顏色”：在單擊右側(cè)的 按鈕，在彈出的調(diào)色板中選擇一種覆蓋顏色。但是“覆蓋顏色”中的顏色只在預(yù)覽時顯示，在輸出時并不顯示。 復(fù)選框：選擇該復(fù)選框，這樣所有的文本將會使用選擇性品質(zhì)進(jìn)行壓縮。 復(fù)選框：選擇該復(fù)選框，這樣所有的按鈕將會使用選擇性品質(zhì)進(jìn)行壓縮。5）JPEG圖像格式的優(yōu)化平滑：可以在“平滑”下拉列表框中控制JPEG算法

10、對尖銳的顏色做模糊的處理，從而減少圖像的大小。選擇的數(shù)值越大，圖像中尖銳的輪廓邊界就越少，圖像也會越模糊，相應(yīng)的圖像文件占用的空間也會越少；所選擇的平滑數(shù)值越小，則圖像中尖銳的輪廓邊界就越多，圖像就越清晰，而圖像文件所占用的空間也越大。6）預(yù)覽優(yōu)化效果 在優(yōu)化時不僅可以立即查看優(yōu)化后的效果，還可以將優(yōu)化后的效果與原始圖像或幾個優(yōu)化設(shè)置的效果直接進(jìn)行比較。 在繪圖區(qū)域的頂部有 、 、 和 6個按鈕，各個按鈕的作用如下。 按鈕：在默認(rèn)情況下該按鈕處于選中狀態(tài)，此時將顯示圖像的原始狀態(tài)，并可以對圖像進(jìn)行編輯。 按鈕：單擊該按鈕將切換到預(yù)覽狀態(tài)，此時將顯示優(yōu)化后的效果，并在繪圖區(qū)域的左下角顯示優(yōu)化后的

11、圖像的大小和下載所需的時間。6）預(yù)覽優(yōu)化效果 按鈕：單擊該按鈕將在繪圖區(qū)域中顯示兩幅圖像，其中左邊的是原始圖像，右邊的為優(yōu)化后的圖像，這樣就可以對原始圖像和優(yōu)化后的圖像進(jìn)行比較。 按鈕：單擊該按鈕將在繪圖區(qū)域中顯示4幅圖像，其中左上角的是原始圖像，其余3幅圖像為優(yōu)化后的圖像，可以分別為3幅優(yōu)化圖像設(shè)置不同的優(yōu)化參數(shù)，從而在其中找到質(zhì)量和大小的最佳結(jié)合點。 預(yù)覽視圖 圖像視圖 7）導(dǎo)出圖像 選擇一幅優(yōu)化后的圖像，然后選擇【文件】【導(dǎo)出】命令將打開 “導(dǎo)出”對話框，在“保存在”下拉列表框中指定導(dǎo)出的路徑，在“文件名”文本框中輸入導(dǎo)出的文件名稱，在“保存類型”下拉列表框中，選擇保存為什么程序文件或?qū)?/p>

12、象，再單擊 按鈕即可導(dǎo)出圖像。 2通過導(dǎo)出向?qū)?dǎo)出和優(yōu)化圖像 使用“導(dǎo)出向?qū)А睂υ捒蚩梢院芊奖愕卦O(shè)置導(dǎo)出后的圖像的大小，具體操作如下： 1）選擇【文件】【導(dǎo)出向?qū)А棵睿蜷_ “導(dǎo)出向?qū)А睂υ捒?，選中 復(fù)選框，并在下面的文本框中輸入導(dǎo)出后的文件大小，如“30”。 2）單擊 按鈕，打開選擇目標(biāo)對話框，在其中選擇導(dǎo)出圖像的用途，如選擇 單選按鈕。 3）單擊 按鈕，打開 “分析結(jié)果”對話框。2通過導(dǎo)出向?qū)?dǎo)出和優(yōu)化圖像4）單擊 按鈕，打開 “導(dǎo)出預(yù)覽”對話框，在其中將顯示兩幅優(yōu)化后的圖像。5）選擇其中一幅滿意的圖像，單擊 按鈕，將打開“導(dǎo)出”對話框，后面的操作與直接導(dǎo)出相同。 6.1.2 典型案例導(dǎo)

13、出嘟嘟手機(jī)網(wǎng)首頁圖像 本次練習(xí)將第15課中制作的嘟嘟手機(jī)網(wǎng)首頁圖像導(dǎo)出為網(wǎng)頁文件。 素材位置：【第6課素材6.2.2】 源文件位置：【第6課源文件6.2.2dudu.htm】 制作思路：1）打開“嘟嘟.png”圖像。2）切換預(yù)覽視圖。3）打開“優(yōu)化”面板，進(jìn)行優(yōu)化。4）導(dǎo)出圖像和網(wǎng)頁文件。5）打開導(dǎo)出的網(wǎng)頁文件。導(dǎo)出的網(wǎng)頁文件操作步驟 其操作步驟（請老師參照軟件講解）：案例小結(jié) 本案例將嘟嘟手機(jī)網(wǎng)的首頁圖形進(jìn)行優(yōu)化和導(dǎo)出，在制作過程中主要用到了圖像的優(yōu)化和導(dǎo)出等操作。在優(yōu)化圖像時對顏色數(shù)較少的圖像或切片可以采用GIF格式進(jìn)行優(yōu)化，對于顏色數(shù)較多的圖像或切片可以采用JPEG格式進(jìn)行優(yōu)化。6.2 上 機(jī) 練 習(xí) 6.2.1 為絲雅麗服裝網(wǎng)的首頁創(chuàng)建切片 6.2.2 優(yōu)化并導(dǎo)出絲雅麗服裝網(wǎng)的首頁6.3.1 為絲雅麗服裝網(wǎng)的首頁創(chuàng)建切片 本練習(xí)將為第16課制作的絲雅麗服裝網(wǎng)的首頁創(chuàng)建切片，主要練習(xí)創(chuàng)建切片的操作。 素材位置：【第6課素材6.3.1】 效果圖位置：【第6課源文件6.3.1服裝.png】 制作思路：使用切片工具為女孩圖像創(chuàng)建一個切片。為每個文本分別創(chuàng)建切片。在其他顏色相近的部分繼續(xù)創(chuàng)建切片。