以圓角矩形、圖層樣式（內發光、圖案疊加、描邊、外發光、漸層疊加、顏色疊加）堆疊出具備金屬質感與發光效果的進度條，並示範如何用矩形工具繪製分段刻度、複製變換排列，最後延伸製作第二種漸層風格，適合 Web/UI 介面設計練習。

最終效果

素材準備

背景紋理、藝術表面圖案（PS 內建）

製作步驟

1. 基礎背景與外框

新建 600×400 px，放入紋理。圓角矩形工具（半徑 10px）拉出長條 → 命名「矩形 1」 → 雙擊添加樣式：
— 內發光（預設黑）
— 圖案疊加（載入「藝術表面」）
— 描邊（設定參考圖）

2. 內部進度條

在「矩形 1」內繪製較小圓角矩形「矩形 2」 → 樣式：外發光 + 漸層疊加。新建圖層與「矩形 2」合併 → 複製備份（隱藏舊層）。

3. 進度填充樣式

雙擊合併層 → 顏色疊加 + 圖案疊加（預備圖案），得到實心進度效果。

4. 分段刻度線

矩形工具畫黑白兩短線 → 疊加樣式 → 複製排列 → 移入進度條內部。

5. 延伸：第二種漸層風格

在「矩形 1」內再繪一較短矩形，重複上述樣式設置（漸層疊加、圖案疊加），添加文字說明，完成變體。

更多教程請關注三聯 Photoshop 欄目，群號：249667984。