本教程以極簡圖解形式展示一枚按鈕圖標的繪製過程。雖無文字說明，但圖層面板縮略圖清晰可見結構：底層背景 → 基礎形狀層 (圓角矩形/橢圓) → 圖層樣式疊加 (斜面浮雕、漸變疊加、描邊、投影、內陰影、內發光) → 高光/陰影修飾層 (剪貼蒙版/正片疊底/疊加模式) → 頂層細節 (文字/圖標/倒影)。適合有一定 PS 基礎、善於「看圖學技法」的設計師逆向拆解學習。

完整步驟圖解序列

逆向拆解關鍵點 (供練習者參考)

1. 觀察圖層面板順序與縮略圖：從底向上理解構建順序。
2. 識別圖層樣式組合：每個形狀層右側「fx」圖標雙擊可見參數，重點關注：斜面浮雕 (體積)、漸變疊加 (材質)、描邊 (邊緣)、投影 (落地)、內陰影/內發光 (凹陷/發光)。
3. 識別剪貼蒙版結構：縮略圖右側有向下箭頭圖標者為剪貼蒙版，服務於下方基底層。
4. 識別混合模式：圖層面板左上角下拉菜單，「正片疊底」做陰影、「疊加/柔光」做質感/高光、「篩選/線性加深」做發光。
5. 識別矢量形狀層：縮略圖左下角有小矩形圖標，雙擊可改顏色、用直接選擇工具改錨點。

練習建議

1. 新建同尺寸文件，完全照圖重現一遍，不看參數嘗試調出相同效果。
2. 記錄每層關鍵參數，建立個人「按鈕圖標樣式庫」。
3. 嘗試變體：方形按鈕、發光按鈕、按下狀態、禁用狀態、不同配色方案。
4. 導出為 SVG (形狀層右鍵「匯出內容」) 或多尺寸 PNG，構建圖標系統。

純圖解教程考驗觀察力與反推能力，是進階設計師必備技能。建議收藏練習，培養「看圖拆解 PS 檔」的核心竅門。