經典網頁導航按鈕制作教學，展示如何從深灰背景出發，通過圖層樣式疊加（投影、內陰影、外發光、漸變疊加、描邊）、雜色紋理、高光切片、文字效果，構建具備按下/懸停狀態的立體按鈕。流程清晰、參數具體，適合 UI 入門進階。

步驟詳解

1. 背景與基礎形狀：背景填深灰。新建圖層 1，圓角矩形工具拉出按鈕主體，前景色設定基底色。

2. 圖層 1 添加綜合樣式：投影（距離 2px）、內陰影（距離 1px）、外發光（白、疊加）、漸變疊加（線性、垂直雙色）、描邊（1px、深色）。

3. 雜色紋理：選中圖層 1 → 濾鏡＞雜色＞添加雜色（量 2-3%、高斯分佈、單色），增加金屬/塑膠顆粒感。

4. 底部高光切片：Ctrl+點擊圖層 1 縮略圖載入選區 → 新建圖層 2 填充任意色 → 矩形選框工具 ↑ 移動 1px → Delete 刪除選區 → 取消選區，得 1px 底部高光線。

5. 圖層 2 樣式：漸變疊加（白→透明、線性、角度 90°），模式「疊加」/「柔光」，不透明度 60-80%。

6. 頂部高光帶：再次載入圖層 1 選區 → 新建圖層 3 → 徑向漸變（白→黑、從上中拖至下右）→ 取消選區 → 圖層模式「疊加」/「篩色」，不透明度 40-60%。

7. 梯形高光面（立體厚度感）：圓角矩形路徑 → 轉換點工具拉伸右下兩點成梯形 → 新建圖層 4 填白 → 載入圖層 1 選區為圖層 4 添加蒙版 → 模式「疊加」/「柔光」。

8. 文字效果：輸入導航文字，添加「倒角與浮雕」（外部倒角、大小 3px）、色彩疊加（白）、投影（距離 1px）。

狀態擴展與規範化

• 複製按鈕組，修改「漸變疊加」顏色與「外發光」強度，快速產出 Hover/Active/Disabled 三態。
• 將完整圖層結構存為 .psd 組件模板，或導出 .asl 樣式庫，實現跨專案復用。
• 標註文檔：尺寸、圓角半徑、色值、模糊值、狀態參數差異表。