想快速製作擁有通透玻璃質感、白色高光邊緣的水晶按鈕嗎？本教學完全依賴圖層樣式與選區操作，無需手繪筆觸，幾分鐘即可產出可直接用於 UI 設計的精美按鈕組件。

最終效果

製作步驟

1. 基礎形狀與描邊底紋

• 新建 500×300 px 文件，背景填 #827E22。
• 圓角矩形工具（半徑 25 px），白色前景，繪製按鈕主體 → 栅格化圖層。
• 複製主體圖層。原圖層添加「描邊」（6 px、白色）→ 新建空白圖層合併（固化描邊）→ 再添加「內陰影」、「內發光」、「斜面與浮雕」、「漸變疊加」等樣式，形成主體玻璃質感與白邊立體感。

2. 側面切面與高光細節

• 副本圖層添加樣式（參考圖 5、6），形成側面厚度感。
• 橢圓選框工具在左側畫正圓選區 → Delete 刪除，製造側面缺口細節。
• 鎖定圖層透明像素，保護邊緣不被誤繪。

3. 主體漸變與立體光影

• 矩形選框選下半部 → 線性漸變（參考圖 9 色帶） → 反選 → 再拉一條線性漸變（圖 11 色帶） → 整體呈現上亮下暗、左右通透的玻璃體積感。

4. 邊緣高光與文字

• 載入按鈕選區 → 新層填 #C5B564 → 橡皮擦僅保留邊緣窄條高光。
• 再新層填白 → 選區下移 3 px → Delete → 調整透明度，形成頂部倒影高光。
• 輸入文字，完成按鈕。

核心優勢

• 100% 圖層樣式非破壞，隨時可調整顏色、大小、光影參數。
• 白邊描邊固化為像素後再疊加樣式，邊緣銳利不模糊。
• 漸變疊加模擬玻璃折射與厚度，無需 3D 軟體。
• 流程標準化，極易批量產出同風格按鈕組件庫。

掌握此法，UI 設計師可快速產出高質感玻璃/水晶風格交互元素。