針對網頁實際開發場景，本教程強調「像素對齊、樣式預設、混合模式疊加、文字銳利化」四大關鍵點，產出的按鈕不僅視覺細膩，更能直接切圖落地，減少前端還原偏差。

一、最終效果與核心指標

按鈕邊緣銳利無鋸齒，高光/陰影/倒角層次清晰，文字邊緣銳利（無抗鋸齒），樣式可一鍵套用至不同顏色/尺寸按鈕。

二、像素級形狀繪製

1. 新建文檔，圓角矩形工具（U）選項欄勾選 「對齊像素」（關鍵！防止邊緣模糊）。
2. 半徑設 5~8 px，拖出按鈕形狀。若出現模糊邊緣，檢查是否開啟「對齊像素」並重置畫布視圖為 100%。

三、建立基礎按鈕樣式（存為預設）

1. 為形狀圖層添加圖層樣式：

• 倒角與浮雕：外部倒角、平滑、深度 150%、大小 5 px、角度 90°、高光「螢幕」不透明度 75%、陰影「正片疊底」不透明度 50%。
• 描邊：1 px、內部、漸變（#FFFFFF→#AAAAAA）。
• 漸變疊加：線性、90°、#0066CC→#0099FF→#0066CC（可後期換色）。
• 投影：距離 1 px、大小 2 px、不透明度 30%。

樣式面板點「新建樣式」保存為「Web水晶按鈕基礎」。

四、高光疊加層（非破壞性編輯）

1. 矩形選框工具（M）拉選頂部 1/3 區域 → 新建圖層 → 黑→白徑向漸變 → 混合模式 柔光、不透明度 60%。
2. 新建圖層，選區向下縮小 2~3 px → 填充白 → 混合模式 線性減淡、不透明度 30%，形成鋒利高光線。

五、文字處理與樣式複用

1. 文字工具（T）輸入文案，字體邊緣設 無（關鍵：保證小字號銳利）。
2. 右鍵文字圖層 → 粘貼圖層樣式（套用步驟三保存的基礎樣式），文字瞬間擁有水晶質感。
3. 複製按鈕組 → 修改「漸變疊加」顏色 → 修改文字 → 輸出切圖。

六、切圖與前端交付建議

• 按鈕主體導出 PNG-24（保留透明倒角），高光疊加層可合併或由 CSS3 box-shadow 替代。
• 文字層單獨導出或改用 Web Font，保證 Retina 清晰度。
• 樣式預設文件（.asl）同步交付設計規範，團隊複用零成本。

相關教程： PS繪制藍色高光方形水晶按鈕 / PhotoShop繪制玻璃質感水晶按鈕 / Photoshop繪制透明玻璃質感長圓形按鈕 / Photoshop繪制圓形水晶按鈕