長投影（Long Shadow）與斜投影 是扁平化設計 2.0 時代的標誌性視覺語言，通過 45° 方向的層疊投影營造「懸浮感」與「空間深度」。本教程拆解「矢量形狀 → 路徑疊加 → 矢量蒙版 → 圖層樣式」的純矢量非破壞製作流程，輸出可無限縮放的矢量長投影資產。

核心原理：路徑疊加模擬光線投射

長投影本質是「物體在 45° 光源下的投影被拉長」。在矢量層面，通過「複製路徑 → 位移疊加 → 合併路徑 → 矢量蒙版裁切 → 圖層樣式著色」實現，全程無光柵化，保持矢量屬性。

標準化製作流程

1. 繪製基礎圖形並編組： 使用形狀工具繪製 ICON 主體（星星、字母、幾何圖形等），Ctrl+G 編組命名「主體」。
2. 居中對齊與投影層準備： 將主體與背板（圓形/方形底板）水平垂直居中對齊。複製主體組，重命名「長投影層」，置於主體組下方。

3. 路徑疊加複製（核心步驟）：
   • 進入「長投影層」，選中「路徑選取工具」(A) 選中所有路徑。
   • Ctrl+C 複製，Ctrl+V 貼上，按 ↓+→ (或 Shift+↓+Shift+→) 位移 1-2px。
   • 重複 Ctrl+V + 位移，疊加 30-50 次（視投影長度），形成連續路徑堆疊。
4. 合併路徑與矢量蒙版：
   • 全選所有疊加路徑，右鍵「合併形狀」/ 選項欄「合併形狀區域」，合併為單一複合路徑。
   • 為「長投影層」添加「矢量蒙版」，將合併路徑作為蒙版形狀，裁切多餘投影區域。
5. 圖層樣式著色：
   • 雙擊「長投影層」開啟樣式，勾選「顏色疊加」，顏色設為深灰/品牌深色 (#333333 或品牌色深色值)，混合模式「正常」，不透明度 100%。
   • 可選：添加「漸變疊加」模擬投影漸變虛實（近實遠虛）。

進階變體與自動化

變體類型	實現方法
多色長投影	投影層複製多份，各套不同「顏色疊加」，蒙版漸變遮罩控制顏色分布
斷續/虛線長投影	路徑疊加時間隔複製（如每 3 步複製一次），或蒙版添加條紋圖案
動作錄製批量化	將步驟 3-5 錄製為動作，配合「路徑選取」腳本，一鍵生成任意形狀長投影
導出 SVG 矢量	圖層右鍵「匯出為 SVG」，保留路徑與樣式，Web 端無限縮放

避坑指南

• ❌ 直接用「投影」圖層樣式拉大距離 → ✅ 圖層樣式投影無法產生「實體疊加感」，邊緣會虛化失真。
• ❌ 光柵化圖層再變換 → ✅ 全程保持形狀圖層/路徑矢量屬性，縮放不失真。
• ❌ 投影過長超出畫布 → ✅ 矢量蒙版自動裁切，或預留畫布邊距 2 倍投影長度。
• ❌ 投影顏色過淺/過飽和 → ✅ 投影色 = 背景色減淡 30-50% 亮度，或品牌色降飽和度 60%+。

設計系統集成建議

將「長投影層結構」封裝為智能物件組件：

組件結構：
- 主體組 (可替換形狀)
- 長投影層 (自動根據主體路徑生成，參數化：長度、顏色、角度)
- 背板層 (可選)
使用時：雙擊智能物件 → 替換主體形狀 → 存檔 → 主文檔自動更新投影

一次封裝，終身受益。讓長投影成為你設計系統中的標準化視覺組件，而非一次性手工產物。