DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks 4.0 認證教程 第九章 圖像的優化及輸出
Fireworks 4.0 認證教程 第九章 圖像的優化及輸出
編輯:Fireworks基礎     
內容提要

  本章將介紹Fireworks關於優化和輸出的基本操作 ,講解對常用圖像格式的優化措施,以及圖像的輸出設置。同時要求掌握優化面板和調色板的各項操作,能夠熟練的使用Fireworks 強大的圖像優化功能對圖片進行理想的優化處理。

  主要內容:

  1. 優化的基本操作

  2. 對GIF、PNG、JPEG圖像格式的優化設置

  3. 優化調色板

  4. 圖像的輸出

  重點與難點

  優化面板的操作、對常用格式的優化措施、調色板的設置、圖像輸出

  關鍵字:

  優化面板、調色板、優化設置、輸出

  【本課內容

  在網絡中,影響圖片浏覽速度的兩大因素,一是顏色,二是像素,圖像中的顏色品種和像素越多,圖像效果越逼真 ,同時圖像文件的尺寸也越大。在目前的網絡環境下,為了得到較好的圖片質量保留原有的顏色像素,必然導致因文件體積過大使圖像的下載速度的太慢,而要保證浏覽速度,去減小文件的體積又可能影響圖像的質量,導致圖像的失真,這似乎是魚和熊掌不可兼得的事情。

  Fireworks為我們提供了一個絕好的折中方案,通過選擇圖像格式、任意調節圖像的導出質量以及其他相應的設置,可以得到無論是圖像質量還是圖像尺寸都比較滿意的圖片來。本章將對Fireworks強大的圖像優化功能做詳細的講解,從中你會發現Fireworks在網絡圖像處理上是一款多麼優秀的軟件

  9.1 優化的基本操作

  在Fireworks中對圖像的優化操作,有好幾種方式,運用優化面板、顏色表面板或者在導出預覽中都可以實現對圖像的優化設置。下面將一一介紹。

  9.1.1 優化面板

  單擊【Window】菜單中的【Optimize】命令,打開優化面板。如圖:

  

  優化面板上有幾個下拉列表,包含了優化圖像的若干選項,在設置過程中將逐漸了解它們的含義。

  9.1.2 優化操作

  單擊優化面板上"Setting"項的小三角,打開下拉菜單,如圖:

  

  菜單中有六個選項,分別表示:

  GIF Web 216 :Gif格式,Web安全色,調色板最多包含216種顏色

  GIF WebSnap 256 :Gif格式,非Web安全色,調色板最多包含256種顏色

  GIF WebSnap 128 converts :Gif格式,轉變為非Web安全色,調色板最多包含128種顏色

  GIF Adaptive 256 : Gif格式,調色板只包含圖像中存在的顏色,調色板最多包含256種顏色

  JPEG - Better Quality  :JPEG格式,設置為原圖像質量的百分之八十,圖像平滑度為0,圖像質量較好,但體積大

  JPEG - Smaller File :JPEG格式,設置為原圖像質量的百分之六十,圖像平滑度為2,圖像質量較差,但體積小於原圖像的二分之一。

  當圖像顏色較少時,通常選擇GIF WebSnap 128 作為典型設置,可以得到合適的圖像質量和體積較小的圖片。 另外,解釋一下Websafe colors: Web安全色是在蘋果機和Windows操作系統中通用的圖像顏色,這些顏色在各種標准的Web浏覽器中都不會失真。即采用這種顏色模式的圖像,不用擔心在浏覽器中會走樣。

  9.1.3 保存自定義優化方案

  1. 完成相關的優化設置

  2. 單擊優化面板上的保存按鈕

  3. 在彈出的對話框中填入自定義方案名 如:"My Optimize",點擊"ok"。

  完成操作,此時"Settings"的彈出菜單中會多出一項名為"My Optimize"的選項,如圖:

  

  9.1.4 刪除自定義以及方案

  1. 打開優化面板中的"Settings"的彈出菜單,選中要刪除的選項。

  2. 點擊"Optiomize"面板上的刪除按鈕 ,即可完成刪除操作

  不能刪除Fireworks默認的設置。

  9.2 對常用格式的優化設置

  在第五章(文本處理)中,已經對GIF、JPEG、PNG等常用格式做了詳解,本節則直接進入對這些常用格式的優化設置中去,用實例進行講解。

  9.2.1 優化設置GIF格式

  打開一幅256色的原始圖像,打開優化面板中"Colors"下拉列表,選擇顏色數目為"8" ,如圖:

  

  顏色數目改變後,可以看出圖像的質量改變並不大,而圖像尺寸減小了近兩倍,差別很明顯,見下圖:

  

  優化面板上還有幾個調節區域:

  1. "Loss":設置圖像質量的損失程度。

  2."Dither":設置顏色抖動量,有效范圍0~100%,抖動量越大,圖像顏色於原始圖像顏色越接近,圖像尺寸也越大,否則反之。

  3. 透明效果列表:

  No Transparency:不透明

  Index Transparency:索引透明,將圖像中的一種或多種顏色映射為透明色,以形成透明效果

  Alpha :利用文檔的Alpha通道形成透明效果。

  4..指定其他透明色:

  在優化面板上有三個用來指定透明顏色的按鈕 ,點擊它們以後,鼠標變成吸管狀,再將鼠標移動到文檔中選取顏色, 按鈕表示將選取顏色設為透明, 增加透明顏色種類, 取消該顏色的透明設置。

  9.2.2 優化設置PNG格式

  打開一幅PNG格式的原始圖像,打開優化面板中格式下拉列表,選擇"PNG8",如圖:

  

  其他設置同前,(但PNG格式不能進行"loss"的設置)設置完後,在文檔窗口的"2-UP"標簽下,查看前後效果見下圖:

  

  9.2.3 優化設置JPEG格式

  打開一幅JPEG格式的原始圖像,在優化面板中的"setting"下拉菜單中選擇"JPEG-Better Quality",則優化面板作出相應的改變,變成JPEG格式的設置面板,如圖:

  

  在"Selective Quality"一欄中點擊按鈕 會打開一個對話框,如圖:

  

  選中"Enable Selective Quality"復選框,則其他選項都被激活,可以設置圖像質量,選取覆蓋顏色,下面兩個復選框表示所做的設置是否保持文本、按鈕的質量,按具體情況點選它們。

  可以調節優化面板"Quality"選項,設置圖像質量,調節"Smoothing"選項,設置圖像邊緣模糊。

  9.3 優化調色板

  調色板是一個顏色索引的集合,它將圖像中的像素的二進制數值同某種顏色對應起來,在顯示時,根據顏色和像素值的對應關系,將圖像中的顏色正確顯示出來。

  9.3.1 選擇調色板

  在"Optimize"面板中,打開調色板選項,會看到許多Fireworks默認的調色板,如圖:

  

  選項的各自含義為:

  Adaptive:該調色板由圖像中所包含的實際顏色組成。

  WebSnap Adaptive:使用網絡安全色,圖像中超出圖像范圍的顏色,將由安全色中接近的顏色取代。

  Web 216:網絡安全色調色板,適用於蘋果機和Windows系統。

  Exact:256色以下的圖像可應用這種調色板,反映256色以下圖像的真實顏色。

  Macintosh:蘋果機系統專用調色板。

  Windows:適合Windows系統的調色板

  Grayscale:包含256個灰度級別的調色板。

  Black & White:只有黑白兩色的調色板。

  Custom:自定義調色板,可以從外部調色板以及文件中載入調色板。

  9.3.2 "Color Table"

  選擇合適的調色板,再對調色板進行優化設置。

  單擊【Window】菜單中的【Color Table】命令,打開顏色表面板,如圖:

  

  顏色表中顯示了選擇的顏色板樣本,在顏色表下面有一排按鈕,用來編輯顏色表。各自的作用分別為:

  :編輯顏色表中表選中的顏色。

  :將選中顏色設為透明。

  :將選中的顏色轉換成網絡安全色。

  :鎖定選中顏色。

  :新增顏色。

  :將選中顏色刪除。

  利用這些按鈕,可以編輯出適合的顏色表,並可以將其保存,以便以後使用。

  9.4 圖像輸出

  前面學習的所有優化操作,它的最終目的是圖像的輸出,得到設置好的GIF或JPEG格式的圖片,Fireworks提供了多種輸出方式,最有人情味的一項便是"Export Wizard"(輸出向導),單擊【Window】菜單中的【Export Wizard】命令,輸出向導程序便會指引用戶一步步進行優化設置,同時提出建議,幫助用戶完成輸出操作。

  本節將重點介紹另一個重要的輸出方式:

  "Export PrevIEw"輸出預覽

  "Export PrevIEw"將優化面板、顏色表、預覽窗口等所有的優化操作和輸出操作放在一個對話框中進行,這極大的方便了用戶。

  單擊【Window】菜單中的【Export PrevIEw】命令,打開對話框,如圖:

  

  它分為兩大區域:優化設置區和預覽區域

  1. 優化設置區

  該區域有三個標簽:

  "Options":優化面板,操作同前。

  "File":該標簽主要用來設置文檔的輸出比例、寬度、高度、導出區域。如圖:

  

  "Animation":導出動畫的設置,將在下一章(動畫制作)中介紹。

  2. 預覽區域

  預覽區域的操作方法同文檔的預覽窗口大致相同,只是多了一些設置,如圖:

  

  將優化面板上的"settings"下拉菜單放到了預覽區域,在這裡即可選擇優化方案,預覽區域的下方許多按鈕,圖解如下:

  

  設置好後,單擊"Export"按鈕,打開導出對話框,填入導出的文件名即可完成輸出操作。

  小結

  本章主要介紹了Fireworks關於優化和輸出的基本操作,講解對常用圖像格式的優化措施,以及圖像的輸出設置,熟悉優化面板和調色板的各項設置和操作。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved