步驟 2：描邊與文字 —— 資訊層

1. 文字工具 (T) 輸入按鈕文字（如 "DOWNLOAD"），字體粗體、白色、字距微調。
2. 文字圖層樣式：
   投影：距離 1 px、大小 1 px、不透明度 50%、黑色，文字立體感。
   內發光：可選，白色螢幕模式 20%，增強文字邊緣發光融合按鈕高光。
3. 若需按鈕外框額外描邊，可在按鈕形狀圖層再加一層描邊（疊加模式），但通常步驟 1 混合選項中的描邊已足夠。

步驟 3：鋼筆高光 —— 靈魂一筆，賦予真實曲面質感

1. 新建圖層置於按鈕形狀圖層上方，命名「Highlight」。
2. 鋼筆工具 (P) 繪製不規則曲線路徑：起點按鈕左上角、控制點拉出流暢貼合按鈕圓角弧度的貝塞爾曲線、終點按鈕右上角 1/3 處，模擬曲面頂部高光帶形狀。
3. 路徑轉選區：路徑面板右鍵 建立選區，羽化 0 px。
4. 填充白色：Alt+Delete（前景色白）。
5. 調整不透明度：圖層不透明度設 30%~50%，混合模式 螢幕 或 疊加。
6. 可選：Ctrl+T 微調高光形狀長寬、位置，濾鏡 > 模糊 > 高斯模糊 0.5~1 px 軟化邊緣。

批量生產與組件庫建立策略

色系擴展：色相/飽和度調整圖層剪貼法

1. 按鈕基礎組件（形狀圖層+樣式）建立完成後，群組命名「Btn_Base」。
2. 群組上方新建 色相/飽和度調整圖層，右鍵選擇 建立剪貼蒙版。
3. 拖動「色相」滑桿即可瞬間產出紅/藍/橙/紫等全色系按鈕，光影結構、高光邏輯 100% 保持一致。
4. 每個色系另存為獨立智慧物件或圖層組預設。

狀態擴展：圖層合成（Layer Comps）管理

• 使用 圖層合成面板 記錄：Normal、Hover、Active、Disabled、Focus 等狀態的圖層可見度/樣式/位置組合。
• 一鍵切換預覽、批量匯出各狀態資產。

匯出規範與前端協作

• 命名規範：`btn_primary_default@2x.png`、`btn_primary_hover@2x.png`...
• 提供 設計規格文檔：尺寸、圓角、間距、色值、狀態變化邏輯、動畫緩動曲線。
• 推薦前端以 CSS 實現：`background: linear-gradient(...)` + `box-shadow` + `::before` 高光偽元素，僅在極複雜高光形狀時使用切圖。

設計原理深度解析

避坑指南

• ❌ 高光過長/過直：高光帶不應超過按鈕寬度 60%，必須貼合圓角曲率，直線高光會破壞曲面真實感。
• ❌ 漸變色停過多/雜亂：三色停足矣，過多色停產生「髒」感。
• ❌ 描邊過重：1 px 足矣，過粗顯得廉價。
• ❌ 忽略無障礙：文字與按鈕背景對比度必須 ≥ 4.5:1（WCAG AA），必要時在文字後加半透明深色遮罩。

三步成型、邏輯清晰、極易擴展。掌握這套「向量形狀+圖層樣式+鋼筆高光」核心工作流，你就能在幾分鐘內產出媲美 Dribbble 熱門作品的專業級按鈕組件庫。不再為找不到合適按鈕素材發愁，一切 DIY，設計系統從這裡開始！