想畫一個像 iOS 狀態欄那樣、電量顏色/長度可隨意調整、擁有金屬質感與玻璃通透感的電池圖標嗎？本教學將展示 22 步精細流程，核心技術點：**不透明度蒙版控制透明度漸變 (而非破壞性擦除)、多層羽化白色高光疊加模擬玻璃反射、金屬帽鏡像複製複用**。完成後，僅需修改電量路徑長度與漸變色標，即可輸出任意電量狀態。

畫布與基礎設定

• 新建 600×400 px、RGB、黑色背景矩形置底鎖定。
• 鍵盤增量設 1 px (偏好設定 > 一般)，配合方向鍵像素級微移。

左側金屬負極帽 (Step 1-4)

1. 主體：鋼筆勾勒帽狀路徑，填 90%灰/白/黑線性漸變，羽化 1px、不透明度 75%。
2. 邊緣高光：複製前置 (Ctrl+F)，右移 1px，漸變改 80%灰/黑/80%灰，不透明度 100%，移除羽化。
3. 側面高光：鋼筆畫兩側細長三角，白色填色，上 75%/下 25% 不透明度，羽化 2px。
4. 反射條：鋼筆畫頂部/底部反射形狀，白→90%灰 / 白→黑漸變，羽化 1px，透明度 50%。

中央透明玻璃體 (Step 5-18) —— 核心：不透明度蒙版

1. 玻璃主體：鋼筆畫半側開放路徑 → 複製鏡像合併 (確保對稱) → 白色填充 50% 透明度。
2. 建立蒙版：複製主體貼前 (Ctrl+F)，不透明度 100%、移除羽化，填「左 50%灰 → 右 黑」線性漸變 (左半透、右不透)。選取主體+蒙版物件 → 透明度面板選單「建立不透明度蒙版」。
3. 頂部高光帶：白色橢圓形、75% 透明度、羽化 2px。同樣建立蒙版 (漸變 70%灰→黑) 限制高光範圍。
4. 底部反射：白色、50% 透明度、羽化 2px，蒙版 (15%灰→85%灰)，混合模式「濾色」。
5. 中段高光：白色、40% 透明度、羽化 2px，蒙版 (50%灰→黑)。
6. 頂部強高光：白色、50% 透明度、羽化 2px，蒙版 (白→黑)，混合模式正常。

蒙版邏輯解析：蒙版中白 = 顯示、黑 = 隱藏、灰 = 半透明。用漸變蒙版控制高光/反射的空間衰減，比手動擦除具備「非破壞、可隨時調整漸變停點位置/顏色」的優勢。改背景顏色時玻璃通透效果自動適應。

右側金屬正極帽與電量條 (Step 19-22)

1. 鏡像複製左帽：選取左帽全組 → 物件 > 變換 > 鏡像 > 垂直軸 > 複製 → 拖動至右側對齊。
2. 正極凸點：複製左帽頂部橢圓縮小置中，置於金屬帽圖層之後、玻璃體之前 (Ctrl+[ / Ctrl+])。
3. 兩端電極面：兩側各一橢圓，右白 25% 疊加 / 左黑 50% 正片疊底，羽化 3.5px。
4. 電量條：在玻璃體蒙版內繪製矩形路徑，長度 = 電量比例，填綠/紅/黃漸變。修改長度與色標即可切換狀態。

專案結構整理建議

• 圖層面板建立：「背景」「左金屬帽」「玻璃體組 (含所有蒙版高光)」「右金屬帽」「電量條」「電極面」群組。
• 將「玻璃體組」存為符號，拖入符號面板，未來複用只需拖放實例、修改電量條長度/顏色。
• 導出 PNG 時勾選「美術板範圍」、300 ppi、透明背景。