本教學將引導您從零開始，運用圖層樣式、漸變、濾鏡與筆刷等核心技巧，繪製一款具備金屬質感、高光細節與立體按鈕的專業級音訊播放器介面。重點著墨於高光邊緣與材質紋理的營造，技巧廣泛適用於各類軟體 UI 設計。

最終效果預覽

所需素材

• 蜘蛛人紋理圖案（文末提供下載連結）

製作步驟

步驟 1：建立畫布與背景

• 新建 600×400 px 文件。
• 背景圖層套用放射狀漸變：#5e6c78 → #20282e。

步驟 2：背景紋理

• 複製背景圖層，執行 濾鏡 > 雜色 > 加入雜色：量值 5%、單色、高斯分佈。
• 將圖層不透明度降至 30%，營造細微金屬砂紋質感。

步驟 3：主體基底圖層

• 新建圖層命名「Base」，使用圓角矩形工具（半徑 5px）繪製主體矩形。
• 套用圖層樣式：
  • 漸變疊加：#3d4a59 → #1c2329 → #303a44（線性）
  • 描邊：1px，#191919

步驟 4：金屬拉絲紋理製作

• 新建 600×600 px 文件，填滿 50% 灰色。
• 加入雜色：80%、高斯、單色。
• 執行 濾鏡 > 模糊 > 徑向模糊：旋轉、量值 100。
• 重複 Ctrl+F 疊加徑向模糊至滿意，形成放射狀拉絲紋理。

步驟 5：套用紋理至主體

• 將紋理圖層拖入主文件，置於「Base」圖層上方，混合模式改為柔光，不透明度 80%，命名「Texture」。
• Ctrl+點擊「Base」縮略圖載入選區 → Ctrl+Shift+I 反選 → 刪除多餘紋理區域。

步驟 6：頂底高光邊緣

• 新建圖層「Highlights」，鉛筆工具（1px）在主體頂部與底部邊緣各繪一條白線。
• 大尺寸柔邊橡皮擦（不透明度 80%）淡化兩側端點，形成自然過渡。

步驟 7：喇叭網孔區

• 新建圖層「Speaker」，Ctrl+點擊「Base」載入選區，矩形工具 Shift+Alt 相交模式扣除選區範圍，填充 #3a3a3a。
• 複製圖層命名「Texture」，套用圖層樣式：圖案疊加 → 蜘蛛人紋理、混合模式疊加、不透明度 12%。

步驟 8：側邊高光與陰影細節

• 新建「Highlight」圖層，鉛筆繪製 1px 高光線條；新建「Shadow」圖層，橢圓選區羽化後高斯模糊，不透明度 50%，營造立體厚度感。

步驟 9：對稱複製右側結構

依同樣流程完成右側對稱元件。

步驟 10：視窗控制按鈕（最小化/最大化/關閉）

• 新建群組「Buttons」，圓角矩形工具（半徑 2px）繪製按鈕基底，填充白色。
• 圖層樣式：漸變疊加 #8799ab → #485664 → #8799ab，描邊 #384251。

步驟 11：按鈕圖示（關閉鍵 X）

• 新建圖層「X」，鉛筆或文字工具繪製 X 符號，套用漸變疊加（深灰→淺灰）與 1px 內陰影。

步驟 12：播放控制按鈕群

同法製作播放、暫停、上一首、下一首等按鈕，調整圖示與顏色。

步驟 13：進度條與音量條

• 圓角矩形繪製進度條軌道，黑色填充 + 漸變疊加 #303a44 → #1c2329，描邊 1px #afbbc6（不透明度 16%）。
• 進度條旋鈕：小矩形黑色填充，內陰影（白色、正常、距離 0、大小 1）、漸變疊加 #5c6977 → #212a30 → #5c6977、外描邊 1px #222b31。

步驟 14：高光飾條

• 新建「Gloss」圖層，小矩形白色填充，不透明度 10%。
• 依前方法添加頂底高光線條，不透明度自行調整。

步驟 15：文字與最終微調

• 字體建議 Digital-7（DaFont 免費下載），套用圖層樣式統一風格。
• 鉛筆工具 1px 線條添加邊緣高光細節，完成整體質感統一。

技巧總結

• 善用圖層樣式非破壞編輯，便於後期調整參數。
• 柔光/疊加混合模式疊加紋理，保留底層明暗結構。
• 鉛筆 1px 線條 + 橡皮擦淡化是打造精細高光邊緣的核心手法。
• 群組管理圖層，維持圖層面板整潔。

完成後可依專案需求調整配色、尺寸與圖示，快速產出專業級 UI 介面設計稿。