Fireworks最佳化網頁映像的詳解過程

來源:互聯網
上載者:User
過程|網頁|詳解|最佳化   網頁映像的要求是在儘可能短的傳輸時間裡,發布儘可能高品質的映像。因此在設計和處理網頁映像時就要求映像有儘可能高的清晰度與儘可能小的尺寸,從而使映像的下載速度達到最快。為此,必須對映像進行最佳化。

   在Fireworks 中,所有的最佳化操作都可以利用“Optimize”面板在工作環境中直接進行,最佳化設定僅用於輸出映像。因此,使用者可以自由地對映像進行最佳化並調整其最佳化設定,而不必擔心會損壞原圖。並且可以通過預覽不同的最佳化結果,隨時根據需要對映像進行修改。另一種簡便快捷的最佳化方法是使用Fireworks的“Export Preview”對話方塊在映像的匯出時進行最佳化。

   設定好最佳化輸出參數後,即可按照所做設定輸出相關檔案了。此外為了能夠藉助其他軟體(如Photoshop等)繼續處理文檔,使用者也可將文檔以選定其他格式(如PSD等)輸出。

  瞭解了Fireworks最佳化圖片的方法,在其他的影像處理軟體中,大家也能輕鬆掌握映像最佳化的類似應用。

  一、映像最佳化步驟和方案選擇

  (一)利用最佳化面板設定映像最佳化的步驟

  1. 開啟一幅檔案,並在影像編輯視窗中開啟Preview、2-up或4-up選項卡。

  2. 在“Optimize”面板中選擇檔案格式,如圖1所示,此時應根據檔案類型選擇不同的檔案格式。例如,如果圖中重複顏色地區較多的話,則適於使用GIF格式,對於這種格式,可相應地使用“Dither”(抖動)來補償因顏色減少而造成的映像品質下降。對於JPEG格式,可使用“Smooth”(平滑)來使映像稍微模糊,從而減小映像大小,一般照片使用 JPEG格式可能更好一些。


圖1 選擇檔案格式

  3. 通過將映像顏色局限在一個特定的顏色集(如調色盤)限制顏色,然後刪除映像中未用的顏色,從而減少檔案中使用的顏色數,檔案的尺寸相應地也減小了。但顏色數太少會影響映像的品質,因此使用者必須測試一下各種調色盤的效果,以便在映像尺寸和品質之間尋得平衡。如圖2所示。


  圖2 顏色設定

 (二)最佳化方案的選擇、設定以及增刪

  1. 選擇內建最佳化方案

  在Optimize 頂部設定的Setting下拉式清單中,使用者可選擇系統內建的一些最佳化類型。
Fireworks中提供了6種最佳化方案,各最佳化類型的意義如下:


  ? GIF Web216:將所有顏色都轉換為216種Web安全色。
  ? GIF WebSnap 256:將非Web安全色轉換為最接近的Web安全色,調色盤最多包含256種顏色。
  ? GIF WebSnap 128:將非Web安全色轉換為最接近的Web安全色,調色盤最多包含128種顏色。
  ? GIF Adaptive 256:此時調色盤只包含圖形中使用的實際顏色,並且調色盤最多包含256種顏色。
  ? JPEG-Better Quality :設定品質為80、平滑度為0,此時映像品質較高,但檔案尺寸也較大。
  ? JPEG-Smaller File :設定品質為60、平滑度為2,此時文檔尺寸比JPEG- Better Quality減少一半,但同時品質也將大幅度下降。


  * 如果使用GIF或PNG格式,還應設定映像的透明顏色,Fireworks MX 2004共提供了三種透明模式供選擇:No Transparency (不透明模式),Index Transparency (索引色透明模式)和Alpha Transparency (Alpha透明模式),其中Alpha透明為通道透明色。透明效果在Firewoks MX 2004中以白色和灰色小方格相間的形式表示。如圖3所示.


