本教程以曾獲 GUI 奧林匹克大獎的圖標包「The Last Order」為例，完整演示從 Illustrator CS 矢量建模、3D 效果生成透視基礎、路徑尋找器布爾運算構建立體細節、漸層與不透明蒙版營造材質質感，至 Photoshop 後期添加陰影、IconWorkshop 輸出 .ico 格式的專業圖標製作全流程。

軟體與素材準備

• 核心：Adobe Illustrator CS（具 3D 效果）
• 後期：Adobe Photoshop（添加投影、銳化）
• 輸出：Axialis IconWorkshop（生成 .ico 多尺寸圖標檔）
• 參考：獲獎圖標包截圖作風格基準

核心製作階段

階段一：3D 旋轉建立透視基礎形

1. 圓角矩形工具繪製基礎形，設定圓角半徑。
2. 執行「效果 > 3D > 旋轉」，調整 X/Y/Z 軸角度至理想透視（記錄參數供全套圖標統一）。
3. 外觀面板中可隨時編輯 3D 旋轉參數。
4. 「物件 > 擴展外觀」將 3D 效果轉為可編輯路徑。
5. 白箭頭選取所需面，複製貼上分離，刪除多餘面。

階段二：漸層著色與立體厚度構建

1. 主面板面：線性漸層（光源設定左上），建立金屬/塑膠質感。
2. 複製主面板，位移少量像素，路徑尋找器「減去頂層」獲得厚度側面。
3. 側面填充徑向漸層，增強立體感。

階段三：高光與不透明蒙版細節

1. 頂部高光：複製主面板置頂，縮小、填「黑-白」線性漸層，與主面板建立不透明蒙版（勾選「反轉蒙版」「剪切」），產生頂部細緻高光帶。
2. 底部反光：同理在底部添加白色反光條 + 不透明蒙版。
3. 螢幕凹槽：複製面板縮小置頂，線性漸層反向（模擬凹陷），同樣加白底 + 不透明蒙版處理邊緣。
4. 螢幕面板：徑向漸層填色，再加高光/反光蒙版組。

階段四：細節元素（按鈕、凹槽、標誌）

• 左側凹槽與右側三凹槽：雙層路徑（底白位移模擬高光 + 面漸層）+ 不透明蒙版。
• 按鈕：混合工具（兩圓漸層混合）快速生成立體按鈕。
• 其他圖元：鋼筆 + 標準形狀組合，綠色按鈕同用混合工具。

階段五：標準化輸出流程

1. 繪製 128×128px 正方形，不透明度 0%，作為畫板邊界。
2. 「檔案 > 存儲為 Web 所用格式」，選 PNG-24，勾選透明度。
3. Photoshop 開啟 PNG，新增白底圖層，圖層樣式添加「投影」（距離 0、大小 0.5、模糊 0.7、不透明度 50%），增強桌面識別度。
4. 刪除白底，合併圖層（Ctrl+E），存檔 PNG。
5. IconWorkshop 導入 PNG，生成多尺寸 .ico 檔。

專業工作流總結

1. 3D 效果作草圖：快速獲得精準透視基礎形，參數統一保證系列一致性。
2. 擴展外觀轉路徑：將效果「烘焙」為可編輯向量，後續自由控制。
3. 路徑尋找器布爾運算：減去/交集/合併構建複雜立體幾何。
4. 漸層+不透明蒙版=材質：金屬、塑膠、玻璃、凹凸質感皆由此組合實現。
5. 混合工具批量生成：按鈕、燈光等重複元素高效製作。
6. 跨軟體管線：AI 矢量建模 → PS 光影後期 → IconWorkshop 格式封裝，各司其職。

結語

專業圖標設計非單一技巧，而是「透視建模 → 幾何運算 → 材質模擬 → 標準化輸出」的系統工程。熟練掌握 Illustrator 的 3D 效果、外觀面板、不透明蒙版、路徑尋找器、混合工具等核心功能，配合 Photoshop 後期與專業輸出工具，方能高效產出商業級圖標資產。