青花瓷風格按鈕將中國傳統美學注入現代 UI，區別於濫用的韓風/蘋果水晶風。本教學完整拆解異形按鈕骨架、雙重內陰影雕琢釉面、多向高光系統、青花紋樣水墨暈染、表面釉光封層五大核心模塊，建立可擴展的青花瓷 UI 設計語言。

效果預覽

完整製作流程

一、異形按鈕骨架 (擺脫標準圓角矩形)

1. 圓角矩形 175×80px，填充 #D7DDDD，無筆觸。
2. Ctrl+Shift+G 取消群組 → 普通矢量路徑。
3. 鋼筆工具 + 部分選取工具 (白箭頭) 調節錨點/控制桿：底邊微內凹、側邊微外凸、頂部微平直，製造手工陶胚的不規則有機感。

二、釉面光澤與陰影雕琢 (雙重內陰影 + 投影)

• 內陰影 1 (邊緣厚釉)：** 距離 3px，模糊 5px，不透明度 40%，顏色 #8A8F9E，角度 -90° (頂部光源下邊緣積釉)。
• 內陰影 2 (中心凸起)：** 距離 0，模糊 8px，不透明度 25%，顏色 #6B7080，角度 90° (中心釉面鼓起陰影)。
• 投影：** 距離 2px，模糊 4px，不透明度 30%，角度 135°。
• ※ 濾鏡順序關鍵：內陰影 1 → 內陰影 2 → 投影，順序決定疊加邏輯。

三、多向高光系統 (四面環繞釉光)

• 底部高光：** 鋼筆繪製弧線，筆觸「柔化圓形」壓力漸變寬度 (路徑噴槍 → 去除/添加調節)，混合模式「疊加」。
• 頂部高光：** 複製底部高光 → 垂直翻轉 → 移至頂部 → 參數微調 (不透明度 60%，模糊 1px)。
• 右側高光：** 鋼筆+部分選取繪製細長三角區，填充線性漸層 (透明→白→透明)，混合模式「柔光」。
• 左側高光：** 右側高光複製 → 水平翻轉 → 置左。

四、青花紋樣：從基礎到精細的雙層暈染

基礎層 (水墨線條感)：**

• 裝飾字體 (如 `YY Old English Dingbats`) 輸入字符 (如 'M')，或導入矢量花紋。
• 填充「輪廓漸層」：色標模擬筆觸勢勢 — — 起筆重 (深藍 #1A2A4A) → 行筆輕 (中藍 #3A5A8A) → 收筆重 (深藍) → 空白 (透明)。調節漸層手柄貼合字形筆畫走向。

精細層 (墨暈擴散感)：**

• 複製基礎層 → 填充改實色 #7C83A7 → 添加「高斯模糊 2px」→ 移至基礎層下方 (Ctrl+↓)。
• 形成「線條銳利在上、墨暈擴散在下」的雙層水墨結構，極度逼真。

五、釉面封層 (關鍵細節)

• 複製右側高光 → Ctrl+Shift+↑ 置頂層 → 不透明度 80% → 為青花紋樣鍍上一層通透釉面保護光，統一整體質感層級。

元件化與擴展系統

• 存為「青花瓷按鈕基礎元件」，9 切片縮放區保護四角異形曲率。
• 屬性面板暴露：`按鈕寬高`、`青花字符/圖案`、`主色相` (青花/紅釉/綠釉/鬥彩)、`發光強度`。
• 衍生系列：圖標按鈕 (32px)、導航分頁 (寬度自適應)、表單提交鈕 (含四態)、裝飾標簽 (異形)。

源文件獲取

完整分層 PNG 源文件：點擊下載 (含所有可編輯圖層、漸層預設、元件定義)。