本教程以 10 張高清步驟圖完整記錄小貨車圖標從草稿到成品的構建過程。雖缺文字說明，但圖層面板縮略圖、工具選項欄參數、畫布狀態清晰可見，是優秀的「看圖學技法」素材。涵蓋：車身主體幾何構建 (矩形/圓角矩形/路徑操作) → 車窗/車門/車輪/車燈等部件分層 → 圖層樣式疊加材質 (漸變、斜面浮雕、描邊、投影) → 環境光/高光/陰影修飾 → 細節貼圖 (車牌、標識、門把手) → 整體調色輸出。適合具備 PS 基礎、欲提升圖標構建邏輯的設計師逆向拆解練習。

完整步驟圖解序列

逆向拆解練習指南

1. 按序號觀察每圖畫布變化：新增了什麼層？哪層改變了？工具選項欄參數是什麼？
2. 關注圖層面板 (通常在右側) ：層名、縮略圖、可見度、鎖定狀態、混合模式、不透明度、填充、fx 圖標。
3. 推測操作邏輯：例如：矩形工具拉車身 → 圖層樣式加漸變/浮雕 → 新層剪貼蒙版畫陰影 → 橢圓工具拉車輪 → 路徑操作做輪轂細節…
4. 重點攻克難點：車輪透視圓角矩形如何做？車身側面漸變角度如何定？車窗反光如何用蒙版漸變？
5. 復現驗證：新建文件嘗試 1:1 復現，遇卡住處回頭對照圖層面板參數。

圖標設計通用知識點補充

• 透視統一：整組圖標必須同一透視角度 (等距/平行/透視)，建立透視網格參考層。
• 圓角半徑規範：同一尺寸規範下，所有圓角半徑統一 (如 2px/4px/6px 系列)，視覺系統感強。
• 色彩系統：主色調 + 輔助色 + 中性灰 + 高光白 + 陰影黑，建立色卡庫。
• 像素對齊：關鍵邊緣、線條對齊像素網格，避免模糊，導出時勾選「對齊像素」。
• 多狀態預留：默認、懸停、按下、禁用、載入中… 結構預留狀態層組。

雖無文字，但這 10 圖信息密度極大。建議收藏作「圖標解剖學」案例庫，定期拿出來拆解一遍，每次都能發現新細節。