前言：圖標設計的邏輯與順序

GUI 圖標繪製最考驗邏輯順序：圖層結構規劃、繪製順序、樣式衝突預判。新手常因順序錯誤導致難以修改、返工浪費時間。本教學以小紅傘為例，演示專業圖標繪製工作流。

效果與過程展示

專業圖標繪製工作流

階段一：結構規劃與圖層架構設計

1. 分析圖標構成元素：傘頂、傘骨、傘柄、頂端飾物、高光/陰影層
2. 建立圖層組結構：
   Umbrella_Icon/
   ├─ Background（可選）
   ├─ Handle_Group/（傘柄：基礎色、陰影、高光、紋理）
   ├─ Canopy_Group/（傘面：分瓣、縫線、邊緣、花紋）
   ├─ Ribs_Group/（傘骨：主骨、副骨、連接點）
   ├─ Topper（頂端飾物）
   ├─ Highlights_Shadows/（全局光影修飾）
   └─ Export_Slices（切片標記）
3. 確定透視角度：標準 GUI 圖標通常採用等距透視或正交側視

階段二：矢量形狀精確繪製

• 鋼筆工具繪製傘面弧線（貝塞爾曲線控制手柄對稱）
• 路徑面板保存工作路徑，便於後續修改
• 形狀圖層屬性面板設置精確尺寸（寬高、圓角半徑）
• 傘骨使用「路徑描邊」或矩形工具複製旋轉分佈

階段三：材質與光影圖層樣式系統化

建立材質樣式庫：

• 紅色尼龍傘面：漸變疊加（徑向 #ff3300→#cc0000），內發光（深紅正片疊底），圖案疊加（細微織物紋理）
• 金屬傘骨/傘柄：斜面浮雕（鑿刻清晰），漸變疊加（金屬光譜），內陰影，光澤
• 塑膠頂端飾物：斜面浮雕（內部凸緣），描邊，投影

關鍵原則：先完成基礎形狀圖層，再統一添加樣式，避免樣式衝突。樣式參數集中管理，修改一處處處生效。

階段四：細節微雕與非破壞修飾

• 縫線：路徑描邊 1px 硬筆刷，圖層樣式內陰影+斜面浮雕
• 傘面分瓣邊緣：蒙版柔化或內發光模擬縫合線
• 高光修飾：新建圖層模式「顏色減淡」，白色軟筆刷繪製鏡面高光
• 環境光遮蔽 (AO)：50% 灰填充圖層模式「疊加」，燒遲/減淡工具繪製結構轉折陰影

階段五：多尺寸導出與規格檢查

• 畫板工具建立多尺寸畫板（1024, 512, 256, 128, 64, 32, 16）
• 智慧物件縮放保持銳利
• 檢查：16px 下輪廓清晰、顏色可辨、無多餘像素
• 導出 PNG（透明背景）+ SVG（矢量版本）

避坑指南

• ❌ 先畫細節再定大形 → ✅ 先定大形結構再進細節
• ❌ 圖層樣式隨意疊加 → ✅ 建立材質樣式系統統一管理
• ❌ 直接合併圖層 → ✅ 保留智慧物件與圖層組結構
• ❌ 單一尺寸輸出 → ✅ 多規格批量導出流程

更多精彩教程請關注三聯 Photoshop 教程欄目，三聯 PS 群：311270890 歡迎加入交流。