經典遊戲圖標(超級瑪利奧、薩爾達、洛克人等)以像素藝術著稱。本教程示範如何在 Illustrator 中以向量方式精準重構像素圖標：矩形網格精確對應像素、路徑尋找器合併相鄰同色塊、圖形樣式統一色板、動作面板記錄重複操作、批量導出多尺寸 PNG/SVG，實現像素風格的向量化優勢(無限縮放、易修改、小檔案)。

向量化像素藝術核心流程

1. 建立像素網格基準

• 「視圖 > 顯示網格」「視圖 > 對齊到網格」，網格間距 1px(對應 1 像素)。
• 或：建立 16×16/32×32px 參考網格圖層鎖定。

2. 矩形工具「畫像素」

• 矩形工具 (M) 在網格格點間點擊拖曳，每個矩形 = 1 像素。
• 同色相鄰像素：選中 → 路徑尋找器「合併」成大矩形，大幅減少路徑數量。

3. 圖形樣式統一色板

• 建立色板組(如 Mario_Red #E52521, Mario_Brown #8B4513, Skin_Tone #FFDBAC 等)。
• 新建圖形樣式「Mario_Red_Fill」：填色 Mario_Red、無描邊。同法建立各色樣式。
• 著色時僅需選中形狀點擊樣式，全局修改色板色值即可一鍵換色全套圖標。

4. 動作面板記錄重複操作

• 「視窗 > 動作」新建動作集「Pixel_Icon」。
• 記錄：「選中同色塊 → 合併 → 套用圖形樣式 → 對齊像素網格」等常用組合鍵。
• 批量處理時播放動作，效率極高。

5. 圖標結構標準化

• 每枚圖標獨立圖層/群組，命名規範：`Icon_Mario_Stand_Front`。
• 畫板工具為每枚圖標建立獨立畫板(32×32px, 64×64px, 128×128px 等)。

6. 批量導出

• 「檔案 > 匯出 > 匯出為」選 PNG/SVG，勾選「使用畫板」，一次性導出所有尺寸/格式。
• SVG 適合網頁/響應式；PNG 適合遊戲引擎/舊版平台。

經典圖標拆解示例 (部分)

教程包含多張步驟圖，展示角色頭部、道具、敵人、UI 元素的向量化重構過程：

向量化像素圖標的優勢

特性	傳統位圖像素圖	向量化像素圖標
縮放	失真/模糊	無限縮放銳利
修改顏色	逐像素重繪	一鍵替換色板/圖形樣式
檔案大小	隨解析度增大	極小(幾 KB)
動畫就緒	需逐幀繪製	路徑可做形變動畫
印刷適用	需高解析度源檔	直接矢量輸出

結語

向量化不代表放棄像素美學，而是用現代工具賦予經典像素藝術「無限縮放、靈活編輯、多平台適配」的新生命。掌握「網格對齊 → 矩形畫像素 → 合併同色塊 → 圖形樣式統色 → 動作批量 → 畫板多尺寸導出」這套流程，即可高效產出商業級遊戲圖標資產庫。