成品預覽

步驟 1：新建文件與背景

1. Ctrl+N 685×443 px、72 dpi、RGB。
2. 新建圖層，前景 RGB(55,56,58)，Alt+Delete 填充。
3. 濾鏡 → 雜色 → 添加雜色：量 1%、均勻分布、單色 ✓，增加細膩顆粒感。

步驟 2：基礎圓環（背景軌道）

1. 新建圖層「軌道」，橢圓工具（U）按 Shift 拖曳正圓，前景黑、Alt+Delete 填充，Ctrl+T 調整為完美圓形。
2. 圖層樣式：

• 投影：模式「柔光」、白色、不透明度 15%、角度 90°、距離 1 px、大小 0。
• 內陰影：模式「正片疊底」、黑色、不透明度 25%、角度 90°、距離 1 px、大小 5 px。

步驟 3：進度指示環（前景環）

1. 複製「軌道」→ 命名「進度」，雙擊開啟圖層樣式：

• 內陰影：模式「柔光」、白色、不透明度 30%、距離 1 px、大小 0。
• 外發光：模式「正常」、不透明度 30%、漸層「前景到透明」（藍→白）、方法「柔和」、擴展 0%、大小 5 px、範圍 50%。
• 斜面與浮雕：內斜面、平滑、深度 100%、上、大小 10 px、軟化 0、角度 90°、高度 20°、高光「濾色」白 17%、陰影「正片疊底」黑 0%。
• 漸層疊加：模式「疊加」、不透明度 22%、黑白漸層、線性、對齊圖層 ✓、角度 90°、縮放 150%。

步驟 4：百分比文字

1. 橫排文字工具（T）輸入「75%」，字體 Tahoma、18 pt、銳利抗鋸齒、白色。
2. 置中對齊於圓環中心。

擴展應用

• 將「進度」圖層轉為智能物件，配合向量蒙版（路徑面板畫扇形路徑 → 加為向量蒙版）即可精確控制進度角度，適合 UI 組件庫製作。
• 顏色主題可換為綠/紅/橙對應成功/錯誤/警告狀態。

---

純圖層樣式構建零圖片 UI 組件，優點：無限縮放不失真、參數化修改顏色/進度/大小、易於建立設計系統元件庫。