扁平風格圖標設計的核心在於幾何構形、布爾運算、蒙版裁切、長投影四大基礎操作的組合運用。本教程以「行星」與「雷達」兩枚圖標為例，演示如何用純矢量形狀圖層 (Shape Layers) 構建可無限縮放、易於換色、便於動效拆分的專業級圖標資產。

一、行星圖標 — 6 步構建

第 1 步：基礎幾何與紋理條紋

• 橢圓工具 (U) 按 Shift 繪製正圓 → 填充淡黃 #ffe8a0 (行星主體)。
• 矩形工具 (U) 繪製多條寬度不一、顏色不同 (橙/紅/黃/褐) 的長條矩形 → Ctrl+G 群組命名「Stripes」 → Ctrl+T 旋轉 -15° → 模擬行星自轉帶來的條紋傾斜感。

第 2 步：蒙版裁切條紋

• 選中行星圓形圖層 → Ctrl+點擊縮略圖載入選區 → 選中「Stripes」群組 → 點擊圖層面板底部「添加圖層蒙版」圖示 → 條紋自動被行星輪廓裁切。

第 3 步：光照感構建 — 交集運算

• 複製行星圓形圖層 → 向左上移動 8-10px → 選中兩圖層 → 頂部選項欄選「交集形狀區域」 (Intersect Shape Areas) → 產生新月形交集區。
• 該交集圖層模式改為「濾色」/「篩選」 (Screen)，不透明度 40% → 形成行星受光側高光帶。

第 4 步：行星環 — 減去運算

• 橢圓工具繪製扁平橢圓 → 選項欄選「減去頂層形狀」 (Subtract Front Shape) → 在環內部再繪製較小橢圓 → 形成環狀形狀。

第 5 步：隱藏行星背面的環段

• 繪製橢圓覆蓋行星上半部 + 環上部 → 選中該橢圓圖層與行星圓形圖層 → 右鍵選「交集形狀區域」 → 獲得行星上半部「蓋子」形狀。
• 右鍵「蓋子」圖層 →「建立選區」 → 選擇→反向選區 (Ctrl+Shift+I) → 選中環圖層 → 添加圖層蒙版 → 行星背面環段自動隱藏。

第 6 步：長投影與裝飾星星

• 參考《長投影圖標設計規範》：複製整組圖層 → 合併 → 填充深色 → 自由變換 45° 向下右縮放 50% → 不透明度 20% → 模式「正片疊底」。
• 添加 3-5 顆微小五角星點綴 → 完成。

二、雷達圖標 — 4 步構建

第 1 步：掃描面與基座

• 橢圓工具繪製黑色正圓 (僅作參考，最終隱藏) → 矩形工具繪製紅色長方形覆蓋圓右半側 → 添加蒙版隱藏左半側 → 刪除黑色參考圓。
• 複製紅色半圓 → 填充深紅 #8b0000 → 縮放 80% 置於底部 → 形成掃描面厚度感。

第 2 步：天線組件

• 多邊形工具 (邊數 3) 繪製三角形 → 填充淺灰 #cccccc → 縮放定位於掃描面頂端中心。
• 橢圓工具繪製小圓置於三角形頂點 → 同色淺灰 → 天線完成。

第 3 步：整體旋轉與基座補充

• 選中所有雷達圖層 → Ctrl+T 旋轉 -30° (或任意角度) → 增添動態感。
• 矩形/圓角矩形繪製底座支架 → 置於最底層。

第 4 步：長投影與星星 — 統一視覺語言

• 同行星圖標長投影製作流程 → 添加裝飾星星 → 兩枚圖標風格統一，可作為同一套圖標系統使用。

專業圖標製作工作流總結

環節	關鍵操作	PS 具體工具/指令	可復用性
幾何構形	基本形狀組合 (加/減/交/排)	形狀工具選項欄：合併/減去/交集/排除	⭐⭐⭐⭐⭐ 所有圖標通用
邊緣裁切	參考形狀載入選區 → 目標群組加蒙版	Ctrl+點擊縮略圖載入選區 → 添加蒙版	⭐⭐⭐⭐⭐ 所有需邊界約束場景
光影表達	形狀交集/疊加模式模擬高光陰影	交集形狀區域 + 模式「篩選/柔光」+ 低不透明度	⭐⭐⭐⭐ 扁平風核心表現手法
長投影標準化	45° 方向、50% 縮放、20% 不透明度、正片疊底	動作錄製一鍵生成	⭐⭐⭐⭐⭐ 設計系統統一規範
導出規範	SVG (矢量) + PNG @1x/2x/3x (位圖)	文件→匯出→匯出為 → 選 SVG + 多尺寸 PNG	⭐⭐⭐⭐⭐ 前端/移動端直用

避坑提醒

1. ❌ 直接用畫筆畫條紋/高光 → 位圖化、不可縮放、難修改。✅ 全程矢量形狀圖層。
2. ❌ 長投影方向/長度/不透明度不統一 → 圖標系統感崩塌。✅ 制定《圖標設計規範文檔》強制執行。
3. ❌ 顏色硬編碼在形狀填充 → 換膚需逐層改。✅ 關鍵顏色做成「色彩樣式」或「填充層+剪貼」，一鍵換色。

這兩枚圖標從零到完成各約 15 分鐘，核心耗時在「形狀布爾運算邏輯構思」與「長投影參數微調」。建立個人/團隊《扁平圖標組件庫》 (含基礎形狀、長投影動作、色彩樣式、導出腳本)，新圖標產出效率可提升 5 倍以上。