UI 圖標設計的核心在於「小尺寸下的識別度與質感傳遞」。本教程以磚塊圖標為例，拆解「向量形狀 → 圖層樣式疊加 → 高光/陰影/紋理細節 → 多狀態導出」的標準化流程，確保圖標在 24px~512px 多尺度下均清晰可用。

一、效果預覽與設計規範

圖標呈現紅磚材質，頂面高光、側面陰影、邊緣磨損、表面細微凹凸紋理，風格偏寫實但保留圖標簡潔性，符合 iOS/Android/Web 多平台設計規範。

最終效果

製作關鍵步驟截圖

二、核心製作步驟

1. 向量基礎形狀：圓角矩形工具（半徑 4 px）繪製主體，矩形工具繪製頂面/側面，全部為形狀圖層，保證無損縮放。
2. 圖層樣式構建體積：
   • 倒角與浮雕：外部倒角、鑿刻、深度 200%、大小 8 px、角度 120°、高光「螢幕」40%、陰影「正片疊底」60%。
   • 漸變疊加：線性、90°、#C0392B→#E74C3C→#C0392B（紅磚色相）。
   • 描邊：1 px、內部、#8B2500（深邊緣）。
   • 投影：距離 2 px、大小 4 px、不透明度 30%。
3. 材質紋理疊加：
   • 新建圖層填充 50% 灰 → 濾鏤 → 雜色 → 添加雜色（3%，單色、高斯） → 高斯模糊 0.5 px → 混合模式「疊加」，不透明度 15%，模擬磚孔粗糙感。
   • 新建圖層，1 px 硬邊畫筆手繪少量深色裂紋/白色高光點，模擬磨損邊緣。
4. 高光細化：頂面邊緣 1 px 白色線性減淡高光；側面頂部 2 px 柔光高光帶，增強棱角銳度。
5. 多狀態變體：複製組 → 修改漸變疊加色相（灰磚/黃磚/青磚）→ 導出正常/懸停/按下/禁用四狀態 PNG/SVG。

三、團隊協作與資產管理建議

• 建立「UI 圖標元件庫」PSD：每組圖標獨立群組，命名規範 `icon/模塊/名稱/狀態`。
• 圖層樣式存為 `.asl` 共享，新成員拖入即用。
• 導出腳本：Generator / 切片 / 外掛（如 Cutterman）一鍵批量輸出 @1x/@2x/@3x + WebP。
• 版本控制：PSD 納入 Git LFS，設計評審時可視化 Diff 圖層變更。

相關教程： PhotoShop繪制太極圖圖標 / PS制作質感金屬鎖具圖標 / AI和PS繪制齒輪圖標 / PS制作經典拉絲鐘表 UI 圖標