專業圖標設計講求「Illustrator 建構向量骨架，Photoshop 定樣式輸出」的分工協作。本文來自資深圖標設計師實戰經驗總結，涵蓋規格制定、網格系統、AI 核心功能（路徑尋找器、形狀生成器、即時圓角、扭曲、輪廓化筆觸）與跨軟體工作流，滿滿乾貨。

核心理念：形狀創建 vs 樣式設定

• Illustrator：矢量路徑王者，擅長布林運算、節點編輯、幾何構造，產出純淨可無限縮放的向量骨架。
• Photoshop：渲染質感首選，圖層樣式、蒙版、濾鏡、智能物件賦予材質、光影、特效，最終輸出位圖資產。
• 工作流：簡單圖形直接在 PS；複雜/成套圖標先在 AI 完成向量，再複製貼上至 PS 為智能物件或形狀圖層添加樣式。

規格與網格系統

• 奇偶一致原則：線條寬度為偶數 → 畫布寬高皆偶數；線條為奇數 → 畫布寬高皆奇數。避免奇偶混用導致 1×/3× 縮放時邊緣模糊。
• 基準網格：以 1× 基準網格（如 16×16, 24×24, 32×32）設計，所有節點吸附網格，確保縮放銳利。
• OS X 應用圖標：尺寸成倍增長（16→32→64…→1024），從 16×16 起設計可輕鬆推導大尺寸；蘋果官方圖標略有 2px 偏差，但堅持網格更利維護。
• iOS 應用圖標：10 種尺寸，歸納為 4 組基礎尺寸（29, 40, 60, 76）× 1×/2×/3× + 1024 App Store 圖。專注 1× 設計，再按比例匯出。

Illustrator 核心功能實戰

對齊網格設定

視圖 › 對齊網格（開啟），關閉「對齊新物件到像素格」。需微調時用「移動」面板（Enter）輸入精確座標。

自訂工具面板

隱藏不常用工具，露出「形狀生成器」「路徑尋找器」「即時圓角」等高頻功能，效率倍增。

路徑尋找器 - 分割功能

重疊圖形選中 › 路徑尋找器 › 分割，自動拆分為獨立封閉形狀，刪除多餘部分極快。

形狀生成器

Shift+M 呼出，拖曳合併形狀，Alt+拖曳減去形狀，比路徑尋找器更直覺流暢。

即時圓角

CC 2014+ 所有形狀角點出現小控制柄，拖動即時調整圓角；控制面板可輸入精確半徑值。解決了以往圓角矩形無法編輯的痛點。

扭曲/封套變形

物件 › 封套扭曲 › 使用扭曲網格/網格扭曲，將幾何形狀彎曲成有機曲線，豐富視覺語言。

輪廓化筆觸

物件 › 路徑 › 輪廓化筆觸，將描邊轉為填充路徑，確保進 PS 後樣式不會因描邊縮放而變形。