Fireworks優(yōu)化頁面圖像詳細(xì)說明

網(wǎng)頁圖像的要求是在盡可能短的傳輸時(shí)間里，發(fā)布盡可能高質(zhì)量的圖像。因此在設(shè)計(jì)和處理網(wǎng)頁圖像時(shí)就要求圖像有盡可能高的清晰度與盡可能小的尺寸，從而使圖像的下載速度達(dá)到最快。為此，必須對圖像進(jìn)行優(yōu)化。

在Fireworks 中，所有的優(yōu)化操作都可以利用“Optimize”面板在工作環(huán)境中直接進(jìn)行，優(yōu)化設(shè)置僅用于輸出圖像。因此，用戶可以自由地對圖像進(jìn)行優(yōu)化并調(diào)整其優(yōu)化設(shè)置，而不必?fù)?dān)心會(huì)損壞原圖。并且可以通過預(yù)覽不同的優(yōu)化結(jié)果，隨時(shí)根據(jù)需要對圖像進(jìn)行修改。另一種簡便快捷的優(yōu)化方法是使用Fireworks的“Export Preview”對話框在圖像的導(dǎo)出時(shí)進(jìn)行優(yōu)化。

設(shè)置好優(yōu)化輸出參數(shù)后，即可按照所做設(shè)置輸出相關(guān)文件了。此外為了能夠借助其他軟件（如Photoshop等）繼續(xù)處理文檔，用戶也可將文檔以選定其他格式（如PSD等）輸出。

了解了Fireworks優(yōu)化圖片的方法，在其他的圖像處理軟件中，大家也能輕松掌握圖像優(yōu)化的類似應(yīng)用。

一、圖像優(yōu)化步驟和方案選擇

（一）利用優(yōu)化面板設(shè)置圖像優(yōu)化的步驟

1. 打開一幅文件，并在圖像編輯窗口中打開Preview、2-up或4-up選項(xiàng)卡。

2. 在“Optimize”面板中選擇文件格式，如圖1所示，此時(shí)應(yīng)根據(jù)文件類型選擇不同的文件格式。例如，如果圖中重復(fù)顏色區(qū)域較多的話，則適于使用GIF格式，對于這種格式，可相應(yīng)地使用“Dither”(抖動(dòng))來補(bǔ)償因顏色減少而造成的圖像質(zhì)量下降。對于JPEG格式，可使用“Smooth”(平滑)來使圖像稍微模糊，從而減小圖像大小，一般照片使用 JPEG格式可能更好一些。

1. 選擇內(nèi)置優(yōu)化方案

在Optimize 頂部設(shè)置的Setting下拉列表中，用戶可選擇系統(tǒng)內(nèi)置的一些優(yōu)化類型。

Fireworks中提供了6種優(yōu)化方案，各優(yōu)化類型的意義如下：

· GIF Web216：將所有顏色都轉(zhuǎn)換為216種Web安全色。

· GIF WebSnap 256：將非Web安全色轉(zhuǎn)換為最接近的Web安全色，調(diào)色板最多包含256種顏色。

· GIF WebSnap 128：將非Web安全色轉(zhuǎn)換為最接近的Web安全色，調(diào)色板最多包含128種顏色。

· GIF Adaptive 256：此時(shí)調(diào)色板只包含圖形中使用的實(shí)際顏色，并且調(diào)色板最多包含256種顏色。

· JPEG-Better Quality ：設(shè)置質(zhì)量為80、平滑度為0，此時(shí)圖像質(zhì)量較高，但文件尺寸也較大。

· JPEG-Smaller File ：設(shè)置質(zhì)量為60、平滑度為2，此時(shí)文檔尺寸比JPEG- Better Quality減少一半，但同時(shí)質(zhì)量也將大幅度下降。

* 如果使用GIF或PNG格式，還應(yīng)設(shè)置圖像的透明顏色，F(xiàn)ireworks MX 2004共提供了三種透明模式供選擇：No Transparency (不透明模式)，Index Transparency (索引色透明模式)和Alpha Transparency (Alpha透明模式)，其中Alpha透明為通道透明色。透明效果在Firewoks MX 2004中以白色和灰色小方格相間的形式表示。如圖3所示．

在不透明模式中，圖像中未定義的地區(qū)以底色填充。

索引色模式指的是將調(diào)色板的某些顏色設(shè)置為透明色，圖像中所有這些顏色的像素點(diǎn)都被作為透明點(diǎn)導(dǎo)出。

注意：當(dāng)圖像中本來有這種透明顏色的時(shí)候，有用的像素也被透明顯示。

