擬真風格圖標設計是 UI 設計師進階必修課。本教學以「五件套日常工具」為載體，手把手拆解 43 步驟完整流程：從網格輔助精準構圖、鋼筆/形狀工具建模、圖層樣式堆疊模擬金屬/木材/塑膠質感、到群組管理與光影統一。極佳的鋼筆工具實戰練習，更是構建個人材質樣式庫的黃金案例。

畫布與網格設定

• 新建 600×450px，72dpi。
• 視圖 › 顯示 › 網格；視圖 › 吸附 › 網格。
• 偏好設定：網格線間距 10px，細分 10，便於像素級對齊。

工具一：扳手 —— 形狀運算與金屬質感基礎

1. 紅色(#FF0000)橢圓 26×30px + 矩形 14×15px 組合雛形。
2. 添加錨點 › 轉換點工具 拉伸成開口弧度，直接選擇工具微調位移 4px。
3. 路徑選擇工具 › 減去頂層形狀，形成開口。
4. 矩形 50×14px 做把手，複製水平翻轉合成雙頭。
5. 統一形狀，顏色改 #F6F6F6(亮鋼灰)。
6. 金屬質感樣式包：
   內發光(正常/35%/黑/2px) → 光澤(正常/黑/14%/90°/11px/10px/反相) → 投影(正常/55%/90°/1px/4px)。
7. 複製三支，變換組合成「扳手組」，調整側向扳手光澤角度(0°)適應光源。
8. 群組「F」添加整體投影(正常/55%/90°/1px/4px)。

工具二：螺絲刀 —— 漸層模擬金屬桿與木柄質感對比

1. 圓角矩形 25×80px(R=6px)加錨點 › 直接選擇工具向內收窄頂部成錐狀。
2. 主體樣式：漸層疊加(#484847→#4F4F4F→#484847/線性/0°/100%)模擬金屬桿環狀反光。
3. 複製層清除樣式、填充 0% → 圖案疊加(藝術表面/紋理) + 內發光(柔光/45%/黑/邊緣/10px) 增加金屬拉絲細節。
4. 橢圓 6×34px 拉長 15px 做螺絲頭，樣式：投影(柔光/白/55%/90°/1px) + 內發光(柔光/25%/黑/5px) + 內陰影(黑/55%/90°/1px/2px)。
5. 矩形 30×4px 做刀頭，剪貼蒙版限制在把手內，樣式：投影(柔光/黑/20%/90°/1px) + 內陰影(柔光/白/45%/90°/1px) + 斜面浮雕(內斜面/平滑/100%/上/5px/0°/30°/無全域光/正片疊底/黑/40%)。

工具三：錘子 —— 紅色金屬頭與木柄結合

1. 矩形 5×68px 加兩側錨點向外擴 2px 做錘頭側面。
2. 漸層疊加(#A5A5A5→#FFFFFF→#A5A5A5/線性/0°/100%)模擬金屬側面反光帶。
3. 圓形 15×15px 做錘頭端面：光澤(正常/黑/14%/50°/11px/14px/反相) + 內發光(正常/35%/黑/2px)。
4. 細節：矩形 2×12px(內陰影/正常/黑/25%/180°/1px) + 矩形 13×2px(內陰影/正常/黑/25%/-90°/10px) 做金屬質感細節條。
5. 群組旋轉定位，添加群組投影(正常/黑/55%/1px/4px)。

工具四：斧頭 —— 彎曲刀刃與木柄過渡

1. 圓角矩形 15×165px(R=2px)加錨點 › 直接選擇工具收窄頂部成刀刃形。
2. 樣式：內發光(柔光/10%/黑/雜色100%/12px) + 內陰影(柔光/白/45%/20°/1px) + 斜面浮雕(內斜面/平滑/100%/6px/0°/30°/無全域光/柔光/黑/45%)。
3. 矩形 60×24px › 變形 › 彎曲(貝殼) › 旋轉 -45° 做斧頭刃。
4. 刃樣式：光澤(正常/黑/10%/162°/18px/14px/反相) + 內發光(正常/30%/黑/5px) + 內陰影(強光/白/100%/-130°/5px/10%/3px)。
5. 直線工具畫連接縫，填充 0% + 投影(正片疊底/46%/120°/1px/3px) 做自然陰影。

工具五：鋸子 —— 齒狀刃口與護手圈

1. 複製扳手組，刪除左端，改色 #00EB69(螢光綠)做差異化展示。
2. 雙圓環減去頂層形狀做護手圈(24px 外圈、12px 內圈)。
3. 矩形 2×3px 多次複製旋轉排列成鋸齒。
4. 合併形狀，改色 #F6F6F6，樣式：光澤(正常/黑/14%/120°/11px/10px) + 內發光(正常/45%/黑/2px)。
5. 複製組鏡像翻轉，調整投影(黑/45%/2px/4px)適應相反光源。

背景與最終合成

1. 鋼筆勾勒背景裝飾形狀，樣式：光澤(正常/黑/14%/50°/11px/14px) + 內發光(正常/35%/黑/2px)。
2. 與斧柄群組，添加群組投影(45%/90°/2px/4px)。
3. 背景圖層解鎖，填充 #58857E 或 #80664F，圖案疊加(柔光/35%/藝術表面) + 內發光(柔光/75%/黑/140px) 營造環境光。

材質樣式庫建立建議

將教學中反覆使用的「亮鋼灰金屬」、「深灰金屬桿」、「紅色錘頭金屬」、「木材」、「塑膠綠」等 5 套核心樣式存為「圖層樣式預設」，並建立「工具圖標專用」庫。未來新增工具只需套用預設微調參數，效率提升 80% 以上。

🎯 核心收穫：擬真風格 = 精準向量建模 + 物理基礎光影邏輯(單一光源) + 材質樣式模組化。刻意練習鋼筆工具畫出流暢、少錨點的曲線，是通往高階圖標設計的必經之路。