UI設計中，「玻璃質感」按鈕因其通透輕盈的視覺特質，長期活躍於iOS早期風格、科幻界面與高端品牌官網。本教程以31個精細步驟，拆解一枚藍色水晶玻璃按鈕的完整構建邏輯——從文檔建立到最終調色，每一層高光、每一次羽化、每一個不透明度數值都經過推敲。這不僅是按鈕教程，更是一堂「光影邏輯與圖層管理」的實戰課。

最終效果

核心構建邏輯：兩大模塊疊加

按鈕結構解耦為兩個獨立模塊，分別獨立建組管理：

• 核心體：藍色水晶主體——承載主色調、體積光影、內部折射
• 外殼層：透明玻璃邊緣——表現厚度、邊緣高光、環境反射

「制作方法基本相同，只需要找出相應的高光部分並渲染出來」——這句話揭示了教程的核心方法論：觀察真實物質在特定光照下的高光分佈規律，在PS中用路徑選區+羽化+漸變/純色填充+圖層蒙版+不透明度/混合模式組合還原。

關鍵技術點速查表

步驟區間	核心操作	關鍵參數/技巧	對應圖層功能
1-3	文檔與基礎組建立	800×600px，背景#752874；橢圓選區+圖層蒙版限制圓形區域	組「核心體」蒙版定形
4	水晶底色漸變	線性漸變由上至下，模擬頂部受光、底部透光	核心體基調
5-15	核心體多層高光構建	鋼筆勾選區→羽化(2-6px)→白色填充→不透明度10-60%→蒙版擦除過渡	頂高光、側高光、底高光、棱角反射
16-21	外殼層構建	新建組，較大橢圓蒙版；白色填充10%不透明度做厚度感	玻璃外殼基底
17-21	外殼高光細節	頂部高光羽化3px 60%→複製圖層疊加100%加強→中側高光同法	邊緣折射、厚度高光
22	底部高光	羽化2px 白色 50%	懸浮感支撐
23	全局調色	亮度/對比度調整圖層統一畫面對比	最終潤色

高光渲染「三部曲」通用公式

教程中30+個高光圖層，本質上都是這套流程的變奏：

1. 形狀定義：鋼筆工具精準勾勒高光幾何形狀（矩形、三角、弧形、不規則多邊形）
2. 邊緣軟化：羽化半徑決定材質硬度——玻璃/金屬 1-3px，塑膠/陶瓷 5-10px，布料/皮膚 10-20px
3. 疊加控制：白色填充 + 不透明度(10-60%) + 圖層蒙版(黑漸變擦除) + 混合模式(正常/疊加/柔光/強光)

進階避坑指南

• 組嵌套管理：核心體組、外殼組、調整組三級架構，防止圖層面板失控。
• 路徑面板留存：所有鋼筆路徑保留在路徑面板，需修改形狀時可直接調取控制點，無需重繪。
• 參考真實物體：找一枚真實玻璃按鈕/珠寶，單一光源拍攝，觀察高光形狀、銳度、顏色偏移，將觀察轉化為PS參數。
• 色相統一技巧：所有高光圖層剪貼到同一色相/飽和度調整圖層下，一鍵統一溫冷傾向。

舉一反三：從按鈕到通用玻璃質感

掌握本教程邏輯，可快速衍生：

• 不同顏色玻璃按鈕（修改底色漸變、高光色相）
• 圓形/方形/異形玻璃圖標（修改蒙版形狀）
• 玻璃卡片、模態框背景、導航欄毛玻璃效果（擴展區域、調整厚度高光）
• 結合Layer Styles「斜面與浮雕」「內發光」加速低保真原型製作

31步看似繁瑣，實則是「觀察-抽象-還原」工業化流程的具體化。當你能在心中預演每一層高光的形狀、銳度、疊加順序時，你就真正掌握了「畫光」的能力——這才是UI質感表現的核心內功。