本教程詳細拆解 iPhone 風格電池圖標的繪製邏輯：金屬端蓋的質感構建、透明玻璃體的不透明蒙版技法、多層高光反射疊加，以及關鍵的「燃料圖層」設計，使電量長度與顏色（綠/黃/紅）可隨時調整，極適合 UI 圖標設計與狀態展示。

結構拆解

電池圖標由以下圖層群組成（自下而上）：

1. 左/右金屬端蓋：漸層+羽化+高光/反射疊加。
2. 透明玻璃體基底：白色填充 50% 透明度 + 不透明蒙版（控制邊緣透明度漸變）。
3. 玻璃體高光反射：白色形狀+羽化+不透明蒙版（多層疊加）。
4. 電量條：任意長度/顏色的漸層形狀，置於玻璃體基底之上、反射之下。
5. 陽極/陰極細節：橢圓疊加、混合模式（疊加/正片疊底）+ 羽化。

關鍵步驟詳解

金屬端蓋（以左側為例）

1. 鋼筆繪製端蓋輪廓，填充「90%灰-白-黑」線性漸層，1px 羽化，75% 透明度。
2. 複製向右移 1px，改漸層「80%灰-黑-80%灰」，100% 透明度，移除羽化 → 形成邊緣高光。
3. 鋼筆添加上下兩側高光條（白色，上 75%/下 25% 透明度，2px 羽化）。
4. 添加反射條：上反射（白-90%灰，1px 羽化），下反射（白-黑，1px 羽化，50% 透明度）。

透明玻璃體與不透明蒙版核心技法

1. 鋼筆繪製玻璃體主體（對稱技巧：畫半邊開放路徑 → 複製鏡像 → 連接錨點）。
2. 白色填充 50% 透明度。
3. 建立不透明蒙版：複製形狀置頂 → 100% 透明度 → 填充「左 50%灰、右 黑」線性漸層 → 選中兩形狀 → 透明度面板選單「建立不透明蒙版」。
4. 蒙版原理：黑=全透明、白=不透明、灰=半透明。此蒙版使玻璃體兩側邊緣自然淡出，適應任何背景。

多層高光反射疊加

重複「繪製白色形狀 → 設定透明度/羽化 → 複製建立蒙版（灰-黑漸層） → 設定混合模式（濾色/疊加）」流程，分別添加：

• 頂部大高光（75% 透明度，上 2px/下 3.5px 羽化）
• 中部細高光（40% 透明度，2px 羽化）
• 底部反射（50% 透明度，2px 羽化）
• 側面細長高光（50% 透明度，2px 羽化）

電量條與陽極/陰極

1. 右側端蓋：複製左側端蓋群組，「物件 > 變換 > 鏡像」水平翻轉移至右側。
2. 陽極：複製右端蓋置前 → Alt 縮放至適當大小 → Ctrl+Shift+[ 置底 → Ctrl+] 上移一層，精準卡在端蓋後。
3. 兩端橢圓：右白 25% 透明度，左黑 50% 透明度 + 疊加模式，雙方 3.5px 羽化。
4. 電量條：繪製矩形/圓角矩形，填充綠色漸層（或黃/紅），長度代表電量百分比。置於玻璃體基底之上、所有反射之下（Ctrl+Shift+] 置頂 → 向下移兩層）。
5. 電量條頂端高光：複製左側黑橢圓移至電量條頂緣，改白色填充。
6. 端蓋頂部高光：橢圓白色填充 + 羽化 + 低透明度。

不透明蒙版 vs 裁切蒙版

特性	不透明蒙版	裁切蒙版
控制方式	灰度值控制透明度（0-100%）	路徑形狀決定可見區域（二元）
邊緣效果	可實現柔和漸變邊緣	硬邊緣
適用場景	玻璃、煙霧、陰影、漸隱效果	照片裁切、形狀限定填色

小結

此電池圖標最大亮點在於「不透明蒙版」的大量運用，將透明材質的邊緣漸變、高光的疊加範圍完全程式化控制。電量條獨立圖層設計，配合符號面板或資料驅動，極易實現動態電量顯示。掌握此工作流，可快速產出各類 UI 狀態圖標（信號強度、音量、儲存空間等）。