頹廢風格在遊戲 UI 設計中極具辨識度，通過金屬鏽蝕、油漆剝落、污漬堆疊等視覺語言，傳遞廢土、末日、硬核的遊戲世界觀。本教學將示範如何運用圖層樣式、紋理疊加、蒙版破壞、筆刷手繪等技巧，從零繪製一組包含正常、懸停、按下、禁用四態的頹廢風金屬按鈕，並輸出適配遊戲引擎的切圖規範。

效果預覽

基礎形狀構建

1. 新建 400×400px 文檔，背景透明。使用圓角矩形工具 (U)，半徑 8px，繪製 200×60px 基礎按鈕形狀，填充顏色 #2a2a2a（深鉛灰）。命名圖層「基礎形狀」。
2. 複製圖層三份，分別命名為「Normal」「Hover」「Pressed」「Disabled」四個群組，每組包含一個基礎形狀副本，對應四種交互狀態。

材質紋理疊加：金屬鏽蝕質感

1. 導入金屬刮痕紋理、鏽跡紋理、油漆剝落紋理素材（可從 Poliigon、Textures.com 等免費素材站獲取）。置於各組「基礎形狀」上方，建立剪貼蒙版。
2. 紋理圖層混合模式設為「疊加」或「柔光」，不透明度 30%-50%。按 Ctrl+T 縮放旋轉紋理，避免重複感。添加圖層蒙版，用黑色雜亂筆刷邊緣破壞紋理邊界，使其自然融入按鈕輪廓。

圖層樣式構建立體結構

對「基礎形狀」圖層應用以下圖層樣式（以 Normal 狀態為例，其他狀態微調參數）：

• 斜面與浮雕：風格「外部斜面」，技法「刻鑿柔和」，深度 150%，方向「上」，大小 8px，柔化 3px。高光模式「線性減淡」顏色 #555555 不透明度 40%，陰影模式「正片疊底」顏色 #000000 不透明度 60%。
• 描邊：大小 1px，位置「內部」，填充類型「漸層」，漸層從 #3a3a3a 到 #1a1a1a，模擬邊緣金屬折光。
• 內陰影：混合模式「正片疊底」，顏色 #000000，不透明度 50%，角度 90°，距離 3px，擴展 0%，大小 5px，增強內凹感。
• 投影：混合模式「正片疊底」，顏色 #000000，不透明度 30%，角度 90°，距離 4px，擴展 0%，大小 8px，分離按鈕與背景。

四態差異化細節

狀態	關鍵調整
Normal	基礎參數，體現靜態質感
Hover	外發光：顏色 #ff8800，大小 10px，不透明度 60%；亮度/對比度調整圖層提亮 10%
Pressed	斜面與浮雕方向改「下」；內陰影距離增至 6px；整體向下位移 2px；色相/飽和度降低飽和度 20%
Disabled	整組不透明度 40%；去除外發光；添加黑白調整圖層剪貼；描邊顏色改為 #1a1a1a 純暗

破壞細節手繪：賦予獨特性

1. 在各組頂部新建「手繪破壞」圖層。使用雜亂硬邊筆刷（如「粉筆」「炭筆」預設），前景色深鏽紅 #8b3a2e、油污黑 #1a1a1a、剝落白 #e0e0e0，在邊緣、螺絲孔、標誌區域隨意點繪劃痕、鏽漬、剝落白點。
2. 圖層混合模式「疊加」或「強光」，不透明度 40-70%。此步驟極大豐富微觀細節，避免程序化紋理的機械感。

文字與圖示置入

各組內添加文字圖層（如「ATTACK」「JUMP」），字體選用像素風或軍用標籤體（如「Orbitron」「Michroma」），顏色 #e0d8c0（舊紙黃）。添加外發光 #8b3a2e 微弱暈染。圖示使用簡潔線條圖標，同樣應用剪貼紋理與圖層樣式保持風格一致。

切圖輸出規範

1. 啟用 視窗 > 切片，用切片工具對每個狀態按鈕建立切片，命名規範：`btn_attack_normal@2x.png` 等。
2. 檔案 > 匯出 > 存儲為 Web 所用格式，選 PNG-24，透明度開啟，勾選「優化」。或使用「匯出圖層為檔案」腳本批量導出所有狀態。
3. 提供給美術/程式的切圖說明文檔：標註九宮格拉伸區域（邊緣 8px 不拉伸）、錨點位置、建議按鈕最小尺寸。

風格擴展建議

• 同套風格延伸至進度條、滑桿、對話框、圖標背景等 UI 組件，建立完整設計系統。
• 建立「頹廢風格指南」PSD，集中管理色板、紋理素材、圖層樣式預設、筆刷庫，確保團隊協作一致性。
• 嘗試 Substance Painter 烘焙高模法線貼圖，獲得更真實的 3D 級 PBR 材質，再投影回 2D 切圖，突破手繪極限。