教學目標

掌握使用「自訂形狀工具」配合「圖層樣式」快速產出具備立體光感、高光反射、內陰影深度的水晶質感按鈕，適用於網頁 UI、APP 介面、簡報按鈕設計。

最終效果預覽

完整製作步驟

1. 文件與基礎形狀建立

1. 新建 300×300 px、72 dpi、RGB、白色背景文件。
2. 新建圖層，前景色設 #91d638（鮮綠），選取「多邊形工具」（或圓角矩形），繪製主按鈕形狀。

2. 主按鈕圖層樣式設定（核心）

雙擊圖層開啟圖層樣式，依序勾選並設定：

• 斜面與浮雕：風格「內部斜面」、技術「平滑」、深度 100%、方向「上」、大小 10px、柔化 3px、角度 90°、高度 30°、高光模式「螢幕」不透明度 75%、陰影模式「正片疊底」不透明度 50%。
• 描邊：大小 1px、位置「內部」、混合模式「正常」、不透明度 100%、填充類型「顏色」#6ab32e。
• 內陰影：混合模式「正片疊底」、不透明度 30%、角度 90°、距離 3px、擴展 0%、大小 5px。
• 內發光：混合模式「螢幕」、不透明度 50%、雜色 0%、來源「邊緣」、阻塞 0%、大小 10px。
• 光澤：混合模式「正常」、不透明度 60%、角度 90°、距離 0%、大小 8px、輪廓「圓錐-倒置」。
• 顏色疊加：混合模式「正常」、顏色 #91d638、不透明度 100%。

3. 內部高光反射層疊加

3. 新建圖層，繪製較小白色多邊形（內縮約 8~10px），圖層不透明度 60%。
4. 新建圖層，前景色 #91d638 繪製更小多邊形（內縮約 16~20px），添加圖層樣式：
   • 斜面與浮雕：風格「外部斜面」、技術「平滑」、深度 80%、大小 5px、高光「螢幕」60%、陰影「正片疊底」40%。
   • 描邊：1px、內部、#6ab32e。
   

4. 倒影效果製作

5. 選取除背景外所有圖層，合併 (Ctrl+E)。
6. Ctrl+J 複製合併層，Ctrl+T 自由變換 → 右鍵「垂直翻轉」。
7. 向下移動一段距離，添加圖層蒙版，黑白漸層（黑在下）淡出倒影。

5. 文字排版

8. 輸入按鈕文字（如「DOWNLOAD」），字體選無襯線體（微軟正黑體、PingFang、Helvetica），顏色白色，添加「投影」（距離 1px、大小 2px、不透明度 30%）增強可讀性。

延伸應用與變化

• 狀態變化：複製按鈕群組，修改「顏色疊加」為懸停態（偏亮）、按下態（偏暗、內陰影增大）、禁用態（降低不透明度 50%、去除高光）。
• 圖示按鈕：形狀層替換為圖示向量，樣式同步套用。
• 批量輸出：使用「產生 > 圖片資源」或動作批次導出各尺寸 @1x/@2x/@3x。

關鍵技巧總結

• 水晶感核心 = 內部高光（斜面浮雕）+ 邊緣描邊 + 疊加多層透明高光形狀。
• 圖層樣式全程可編輯，顏色一鍵全局變更（修改「顏色疊加」即可）。
• 倒影蒙版漸層距離決定「桌面反射」真實感，通常為按鈕高度 1/3~1/2。

立即嘗試用品牌主色替換 #91d638，打造專屬設計系統按鈕組件！