設計前的材質思考
鈕扣雖小，卻是材質表現的縮影。動筆前須在腦中確立：
- 材質屬性： 塑膠/樹脂（次表面散射）、玻璃/水晶（折射/反射）、金屬（陽極氧化/鍍層）、珍珠/貝殼（彩虹干涉）
- 光源環境： 單一主光源（頂光/側光）+ 環境光 + 反射物體
- 結構層次： 底座 → 凸起本體 → 內凹紋理/刻字 → 表面高光/反射 → 投影
本教學示範 半透明樹脂/玻璃質感，核心在於「多層漸變疊加模擬厚度」與「高光/反射分層」。
畫布與基礎圓形
- 新建 600×450 px，300 ppi，背景白
- 橢圓選框工具按 Shift 拉正圓選區 → 新建圖層「鈕扣底」填充任意色
- 圖層樣式建立基礎立體感：
| 樣式 | 關鍵設定 |
|---|
| 斜面與浮雕 | 外斜面、平滑、深度 150%、方向向上、大小 15px、柔化 3px、高光模式線性減淡(白, 70%)、陰影模式正片疊底(深灰, 50%) |
| 內陰影 | 距離 3px、大小 5px、噪點 3% |
| 光暈/外發光 | 模擬邊緣透光，顏色淡黃、大小 10px |
| 投影 | 距離 5px、大小 8px、不透明度 40% |
高光層次構建（由外而內）
1. 主高光帶（高光層）
- Ctrl 點擊「鈕扣底」縮圖載入選區
- 選擇 → 修改 → 收縮 5 px → 新建圖層「高光」填充白
2. 次高光/厚度感（高光副本）
- 複製「高光」層 → 移動工具向下向右移動 3-5 px
- 載入「高光副本」選區 → 選中「高光」層 → Delete 刪除重疊 → 保留新月狀邊緣
- 圖層樣式：內陰影（距離 2px、大小 3px）+ 高斯模糊 2px → 自然過渡
3. 內層本體色（內層）
- 載入「鈕扣底」選區 → 新建圖層「內層」填充本體色（如紅
#cc3333/藍 #3366cc/綠 #339966）
- Ctrl+T 縮放至合適內徑位置
- 圖層樣式：斜面與浮雕（內斜面、深度 100%、大小 8px）+ 內陰影 + 漸變疊加（徑向、中心亮→邊緣暗）
4. 底部反光帶（反光層）
- 同理建立更小圓形選區 → 新建圖層「反光」填充淺色
- 位置置於內層下方邊緣，模擬底部透光反射
- 高斯模糊 2-3px 自然過渡
分隔線與裝飾細節
- 直線工具畫 1px 亮色分隔線 → 成組「vDivider」
- 組加蒙版 → 徑向漸變（黑→白）控制顯示範圍
- 水平分隔線同法 → 組「hDividers」+ 線性漸變蒙版
最終合成與細節潤飾
- Ctrl+Alt+Shift+E 蓋印可見圖層 → 隱藏下層
- 新建白色圓形圖層置於蓋印層上 → 載入選區 → 刪除蓋印層多餘部分 → 得到乾淨圓形鈕扣
- 投影微調：圖層樣式 → 投影（距離 4px、大小 6px、展開 10%、不透明度 35%）
- 色相/飽和度調整圖層微調整體色相，輸出多色系版本
多材質變體快速產出策略
| 材質 | 核心調整 | 關鍵參數變化 |
|---|
| 塑膠/樹脂 | 次表面散射感 | 內層漸變疊加「柔光」、高光層不透明度降低、增加散射光暈 |
| 玻璃/水晶 | 折射/高透明 | 填充 0%、斜面浮雕「玻璃輪廓」、環境反射圖層(螢幕模式)、凱撒環高光 |
| 金屬 | 陽極氧化/鍍層 | 斜面浮雕「環形」輪廓、顏色疊加金屬色、高光銳利(硬度 80%+)、反射環境 |
| 珍珠/貝殼 | 干涉彩虹色 | 漸變疊加「角度」模式彩虹色、圖案疊加珍珠紋理、多色相高光 |
避坑指南
- 高光過銳/過濃： 真實高光有漸變過渡，必須高斯模糊 1-3px，不透明度分層（主 60-70%、次 30-40%、環境 10-20%）
- 投影過重： 小物件投影應柔和、淺色、大面積，距離 3-5px，大小 6-10px，不透明度 20-40%
- 圖層順序錯亂： 由下而上：投影 → 底座 → 本體色 → 內層漸變 → 高光層 → 次高光 → 反光 → 分隔線 → 蓋印修飾
- 解析度不足： 圖標級素材建議 1024px 起步繪製，最終縮放輸出，細節保留度高
批量輸出工作流
- 將「鈕扣底」及其所有子圖層轉為智能物件「Button_Master」
- 建立動作：複製智能物件 → 雙擊編輯 → 修改「內層」填充顏色/漸變 → 存檔關閉 → 匯出 PNG
- 批次處理顏色清單（紅/橙/黃/綠/青/藍/紫/粉/黑/白/金/銀），一鍵產出 12 色系