教程簡介

玻璃/水晶質感按鈕以其通透、高光銳利、倒影真實、邊緣折光豐富，是 Web 2.0 時代至今經久不衰的 UI 經典風格。本教程將演示如何通過「多圖層疊加、選區羽化漸變、圖層模式混合、蓋印翻轉倒影」的純 2D 技法，構建一枚擁有豐富光影細節的玻璃按鈕，無需 3D 軟體即可獲得媲美渲染的質感。

效果預覽

核心製作步驟 (13 步走)

1. 基礎按鈕背景

• 新建 700×500px 文件，圓角矩形工具繪製按鈕主體形狀。
• 新建圖層「按鈕背景」，漸變工具 (線性/徑向) 兩色填充 (如深藍→淺藍)，建立基礎色調與體積感。

2. 頂部高光帶 (玻璃頂面反光)

• 複製「按鈕背景」→ 命名「高光」 → 填充改白色、不透明度 50%。
• 矩形選區選取按鈕上半部 → Delete 刪除下半部 → 保留頂部高光帶。

3. 底部高光過渡 (球面折射感)

• 橢圓選區選取按鈕下部區域 → 羽化 30px → Delete 刪除 → 形成柔和底部高光漸變。

4. 邊緣高光線 (玻璃厚度折光)

• Ctrl+點擊「按鈕背景」載入選區 → 選擇 → 修改 → 擴展 1px。
• 在「按鈕背景」下方新建圖層「邊緣」，矩形選區填白 → 形成 1px 銳利白邊。

5. 背景變黑檢視效果

• 最底層背景填黑，驗證高光/邊緣/倒影在深色背景下的可見度。

6. 邊緣高光細化 (上下不同透明度)

• 圓形選區選下半部 → 羽化 30px → 選中「邊緣」圖層 → Delete 兩次 (更透明)。
• 同法選上半部 → 羽化 30px → Delete 一次 (保留較強高光)。

7. 邊緣陰影線 (增強厚度感)

• Ctrl+點擊「按鈕背景」 → 擴展 2px → 「邊緣」下新建「邊緣2」 → 黑色矩形填充。
• 「邊緣2」圖層模式 → 漸變填充 (角度漸變/線性漸變，深灰→透明→深灰) → 模擬側面陰影折光。

8. 文字/圖標與玻璃反射樣式

• 輸入文字或放入圖標，圖層樣式：投影(距離 1、大小 2)、內陰影(距離 1、大小 1)、斜面與浮雕(內部、平滑、大小 3、高光白/陰影黑)、漸變疊加(線性、白→透明→白) → 使文字/圖標融入玻璃質感。

9. 底部陰影 (接地氣)

• 最底層新建圖層，橢圓選區填黑 → 高斯模糊 10-20px → 不透明度 30-50% → 置於按鈕底部。

10. 倒影製作 (經典蓋印法)

• 隱藏背景圖層，選中最上層「高光」，Shift+Ctrl+Alt+E 蓋印可見圖層 → 複製一層 → 編輯 → 變換 → 垂直翻轉 → 移至按鈕下方對齊。

11. 倒影漸隱

• 圓形選區選倒影下半部 → 羽化 30px → Delete 刪除 → 形成自然淡出倒影。

12. 顯示背景、調整倒影不透明度 (如 30-50%)，完成！

核心技法總結

複製層填白+選區刪除

視覺特徵	實現手法	關鍵參數
主體色調體積	漸變填充	徑向/線性、多色停對應結構轉折
頂面強高光	不透明度 50%、矩形選區硬切
球面柔和高光	橢圓選區+大羽化+Delete	羽化 30px+、按曲面弧度調整選區形狀
銳利邊緣折光	選區擴展 1-2px + 填白圖層	像素級銳利、圖層模式正常/疊加
側面陰影折光	選區擴展 2px + 黑填充 + 漸變填充模式	漸變模擬側面曲面明暗變化
倒影	蓋印圖層 (Shift+Ctrl+Alt+E) + 垂直翻轉 + 羽化蒙版淡出	非破壞、含所有高光細節、可獨立調整不透明度

進階延伸

• 按下狀態：高光帶向下位移、倒影縮短、邊緣高光增強、整體縮放 98%。
• 懸停狀態：外發光 (藍/白、大小 10px)、高光帶增亮、倒影增強。
• 多色系批量：將「按鈕背景」轉為智能物件，雙擊修改漸變色即可全局更新。
• CSS3 還原：box-shadow (多層)、background-image (多漸變)、::before/::after 偽元素做高光/倒影，實現純代碼玻璃按鈕。

玻璃按鈕的精髓在於「高光層級豐富」與「倒影真實」。通過本教程的 13 步拆解，你將掌握從平面到立體、從靜態到動態的完整玻璃質感構建邏輯。建議動手複現一次，並嘗試設計一套包含正常/懸停/按下/禁用 四狀態的玻璃按鈕組件庫，這將是你 UI 設計作品集中的亮點項目！