2.1.2 Fireworks基本操作

1．Fireworks軟件介紹

Fireworks是第一個針對網頁而開發的專業圖形圖像處理軟件，它原來是Macromedia公司的產品，與Dreamweaver、Flash并稱為網頁三劍客。Macromedia于2005年被Adobe公司收購，Fireworks也成為Adobe旗下的一員。

2．Fireworks的特點

Fireworks將矢量圖像處理和位圖圖像處理合二為一，避免了圖像操作在多個應用程序之間來回遷移。其主要特點如下。

●Fireworks的工作文檔格式為png圖片，能夠保存交互及圖層等相關信息供以后編輯使用。

●Fireworks矢量圖形處理能力強，能任意切圖、生成鼠標翻轉圖像等動畫效果。

●具有強大的動畫和網絡圖像生成功能，導出時可以進行圖像優化。

●可以導出帶有HTML或者JavaScript代碼的網頁文件。

●Fireworks提供了一個真正集成的Web解決方案。

（1）支持交互式圖形

Fireworks的切片和熱點是指網頁圖形中交互區域的對象。切片是將圖像切成不同的部分，可以將變換圖像、動畫效果和超級鏈接等應用到這些對象上。Fireworks導出的網頁中，每個切片都放置在一個表格單元格中，而熱點可將URL鏈接和行為指定給整個圖形或圖形的某個部分，切片和熱點可以在工作區中快速為圖形指定交換圖像及行為動作。

（2）導出圖形時進行圖形優化

Fireworks源PNG文檔可以導出為多種類型的文件，包括JPG、GIF、GIF動畫和包含多種類型切片圖像的HTML表格，并且在導出圖形時進行不同比例的壓縮和圖像優化，在文件大小和品質之間取得平衡。

（3）支持編輯矢量圖形和位圖圖像

矢量圖形又稱向量圖形，它由數學方程式所定義的直線和曲線組成，內容以線條和色塊為主。矢量圖形特點如下。

●矢量圖由多個對象元素堆砌而成，各對象在計算機中由數學公式描述。

●每個對象都是實體，具有顏色、形狀、輪廓和大小等屬性。

●矢量圖中所有對象都是用數學公式表示的，因而圖形顯示大小與文件大小無關，清晰度也與分辨率無關，將其放大或縮小顯示，曲線公式自行計算，不會出現鋸齒狀邊緣，如圖2-2所示。

●矢量圖在標志設計、插圖設計及工程繪圖上應用廣泛。

位圖圖像又稱為點陣圖像，由許多像素點組成，每個像素點有具體的顏色。計算機顯示器屏幕可看作一個大的像素網格，在每個像素網格點上顯示不同的顏色、亮度等，便會在整體上呈現出一幅圖像，這就是位圖圖像，其特點如下。

●位圖（如圖2-3所示）可以表現圖像中色彩的細微變化，能夠制作色彩和色調變化豐富的圖像，畫面細膩，過渡自然。

●位圖的清晰度與分辨率有關，圖像縮放其清晰度都會下降。例如在屏幕上將位圖放大，或以低分辨率打印，圖像會出現鋸齒邊緣。

●位圖的文件大小直接與像素點的多少有關，圖像幅面越大，文件所占空間就越大。

●通常位圖文件比相同內容的矢量圖像文件大，但矢量圖不易做出色調或色彩變化豐富、內容復雜的圖像。

3．Fireworks的工具箱為了安裝方便，下面以FireworksCS3為例進行操作講解，其他版本大同小異。Fireworks將不同圖形對象的操作工具箱分類放置，如圖2-4所示。

圖中右下角帶有小三角號的都是工具組，用鼠標按住工具組圖標1s后，其隱含的組員圖標便會彈出，按住鼠標不放并向右拖動，選擇需要的組員并釋放鼠標，此工具成員圖標便出現在工具箱中，替代了原來的工具組圖標。

4．Fireworks基本操作