要改變透明色的設(shè)置，最簡單的方法是使用優(yōu)化面板左下方三支吸管工具，其功能如下：

· 在預(yù)覽區(qū)單擊即可添加透明顏色。

· 在預(yù)覽區(qū)單擊即可移除透明顏色。

· 在預(yù)覽區(qū)單擊即可選擇透明顏色。

2.用戶自定義優(yōu)化設(shè)置

如果用戶不滿足于以上6種內(nèi)置方案，可以利用Optimize面板中的各種優(yōu)化選項(xiàng)進(jìn)行更精確的圖像設(shè)置。

· 在Optimize面板中的文件格式下拉列表框中選擇需要的文件格式。

· 設(shè)置相應(yīng)文件格式的具體化選項(xiàng)。

· 根據(jù)需要在優(yōu)化面板的快捷菜單中選擇其他的優(yōu)化設(shè)置。

3. 保存和刪除自定義優(yōu)化方案

Fireworks 提供了保存優(yōu)化方案的功能，允許用戶將自定義的方案保存以備以后使用。在保存時(shí)，會(huì)將以下優(yōu)化設(shè)置加以保存：

· Optimize面板中的各項(xiàng)選項(xiàng)設(shè)置。

· Color Table（顏色表）面板中的調(diào)色板。

· 用戶在幀面板中選擇的幀延遲設(shè)置。

用戶可將自定義的優(yōu)化方案保存為內(nèi)置的方案。完成優(yōu)化設(shè)置后，選中優(yōu)化面板下拉列表中的Save Settings，可以打開如圖所示的保存設(shè)置對話框，鍵入用戶自定義的設(shè)置名稱，單擊OK即可將自定義的優(yōu)化方案保存起來, 如圖 4 所示。

如果不再需要某個(gè)優(yōu)化方案，可以在Optimize面板的優(yōu)化方案列表中選擇要?jiǎng)h除的方案，然后再面板的快捷菜單中選擇Delete Setting（刪除設(shè)置）命令即可將方案刪除。

1. 設(shè)置調(diào)色板、色度、抖動(dòng)與色損

當(dāng)選擇GIF與PNG8格式時(shí)，可選擇調(diào)色板，各調(diào)色板的特點(diǎn)如下：

· Adaptive：該調(diào)色板是從所有顏色中提取的系列色彩，是被使用最多的調(diào)色板，可以使用最少的顏色實(shí)現(xiàn)較好的效果。

· WebSnap Adaptive：是一種更高級的自適應(yīng)調(diào)色板，這種調(diào)色板既兼顧色彩的豐富性又考慮了瀏覽器的兼容性，建議用戶使用這個(gè)調(diào)色板。

· Web 216：通用于Windows與Macintosh平臺的216色調(diào)色板。由于它能在各種8位顯示平臺的瀏覽器中保持相當(dāng)好的一致性，因此是最保險(xiǎn)的網(wǎng)絡(luò)圖像調(diào)色板。

· Exact：包含圖像中使用的精確顏色。只有當(dāng)圖像中的顏色小于256時(shí)，才可使用該調(diào)色板。當(dāng)圖像所包含的顏色數(shù)超過256時(shí)，它自動(dòng)轉(zhuǎn)換成“最適色彩”模式的調(diào)色板。

· Windows和Macintosh：使用由Windows系統(tǒng)或Macintosh平臺定義的標(biāo)準(zhǔn)256色。

· Grayscale ：小于256灰度級的調(diào)色板，將把圖像轉(zhuǎn)換成灰度圖。

· Black & White：由黑、白顏色組成的雙色調(diào)色板。

· Uniform：基于RGB像素值的數(shù)學(xué)調(diào)色板。

· Custom：自定義調(diào)色板。其基本內(nèi)容可來自于標(biāo)準(zhǔn)調(diào)色板或GIF文件，用戶可在此基礎(chǔ)上對調(diào)色板進(jìn)行修改。另外，當(dāng)用戶改變過調(diào)色板的某種顏色后，原來的模式會(huì)變成“Custom”模式。

用戶還可利用顏色編輯框設(shè)置色深，利用抖動(dòng)編輯框設(shè)置抖動(dòng)。對于GIF格式，還可以利用失真編輯框設(shè)置色損。該數(shù)值越大，文件尺寸越小，但圖像質(zhì)量越差，如圖5所示。

2．設(shè)置反鋸齒顏色

單擊Optimize面板中的色版按鈕可設(shè)置反鋸齒顏色，它通過將對象顏色與畫布顏色混合使對象看起來更平滑。為防止出現(xiàn)光暈，可使畫布顏色與網(wǎng)頁背景顏色相一致，為對象增加反鋸齒效果，然后將畫布設(shè)置為透明。

