透明玻璃質感按鈕是經典 UI 設計元素。本教學詳細拆解從基礎形狀構建、選區羽化疊加、高光倒影模擬到文字內投影的完整流程，助你掌握玻璃材質的核心表現邏輯。

最終效果

核心製作步驟

1. 基礎幾何構建（圖 01-02）

新建 120×80 px 透明文件。繪製 40×40 px 圓形填充 #003366，從中心分解為左右半圓，分別向外移動 30 px，中間空間同色填充，形成長圓形主體。

2. 內部高光與厚度感（圖 03-04）

載入主體選區 → 縮減 5 px → 羽化 8 px → 新圖層填充 #66CCFF → 與下層群組（Ctrl+G） → 向下移動 10 px 形成內凹厚度。再以 120×15 px 選框複製主體上緣區域備用。

3. 邊緣高光與倒影模擬（圖 05-07）

貼上複製區 → 右移 5 px → 取消選區 → 向下移 3 px。載入選區 → 新圖層 → 白色前景「前景到透明」線性漸變由上而下，產生頂部高光帶。同理處理底部倒影。

4. 文字與最終潤飾（圖 08）

添加按鈕文字，套用淺色「投影」模擬玻璃內部投影效果。補充環境倒影與細微高光，增強材質表現力。

關鍵知識點

• 選區「縮減+羽化」製作柔和內凹/外凸邊緣
• 圖層群組（Ctrl+G）限制高光顯示範圍
• 「前景到透明」漸變是玻璃高光的萬用公式
• 文字投影不可過深，透明材質內投影極淺