成果預覽

最終效果：金屬拉絲機身、鋼琴烤漆面板、立體按鍵、OLED 螢幕，適合產品展示/UI 設計作品集

核心方法論：形狀圖層 + 圖層樣式 = 可無限縮放、參數化修改的「偽 3D」建模

零筆刷手繪，全程向量形狀與圖層樣式疊加。優勢：隨時修改尺寸/顏色/材質、導出 SVG/多倍圖無損、團隊協作可直接調用圖層樣式預設。

27 步驟詳細拆解

第一階段：背景與主體基礎形狀（步驟 1-3）

1. 背景漸變：任意顏色填充層 → 圖層樣式「漸變疊加」：徑向、中心 #2C2C2C → 邊緣 #0D0D0D
2. 機身主體：圓角矩形工具（U）→ 半徑 20px → 形狀模式 → 顏色 #E1E0E0（淺鋁灰）
3. 向量編輯：雙擊形狀縮略圖調整顏色，或直接屬性面板修改圓角半徑

第二階段：斜面細節構建——立體感的關鍵（步驟 4-7）

4. 參考線建立：視圖 → 尺標 → 拖曳參考線，確保機身四周斜面等寬（2px）
5. 斜面形狀層：複製主體形狀 → 自由變換（Ctrl+T）縮小 4px → 填充設 0% → 僅保留圖層樣式
6. 斜面描邊 1px：圖層樣式「描邊」→ 位置「內部」→ 大小 1px → 顏色 #999999（比正面暗） → 模擬邊緣轉折線
7. 斜面描邊 2px：再疊加 2px 描邊，顏色 #CCCCCC → 模擬倒角捕光邊

第三階段：正面材質與高光——金屬拉絲質感（步驟 8-11）

8. 柔和漸變疊加：主體形狀層添加「漸變疊加」→ 線性、-90°、#FFFFFF(0%, 透明度 0%)→#CCCCCC(50%, 30%)→#FFFFFF(100%, 0%) → 模擬圓柱面高光帶
9. 擠壓線條：矩形形狀（高 2px、寬滿版）→ 填充 0% → 描邊 2px #999999 內部 → 斜面浮雕「內部平滑、深度 200%、大小 3px」→ 產生凹陷/凸起雙重感
10. 頂部高光強化：擠壓線條層添加「斜面與浮雕」→ 高光模式「線性減淡」不透明度 80% → 陰影模式「線性加深」50%
11. 內陰影增厚前殼：主體層添加「內陰影」→ 距離 3px、大小 8px、不透明度 35% → 強化前殼厚度感

第四階段：控制按鈕系統化製作（步驟 12-17）

12. 複製第一階段斜面形狀層 → 移動至按鈕位置 → 刪除多餘錨點保留圓角矩形
13. 主播放/暫停鍵：橢圓形狀 → 放大 110% 水平 → 僅保留斜面部分（蒙版遮罩）
14. 蒙版隱藏效果：圖層樣式對話框勾選「圖層蒙版隱藏效果」→ 蒙版遮罩同時隱藏形狀與樣式，避免殘留描邊
15. 其他按鈕：Alt+拖拽複製蒙版 → 右鍵蒙版「從選區減去」→ 快速生成相同形狀蒙版
16. 重複變換（Ctrl+Shift+T）批量排列方向鍵、音量鍵等

第五階段：OLED 螢幕與 UI 細節（步驟 18-26）

18. 黑色亞克力屏幕：圓角矩形填 #0A0A0A → 內陰影（距離 2px、大小 4px、不透明度 50%）→ 模擬玻璃厚度
19. 徑向漸變高光：新建層「疊加」→ 徑向漸變 黑(49%)→白(50%) 緊貼中心 → 取消「與圖層對齊」擴大範圍 → 模擬弧面玻璃反光
20. 鏡面倒影：兩個細長橢圓形狀 → 描邊 1px #000000 內部 → 內發光 2px 螢幕模式 → 模擬螢幕表面倒影條
21. UI 文字與圖標：像素字體輸入歌名/時間 → 通用媒體控制圖標字體（如 Font Awesome）→ 顏色取自機身正面高光色 → 統一視覺語言

圖層結構最佳實踐（建議收藏）

MP3_Player_PSD
├─ BG_Gradient
├─ Body_Main [Shape]
│  ├─ Body_Bevel_Top
│  ├─ Body_Bevel_Bottom
│  ├─ Body_Bevel_Left
│  ├─ Body_Bevel_Right
│  ├─ Indent_Line_PlayPause
│  ├─ Indent_Line_Prev
│  ├─ Indent_Line_Next
│  ├─ Indent_Line_VolUp
│  └─ Indent_Line_VolDown
├─ Screen_Group
│  ├─ Screen_Base [Shape]
│  ├─ Screen_Highlight_Radial
│  ├─ Screen_Reflection_Top
│  ├─ Screen_Reflection_Bottom
│  ├─ UI_Text_SongName
│  ├─ UI_Text_Time
│  └─ UI_Icons_Control
└─ Global_Lighting_Adjustment [Adjustment Layers]

進階技巧：參數化設計系統化

• 將所有「圓角半徑、斜面寬度、描邊粗細、高光不透明度」存為圖層樣式預設
• 建立「設計系統」共享庫：團隊成員雙擊 .asl 即可同步風格
• 配合「變量」功能（影像 → 變量 → 定義），CSV 批量生成不同顏色/螢幕內容變體

結語

MP3 播放器看似簡單，實則包含圓柱體轉折、凹凸按鍵、玻璃倒影、OLED 發光等豐富材質邏輯。掌握「形狀層+圖層樣式」非破壞建模法，你就掌握了產品級 UI 渲染的通用鑰匙。下一個挑戰：試著畫一台復古卡帶機、或是未來感懸浮音箱吧！