在Fireworks MX 2004中，關(guān)于GIF圖像優(yōu)化的選項(xiàng)，還有在優(yōu)化面板的彈出菜單中設(shè)置GIF的“Interlaced”屬性，其作用是可以在瀏覽器中實(shí)現(xiàn)邊下載邊顯示的效果，如圖5所示。

三、優(yōu)化JPEG圖像

JPEG格式的優(yōu)化設(shè)置面板如圖7所示，用戶可以設(shè)置如圖參數(shù)。

1. JPEG的選擇壓縮

在Fireworks MX 2004中保留了JPEG的選擇壓縮功能，它可以對圖像的不同區(qū)域選擇不同的壓縮比率，從而達(dá)到更加個(gè)性化的圖像導(dǎo)出效果。例如，圖像重要部分可以高級別壓縮，非重要部分（如背景）可以低級別壓縮，以便能在保證重點(diǎn)區(qū)域質(zhì)量的前提下減小文件的尺寸。

（1）壓縮JPEG圖像的選定區(qū)域

具體步驟如下：

· 在圖像上使用選擇區(qū)域工具畫一個(gè)選區(qū)。

· 選擇菜單“Modify>>Selective JPEG>>Save Selection as JPEG Mask”，將選取保存為JPEG蒙版。

· 在優(yōu)化面版中將輸出格式設(shè)置為JPEG。

· 單擊優(yōu)化面板中選擇性品質(zhì)右側(cè)按鈕，打開圖8所示的可選JPEG設(shè)置對話框。

· 選中“Enable selective quality”復(fù)選框，并在文本框中鍵入選擇區(qū)域所要設(shè)定的壓縮比率。

· 選擇“Overlay color”（該顏色只用于預(yù)覽，不用于輸出）

· 選中“Preserve text quality”復(fù)選框，表示所有文本將自動(dòng)以高級別輸出，而忽略具體的選擇性壓縮數(shù)值。

· 選中“Preserve button quality”復(fù)選框，表示所有按鈕符號將被自動(dòng)以高級別輸出。

· 單擊“OK”按鈕就可以在預(yù)覽窗口看到效果了。

（2）修改選擇JPEG壓縮的區(qū)域

具體步驟如下：

· 選擇菜單“Modify>>Selective JPEG>>Restore JPEG Mask as Selection”，將會(huì)出現(xiàn)一個(gè)選區(qū)。

· 用選擇區(qū)域工具或其他工具對選區(qū)進(jìn)行修改。

· 再選擇菜單“Modify>>Selective JPEG>>Save Selection as JPEG Mask”。

· 要取消JPEG選擇壓縮可以選擇 “Modify>>Selective JPEG>>Remove JPEG Mask”。

2. 設(shè)置反鋸齒顏色

同樣，對于JPEG格式而言，用戶仍可利用色版按鈕設(shè)置反鋸齒顏色。通過調(diào)整品質(zhì)的數(shù)值，可調(diào)整JPEG圖像的質(zhì)量。該數(shù)值越大，圖片質(zhì)量越好，但圖像尺寸也就越大。

3. 模糊邊界

通過設(shè)置優(yōu)化面板中的平滑值，可控制JPEG算法對尖銳的顏色 邊界做模糊處理，從而減小文件尺寸。由于這樣的邊界在JPEG算法中不能實(shí)現(xiàn)很好的壓縮，所以，較大的“Smooth”參數(shù)值通常會(huì)減小導(dǎo)出圖像文件的大小。一般情況該數(shù)值為3，既可減小文件尺寸也能保證圖像的質(zhì)量。在Fireworks MX 2004中，還有兩種JPEG優(yōu)化參數(shù)，是在優(yōu)化面板的彈出菜單中設(shè)置的，它們是“Progressive JPEG”和“Sharpen JPEG邊緣”。使用方法是單擊優(yōu)化面板右上角的按鈕，會(huì)彈出一個(gè)下拉菜單，在彈出的菜單中選擇相應(yīng)參數(shù)，如圖9所示。

若選擇“Progressive JPEG”參數(shù)，則該圖像在瀏覽器中顯示效果將隨著圖像下載進(jìn)程的遞增由模糊漸變?yōu)榍逦�，有點(diǎn)類似交錯(cuò)式GIF。

若選擇 “Sharpen JPEG Edges”參數(shù)，可更好地保留兩種顏色之間的邊界。因此，特別適用于輸出帶文本的文檔。

注意：對于PNG24和PNG32格式而言，用戶只能設(shè)置反鋸齒顏色。