金屬質感 UI 元素是遊戲介面設計的核心技能。本教學基於真實商業案例，拆解「草圖構建 → 向量勾勒純色塊 → 材質圖層疊加 → 圖層樣式立體 → 剪貼蒙版紋理 → 整體裝飾」的專業工作流，核心思想：結構用向量，質感用素材，細節用樣式，整體用氛圍。

最終效果

一、構建草圖：確立形態與透視

若客戶提供草圖直接使用；否則自行繪製。關鍵點：

• 確立整體比例、透視關係（平行透視/角度透視）
• 拆解為：外框、內框、輸入框、按鈕、裝飾件等獨立部件
• 標註材質區域：鋼鐵、鍍鉻、拉絲、氧化、發光條等

二、純色填充：向量形狀奠定結構基礎

• 鋼筆工具勾勒各部件外形路徑，建立形狀圖層（非像素填充）
• 賦予基礎材質色：深灰（鋼鐵）、中灰（鍍鉻）、淺灰（拉絲）、金屬金/銅色等
• 開啟「視圖」→「顯示」→「網格」輔助對齊，間距在「偏好設定」→「指南線、網格與切片」中設置

三、添加質感：材質圖 + 圖層樣式 + 剪貼蒙版三位一體

以底框為例，通用流程：

1. 背景材質融合

多張「金屬劃痕/刮痕/氧化」素材疊加，混合模式「疊加/柔光/強光」，不透明度 20-50%，構建豐富底層肌理。

2. 圖層樣式構建基礎立體

• 斜面與浮雕：內部/外部、平滑/雕刻、深度/大小/柔化 → 模擬邊緣倒角、凹凸結構
• 描邊：邊緣高光/暗線分離
• 投影/內陰影：空間深度

3. 剪貼蒙版疊加材質細節

• 在部件形狀圖層上方新建圖層，右鍵「建立剪貼蒙版」
• 拖入金屬紋理素材（拉絲、刮痕、指紋、氧化斑）
• 嘗試混合模式：疊加、柔光、強光、線性光、正片疊底
• 調整不透明度 10-40%，Ctrl+T 變換紋理方向貼合結構

4. 內框/輸入框/按鈕同理操作

• 內框：增加「內陰影」模擬凹陷感
• 輸入框：描邊設為「正常」模式、白色、適當大小/位置，模擬內發光邊框
• 按鈕：結構同底框，材質區分（如鍍鉻/發光）

四、整體裝飾：氛圍營造與細節封頂

• 頂部螺絲釘：小圓形 + 斜面浮雕 + 投影
• 頁面邊框：矩形描邊 + 斜面浮雕
• 環境光/體積光：新建圖層，大柔邊畫筆點繪暖/冷光暈，混合模式「螢幕/線性淺加」
• 微粒/灰塵：噪點濾鏡 + 運動模糊 + 蒙版局部控制

專業工作流核心原則總結

階段	工具/技術	核心目的	關鍵參數/原則
結構	鋼筆形狀圖層	矢量無損、易修改、精準對齊	網格輔助、圖層命名規範（部件_材質_狀態）
基礎立體	圖層樣式（斜面/描邊/陰影）	程式化、可編輯、非破壞	全域光源一致、參數模組化
材質細節	剪貼蒙版 + 素材 + 混合模式	真實肌理、隨意替換、局部控制	素材庫分類管理、混合模式實驗
氛圍統一	環境光/體積光/全局調色	融合整體、敘事情緒	調整圖層非破壞、組織群組管理

避坑指南

• ❌ 直接在像素層繪製結構 → 無法無損修改形狀/透視
• ❌ 單一素材鋪滿全件 → 重複紋理感極強、假
• ❌ 圖層樣式參數隨意疊加 → 缺乏物理邏輯、視覺混亂
• ✅ 建立「材質樣式庫」：將常用金屬樣式（拉絲鋼、鍍鉻、陽極氧化等）存為 .asl，新專案一鍵調用微調
• ✅ 善用「智能對象」封裝複雜部件：雙擊編輯源內容，所有實例同步更新

金屬質感繪製的本質是「光與物質交互的數字化模擬」。向量定骨架、樣式搭架子、素材貼皮膚、光影注靈魂。遵循這套工作流，從登錄框到儀表盤、從武器圖標到機甲外觀，皆可觸類旁通。