圖3 設定透明色


   在不透明模式中,映像中未定義的地區以底色填充。
   索引色模式指的是將調色盤的某些顏色設定為透明色,映像中所有這些顏色的像素點都被作為透明點匯出。
   注意:當映像中本來有這種透明顏色的時候,有用的像素也被透明顯示。

   要改變透明色的設定,最簡單的方法是使用最佳化面板左下方三支吸管工具,其功能如下:
  ? 在預覽區單擊 即可添加透明顏色。
  ? 在預覽區單擊 即可移除透明顏色。
  ? 在預覽區單擊即可選擇透明顏色。

  2.使用者自訂最佳化設定

  如果使用者不滿足於以上6種內建方案,可以利用Optimize面板中的各種最佳化選項進行更精確的映像設定。

  ? 在Optimize面板中的檔案格式下拉式清單方塊中選擇需要的檔案格式。
  ? 設定相應檔案格式的具體化選項。
  ? 根據需要在最佳化面板的捷徑功能表中選擇其他的最佳化設定。

  3. 儲存和刪除自訂最佳化方案

  Fireworks 提供了儲存最佳化方案的功能,允許使用者將自訂的方案儲存以備以後使用。在儲存時,會將以下最佳化設定加以儲存:
  ? Optimize面板中的各項選項設定。
  ? Color Table(顏色表)面板中的調色盤。
  ? 使用者在幀面板中選擇的幀延遲設定。
  
   使用者可將自訂的最佳化方案儲存為內建的方案。完成最佳化設定後,選中最佳化面板下拉式清單中的Save Settings,可以開啟如圖所示的儲存設定對話方塊,鍵入使用者自訂的設定名稱,單擊OK即可將自訂的最佳化方案儲存起來, 如圖 4 所示。


  圖4 儲存最佳化設定對話方塊

   如果不再需要某個最佳化方案,可以在Optimize面板的最佳化方案列表中選擇要刪除的方案,然後再面板的捷徑功能表中選擇Delete Setting(刪除設定)命令即可將方案刪除。

  二、最佳化GIF和PNG映像
 
  1. 設定調色盤、色度、抖動與色損

  當選擇GIF與PNG8格式時,可選擇調色盤,各調色盤的特點如下:

  ? Adaptive:該調色盤是從所有顏色中提取的系列色彩,是被使用最多的調色盤,可以使用最少的顏色實現較好的效果。
  ? WebSnap Adaptive:是一種更進階的自適應調色盤,這種調色盤既兼顧色彩的豐富性又考慮了瀏覽器的相容性,建議使用者使用這個調色盤。
  ? Web 216:通用於Windows與Macintosh平台的216色調色盤。由於它能在各種8位顯示平台的瀏覽器中保持相當好的一致性,因此是最保險的網狀圖像調色盤。
  ? Exact:包含映像中使用的精確顏色。只有當映像中的顏色小於256時,才可使用該調色盤。當映像所包含的顏色數超過256時,它自動轉換成“最適色彩”模式的調色盤。
  ? Windows和Macintosh:使用由Windows系統或Macintosh平台定義的標準256色。
  ? Grayscale :小於256灰階級的調色盤,將把映像轉換成灰階圖。
  ? Black & White:由黑、白顏色組成的雙色調色盤。
  ? Uniform:基於RGB像素值的數學調色盤。
  ? Custom:自訂調色盤。其基本內容可來自於標準調色盤或GIF檔案,使用者可在此基礎上對調色盤進行修改。另外,當使用者改變過調色盤的某種顏色後,原來的模式會變成“Custom”模式。

   使用者還可利用顏色編輯框設定色深,利用抖動編輯框設定抖動。對於GIF格式,還可以利用失真編輯框設定色損。該數值越大,檔案尺寸越小,但映像品質越差,如圖5所示。


圖5 GIF和PNG微調最佳化參數面板

  2.設定反鋸齒顏色

   單擊Optimize面板中的色版按鈕可設定反鋸齒顏色,它通過將對象顏色與畫布顏色混合使對象看起來更平滑。為防止出現光暈,可使畫布顏色與網頁背景顏色相一致,為對象增加反鋸齒效果,然後將畫布設定為透明。

   在Fireworks MX 2004中,關於GIF映像最佳化的選項,還有在最佳化面板的快顯功能表中設定GIF的“Interlaced”屬性,其作用是可以在瀏覽器中實現邊下載邊顯示的效果,如圖5所示。  


 圖 6 設定“Interlaced”屬性

二、最佳化GIF和PNG映像
 
  1. 設定調色盤、色度、抖動與色損

  當選擇GIF與PNG8格式時,可選擇調色盤,各調色盤的特點如下:

  ? Adaptive:該調色盤是從所有顏色中提取的系列色彩,是被使用最多的調色盤,可以使用最少的顏色實現較好的效果。
  ? WebSnap Adaptive:是一種更進階的自適應調色盤,這種調色盤既兼顧色彩的豐富性又考慮了瀏覽器的相容性,建議使用者使用這個調色盤。
  ? Web 216:通用於Windows與Macintosh平台的216色調色盤。由於它能在各種8位顯示平台的瀏覽器中保持相當好的一致性,因此是最保險的網狀圖像調色盤。
  ? Exact:包含映像中使用的精確顏色。只有當映像中的顏色小於256時,才可使用該調色盤。當映像所包含的顏色數超過256時,它自動轉換成“最適色彩”模式的調色盤。
  ? Windows和Macintosh:使用由Windows系統或Macintosh平台定義的標準256色。
  ? Grayscale :小於256灰階級的調色盤,將把映像轉換成灰階圖。
  ? Black & White:由黑、白顏色組成的雙色調色盤。
  ? Uniform:基於RGB像素值的數學調色盤。
  ? Custom:自訂調色盤。其基本內容可來自於標準調色盤或GIF檔案,使用者可在此基礎上對調色盤進行修改。另外,當使用者改變過調色盤的某種顏色後,原來的模式會變成“Custom”模式。

   使用者還可利用顏色編輯框設定色深,利用抖動編輯框設定抖動。對於GIF格式,還可以利用失真編輯框設定色損。該數值越大,檔案尺寸越小,但映像品質越差,如圖5所示。


圖5 GIF和PNG微調最佳化參數面板

  2.設定反鋸齒顏色

   單擊Optimize面板中的色版按鈕可設定反鋸齒顏色,它通過將對象顏色與畫布顏色混合使對象看起來更平滑。為防止出現光暈,可使畫布顏色與網頁背景顏色相一致,為對象增加反鋸齒效果,然後將畫布設定為透明。

   在Fireworks MX 2004中,關於GIF映像最佳化的選項,還有在最佳化面板的快顯功能表中設定GIF的“Interlaced”屬性,其作用是可以在瀏覽器中實現邊下載邊顯示的效果,如圖5所示。 


 圖 6 設定“Interlaced”屬性



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。