在Fireworks“工具”面板中，選擇的工具決定了創建的對象是矢量圖還是位圖。例如，從“工具”面板的“矢量”部分選擇鋼筆工具，就能繪制矢量路徑；選擇刷子工具，則可以繪制位圖對象；選擇文本工具，可以輸入文字。繪制或導入矢量、位圖對象或文本后，既可以使用各種工具、效果、命令和技術來增強和完成圖形，也可以使用Fireworks工具編輯導入的JPG、GIF、PNG、PSD等圖形，對它們進行裁切、潤飾、蒙版處理、調整顏色和色調等處理。

（1）創建新文檔

PNG是Fireworks的文檔格式，創建新文檔的步驟如下。

1）選擇“文件”菜單→“新建”，打開圖2-5所示的“新建文檔”對話框。

2）輸入畫布寬度和高度，以“像素/厘米”為單位輸入分辨率，為畫布選擇白、透明或自定義顏色。

3）單擊“確定”按鈕。

（2）打開和導入文件

Fireworks可以打開或導入圖像文件，步驟如下。

1）選擇“文件”菜單→“打開”，打開圖2-6所示的“打開”對話框。

2）選擇文件并單擊“打開”按鈕。

注意：可以將矢量對象、位圖圖像或文本從支持拖動操作的任何應用程序（如Flash、Photoshop等）拖到Fireworks中進行編輯。

（3）保存文件

Fireworks保存文件的步驟如下。

1）選擇“文件”菜單→“保存”，打開圖2-7左邊所示的“另存為”對話框。

2）如果要將文檔導出為其他格式，可以在“優化”面板中選擇一種文件格式，如圖2-7右邊所示，再選擇“文件”菜單→“導出”命令導出文檔。

3）輸入保存位置和文件名（擴展名默認.png），單擊“保存”按鈕。

（4）設置Fireworks工作環境

Fireworks允許用戶根據需要，對其運行環境進行個性化的設置，來適應不同的操作習慣，以提高工作效率。操作步驟如下。

1）按組合鍵＜Ctrl+U＞或選擇“編輯”菜單→“首選參數”，彈出圖2-8所示“首選參數”對話框。

2）選“常規”卡片，在其中設置撤銷步驟（默認20步）、顏色默認值、啟動選項等內容。

3）選“編輯”卡片，在其中設置Fireworks的編輯選項，如圖2-9所示，內容如下。

●修剪時刪除對象：選中該復選框，用戶在使用裁剪工具時，裁剪區域外的圖像將被刪除。

●在轉換為選取框時刪除路徑：選中該復選框，用戶在將路徑轉換為選取框（修改菜單）后路徑將被刪除。圖2-10為不刪除路徑時的顯示情形。

●刷子大小繪圖光標：設置“刷子”“橡皮擦”“模糊”“銳化”“減淡”“加深”“涂抹”等工具的指針形狀。如打勾，顯示為十字形指針，否則顯示的是工具圖標指針。

圖2-11為使用刷子工具時的顯示效果。

●精確光標：選中該復選框（不選前一項），在使用工具進行圖像編輯時，光標將顯示為十字形狀，有利于用戶對圖像的精確定位。

●在“鋼筆工具選項”選項區中，選中“顯示鋼筆預覽”復選框，可在使用鋼筆工具單擊時，提供將創建的下一個路徑段的預覽；如圖2-12所示。“顯示實心點”復選框打勾，可將未選中的控制點顯示為實心點。

（5）更改畫布

新建或打開圖像后，可根據需求調整畫布尺寸及顏色，以及對畫布進行旋轉和裁剪等操作。

1）設置畫布顏色。打開“新建文檔”對話框，單擊其中的“自定義”，從調色板中選擇合適的顏色作為畫布的顏色，如圖2-13所示。

