圖標設計是「觀察 → 拆解 → 分層建模 → 樣式堆疊」的系統工程。本教程以兩組風格迥異的圖標為例，示範如何用形狀圖層、圖層樣式、蒙版、向量編輯構建可擴展的圖標系統。

案例一：卡通風 —— LYNN Rabbit（聯系人圖標）

關鍵詞：柔和漸變、豐富層次、手繪質感

1. 新建 800×600 px 文件，背景填 #282828 深灰便於觀察。
2. 外圓環：橢圓工具繪 172×170 px 橢圓「yuan」，漸變疊加 #feb5d0 → #ff7fae 90°。複製為「yuan_di」填 #c74a78 置底做厚度。
3. 高光/邊緣細分：複製「yuan」→「yuan_ban」白色 30% 不透明度 + 圓形蒙版露出上半高光；複製「yuan_bian01/02」偏移 1-2px + 反向蒙版做邊緣高光/陰影。
4. 內圓：複製「yuan」→「nei_yuan」縮小 80% → 樣式：描邊 3px 內部 #d85082、內陰影 #c33c6d 70% 120° 距離 5 大小 8、漸變疊加 #feb8d2 → #ff80af 90°。
5. 內圓細分：同法製作「nei_yuan_ban」（白 10% 套用 yuan_ban 蒙版）、「nei_yuan_bian」（偏移 2px 反向蒙版）、「nei_yuan2」（縮小 90% 白 5%）。
6. 兔子頭部：橢圓工具畫頭、耳朵，鋼筆工具繪五官，圖層樣式統一處理描邊/陰影/高光，耳朵投影單獨圖層動感模糊。

案例二：微扁平風 —— FLEXAGON（短信圖標）

關鍵詞：幾何理性、漸變統一、極簡細節

1. 底座：圓角矩形 120×120px R20「di」，描邊 1px 內部漸變 #157acf → #78bbff 90°，漸變疊加 #1479cf → #3a9bff 90°。
2. 對話框主體：正圓「message」填 #9eceff，鋼筆工具「合併形狀」畫三角尖角。樣式：投影 #789bc0 120° 距離 1px 大小 1px。
3. 層次疊加：複製「message_ceng」填 #4da2f9 上移 3px 反向蒙版；複製「message_bian」填 #c7e3ff 上移 1px 反向蒙版，構建頂面/側面光影。
4. 整體投影：載入「message」選區 → 填 #134573 → 動感模糊 90° 距離 7 → 高斯模糊 3px → 不透明度 50% 下移 5px。
5. 笑臉：正圓填 #0675d5，文字工具輸入「)」同色，組合成笑臉，置中對齊。

方法論總結

• 分層原則：每個視覺層次（底色、高光、陰影、邊緣、投影、裝飾）獨立圖層/圖層組，命名規範。
• 樣式復用：建立「圖層樣式預設」或「智能物件模板」，同風格圖標一鍵套用。
• 向量優先：盡可能用形狀圖層+樣式，保留無限縮放與參數修改能力。
• 觀察真實：即使是扁平化，光影邏輯（主光源、環境反射、接觸陰影）不可缺失。

同一套方法論，驅動兩種風格輸出，這就是「系統化圖標設計」的威力。