在 Skeuomorphism(擬真設計) 時代，水晶按鈕是界面設計的「顏值擔當」。本教程基於 Photoshop CS3，通過圖層樣式的深度疊加——投影、外發光、內發光、斜面與浮雕、光澤、漸變疊加——在幾分鐘內構建出一枚擁有真實厚度、折射、邊緣折光的玻璃質感圓角矩形按鈕。這不僅是按鈕教程，更是「圖層樣式參數化思維」的經典練習。

最終效果

核心製作流程

1. 文檔與基礎形狀建立

• 新建 570×400px，72dpi，RGB，白背景
• 圖層 4：圓角矩形工具 + Shift 拖拽正圓角矩形 → Ctrl+Enter 轉選區 → 填充藍色前景色 → Ctrl+D 取消選區

2. 圖層樣式「六重奏」——質感構建核心

右鍵圖層 4 → 混合選項，依次啟用並配置：

樣式項	核心作用	關鍵參數邏輯
投影	按鈕懸浮感、落地感	角度 120°/距離/大小/不透明度 模擬主光源方向
外發光	邊緣折射/環境光暈	螢光藍/篩色/大小擴散 模擬玻璃邊緣透光
內發光	內部體積光/折射聚光	內部邊緣亮化，來源「邊緣」，噪點增加質感
斜面與浮雕	核心立體感：厚度、棱角、凸面曲率	風格「內斜面」、技術「平滑」、深度/方向/大小/柔化 構建 3D 體積
光澤	表面高光反射條紋	混合模式「篩色」、輪廓「環形」、大小/距離 控制高光帶位置寬度
漸變疊加	主體色彩與通透感	藍→透明→深藍 徑向/線性漸變，模擬厚度色散與內部折射

3. 高光細節疊加——打破「平整感」

• 複製圖層 4 → 添加蒙版 → 文字工具輸入 "school" 設置字體參數
• 新建圖層，鋼筆繪製不規則高光形狀 → Ctrl+Enter 轉選區 → 白色填充 → 不透明度 20% → 模擬頂部鏡面高光

圖層樣式參數化思維：從「調參」到「建模」

教程展示的每一個滑桿數值，實際上對應物理光學參數：

• 深度/大小/方向 ↔ 幾何厚度/曲率/光源位置
• 不透明度/噪點 ↔ 材質透明度/表面粗糙度
• 輪廓曲線 ↔ 表面微觀法線分佈
• 混合模式 ↔ 光線傳輸模式 (反射/折射/散射/吸收)

練習建議：將教程參數作為「基準預設」存檔，然後針對不同材質 (翡翠、琥珀、冰塊、塑膠) 只調整 3-5 個關鍵參數 (漸變顏色、斜面深度、光澤輪廓、發光顏色)，觀察質感變化，建立「參數-材質」心理映射表。

現代工作流對接建議

• Figma/Sketch/Adobe XD：將 PS 圖層樣式邏輯轉化為設計系統中的「Effect Styles」，實現跨平台一致性。
• CSS 映射：box-shadow ↔ 投影/外發光，background-image: linear-gradient ↔ 漸變疊加，backdrop-filter: blur ↔ 磨砂玻璃基底。
• 動態原型：導出至 Principle/ProtoPie，為按鈕狀態 (默認/懸停/按下/禁用) 設計樣式變體動畫。
• 3D 替代：Spline/Blender 建模玻璃按鈕 → 實時渲染 → 導出多角度素材 → PS 精修合成，解決複雜透視/折射難題。

避坑提醒

• 填充 0% ≠ 不透明度 0%：教程第 4 步強調「設置填充為 0」，這保留圖層樣式可見性但隱藏像素內容，是「純樣式圖層」關鍵技巧。
• 全局光源一致性：所有樣式項「使用全局光」保持勾選，確保投影、斜面、光澤光源角度統一。
• 圖層順序邏輯：文字層在高光層之上，高光層在基礎按鈕層之上，符合物理遮擋關係。

雖然扁平化/新拟态設計潮流更迭，但「圖層樣式參數化建模」的底層邏輯從未過時。掌握水晶按鈕的每一個滑桿含義，你就掌握了在 2D 畫布上用參數語言描述 3D 材質物理屬性的能力——這是跨越工具版本、設計潮流的核心內功。