純用圖層樣式與向量形狀，零圖片素材繪製一枚極具質感、顏色可任意切換的進度條 UI 組件。掌握圖層樣式疊加邏輯、剪貼蒙版應用、形狀變換復制技巧，提升 UI 圖標繪製效率。

最終效果預覽

製作流程

1. 畫布與背景質感

• 新建 800×800px 文件，背景填充黑色。
• 背景圖層轉為智能對象 → 濾鏡 > 雜色 > 添加雜色（數量 1%、高斯分布、單色） → 濾鏡 > 濾鏡庫 > 畫筆描邊 > 陰影線（描邊長度 4、銳化 10、強化 1），獲得細膩金屬拉絲質感底。

2. 進度條背景槽（外框）

• 圓角矩形工具繪製 620×45px 圓角矩形，添加圖層樣式：斜面與浮雕（內凹感）、內陰影、顏色疊加（深灰）、漸變疊加（細微金屬光澤）。

3. 進度條填充區（白色基底）

• 繪製 500×25px 白色圓角矩形，置於背景槽內部居中。

4. 斜紋條紋圖案製作（關鍵技巧）

1. 繪製細長矩形 → 旋轉 30°。
2. 直接選擇工具選中路徑 → Ctrl+T → X 軸水平位置 +35px（如從 80 改為 115）。
3. 直接選擇工具選中 → Ctrl+Alt+Shift+T 瘋狂重複變換複製，生成等間距斜紋條紋組（單圖層多路徑，不產生新圖層）。
4. 將條紋組命名「漸變」，移至白色基底位置，建立剪貼蒙版（Alt+點擊圖層間分隔線）。
5. 為「漸變」圖層添加圖層樣式「漸變疊加」，自定義彩虹/科技藍/醫療綠等任意配色方案。

5. 白色基底高光與陰影細節

• 為白色圓角矩形添加圖層樣式：內陰影（頂部陰影）、內發光（邊緣高光）、斜面與浮雕（細微立體感），模擬凹陷槽內的光影關係。

6. 進度指示器（三角標籤）

• 矩形 + 三角形拼合 → 複製背景槽圖層樣式（右鍵複製/貼上圖層樣式） → 微調參數適配尺寸。

7. 文字標註與變色演示

• 添加文字「80%」，完成基礎版。
• 修改「漸變」圖層樣式中的漸變疊加顏色，即可一鍵換膚：紅色警示、綠色成功、藍色資訊等語義化配色。

核心知識點總結

• 智能對象+濾鏡庫：非破壞性生成程序化紋理。
• 圖層樣式疊加邏輯：斜面浮雕建立結構，內陰影/發光建立光影，顏色/漸變疊加建立材質色彩。
• 剪貼蒙版：將圖案精確限制在基底形狀內，不溢出。
• Ctrl+Alt+Shift+T：路徑級重複變換，高效生成等間距圖案，保持單圖層易管理。
• 圖層樣式復用：右鍵複製/貼上樣式，批量統一組件風格。

此法純向量、可無限縮放、顏色靈活切換、圖層結構清晰，極適合 UI 設計系統組件庫建設。建議保存為 PSD 模板或導出為 .asl 樣式庫複用。