教程簡介

金屬質感按鈕能為網頁介面帶來高級專業的視覺體驗。本教程將詳細講解如何利用圖層樣式打造擁有豐富高光、倒影與裝飾元素的紅色金屬按鈕，適合應用於 CTA 按鈕、下載鈕等關鍵交互元素。

成果展示

製作步驟詳解

第一階段：按鈕主體構建

1. 新建文件 500×300px，背景填白。
2. 圓角矩形工具（半徑 30px）繪製主體形狀，填充 #D61D23（紅色系）。
3. 圖層樣式設定：
   • 內陰影：混合模式正片疊底，不透明度 50%，角度 90°，距離 3px，大小 5px —— 模擬邊緣內凹。
   • 漸變疊加：線性漸變，角度 90°，從 #E83E42（頂）到 #A0181D（底），不透明度 100% —— 建立金屬豎向光影。

第二階段：倒影效果製作

1. 複製主體圖層，新建圖層合併（Ctrl+E）取得含樣式的像素圖層。
2. 編輯→變換→垂直翻轉，移至主體下方並對齊底部。
3. 進入快速蒙版模式（Q），黑白漸變由上而下拉出（白在上、黑在下），返回標準模式獲得選區。
4. 按 Delete 刪除選區內像素，取消選區（Ctrl+D），圖層不透明度降至 30%。

第三階段：鋒利高光條

1. 圓角矩形工具（半徑 80px）繪製扁橢圓形，填白，置於主體上方。
2. 圖層→柵格化→形狀，再次進入快速蒙版，黑白漸變由左至右拉出（左白右黑）。
3. 返回標準模式刪除選區，取消選區，圖層混合模式改為「疊加」，不透明度 60%。

第四階段：裝飾圓環與圖示嵌入

1. 橢圓工具按 Shift 繪製正圓，置於按鈕中心偏左。
2. 圖層樣式：
   • 內陰影：角度 -90°，距離 2px，大小 3px。
   • 內發光：混合模式線性減淡，顏色白，不透明度 50%，大小 5px。
   • 漸變疊加：徑向，從 #FFFFFF 到 #CCCCCC。
   • 描邊：1px，顏色 #999999，位置內部。
3. 引入地球/圖示素材，去色，混合模式「疊加」，銳化工具增強邊緒。

第五階段：文字與最終調整

橫排文字工具輸入按鈕文案（如 "DOWNLOAD"），字體 Segoe UI Bold，白色，添加投影（距離 1px，大小 2px）與內陰影增強立體。整體圖層組命名整理，輸出 PNG 與 SVG 供前端使用。

關鍵知識點回顧

• 金屬感核心在於「漸變疊加」的角度與色停控制，模擬環境反光條帶。
• 倒影製作利用「快速蒙版 + 漸變」實現非破壞性淡出，比圖層蒙版更直觀。
• 高光條使用「疊加」模式而非「正常」，能保留底層質感同時提亮。
• 所有形狀圖層保持向量屬性，支援無損縮放與後續修改。

掌握此工作流後，你可以輕鬆衍生藍色、金色、鈦灰等多種金屬按鈕風格，快速構建統一設計語言的 UI 組件庫。立即動手練習，提升你的網頁按鈕設計質感！