本教學將引導你在 Photoshop 中從零開始製作一組擁有皮革背景、金屬旋鈕、紅色指示燈的 AMP 音訊調節器介面。涵蓋紋理合成、圖層樣式深度應用、濾鏡特效組合等進階技巧，是提升 UI 材質表現力的絕佳練習。

最終效果預覽

核心製作流程（29 步驟精簡版）

第一階段：皮革背景基礎

1. 新建 2560×1440 px 文件，背景填充灰色。
2. 濾鏡 → 紋理 → 龜裂紋（間距 9、深度 2、亮度 10）產生皮革基礎紋路。
3. 圖層樣式 → 顏色疊加（黑色、正片疊底、70% 不透明度）加深質感。
4. 色階調整（120, 1.00, 181）強化明暗對比。

第二階段：金屬旋鈕主體構建

5. 橢圓工具繪製中心圓形基礎。
6. 自定義漸變預設（多色停點模擬金屬環狀反光）。
7. 新圖層套用角度漸變 → 載入圓形選區 → 添加圖層蒙版限制範圍。
8. 複製圓形圖層填白置頂 → 設 0% 填充 → 添加「內陰影」（白色、顏色減淡、70%）、「內發光」（白色、疊加、36%）、「斜面與浮雕」（浮雕效果、平滑、高光/陰影模式設為顏色減淡/正片疊底）。
9. 再複製圓形 → 濾鏡 → 像素化 → 銅板雕刻（精細點） → 徑向模糊（旋轉、20%） → 模式改「正片疊底」產生金屬拉絲紋理。

第三階段：大小旋鈕組合與細節豐富

17. 將旋鈕相關圖層群組 → 複製群組縮小 → 調整小旋鈕「顏色疊加」（黑色、正片疊底、45%）區分層次。
18. 為大小旋鈕添加投影。
19. 矩形工具繪製菱形按鈕 → 圖層樣式：投影（黑色、100%）、內發光（白色、顏色減淡、70%）、顏色疊加（深紅→淺紅漸變）。
20. 疊加外部金屬材質圖片（下載連結）→ 設為疊加/柔光模式賦予真實金屬感。
21. 底部鋪設皮革紋理素材，調整透明度融合背景。
22. 矩形工具批量複製旋轉製作網格裝飾條，圖層樣式添加內發光提升立體感。

進階提示

• 圖層樣式「分離為圖層」後再調整不透明度，避免樣式隨填充消失。
• 金屬材質圖片建議轉為智慧物件，便於非破壞性縮放變形。
• 網格裝飾條製作技巧：從最上方開始複製 → 底部合併 → 整組複製旋轉 90° → 以此類推指數級增殖。