隨著高解析度螢幕普及，像素級完美已成數位設計基本門檻。Illustrator 作為向量軟體，早期版本難以精準對齊像素網格，但 CC 版本後透過「對齊像素網格」、像素預覽、鍵盤增量等機制，已成像素完美設計首選工具。本文系統整理從文件建立、首選項設定、操作習慣到進階技巧的完整 SOP。

核心概念：像素網格與對齊機制

• 每個數位螢幕由像素網格組成，物件邊緣落於像素邊界 → 銳利；落於像素中心/分界 → 模糊/抗鋸齒。
• 「對齊到像素網格」：強制物件路徑邊界/錨點吸附至最近像素交叉點。
• 「像素預覽」(Alt+Ctrl+Y)：模擬螢幕光柵化渲染，即時檢視銳利度。

步驟一：新建文件三鐵律

1. 寬高為整數像素：不接受小數（如 200.58 px），否則右/下邊緣落入像素內部而非邊界。
2. 單位設為「像素」：避免 pt/mm 單位換算誤差。
3. 勾選「將新物件對齊到像素網格」：新建物件自動吸附。

補救：若誤設小數，Shift+O 進入畫板工具修正整數 → Alt+Ctrl+Y 像素預覽確認 → 必要時拖動畫板對齊。

步驟二：首選項深度設定

2.1 一般：鍵盤增量 = 1 px

• 方向鍵移動物件最小單位。設為 1 pt（等同 1 px @72 ppi），確保每次微移皆落於像素網格。
• 注意：單位為 pt，但 72 ppi 下 1 pt = 1 px，高解析文件同理運作。

2.2 單位：長度/描邊/文字 分離設定

• 長度、描邊、間距、網格：全部設 像素。
• 文字：設 點。理由：文字排版標準單位為 pt；12 px ≠ 12 pt，強制 px 會導致字號與設計規範脫節。
• 亞洲語系選項：級/牙單位保持級 (Q) / 牙 (H)。

2.3 參考線與網格：分割數 = 1（關鍵）

• 網格線間距：1000 px（或任意大數），分割數：1。
• 效果：每 1000 px 一條主網格線，無分割線 → 實際上每像素無視覺干擾線，但「對齊網格」(Ctrl+Shift+;) 會強制物件吸附至像素交叉點。
• 此設定使「對齊網格」等同於「對齊像素網格」，操作統一。

步驟三：掌握三種對齊模式差異

步驟四：進階像素完美技巧

1. 圓角矩形/橢圓等基本形狀工具優先

參數面板輸入整數尺寸 → 自動對齊像素網格（若勾選新物件對齊）。避免鋼筆工具手繪基本形狀產生非整數座標。

2. 路徑偏移建立像素完美描邊

• 物件 → 路徑 → 路徑偏移 → 整數值（如 2 px）→ 新路徑自動平行偏移並對齊網格。
• 優於描邊面板設寬度：描邊中心線對齊導致邊緣落於半像素。

3. 文字像素對齊策略

• 點文字：選中 → 勾選「對齊像素網格」，基線自動吸附。
• 區域文字：文字框對齊，內部字符依字體渲染引擎，不可完全控制。
• 關鍵 UI 文字：建議「建立輪廓」(Ctrl+Shift+O) 轉為路徑 → 勾選對齊像素網格 → 微調錨點。

4. 匯入資產（圖示/素材）像素化處理

1. 置入 SVG/AI/EPS → 選中 → 勾選「對齊像素網格」。
2. 若原始座標非整數：Ctrl+Y 輪廓模式 → 選取所有錨點 → Ctrl+Alt+Shift+J (平均/對齊) → 或手動微調關鍵點。
3. 位圖素材 (PNG/JPG)：確保 1x/2x/3x 版本尺寸為整數倍，置入後不縮放（100%）。

5. 匯出像素完美資產

• 「檔案」→「匯出」→「匯出為」→ 選 PNG/SVG → 解析度 72/144/216/288 ppi（對應 1x/2x/3x/4x）。
• 勾選「使用畫板」、「防銳利化」（可選）。
• SVG 匯出選項：小數位數 1（減少檔案）、ID 精簡、回應式取消勾選（固定尺寸）。

印刷與螢幕雙軌並行策略

同一源檔同時服務印刷 (CMYK/300 dpi) 與螢幕 (RGB/72 ppi)：

1. AI 單一源檔，RGB 模式，像素完美佈局。
2. 印刷輸出時：另存為 PDF/X-1a，輸出對話框「標記與出血」設出血，「輸出」→ 色彩轉換「轉換為目的地 (保留數值)」、目的地選印刷廠 CMYK ICC。
3. 螢幕輸出：直接匯出 PNG/SVG，色彩空間保持 sRGB。
4. 優勢：單一源檔維護，像素佈局邏輯復用，避免雙套版面維護成本。

總結檢查清單

• ☐ 文件寬高整數 px、單位 px、勾選新物件對齊像素網格
• ☐ 首選項：鍵盤增量 1 pt、長度/描邊/網格單位 px、文字單位 pt、網格分割 1
• ☐ 基本形狀工具優先、路徑偏移整數、關鍵文字建立輪廓對齊
• ☐ 匯入素材對齊像素網格、位圖 100% 置入
• ☐ Alt+Ctrl+Y 像素預覽全程檢視、Ctrl+Y 輪廓檢查錨點座標
• ☐ 匯出設定正確解析度與色彩空間

將此 SOP 內化為肌肉記憶，你的每一個向量輸出都將天生具備像素級銳利度，無論螢幕顯示、網頁前端、行動應用、甚至印刷轉檔，都能保持專業級品質一致性。

模式	啟用方式	作用對象	行為	適用階段
對齊像素網格	物件屬性面板/控制面板勾選	單一物件	該物件所有路徑邊界/錨點強制吸附像素交點	最終定稿、UI 元件、圖標
對齊網格	Ctrl+Shift+; / 視圖選單	所有物件	拖曳/移動時吸附至網格線（依首選項分割數=1 即像素點）	佈局階段、手動調整
智能參考線	Ctrl+U / 視圖選單	所有物件	顯示對齊/間距/角度提示，不強制吸附	全程輔助