教程目標

純用圖層樣式在 5 分鐘內製作一個乾淨、現代感的透明玻璃效果網頁按鈕，無需繪圖技巧，適合 UI 設計入門練習。

最終效果

製作步驟

STEP 01：基礎形狀

新建 430×430px 白底文檔，新建圖層命名「box」，圓角矩形工具 (U) 繪製圓角矩形，Ctrl+Enter 轉選區，填充白色。

STEP 02-05：圖層樣式疊加（核心）

雙擊圖層開啟圖層樣式，依次添加：

1. 漸變疊加：左 #B1DB08 → 中 #66AB04 → 右 #B1DB08，線性漸變，構建玻璃通透色帶。
2. 內發光：顏色 #D9FF4E，增強邊緣發光感。
3. 描邊：顏色 #A8D508，大小 1px，勾勒邊框。

STEP 06-08：高光細節

1. 新建圖層「light」，繪製較小圓角矩形選區填白。
2. 濾鏡→扭曲→鋸齒，參考參數製造波紋高光。
3. 圖層不透明度 40%，橡皮檫擦除邊緣硬度，形成自然高光帶。

技巧總結

• 三層樣式疊加：漸變疊加定色調，內發光增通透，描邊強輪廓。
• 綠色系配色：#B1DB08/#66AB04/#D9FF4E/#A8D508 形成協調的玻璃綠配色方案，可直接套用於其他 UI 元素。
• 鋸齒濾鏡造高光：非常規用法，快速生成不規則高光紋理。
• 非破壞編輯：全程圖層樣式+獨立高光層，隨時可調整參數復用。