效果預覽

12 步製作流程

步驟 1-3：基礎按鈕本體與核心樣式

• 600×400px 文檔，背景填充 #b90010
• 新建圖層，橢圓選區工具繪正圓填白
• 雙擊圖層設置核心圖層樣式（斜面浮雕、內發光、漸變疊加、描邊等），獲得立體按鈕基礎

圖 1：正圓選區

圖 5：樣式完成效果

步驟 4-5：內縮邊框環製作

• 複製圖層 (Ctrl+J) → 清除圖層樣式 → Ctrl+T 縮小 (Shift+Alt 保持中心) → 獲得內縮圓環
• 雙擊設置描邊樣式，將填充歸 0，獲得精細邊框環

圖 6：內縮圓環

圖 7：描邊設置

圖 8：邊框環效果

步驟 6-7：頂部高光帶製作

• 新建圖層，硬邊圓筆刷 10px 繪製高光筆觸
• 漸變疊加樣式賦予高光色彩變化

圖 9：高光筆觸

圖 10：漸變設置

圖 11：高光帶效果

步驟 8-11：選區運算挖空與半透明質感

1. 合併高光相關圖層 (Ctrl+E)，不透明度 35%
2. 選擇合併層 → 選擇/載入選區 → 選中底層按鈕本體圖層 → Delete 挖空中心
3. 選區羽化 5px → 30% 不透明度柔邊橡皮擦輕擦邊緣 → 半透明質感

圖 12：合併調整

圖 13：載入選區

圖 14：挖空效果

圖 15：羽化選區

靈活應用

更換背景圖層顏色或圖案，即可獲得無限變體的通用按鈕。核心邏輯：基礎立體樣式 + 內縮邊框環 + 選區運算挖空 + 半透明邊緣，完全向量化、非破壞、易修改，是 UI 圖標批量生產的標準化範式。