教學緣起

模仿大神作品練習，首次撰寫教學，流程簡單但涵蓋木質背景、開關面板、螺絲、按鈕、指示燈完整 UI 元素，適合圖標設計入門練習。

參考與成品對比

步驟 1：文件與木質背景

新建 400×300 px 文件，放入木紋素材或程序化生成（雲彩+浮雕+模糊），調整色調適配整體氛圍。

步驟 2：開關面板

1. 圓角矩形工具，半徑 20 px，任意色填充。
2. 添加「漸層疊加」（參考圖色碼），1 px 描邊 #8D6546。
3. 「斜面與浮雕」：勾選等高線，預設值即可。
4. 「內陰影」與「投影」參數參考圖示，營造凹陷感與懸浮感。

步驟 3：螺絲（4 顆）

1. 橢圓工具畫圓，漸層疊加（參考圖）、1 px 描邊。
2. 選區工具/鋼筆勾十字槽形狀，填 #323232。
3. 添加「投影」樣式。
4. 複製 3 顆對齊面板四角。

步驟 4：按鈕（關閉狀態）

1. 圓角矩形 20 px，漸層疊加（參考圖）。
2. 複製圖層，Ctrl+T 等比縮小，填白，加 1 px 漸層描邊。
3. 再複製，取消樣式，拉伸變形為按鈕側面，加漸層疊加塑造側面光影。

步驟 5：指示燈與裝飾圓環

1. 橢圓工具，半徑 12 px，加漸層描邊。
2. 矩形 2×9 px（指示燈），漸層疊加+投影。

步驟 6：環境光影潤飾

假設光源來自上方，適當添加陰影強化立體（參考圖），可自行發揮豐富細節。

步驟 7：開啟狀態自製

本教學示範關閉態，開啟態請嘗試：按鈕滑動至另一側、指示燈亮起（外發光/顏色疊加綠色）、面板指示標記變化。

最終效果

延伸練習

• 改為觸控式開關（無物理按鈕，靠發光條指示）。
• 加入鍵盤快捷鍵提示（如「I/O」字符）。
• 製作動態原型（關鍵幀：按鈕位移、燈光切換、面板細微彈性形變）。