2）更改畫布的顏色。選擇“修改”菜單→“畫布”→“畫布顏色”，或在畫布中單擊鼠標右鍵，在彈出菜單中選擇“修改畫布”→“畫布顏色”選項，也可以打開圖2-13a所示的“畫布顏色”對話框。

3）旋轉與修剪畫布

選擇“修改”菜單→“畫布”命令，執行旋轉畫布操作，如旋轉180°、順時針旋轉90°和逆時針旋轉90°等。如果圖像四周有空白的畫布區域，可選擇“修改”菜單→“畫布”→“修剪畫布”命令，將這些空白區域裁掉。如選擇“修改”菜單→“畫布”→“符合畫布”命令，則系統將自動調整畫布尺寸，裁去四周的空白畫布區域。如果此時有超出畫布的對象，則畫布被擴展。

a）“畫布顏色”對話框 b）顏色選擇面板

（6）切片工具的使用

一個由圖片為主的網頁，整幅圖像的下載速度較慢。可在Fireworks中設定好切片大小后，導出為帶有表格的HTML文件。該文件中將各幅小圖片插入到相應的單元格中，并使表格的格線寬度為0，使各幅圖片之間沒有縫隙，看起來就像一幅圖片一樣，在下載時，圖像是從切片的各個位置同時出現（馬賽克效果），切割后的總占用空間一般少于原圖空間。下面根據已經制作好的圖像介紹切片工具的操作步驟。

1）導入圖像及畫輔助線。

●新建文檔，畫布寬設為500像素、高設為375像素、分辨率設為72像素/英寸，畫布底色設為白色，單擊“確定”按鈕。

●選擇“文件”菜單→“導入”命令，導入所需圖片，如圖2-14a所示。

●選擇“視圖”菜單→“標尺”命令，將鼠標移到標尺區域中，按下鼠標左鍵，向圖像內拖曳鼠標，拖到一定位置后釋放鼠標，畫面上出現一條輔助線。從縱向標尺拖動鼠標產生縱向輔助線，從橫向標尺拖動產生橫向輔助線，如此給畫面加若干輔助線，把畫面分割成若干區域，如圖2-14b所示。

a）導入圖片 b）添加輔助線

●如果輔助線位置不合適，將鼠標移到輔助線上，按住鼠標左鍵直接拖動，將輔助線拖出畫面即可刪除輔助線。

2）切割圖片及優化輸出。

①選擇工具箱中的矩形切片工具，沿著輔助線把圖片切成一個個的矩形區域，每個切片上被覆蓋了一層綠色，指向切片時四周用紅線分割，本例畫了6個切片，如圖2-15所示。

②畫出了所有切片并在優化面板設置了優化選項后，選擇“文件”菜單→“導出”命令，彈出圖2-16所示的“導出”對話框。

③要將導出的小圖放入子文件夾中，需將“將圖像放入子文件夾”復選框打勾，此時下邊的“瀏覽”按鈕會被激活，按鈕右邊是放小圖片的默認子文件夾名（images）。如果欲將圖片存儲到別的文件夾，可以單擊“瀏覽”按鈕，在彈出的圖2-17所示的“選擇文件夾”對話框中進行位置指定。

3）其他設置。

①單擊圖2-16對話框中的“選項”按鈕，彈出圖2-18所示“HTML設置”對話框，在“常規”選項卡中設定要導出的HTML類型及擴展名，這里取默認值。

②單擊“表格”選項卡，如圖2-19所示，可以設置切片經過切分HTML表格的空白單元選項。Fireworks默認采用一個像素寬的透明文件（默認為spacer.gif）來填充單元格間距（即“1像素透明間隔符”）。下邊的“空單元格”欄可設置空白單元的顏色和圖像。

③單擊“文檔特定信息”選項卡，設置各切片導出的文件命名格式，默認是“文件名+下畫線+切片所在的行列值”，如圖2-20所示。

④單擊“確定”按鈕，返回到前一對話框中，再單擊“保存”按鈕，為HTML文檔命名，最后保存png文檔。