UI 圖標/組件繪製的核心是「圖層樣式非破壞建模」：純向量形狀 + 多層疊加樣式 = 可無限縮放、隨時修改參數、極易產出變體。本教程以金屬進度條為例，拆解背景、外框、內槽、滑塊、按鈕五大模組的樣式參數邏輯。

文件設定

新建 800×800 px，72 dpi，RGB 模式。背景圖層加「漸變疊加」（深灰→黑）+「雜色 1% 高斯單色」+「濾鏡庫 → 畫筆描邊 → 噴濺（半徑 6、平滑 5）」，營造金屬拉絲底紋。

模組一：外框（620×45 px 圓角矩形）

圖層命名「外形」，樣式堆疊：
• 斜面與浮雕：內部凹陷、深度 100%、大小 10px、角度 120°、高光/陰影模式正片疊底/螢幕、不透明度 75%/60%。
• 描邊：1px、內部、漸變填充（金屬灰漸變）。
• 內陰影：距離 3、擴展 0、大小 5、噪音 0%。
• 光澤：疊加模式、不透明度 50%、輪廓「圓錐-倒置」。

模組二：外框投影增強立體

複製「外形」→ 命名「輪廓投影」→ 置於下層 → 清除樣式 → 填充 0% → 新增樣式：
• 投影：角度 120°、距離 3、擴展 5、大小 8、噪音 0%。
• 內發光：來源「邊緣」、噪音 0%、大小 10px。

模組三：內槽（500×30 px 圓角矩形，白色）

樣式：
• 斜面與浮雕：外部凸起、平滑、深度 50%、大小 5px。
• 描邊：1px、內部、深灰。
• 內陰影：距離 2、大小 3。
• 顏色疊加：淺灰、不透明度 20%。
• 漸變疊加：線性、淺灰→白、角度 90°。

模組四：滑塊按鈕（60×60 px 圓形）

樣式堆疊：斜面與浮雕（外部凸起、大尺寸）、描邊（漸變金屬邊）、內陰影、內發光、光澤（環形高光）、顏色疊加（金屬基色）。參考截圖參數微調。

模組五：側邊功能鍵

複製滑塊按鈕，縮小尺寸，添加文字標籤（白色、外發光），完成交互狀態組件組。

優勢：所有尺寸、顏色、深度均可在圖層樣式面板數值修改，無需重繪，極適合設計系統組件庫建設。