效果預覽

核心知識點

假設光源來自上方，遵循素描「三大面五大調子」光影邏輯：按鈕表面上亮下暗，漸變疊加上淺下深；底部邊緣捕光需添加高光細線；表面需徑向漸變模擬曲面反光。

7 步製作流程

步驟 1-3：文檔與基礎形狀

• 新建文檔，參數設置
• 背景層填充 #141d28 深藍灰
• 圓角矩形工具 (2px 圓角) 繪製按鈕主體，形狀顏色 #17202b

步驟 4-5：核心圖層樣式堆疊（關鍵）

按鈕主體圖層添加圖層樣式，包含：斜面浮雕、內陰影、內發光、漸變疊加 (上淺下深)、描邊 (深淺漸變模擬邊緣捕光)。關鍵邏輯：漸變疊加與描邊漸變方向相反，因光源從上方射下，表面上亮下暗，底部邊緣反而捕光更亮。

步驟 6：底部 1px 高光細線（提升對比關鍵）

1. 載入按鈕選區 → 新建圖層
2. 對稱漸變 #050607 → #ffffff 從中心向外拉
3. 選區上移 1px (方向鍵 ↑) → Delete 刪除 → 僅保留底部 1px 細線
4. Ctrl+I 反相 → 圖層模式「疊加」 → 複製一層疊加增強亮度

步驟 7：頂部徑向高光增強曲面感

1. 同法載入選區 → 新建圖層
2. 白→黑徑向漸變從中心向外
3. 取消選區 → 疊加模式 50% 不透明度

步驟 8：文字排版完成

方法論價值

本教程將「光影物理邏輯」轉化為「圖層樣式參數 + 選區運算操作」的標準化流程：基礎樣式建模 → 選區運算提取關鍵高光細線 → 疊加模式非破壞融合。此法可快速產出符合光影物理規律、圖層結構清晰可維護的高質感 UI 組件，適合設計系統組件庫建設。