教程背景

經典 Web 2.0 風格玻璃按鈕導航菜單教程，基於 Photoshop CS2 中文版，展示圖層樣式堆疊模擬玻璃質感、切片導出 HTML 的完整流程，雖版本較早但核心邏輯仍具參考價值。

最終效果

半透明玻璃質感按鈕，帶內陰影、內發光、邊緣高光、疊加色彩，排列成導航欄，切片導出可直接用於網頁。

核心製作步驟

1. 基礎按鈕形狀

新建文件 → 新建圖層 → `圓角矩形工具`(半徑 15 px) 畫按鈕基礎形狀。

2. 玻璃質感圖層樣式堆疊 (核心)

對基礎形狀圖層應用以下樣式(參數詳見原教程圖示)：

• 投影： 距離 3、大小 5、不透明度 50% → 立體懸浮感。
• 內陰影： 距離 2、大小 3、顏色深灰 → 內凹邊緣厚度。
• 內發光： 來源中心、大小 10、顏色白、模式「螢幕」30% → 玻璃邊緣透光。
• 顏色疊加： 淡藍 #A8D0E6、模式「正片疊底」40% → 賦予玻璃本體色。
• 描邊： 1 px、內部、白、模式「螢幕」50% → 銳利邊緣高光。

3. 頂部高光帶增強

新層 `圓角矩形工具` 畫較小白色圓角矩形置於按鈕上部 → 模式「疊加」不透明度 30% → 模擬頂部強高光帶。

4. 導航菜單組裝與文字

複製按鈕組排列 → 添加文字標籤(白色、微軟雅黑、陰影 1px) → 對齊分佈。

5. 切片導出 HTML

1. `切片工具` 開啟 `視圖→對齊` → 逐個按鈕切片(含文字區域)。
2. `文件→存儲為 Web 所用格式`：預設 `JPEG High` 或 `PNG-24`(透明) → 存儲。
3. 輸出對話框：類型選 `HTML 和圖像(*.html)` → 保存得 `index.html` + `images/` 資料夾。
4. 使用時：複製 HTML 代碼(去除 PS 生成的 `/` 標籤) 嵌入項目頁面。

現代化改良建議

• 改用 `形狀圖層+智能物件` 替代像素圖層，支援響應式縮放。
• 樣式存為 `.asl`，配合 `CC Libraries` 團隊共享。
• 導出改用 `資源導出(Export As)` 多尺寸 PNG/SVG，配合 CSS `background-image` 實現 Retina 適配，棄用切片 HTML 工作流。
• 玻璃質感現代寫法：`backdrop-filter: blur(10px)` + `rgba(255,255,255,0.1)` + `border: 1px solid rgba(255,255,255,0.2)`，純 CSS 實現無需圖片。

更多精彩教程請關注三聯 Photoshop 教程欄目，三聯 PS 群：311270890 歡迎加入。