理解矢量與位圖的本質差異，是掌握 Fireworks 雙引擎編輯優勢的前提。本文從數學定義、視覺表現、編輯操作、輸出應用四個維度深度對比，並說明 Fireworks 如何無縫橋接兩種格式。

矢量圖形

數學定義

使用幾何數學公式（點、線、貝茲曲線）描述圖像。例如葉子輪廓由一系列錨點座標與控制桿向量定義；顏色由路徑描邊顏色與填充顏色決定。

核心特性：解析度無關

• 任意縮放、旋轉、變形、編輯路徑，畫質零損失
• 輸出裝置解析度變更（72/96/150/300 DPI）不影響銳度
• 檔案體積小，僅儲存幾何指令

Fireworks 矢量工具鏈

• 繪製：鋼筆、鉛筆、線條、基本形狀、文字
• 編輯：部分選取（白箭頭）、路徑面板（聯合/打孔/交集/剪除/疊加/分離）、筆觸面板（寬度、端點、連接、虛線、紋理、濾鏡）
• 匯出：SVG、FXG、PDF、CSS 代碼（邊框半徑、漸變、陰影）

位圖圖形

數學定義

由二維像素網格組成，每個像素擁有固定座標 (x,y) 與顏色值 (R,G,B,A)。螢幕本身即為巨大像素網格。

核心特性：解析度相關

• 編輯單位為像素：修改顏色、複製貼上、濾鏡運算皆基於像素網格
• 放大超過 100% 時，像素重新分佈產生鋸齒/模糊
• 輸出裝置解析度低於圖像原始解析度時，品質下降
• 檔案體積大，與像素總數成正比

Fireworks 位圖工具鏈

• 選取：馬奎、套索、魔術棒（容差/邊緣羽化/反選）
• 繪畫：筆刷（軟硬/間距/形狀/紋理/雙重筆刷）、鉛筆、噴槍、填滿
• 修飾：模糊/銳化/污點/遮瑕/紅眼/色彩替換/亮度對比/色相飽和度/曲線/階級
• 濾鏡：50+ 內建濾鏡 + Photoshop 相容濾鏡 (8BF) + Eye Candy/Alien Skin 第三方濾鏡

Fireworks 雙引擎橋接機制

操作	說明	應用場景
矢量 → 位圖	右鍵「轉為點陣圖」/「平面化選取項」	需套用位圖濾鏡、像素級修飾、匯出固定解析度資產
位圖 → 矢量	「修改」→「追蹤圖像」/ 魔術棒選區 →「選區轉路徑」	Logo 矢量化、剪影提取、簡單圖形向量化
混合編輯	矢量物件作蒙版遮罩位圖 / 位圖作紋理填充矢量	文字遮罩相片、形狀填充紋理、矢量路徑裁切位圖
即時濾鏡	矢量/位圖圖層均可疊加即時濾鏡，非破壞編輯	陰光、模糊、色調調整、風格化效果統一管理

專案決策指南

• Logo、圖標、介面元件、插畫、排版文字：優先矢量
• 照片、材質紋理、複雜漸變、噪點、手繪速寫：優先位圖
• 響應式/多解析度輸出：矢量主體 + 位圖紋理填充，匯出 SVG + @2x/@3x PNG
• 動畫/互動原型：矢量元件狀態切換 + 位圖序列幀

Fireworks 獨特價值在於：同一畫布、同一圖層面板、同一套濾鏡系統，同時操作矢量與位圖，零切換成本。這正是現代設計工具（Figma/Sketch/XD）持續借鑒的核心架構。