教程簡介

水晶鈕扣風格按鈕/徽章以其通透立體的質感，廣泛應用於網頁飾品、APP 圖示、遊戲道具圖標。本教程將示範如何純用圖層樣式快速構建可複用的水晶鈕扣基礎模型，並延伸製作徽章變體，全程無需複雜手繪，適合快速產出高質感 UI 元素。

最終效果

核心製作步驟

步驟 1：基礎鈕扣形狀

• 新建文件，背景填黑（利於觀察發光效果）。
• 橢圓工具按 Shift 繪製正圓，填充任意色（如綠色 #00AA00），命名為「基礎形狀」。

步驟 2：核心圖層樣式構建立體感

對「基礎形狀」圖層應用以下圖層樣式組合：

樣式項目	關鍵參數	作用
投影	混合模式：正片疊底、不透明度 40%、角度 90°、距離 3px、大小 5px	按鈕落地陰影
內陰影	混合模式：正片疊底、不透明度 50%、角度 -90°、距離 2px、大小 3px	邊緣內凹深度
內發光	混合模式：線性減淡、顏色：白、不透明度 30%、大小 10px	邊緣透光感
斜面與浮雕	內部斜面、平滑、深度 100%、方向向上、大小 10px、軟化 3px、光澤輪廓「圓錐-倒置」、高光模式：螢光色(白) 60%、陰影模式：正片疊底(黑) 40%	核心立體球體感
漸變疊加	徑向漸變、縮放 120%、從中心亮色到邊緣暗色	球面光影分布

步驟 3：主高光製作（關鍵亮點）

1. 橢圓選區工具拉出橫向橢圓選區（寬約按鈕 70%、高約 20%），新建圖層「主高光」。
2. 白→透明徑向漸變從中心向外拖拽，旋轉約 30° 對齊光源方向。
3. 複製「主高光」圖層，Ctrl+點擊縮略圖載入選區，向左移動數像素，Delete 刪除疊加部分，形成銳利高光邊緣。
4. 回到第一個高光圖層，同法向左下方複製旋轉，形成次級高光。
5. 兩高光圖層填充歸 0%，僅保留圖層樣式發光效果。

步驟 4：徽章變體延伸

1. 引入任意圖片作為徽章背景紋理（如織物、金屬拉絲、插畫）。
2. Ctrl+點擊「基礎形狀」縮略圖載入圓形選區，Shift+Ctrl+I 反選，刪除多餘圖片區域。
3. 將高光圖層組置於圖片上方，即可獲得同質感不同皮膚的徽章系列。

進階應用技巧

• 智能物件化：將「基礎形狀」+「高光組」轉為智能物件，雙擊編輯內部顏色即可批量生成紅/藍/金等多色系鈕扣。
• 樣式預設：將核心圖層樣式存為 .asl，新專案一鍵套用。
• 動態狀態：結合時間軸製作按下/懸停狀態：高光位移、斜面深度變化、投影距離縮小。
• 徽章邊框：在「基礎形狀」外再加一圈描邊圖層（漸變描邊），即可得到鑲邊徽章效果。

常見問題排查

• 高光過生硬 → 增加漸變羽化範圍，或高光圖層添加高斯模糊 1-2px。
• 球體感不足 → 調整斜面與浮雕的「光澤輪廓」為更陡峭曲線，增加「深度」至 150%+。
• 倒影不自然 → 確保高光旋轉角度與主光源一致（通常左上 45° 或正上 90°）。

掌握這套「圖層樣式驅動」的水晶鈕扣工作流，能讓你在幾分鐘內產出媲美 3D 渲染的高質感按鈕/徽章資產，極大提升 UI 設計產能。立即嘗試建立你的專屬鈕扣組件庫吧！