像素風 ICON 要求每條邊緣落在像素網格上,手動對齊極其繁瑣。Illustrator「鍵盤增量」搭配「像素預覽模式」,讓你像寫代碼一樣用方向鍵精準推進錨點,實現像素級精確與高效量產。本技巧專為 UI/圖標設計師打造。
核心設定
- 啟用像素預覽:「檢視」→「像素預覽」 (Alt+Ctrl+Y),畫布即時顯示光柵化效果。
- 設定鍵盤增量為 1 px:「編輯」→「偏好設定」→「一般」→「鍵盤增量」輸入 1 px。此後每按一次方向鍵,選取錨點/物件即移動 1 像素。
- 開啟「對齊像素網格」:偏好設定 → 「選取與錨點顯示」勾選「對齊像素網格」,新建物件自動吸附。
實戰工作流
- 矩形工具 (M) 按 Shift 畫正方形基礎單元(如 16×16 px)。
- 直接選取工具 (A) 選中特定錨點,按方向鍵微調形狀,每步 1 px,邊緣永遠銳利。
- 複雜形狀以「路徑查找器」布爾運算組合基本單元,再微調錨點。
- 完成單個 ICON → 選取所有路徑 → 「物件」→「路徑」→「簡化」清理多餘錨點 → 存為符號或 SVG。
效率加成技巧
- 批量複製排列:Alt+拖曳複製 → Ctrl+D 重複,快速生成網格陣列。
- 動作錄製:將「簡化路徑、匯出 SVG」錄製為動作,批次處理整組 ICON。
- 命名規範:圖層/物件命名為
icon_home_16px,匯出時自動帶入檔名。
適用場景
- App 導航欄、工具列圖標集(16/24/32 px 多規格)。
- 網站 Favicon、系統托盤圖標。
- 像素風遊戲 UI 資產(按鈕、對話框、道具圖標)。
鍵盤增量 + 像素預覽 = 向量精度與像素銳度的完美融合。告別模糊邊緣,迎接像素完美主義。