水滴、雨滴是 UI 圖標、潤澤產品包裝、夏季主題視覺的高頻元素。本教程專為 AI 初學者設計，僅使用基本形狀工具、漸變、外觀面板與簡單效果，無需繪圖天賦，30 分鐘即可完成一顆擁有高光、折射、倒影、水感質感的雨滴按鈕，並將其存為圖形樣式一鍵複用。

最終效果預覽

核心知識點

• 橢圓工具 + 直接選取工具調整水滴輪廓
• 漸變面板：徑向/線性漸變模擬體積與透光
• 外觀面板：多重填色疊加（底色、高光、倒影、邊緣高光）
• 效果 > 風格化 > 內發光/外發光：柔化邊緣、增強立體
• 圖形樣式面板：儲存為可複用樣式

分步製作流程

1. 繪製水滴基礎輪廓

橢圓工具 (L) 按 Shift 畫正圓。直接選取工具 (A) 選取頂端錨點，向上拖動；按 Convert Anchor Point 工具 (Shift+C) 點擊該錨點轉為尖角，再向下微調雙控制桿形成流暢水滴尖。整體比例約 1:1.3（寬:高）。

2. 基底漸變：體積與透光

開啟外觀面板，添加第一個填色：徑向漸變。色標設定（由內而外）：
位置 0%：RGB (200, 230, 255) — 高光核心
位置 40%：RGB (100, 180, 240) — 主體色
位置 100%：RGB (40, 120, 200) — 陰影邊緣
用漸變工具 (G) 將漸變中心偏移至左上 1/3 處，模擬左上光源。

3. 疊加高光與倒影（外觀面板多重填色）

添加第二個填色（置於基底之上）：線性漸變，角度 -90°。
色標：0% 白色 (不透明度 60%) → 50% 白色 (0%) → 100% 白色 (0%)。
效果 > 路徑 > 偏移路徑：-3px（向內縮）。混合模式：螢幕。
→ 形成頂部明亮高光帶。

添加第三個填色（最上層）：徑向漸變。
色標：0% 白色 (80%) → 30% 白色 (0%)。
漸變中心置於左上邊緣內側。混合模式：螢幕。
→ 形成銳利高光點（折射點）。

添加第四個填色（置於基底與高光之間）：線性漸變，角度 90°。
色標：0% 白色 (15%) → 100% 白色 (0%)。
偏移路徑：+2px（向外擴）。混合模式：正片疊底。
→ 形成底部倒影/透光帶。

4. 邊緣描邊與細節潤飾

外觀面板添加描邊：0.5pt，顏色 RGB (80, 160, 220)，混合模式正片疊底，對齊內側。
效果 > 風格化 > 內發光：模式正片疊底，顏色深藍，不透明度 30%，模糊 2px，邊緣。
效果 > 風格化 > 外發光：模式螢幕，顏色白，不透明度 20%，模糊 3px。（視需求二選一或疊加）

5. 存為圖形樣式，一鍵複用

選取水滴物件，開啟圖形樣式面板，點選「新建圖形樣式」。命名為「水滴按鈕_藍」。之後繪製任意形狀（圓、方、星、文字輪廓），點一下樣式即套用相同水感質感。

進階變化與應用

• 色系變體： 複製樣式，編輯各填色漸變色標為綠系（葉露）、粉系（唇釉）、金系（蜜糖）。
• 按鈕狀態： 正常/懸停/按下三態，調整高光強度、整體亮度、陰影深度。
• 群組應用： 多顆水滴組合成「水珠紋理背景」、「下雨動畫關鍵幀」、「飲料罐冷凝水效果」。