圖標設計的核心不在「畫」，而在「邏輯構建」。本教程以帆船圖標為例，演示如何用形狀圖層（矢量）、圖層模式、漸變疊加、剪貼蒙版，構建可無限縮放、易於修改、質感豐富的扁平化風格圖標。

第一步：圖層邏輯規劃（動筆前必做）

將圖標拆解為獨立邏輯組件，每組件對應一個圖層組：

• Group: Hull（船身）— 底色、陰影、高光、紋理
• Group: Mast（桅桿）— 桿身、橫桁、索具
• Group: Sails（帆）— 左帆、右帆、桅頂旗幟
• Group: Details（細節）— 舷窗、甲板設施、水面倒影
• Group: Background（背景）— 圓形底板、長投影、裝飾元素

第二步：鋼筆形狀圖層建立基礎幾何

• 鋼筆工具 (P) 選項欄選 「形狀」 模式（非路徑、非像素）。
• 分組件繪製閉合路徑，每個形狀自動生成矢量填充圖層，顏色可隨時雙擊修改，邊緣永不鋸齒。
• 複雜曲線（船身艏/艉、帆曲面）採用「少錨點、長控制桿」原則，保證曲線流暢。

第三步：圖層樣式與漸變賦予質感（核心）

避免用畫筆手繪陰影高光，改用非破壞圖層樣式：

• 船身：漸變疊加（線性/徑向，深淺色交替模擬曲面）+ 內陰影（底部厚度）+ 描邊（鋼質邊緣）。
• 帆：漸變疊加（徑向，中心亮邊緣暗模擬風鼓張力）+ 圖層模式「疊加/柔光」疊加紋理圖案（帆布紋）。
• 桅桿：斜面與浮雕（內部凹陷/外部凸起模擬圓柱體）+ 投影（落地投影）。
• 旗幟：路徑變形（編輯 > 變形 > 扭曲）製造飄動感，外發光增強邊緣輕盈感。

第四步：合體、背景包裝、導出

1. 各組件調整完成後，組內圖層合併（Ctrl+E），組之間保持獨立便於後續調整。
2. 背景組：圓形底板（漸變填充）+ 長投影（複製全圖標組，合併、填黑、Ctrl+T 45° 變換、高斯模糊、不透明度 30%）。
3. 整體色調微調：頂層新建「色相/飽和度」「曲線」調整圖層統一風格。
4. 導出：文件 > 導出 > 導出為，勾選 SVG（矢量）、PNG 多尺寸（1x/2x/3x），完成交付。

設計師心法

「從整體出發，再到局部；從邏輯構建，再到質感疊加；從矢量核心，再到像素潤色。」這套方法論適用於所有扁平化/拟物化/2.5D 風格圖標設計。