一個好的下載按鈕，既要有「按下去」的誘惑力，又要在視覺上清楚表達「可互動」。這篇教學示範如何用圓角矩形、自定義形狀、圖層樣式與向量蒙版，在幾分鐘內完成一枚帶翹邊效果、立體質感十足的綠色下載按鈕。適合 UI 設計入門、圖層樣式練習、圖示設計基礎訓練。

完成效果預覽

Step 1：基底按鈕（綠色主體）

新建 400×200 px 白底文件。圓角矩形工具（半徑 6~8 px）拉出按鈕主體，填色 #6fcf1a（鮮綠）。圖層樣式：

• 倒角與浮雕：內部倒角、鑿刻硬度、深度 100%、大小 5 px、高光白 60%、陰影深綠 40%。
• 內發光：螢幕幕、淺綠 #a8f74c、大小 8 px。
• 漸變疊加：線性、90°、#6fcf1a → #4eb80e（上亮下暗）。
• 描邊：1 px、#3a8f0a（深綠邊框）。

Step 2：翹邊翻折效果（橙色三角）

1. Ctrl+J 複製主體圖層，色彩疊加改 #e69507（橙）。
2. 鋼筆工具勾勒右上角三角形選區（翹邊形狀）。
3. 加向量蒙版，Ctrl+I 反相蒙版，只露出三角翹邊。
4. 圖層樣式：倒角與浮雕（外部倒角、大小 3 px）、漸變疊加（橙→深橙）、描邊 1 px 深橙。

Step 3：翹邊背面（灰白紙張感）

新圖層，鋼筆勾勒翹邊背面三角形（比橙三角稍大），填 #d9d9d9。圖層樣式：內陰影（深灰、距離 2 px、大小 3 px）、漸變疊加（白→淺灰、90°）、描邊 1 px #bbb。

Step 4：按鈕內部裝飾條

新圖層畫兩條豎條：左 #a8f74c（亮綠）、右 #4eb80e（深綠）。加蒙版，黑色柔邊筆刷塗抹兩端漸隱，形成內凹燈帶感。

Step 5：下載箭頭（白色對號）

自定義形狀工具選「對號」或鋼筆手繪，白色填充。圖層樣式：倒角與浮雕（內部倒角、大小 3 px）、投影（距離 1 px、大小 2 px、黑 30%）。

Step 6：文字與整體投影

輸入「DOWNLOAD」或中文「下載」，字體粗黑、白色、加外發光（淺綠）。整組按鈕群組複製合併，垂直翻轉、高斯模糊、不透明度 15% 做投影。

圖層結構總覽（自下而上）

Group: Download Button
├── Shadow (合併複製+翻轉+模糊)
├── Text "DOWNLOAD" (外發光)
├── Check Icon (倒角+投影)
├── Deco Lines (蒙版漸隱)
├── Fold Back (灰三角+內陰影+漸變)
├── Fold Front (橙三角+蒙版+倒角+漸變)
└── Base Button (綠圓角矩形+完整圖層樣式)

可複用技巧包

• 向量蒙版做翹邊：形狀可隨時用直接選擇工具 (A) 拉動錨點微調，永不失真。
• 填充 0% + 圖層樣式：分離形狀與外觀，換色只改「色彩疊加」一項。
• 群組管理狀態：正常/懸停/按下 三狀態分群組，切換眼睛即可預覽。
• 匯出 SVG：形狀圖層可右鍵「匯出內容」為 SVG，前端直用無圖片請求。

掌握這套「形狀+樣式+蒙版」鐵三角，按鈕、標籤、卡片、彈窗等所有 UI 元件都能快速產出且易於維護。現在，把這枚按鈕放進你的設計系統元件庫吧！