以圖層樣式為核心，結合形狀工具、筆刷、濾鏡與混合模式，從零構建擁有金屬拉絲質感、玻璃高光、發光指示燈、立體按鍵的專業級媒體播放器界面。教學展示複雜 UI 組件的分層建模與材質刻畫細節。

最終效果

製作流程

1. 畫布與背景

• 新建 1024×768 px、72 ppi，背景填黑 (#000000)。

2. 底部裝飾光帶 (筆刷/形狀 + 漸變疊加)

• 鋼筆工具 (形狀圖層模式) 繪製流線型裝飾條形狀。
• 圖層樣式：漸變疊加 多色標 (深藍→青→紫→粉等) 徑向/線性，營造炫彩光帶感。

3. 播放器主體外殼 (圓角矩形 + 圖層樣式)

• 新建圖層，圓角矩形工具 (半徑 8-10px) 繪製主體外框，填充 #121212 (深灰近黑)。
• 圖層樣式疊加：斜面與浮雕 (內部斜面、平滑、深度 150%+、大小匹配邊框厚度、高光/陰影模式/不透明度微調) + 描邊 (1px #000/深灰) + 內部陰影 (距離 0、大小 3-5px、黑色正片疊底) → 形成凹陷金屬質感外殼。

4. 顯示屏區域 (選區布林運算 + 玻璃質感)

• 橢圓工具 + 圓角矩形工具，選區「相減」模式 (或路徑運算「減去」) 構建顯示屏外形 (矩形兩側圓角/半圓)。
• 新建圖層填充深色 (#0a0a0a)，圖層樣式：內部陰影 (模擬玻璃內緣陰深) + 漸變疊加 (深→淺→深垂直徑向、模擬玻璃反光) + 描邊 (1px 亮色、內部、模擬邊框高光)。

5. 面板高光面 (柔光混合模式)

• 圓角矩形繪製面板上蓋形狀 → 鋼筆工具拖動錨點微調弧度。
• 混合模式 濾色 / 不透明度 50%，疊加於主體上方，形成頂部微亮保護蓋視覺。

6. 裝飾線條/指示燈 (自定形狀 + 混合模式)

• 自定形狀工具選「線條/條狀」形狀 → 自由變換調整大小位置 → 顏色 #696969 → 混合模式 濾色 (變亮疊加)。
• 同法添加小喇叭圖示，顏色 #DFDFDF、濾色模式。

7. 底部功能區高光線

• 直線工具 (U) 1px 白色 (#484848) 繪製底部水平高光分隔線。

8. 進度條/音量條軌道 (填充度 0% + 圖層樣式)

• 矩形工具繪製軌道矩形 → 填充度 0% (關鍵：僅保留樣式，無像素填充)。
• 圖層樣式：內部陰影 (距離 0、大小 3px、黑色正片疊底) + 斜面與浮雕 (內部斜面、淺灰高光/深灰陰影) + 描邊 (1px 亮灰、內部)。

9. 播放/控制按鈕群 (多層疊加構建立體按鍵)

• 外圈：橢圓工具 Shift 正圓 #484848，斜面浮雕 (外部斜面、凸起感)。
• 中圈：縮小正圓 #1E339C (品牌藍)，斜面浮雕 (內部斜面、凹陷感)。
• 內圈高光：新建圖層剪貼於中圈 (Alt+點擊分隔線) → 圖層樣式：漸變疊加 (白→透、徑向/角度調整) + 內部陰影 + 描邊 → 形成玻璃質感按鈕面。
• 同法製作上一首/下一首/暫停/音量等按鈕，調整圖示 (三角形/雙豎條/喇叭) 與顏色。

10. 音量滑塊/旋鈕 (鋼筆形狀 + 複雜樣式)

• 鋼筆工具 (形狀圖層) 繪製滑塊/旋鈕特殊形狀。
• 圖層樣式：斜面與浮雕 (雙向/戳紋/軟化邊緣) + 漸變疊加 (金屬/塑膠漸變) + 描邊 + 投影。
  關鍵區分：填充度 22% (僅像素透明，樣式不透明) vs 不透明度 (整層透明)。此處用低填充度讓漸變疊加透出底層質感。

11. 狀態變體與細節微調

• 複製播放按鈕組 → 移動位置 → 修改圖示 (暫停/停止/下一首) → 微調高光角度匹配光源。
• 自定形狀工具添加功能圖示 (隨機/循環/列表/均衡器等) → 描邊樣式 (1px 白/亮色、外部/內部)。
• 矩形工具繪製時間顯示區/曲目資訊區 → 圖層樣式 (內陰影/漸變/描邊) 匹配整體風格。
• 文字工具輸入時間/曲目名，字體 Digital-7/七段碼風格，顏色綠/橙/藍，內陰影增強可讀性。
• 直線工具 1px 白色添加分隔線/裝飾細節。

專業 UI 材質刻畫核心技法總結

材質/效果	核心圖層樣式組合	關鍵參數提示
金屬拉絲外殼	斜面浮雕(內部) + 內部陰影 + 描邊 + 漸變疊加(金屬色)	深度 150%+，高光/陰影模式正片疊底/螢幕，不透明度 30-50%
玻璃/透明面板	填充度 0% + 內部陰影 + 漸變疊加(白→透徑向) + 描邊(亮色內部)	填充度 0% 關鍵，漸變角度 90° 頂亮底透
凸起按鈕	斜面浮雕(外部/內部平滑) + 漸變疊加 + 描邊	方向「上」，大小匹配按鈕半徑，高光陰影不透明度平衡
凹陷按鍵/軌道	斜面浮雕(內部) + 內部陰影 + 描邊 + 填充度 0%	填充度 0% 讓樣式懸浮，內部陰影距離 0 大小 3-5px
發光指示燈	外發光 (螢幕/線性減淡) + 內發光 + 色彩疊加	外發光大小 5-10px，噪點 5-10% 增真實感
高光掃光/邊緣光	新建圖層 筆刷/選區填白/亮色 + 柔光/疊加/線性減淡 + 蒙版漸變	蒙版控制過渡最自然，混合模式視底色選擇

工作流建議

1. 群組化管理：Shell/Display/Controls/Buttons/Indicators/Text 分群組，圖層面板清晰可控。
2. 樣式庫沉澱：將通用材質 (金屬殼、玻璃面、按鈕凸/凹、發光) 存為圖層樣式預設，新專案一鍵套用。
3. 智慧物件元件化：按鈕組轉智慧物件，雙擊編輯源檔，所有實例同步更新。
4. 參考實體產品：觀察真實播放器/音響設備在不同光源下的反射、折射、邊緣細節，參數源於觀察而非憑空想像。

此教學展示的分層建模、樣式疊加、混合模式選擇、填充度/不透明度區分、剪貼蒙版運用，構成了專業 UI 視覺設計的標準化技能樹核心節點。