旋鈕類控件是音頻介面、儀表盤、智能家電 UI 的高頻元件。本教程採用「圖層疊加 + 矢量形狀 + 圖層樣式」非破壞流程，10 步完成一枚具備金屬拉絲質感、陰影深度、指示燈狀態的旋鈕圖標，並延伸至 Illustrator 協作製作精密刻度。

成品對比

▲ 實作效果

▲ 參考原圖

核心圖層結構 (自下而上)

1. Base (底座)：正圓 #2e2f31 + 內陰影 (距離 3px, 噴射 8px) + 投影 (距離 5px, 大小 10px) — 奠定懸浮感。
2. Shape (主體)：Base 縮放 85% + 清除樣式 + 內陰影 (角度 -90°, 距離 5px) + 內發光 (雜色 15%, 源中心) + 橫向漸變疊加 — 營造凹陷金屬面。
3. Shadow (投影環)：正圓 羽化 6.6px / 高斯模糊 8px，下移貼合 Base 底緣 — 接地陰影。
4. Shape 2 (內環)：Shape 再縮放 90% + 內陰影 (角度 90°) + 橫向漸變 — 雙層倒角立體感。
5. Shape 3 (中心盤)：再縮放 70% + 斜面與浮雕 (深度 120%, 大小 8px, 角度 120°) — 中心隆起區。
6. Metal (金屬頂蓋)：正圓 + 斜面浮雕 (內部凹陷, 深度 300%, 大小 15px) + 紋理疊加 (金屬拉絲紋理, 縮放 50%) — 核心材質層。
7. Gradient (頂蓋高光)：Metal 複製 → 清除樣式 → 黑白徑向漸變 (中心白, 邊緣黑) + 填充 0% + 模式「柔光」 — 提取頂部高光帶。
8. Mark (刻度標記)：圓角矩形減去選區形成細長條 + 斜面浮雕 (外部凸起) + 投影 — 單一刻度齒。
9. Off / Off2 (指示燈)：AI 協作生成 16 道等角徑向線條 (22.5° 間隔)，PS 中分兩組疊加：Off (外發光 #ffcc00, 大小 15px) + Off2 (內發光 #ff6600, 尺寸 8px) — 點亮/熄滅兩種狀態。

關鍵步驟圖解

Illustrator 協作製作精密刻度 (步驟 8 關鍵)

1. PS 文件存為 .psd，AI 中 Ctrl+O 打開，彈出選項保持預設確定。
2. 繪製一條細長矩形作為基準刻度，置於金屬中心頂部。
3. 選中矩形 → 旋轉工具 (R) → Alt+點擊金屬中心點 → 輸入 22.5° → 點「複製」。
4. 連按 Ctrl+D (Transform Again) 完成 16 道等角分佈。
5. 全選 → 編輯→複製 → 切回 PS → Ctrl+V 貼上 → 選「形狀圖層」。

參數速查表 (關鍵圖層樣式數值)

圖層	斜面與浮雕	內陰影	漸變疊加	投影/發光
Base	—	距離 3, 噴射 8, 不透明度 40%	—	距離 5, 大小 10, 不透明度 50%
Shape	—	角度 -90°, 距離 5, 噴射 10	線性 -90°, #6a6a6a→#3d3d3d	內發光: 雜色 15%, 源中心
Metal	內部凹陷, 深度 300%, 大小 15px, 角度 120°	—	—	紋理疊加: 金屬拉絲, 縮放 50%
Gradient	—	—	徑向 白→黑, 填充 0%, 模式 柔光	—
Mark	外部凸起, 深度 150%, 大小 5px	—	—	距離 2, 大小 3
Off	—	—	—	外發光: #ffcc00, 大小 15px, 範圍 50%
Off2	—	—	—	內發光: #ff6600, 尺寸 8px, 噴射 0

擴展應用

• 狀態切換：將 Off/Off2 分組做為狀態組，配合「圖層合成」或導出時顯隱控制，輕鬆輸出 On/Off/Hover 三態圖標。
• 尺寸響應：所有圖層均為矢量形狀+圖層樣式，整組轉為智能對象後可無損縮放至任意尺寸 (64px ~ 2048px)。
• 換膚換色：修改 Metal 層「色彩疊加」或 Gradient 層漸變色鍵，秒級切換金/銀/玫瑰金/太空灰配色方案。

這套「矢量骨架 + 樣式皮膚 + AI 精密幾何」的工作流，可直接遷移至滑桿、開關、儀表盤指針等圓徑向 UI 組件製作，建議建立為個人元件庫模板。