前言：像素級精準，是界面設計師的基本功

Photoshop CS6 引入「矢量對象繪制/變換時像素自動對齊網格」，大幅降低了模糊邊緣風險。但即便在 CS5/CS6 環境下，實際設計中仍需頻繁手動調整「次像素」（Sub-pixel）——那些未完全對齊網格的半透明過渡像素，以消除鋸齒、增強飽滿度、提升精緻度。本文以 CS5 為基礎，系統梳理像素對齊設置與次像素微調技法。

一、像素對齊網格：讓矢量圖形「落地」的基礎設施

1. 對象繪制時的像素對齊設置

PS CS5 預設狀態下，僅 100% 畫布比例繪制不模糊；放大縮小後即使開啟網格輔助，邊緣依然模糊。原因在於網格單位預設為毫米，而非像素。

設置步驟：

1. 編輯 → 首選項 → 參考線、網格與切片（Ctrl+K → 參考線、網格與切片）。
2. 網格線間隔：單位改為「像素」，數值設為 1（或 2、4、8 等 2 的冪次，視習慣）。
3. 子網格數值：設為與網格線間隔相同（如 1），確保網格線與像素網格完全重合。
4. 視圖 → 顯示 → 網格 (Ctrl+')；視圖 → 對齊 → 勾選「對齊到網格」。

完成後，任意縮放比例下繪製矩形、圓角矩形、橢圓等常規形狀，開啟網格即可像素級對齊，邊緣銳利無模糊。

2. 對象變換時的像素對齊技巧

矩形寬高皆為奇數或皆為偶數時，90° 旋轉可自動對齊像素；一奇一偶則會模糊。解決辦法：執行旋轉後不退出自由變換模式 (Ctrl+T)，開啟網格，拖動圖形邊緣吸附對齊網格，再確認變換。

二、次像素微調：讓圖形「飽滿」的進階心法

案例：下拉選單三角箭頭的三種繪製對比

方案 A：鉛筆工具逐像素點繪 — 邊緣銳利但有鋸齒，低分屏下生硬。
方案 B：路徑對齊網格繪製 — 無鋸齒，但體量感削弱，視覺單薄。
方案 C：路徑對齊 + 次像素微調 — 既無鋸齒，又保持飽滿體量，綜合體驗最佳。

次像素微調操作步驟

1. 用鋼筆工具繪製標準路徑箭頭，確保關鍵錨點對齊像素網格。
2. 放大至 3200% 或更高，開啟路徑面板選中路徑。
3. 直接選取工具 (A) 選中頂點/轉折點錨點，按鍵盤方向鍵微移 0.5-1 像素（視覺上使原本較淡的次像素加深）。
4. 觀察像素預覽 (Ctrl+Alt+Shift+Y) 效果，反覆微調直至邊緣平滑且體量飽滿。
5. 右鍵路徑 → 建立選區 → 填充顏色，獲得最終像素圖層。

應用場景延伸

• 圖標圓角轉折處的次像素潤飾
• 細線條圖標（1px/2px）的對齊與加粗微調
• 文字邊緣銳化：將文字圖層轉形狀後微調關鍵轉折點
• 高解析度屏幕下的 0.5px 細線實現（Retina 下 1 物理像素 = 2 邏輯像素）

三、工作流建議：從「對齊」到「微調」的肌肉記憶

1. 新建文檔即設置網格：將網格參數存為預設，或建立「UI 設計專用」文檔預設。
2. 繪製習慣：優先用矩形/橢圓/圓角矩形工具 + 網格對齊；複雜形狀用鋼筆工具 + 吸附網格。
3. 變換習慣：自由變換後必開網格檢查邊緣，一奇一偶尺寸必做吸附修正。
4. 輸出前巡檢：3200% 放大逐圖層檢查關鍵圖標邊緣，必要時次像素微調。
5. 團隊規範：制定《像素級設計規範》，統一網格參數、圖標尺寸體系、次像素處理原則。

總結

像素對齊是底線，次像素微調是上限。前者解決「不模糊」，後者追求「更飽滿、更精緻、更高級」。PS CS6+ 的自動對齊固然方便，但理解像素網格本質、掌握手動微調技法，才能在任何版本、任何複雜場景下產出像素級完美作品。期待 Adobe 繼續賦能設計師，讓我們在更智能的環境中專注創意表達。