想要為網頁或介面設計一枚極具質感的藍色按鈕嗎？本教程將詳細拆解從背景鋪底、形狀繪製、圖層樣式疊加到高光與投影處理的完整流程，助你輕鬆掌握玻璃質感按鈕的核心技法。

一、預覽最終效果

完成後的按鈕呈現深邃的藍色漸變主體，頂部鋒利的高光帶出玻璃般的通透感，底部柔和的投影則賦予懸浮立體感，整體視覺層次豐富，極適合作為 UI 關鍵交互元素。

二、建立文檔與背景漸變

1. 新建 500×350 像素畫布，分辨率 72 dpi，色彩模式 RGB。
2. 設定前景色 #026d8d、背景色 #01c1e2。
3. 選取漸變工具（G），模式選「前景到背景」，線性漸變，由畫布頂部向下拖曳，構建深淺疊變的藍色底色。

三、繪製按鈕基礎形狀

1. 選取圓角矩形工具（U），選項欄勾選「形狀圖層」，圓角半徑設 10 px。
2. 在畫布中央拖出按鈕主體，圖層自動命名為「按鈕形狀」。

四、疊加圖層樣式賦予質感

雙擊「按鈕形狀」圖層打開圖層樣式面板，依次勾選並調整以下項目（具體數值請參考隨附截圖）：

• 倒角與浮雕：內部倒角、平滑、深度 100%、大小 10 px，高光模式「線性減淡」（不透明度 75%），陰影模式「線性加深」（不透明度 50%）。
• 描邊：大小 1 px、位置「內部」、填充類型「漸變」，角度 90°，漸變從 #003d5c 到 #00a8e8。
• 內陰影、內發光、疊加樣式（漸變疊加、顏色疊加）微調，增強邊緣反光與通透層次。

五、製作頂部高光區域

1. Ctrl+點擊「按鈕形狀」縮略圖載入選區 → 選擇「矩形選框工具」（M），按住 Alt 扣除下半部，保留頂部 1/3 區域。
2. 新建圖層命名「高光」，填充純白（#FFFFFF）。
3. 取消選區（Ctrl+D），為「高光」圖層添加圖層蒙版，用黑白漸變由上往下拉出柔和過渡。
4. 調整該圖層不透明度至 30%~40%，混合模式設「疊加」或「柔光」。

六、添加投影營造懸浮感

1. 複製「按鈕形狀」圖層（Ctrl+J），拖至背景層上方，執行「圖層 → 圖層樣式 → 清除圖層樣式」。
2. 移動工具（V）向下位移約 8~10 px，自由變換（Ctrl+T）將高度壓縮至 50% 左右。
3. 圖層填充純黑（#000000），執行「圖層 → 柵格化 → 圖層」。
4. 濾鏡 → 模糊 → 高斯模糊，半徑 20 px，圖層不透明度降至 70%。

七、文字排版與最終微調

1. 文字工具（T）輸入按鈕文案，字體建議微軟雅黑 / PingFang SC，粗體，字號 18~20 pt，顏色白色。
2. 為文字圖層添加「投影」（距離 1 px、大小 0、不透明度 40%）與「內發光」（顏色 #0066cc、大小 3 px），增強可讀性與立體感。

八、小結

通過「漸變底色 → 向量形狀 → 多重圖層樣式 → 高光蒙版 → 投影分離」的標準化流程，即可快速產出專業級藍色質感按鈕。掌握核心邏輯後，只需替換配色（如綠色、橙色、紫色）即可批量生成同風格按鈕組件，極大提升 UI 設計效率。