質感立體圖標是 UI 設計師的基本功，掌握「形狀→材質→光影」三步走核心邏輯，即可快速產出專業級圖標。本教程將以最精簡流程，演示一枚具備金屬質感、倒角邊緣、真實高光陰影的立體圖標制作全過程。

效果預覽

最終成品：簡潔幾何造型，哑光金屬質感，頂部銳利高光，底部柔和投影，適配各類應用場景：

極速制作流程（10 分鐘完成）

步驟 1：基礎幾何構建

1. 新建 512×512 px 文檔，背景透明
2. 圓角矩形工具 (U)：半徑 40 px，繪製 280×280 px 正方形，填充 #4A4A4A，命名「Base_Shape」
3. Ctrl+J 複製 → 命名「Top_Face」→ Ctrl+T 縮放 90% (252×252 px) → 向上移動 8 px

步驟 2：材質樣式系統（核心）

Base_Shape (底座)：

• 斜面浮雕：外部斜面，平滑，深度 100%，大小 8 px，柔化 2 px，角度 120°，高度 30°，高光「線性減淡」#CCCCCC 40%，陰影「線性加深」#1A1A1A 50%
• 內陰影：距離 3 px，大小 6 px，#000000 30%
• 漸變疊加：線性 90°，#555555 → #333333 → #555555，疊加 20%
• 投影：距離 5 px，大小 10 px，#000000 25%

Top_Face (頂面)：

• 斜面浮雕：內部斜面，平滑，深度 80%，大小 4 px，柔化 1 px，高光「線性減淡」#FFFFFF 60%，陰影「線性加深」#333333 30%
• 漸變疊加：徑向，中心 #FFFFFF (0%, 透明度 0%) → #CCCCCC (100%, 100%)，疊加 30%
• 描邊：1 px，內部，#333333，不透明度 50%

步驟 3：高光細節與邊緣精修

1. 新建圖層「Edge_Highlight」，剪貼蒙版至「Top_Face」
2. 1 px 硬邊白筆刷，沿頂面四邊繪製銳利高光線（上/左邊亮，下/右邊暗）
3. 圖層混合模式「線性減淡」，不透明度 70%
4. 新建圖層「Corner_Highlight」，剪貼蒙版，4 px 硬邊白筆刷點繪四角高光點

步驟 4：環境光與投影整合

• 新建圖層「Ambient_Occlusion」置於「Base_Shape」下方，剪貼蒙版
• 柔邊筆刷 20 px，#000000 不透明度 15%，繪製底座底部陰影加深
• 新建圖層「Ground_Shadow」最底層，「Base_Shape」複製合併 → 填充黑 → 高斯模糊 8 px → 縱向縮放 30% → 不透明度 20%

步驟 5：導出與規範

• 檢查：100% 視圖無虛邊、光源一致、邊緣銳利
• 導出：PNG-24 透明背景 @1x/@2x/@3x + SVG 矢量版本
• 命名：icon_metal_square_[state]@[scale].png

進階變體：3 分鐘切換材質

材質	關鍵樣式修改	適用場景
玻璃	填充 0% + 斜面浮雕(內部,大小6px,高光80%) + 內發光(螢幕,白,20%,10px) + 描邊(1px,白,30%)	輕量級、科技感
磨砂塑膠	填充 #E0E0E0 + 斜面浮雕(內部,大小3px) + 圖案疊加(雜色紋理,柔光,15%) + 內陰影	消費電子、醫療器械
陶瓷	填充 #FAFAFA + 斜面浮雕(外部,大小5px,高光60%) + 漸變疊加(徑向,中心亮) + 噪點紋理(疊加,5%)	家居、藝術品
發光體	填充品牌色 + 外發光(螢幕,同色,50%,20px) + 內發光(螢幕,白,30%,10px) + 色彩疊加(白,疊加,20%)	狀態指示、通知圖標

設計系統整合建議

• 建立「圖標樣式庫」.asl 文件，收錄上述 5 種材質預設
• 制定《圖標設計規範》文檔：畫布、網格、安全區、圓角半徑、描邊寬度、光源角度、陰影參數、色彩 Token
• 使用 Figma/Sketch Components 實現跨平台同步，PS 僅作為位圖細節渲染工具
• 自動化導出：檔案 → 匯出 → 圖層至文件 批量導出所有狀態/尺寸

立體圖標設計的核心不在於複雜技巧，而在於「標準化參數的紀律性執行」。建立個人/團隊的圖標參數規範表，每次繪製前載入預設，每次導出後核對清單，才能在保證質量的前提下實現高效產出。下一步挑戰：嘗試設計一套 20+ 枚風格統一的圖標族，包含填充/描邊/雙色三種風格變體。