無印良品（MUJI）風格以極簡、克制、質感著稱。這篇教學帶你用 PS 從零繪製一枚 MUJI 風 CD 機圖標，過程不複雜，卻能鍛鍊圖層結構邏輯、光影觀察力與耐心，適合想強化圖標設計基本功的設計師。

成品特點

• 幾何造型精準，倒角、間距統一規範
• 材質表現細膩：哑光塑膠、金屬網罩、指示燈微光
• 配色克制：暖灰 + 銀灰 + 點綴藍光，呼吸感十足

關鍵製作重點

1. 矢量形狀為骨架

全程以形狀工具（矩形、橢圓、圓角矩形）建立矢量路徑，保證任意縮放不失真，也方便後續調整倒角半徑。

2. 圖層樣式疊加材質

• 漸變疊加：模擬塑膠殼體的微妙明暗轉折
• 內陰影/內發光：刻畫按鍵凹陷、插槽深度
• 投影：統一光源（左上 45°），建立空間關係
• 描邊：1px 深灰邊框強化輪廓

3. 細節決定成敗

• CD 插槽的金屬網罩：用圖案疊加（自訂網格圖案）+ 混合模式疊加
• 電源指示燈：外發光 + 色彩疊加，脈動感來自動畫或多狀態切片
• 底部腳墊：薄薄的投影 + 內陰影製造懸浮感

練習建議

1. 先用鉛筆畫草圖，拆解結構層級（殼體、面板、按鍵、插槽、腳墊）
2. 建立圖層命名規範（如：Body/Base, Panel/Front, Button/Play, Slot/Tray…）
3. 嘗試只用圖層樣式完成所有材質，不使用位圖貼圖
4. 導出 @1x/@2x/@3x 檢查細節銳度

完成後別忘了放進你的 UI Kit 庫——這種極簡產品圖標在智慧家居、音樂 App、極簡風品牌專案裡超好用！