教程目標與成品展示

利用 Illustrator 矢量特性，通過網格對齊、矩形像素單元、符號系統、外觀效果，製作銳利不失真的像素風格 Icon 套件。適合遊戲 UI、復古網頁、像素藝術衍生品設計。

核心製作流程

1. 畫布與網格系統建立

• 新建文檔：尺寸為像素倍數（如 32×32px、64×64px），單位設「像素」，RGB 色彩。
• 「視圖」→「顯示網格」→「偏好設定」→「指南與網格」：網格線間距 1px，分隔 1，勾選「吸附至網格」（Shift+Ctrl+''）。
• 啟用「像素預覽模式」（Alt+Ctrl+Y）實時檢查抗鋸齒情況。

2. 像素單元繪製基礎

• 矩形工具（M）按 Shift 畫 1×1px 正方形，作為最小像素單元。
• 關閉描邊，僅填充。複製（Alt+拖動）排列成字符/圖形。
• 建議：建立「像素筆刷」—— 1px 方塊存為藝術筆刷，畫筆工具（B）繪製時自動吸附網格，效率大增。

3. 符號化管理複用

• 常用元件（角落、邊框、眼睛、裝飾）存入「符號」面板。
• 符號噴槍工具（Shift+S）批量佈局；符號替換功能快速切換風格變體。
• 9 切縮放：符號選項勾選「啟用 9 切縮放」，定義不可縮放區域（如邊框圓角）。

4. 色彩與陰影系統

• 限制調色盤：每圖標 4-6 色（背景、主色、陰影、高光、輪廓、特效）。
• 偽 3D 效果：右下角疊加深色像素模擬投影；頂左疊加亮色模擬高光。
• 抖動抖動：相鄰像素交替兩色模擬中間色，擴展視覺色彩數。

5. 外觀效果增強（非破壞）

• 外觀面板添加「描邊」→ 對齊「內側」→ 1px 深色，得統一輪廓線。
• 「效果」→「風格化」→「圓角」非破壞圓角，導出 SVG 保留參數。
• 「效果」→「路徑」→「路徑偏移」快速生成外發光/描邊變體。

6. 多尺寸輸出規範

• 美術板工具建立多尺寸畫板：16/24/32/48/64/128/256px。
• 「檔案」→「匯出」→「匯出為」→ 選「美術板」→ 格式 PNG/SVG，勾選「使用美術板」。
• 命名規範：`icon-home-32.png`、`icon-user-64.svg`。

矢量像素風優勢

• 無限縮放不模糊，單一源文件輸出全尺寸。
• 顏色/形狀全局編輯：修改色板/符號瞬間更新全套。
• SVG 內聯網頁，CSS 可控制顏色/動畫（如 `fill: currentColor`）。
• 版本控制友好：文本格式 .ai/.svg 可 Git diff 追蹤像素級變更。

進階玩法

• 等距像素藝術：結合 30° 參考線繪製 iso-pixel 場景。
• 動態像素：導出 SVG → CSS/SMIL/JS 幀動畫（眨眼、跳動、旋轉）。
• 著色器思維：外觀面板疊加「色相旋轉」「飽和度」「對比度」效果，實時換色。