Adobe Fireworks 是專為 Web 圖形設計打造的混合編輯環境，獨特優勢在於「單一應用程式內同時具備專業矢量繪圖、位圖編輯、互動原型、切片優化匯出」四大核心能力。本文系統梳理官方文檔與實務經驗，建立完整功能知識地圖。

一、矢量與位圖雙引擎編輯

工具面板分區設計

「工具」面板明確分隔：

• 矢量區：選取/部分選取、筆刷/鋼筆/鉛筆/刀子、矩形/橢圓/多邊形/星形/圓角矩形、文字、路徑編輯（添加/刪除/轉換錨點）、向量路徑操作（聯合/打孔/交集/剪除/疊加）
• 位圖區：馬奎/套索/魔術棒、筆刷/橡皮擦/填滿/模糊/銳化/污點/遮瑕/紅眼修正、抓取顏色、裁剪

選取工具即決定建立物件類型：矢量工具產出可無限縮放的路徑物件；位圖工具產出定解析度的像素圖層。兩類物件可自由疊加、蒙版、混合模式組合。

進階編輯能力

• 匯入編輯：JPEG、GIF、PNG、PSD、TIFF、BMP、SVG 等 20+ 格式
• 非破壞濾鏡：即時濾鏡面板支援疊加、排序、暫停、遮罩，隨時可編輯參數
• 文字引擎：OpenType 支援、段落/字元樣式、路徑文字、垂直排版、拼字檢查
• 互動元件：按鈕編輯器（四狀態）、彈出選單編輯器、圖片交換/交換圖像行為、導航列產生器

二、互動效果快速建構

切片與熱點

• 切片：將畫布劃分為可獨立優化匯出的區域，支援矩形/多邊形切片、巢狀切片、9 宮格縮放切片
• 熱點：不輸出圖像、僅定義連結區域的透明熱區，支援矩形/圓形/多邊形
• 拖放手柄快速指定：圖片交換、交換圖像、跳轉 URL、觸發 JS 函式

按鈕與選單編輯器

• 按鈕編輯器：四狀態（正常/游標經過/按下/游標離開）視覺編輯，自動生成 JS/CSS 代碼
• 彈出選單編輯器：多層級選單結構、項目樣式、動畫效果、鍵盤無障礙支援

三、專業優化與多格式匯出

優化面板

• 格式支援：JPEG（品質 0-100、漸進式）、GIF（索引色 2-256、透明/動畫）、PNG-8/24/32（Alpha 透明、隔行掃描）、WBMP、CSS Sprite
• 選擇性品質：不同切片套用不同優化設定
• 檔案大小/下載時間即時預估（56K/ISDN/DSL/T1）
• 色調調色板：最適應/網頁安全/Windows/Mac/灰階/自訂

匯出選項

• 「HTML 與圖像」：生成 HTML 表格/ CSS 版面 + 所有切片圖像 + JS 行為代碼
• 「僅圖像」：僅輸出切片圖像檔，適合前端框架專案
• 「CSS 圖層」：匯出符合標準的 CSS 定位版面（CS5+）
• 「PDF」：矢量保真匯出，適合列印校稿
• 批次匯出：結合「批次處理」命令，多頁面/多狀態一次匯出

四、自動化與擴展

• 「歷史記錄」→「儲存為命令」：將操作序列封裝為可複用命令
• 「批次處理」：資料夾級套用命令、重新命名、格式轉換
• JS API 擴展：自定義面板、自動化腳本、第三方整合
• 樣式面板：物件外觀（填充、描邊、濾鏡、文字）一鍵套用與同步更新

定位總結：Fireworks 不是 Photoshop 的替代品，也不是 Illustrator 的縮減版。它是「以螢幕像素為設計單位、以 Web 輸出為最終目的、以元件化工作流為核心效率引擎」的專用工具。雖已停止開發，其設計理念仍是現代 UI 設計工具的藍圖。