教程定位

專注單一 UI 組件極致打磨：200×200 px 標準按鈕尺寸，涵蓋背景光場構建、玻璃質感主體、立體陰影高光、信封圖標微模型、浮雕文字五大模塊，產出可直接切圖上線的高保真組件。

最終效果

精細製作 7 大模塊

模塊 1：畫布與參考線系統（步驟 1）

• 新建 200×200 px / 72 dpi 白底文檔 (實際按鈕尺寸)
• Ctrl+R 顯示標尺 → 拖出四邊參考線鎖定按鈕邊界
• Ctrl+Alt+C 畫布擴展至 800×500 px，獲得操作冗餘空間，參考線保留定位

模塊 2：背景光場渲染（步驟 2）

• 漸變填充：亮灰色系線性漸變
• 新建層「backlight」：大柔邊筆繪製中上方主光暈 + 小筆繪中心偏上次級光暈
• 自由變換調整光暈大小位置，營造「聚光燈下」舞臺感

模塊 3：玻璃質感按鈕主體（步驟 3）

• 圓角矩形工具 (U)，半徑 10px，貼合參考線繪製
• 圖層命名「button bg」，圖層樣式三重奏：
  • 投影：距離 3px、大小 5px、不透明度 40%
  • 漸變疊加：線性 #ffffff → #e0e0e0，角度 90°
  • 描邊：1px #cccccc 內部，勾勒邊緣高光

模塊 4：立體陰影與高光系統（步驟 4）

• 底部投影層：矩形選區填深灰 → 高斯模糊 13px → Ctrl+T 壓扁 → 不透明度 30%
• 頂部高光層：
  1. 層 1：白柔邊筆繪頂部高光帶 → 模式 疊加
  2. 層 2：複製層 1 → 模式 正常 → 上移貼齊按鈕頂緣 → 製造鋒利邊緣高光

模塊 5：信封圖標微模型（步驟 5-6）

• 信封主體：白色矩形 + 圖層樣式 (投影 + 外發光白 50% + 描邊 1px #cccccc)
• 信封蓋/底：多邊形工具 3 邊 (三角形) → 完整圖層樣式 (投影 + 內陰影 + 漸變疊加 #ffffff→#e0e0e0 + 描邊) → 複製垂直翻轉得底蓋 → 移除描邊
• 內部明暗：蓋/底之間新層，黑白柔邊筆手繪內部陰影高光

模塊 6：浮雕文字「Contact Us」（步驟 7）

• 文字顏色 #b10000 (深紅) —— **關鍵技巧**：文字色比背景稍淺，配合後續圖層樣式產生浮雕視覺
• 圖層樣式：內陰影 (距離 1px、大小 2px、不透明度 50%) + 斜面與浮雕 (內部凹陷、深度 100%) + 描邊 (1px #ff6666)

組件化交付清單

輸出項	規格	用途
正態按鈕	200×200 px PNG-24 透明底	默認狀態
Hover 態	同尺寸，光暈擴大 20%、信封上浮 3px	鼠標懸停
Active 態	同尺寸，內陰影增強、光暈收縮	點擊按下
PSD 源文件	完整圖層結構、智能對象、可編輯文字	設計系統組件庫入庫

源教程來自 psdvault.com，轉載請保留超鏈接註明「活力盒子網站」與原文出處。