效果預覽

製作步驟

1. 新建畫布：800×600px，背景填黑。
2. 繪製基礎形狀：選「圓角矩形工具」（形狀圖層），半徑 3px，繪製按鈕主體。

3. 圖層樣式構建玻璃質感（右鍵圖層→混合選項）：
   • 描邊：1px，不透明度 100%，顏色淺灰，位置「內部」。
   
   • 漸變疊加：線性，角度 90°，自定義漸變（多色標模擬玻璃高光/陰影過渡）。
   
   • 內發光：混合模式「螢幕」，顏色白，不透明度 30%，大小 10px，噪點 0%。
   
   • 內陰影：模式「正常」，顏色深灰，距離 0，大小 3px，製造邊緣凹陷感。
   
   • 投影：距離 2px，大小 3px，不透明度 50%，使按鈕浮起。
   
4. 色相/飽和度調整圖層：剪貼至按鈕組，隨意調整色相快速產出多色系按鈕。

5. 最終效果變體：不同色相設定下的按鈕群。

參數解析

樣式	關鍵參數	作用
漸變疊加	多色標、角度 90°、不透明度 60%	模擬玻璃厚度方向的光線折射與反射
內發光	螢幕模式、白色、大小 10px	邊緣發光，模擬光線穿透玻璃邊緣
內陰影	正常模式、深色、大小 3px	內側陰影，增強凹陷/厚度感
描邊	內部、1px、淺灰	銳利邊框，定義按鈕輪廓
投影	距離 2、大小 3、不透明度 50%	與背景分離，產生懸浮感

設計原則

• 填充度 0% + 圖層樣式：形狀本體透明，所有視覺效果由樣式產生，修改形狀不影響效果。
• 漸變疊加是靈魂：至少 5-7 個色標，模擬高光、中間調、陰影、反光等多層次光線行為。
• 內發光+內陰影雙重作用：一明一暗，構建玻璃「有厚度、有折射」的核心觀感。

快速複用

將按鈕圖層組存為「智能對象」，雙擊編輯內部形狀/文字，外部樣式自動更新。配合色相/飽和度調整圖層，幾秒鐘產出全套 UI 按鈕組件庫。