設計目標

打造具有遊戲風格的 UI 按鈕：深色暖調背景、破損邊緣紋理、金屬質感邊框、動態光影流動感、專屬字體排版。

模組化拆解與製作步驟

1. 背景基底：純淨深色暖調

新建圖層填充深色暖灰（如 #1a1510），不加任何雜色與漸變，作為乾淨畫布。

2. 形狀與破損邊緣：矩形 + 橡皮擦手繪

矩形工具繪製基礎形狀 → 選取「橡皮擦工具」（硬度 0%、流量 30%）→ 沿邊緣不規則擦除，營造戰損、古舊質感。多試幾次直到視覺平衡。

3. 表面紋理：單色雜色 + USM 銳化

新建圖層填充 50% 灰 → 「濾鏡 > 雜色 > 添加雜色」（單色、高斯分佈、量值 5–10%） → 「濾鏡 > 銳化 > USM 銳化」（半徑拉滿、數量視效果調整） → 圖層混合模式設「疊加」或「柔光」→ 不透明度微調。

4. 光影層次：疊加模式下的筆繪高光與線光

• 高光面：新建圖層，模式「疊加」，柔邊白筆繪製高光區塊，不透明度 20–40%。
• 黑線框：硬邊黑筆勾勒邊框陰影線。
• 線光特效：新建圖層填充黑 → 添加雜色 → 多次銳化 → 「濾鏡 > 模糊 > 動感模糊」（角度 0°/90°） → 再次銳化 → 迭代數次得細長光柵 → 模式「疊加」置於高光層上方。

5. 環境氛圍：不規則黑塊 + 橡皮擦虛化

新建圖層，黑筆繪製不規則色塊 → 橡皮擦邊緣虛化 → 置於邊框附近，增強空間深度。

6. 文字排版：雙字體 + 圖層樣式漸變 + 疊加微調

• 中文：漢儀中黑簡；英文：微軟雅黑。
• 添加「漸變疊加」賦予金屬質感。
• 技巧：另建一圖層設「疊加」模式，用筆刷局部調亮/調暗，比反覆開啟圖層樣式面板更高效直觀。

工作流建議

1. 以群組管理各模組（背景、形狀、紋理、光影、文字），便於開關預覽與調整。
2. 關鍵參數（雜色量、銳化半徑、動感模糊距離）記錄備忘，便於風格統一複用。
3. 完成後以智慧物件封裝，便於無損縮放與批量替換文字。

結語

遊戲風按鈕的靈魂在於「受控的隨機性」：破損邊緣看似隨意實則謹慎平衡；光影流動靠雜色+模糊+銳化疊加迭代而成。掌握此模組化思維，可快速衍生出各類風格一致的 UI 組件庫。