Photoshop 內建幀動畫功能強大卻常被忽視。本教學以淘寶美工實戰需求為例，詳細講解如何利用路徑描邊、圖層蒙版位移、圖層樣式外發光、幀動畫時間軸關鍵幀插值，製作出流光沿曲線流動的動態特效，完美襯托模特身體曲線。掌握此技法，可廣泛應用於電商詳情頁、Banner 廣告、直播間裝飾、UI 加載動畫等場景，讓靜態設計動起來。

動態效果預覽

靜態構圖效果：

素材原圖：

人物抠圖與背景營造

1. 開啟素材（白背景模特圖）。使用魔棒工具 (W) 快速選取白背景，反選 (Ctrl+Shift+I) 獲得人物選區。執行 選取 > 選取和遮罩 (Ctrl+Alt+R)，半徑 3px，平滑 5，羽化 1px，對比度 30%，移動邊緣 -10%，輸出至「新圖層帶圖層蒙版」，獲得精細抠圖「背景副本」。

2. 新建圖層 1 置於人物下方。選擇漸層工具 (G)，模式「菱形漸層」，編輯器設定黑 #000000 (位置 0%) 到白 #ffffff (位置 100%)，黑色佔比 70%。從畫布中心向左下角拖拽，形成聚光燈狀漸層背景，黑色主調襯托白色流光。

3. 檢查人物邊緣白邊：用 25% 曝光度「加深工具」 (O) 塗抹邊緣，或執行 圖層 > 修整 > 去除邊緣 消除雜邊。

流光曲線繪製與雙層發光結構

1. 新建圖層 2。鋼筆工具 (P) 勾勒貼合模特身體曲線的貝塞爾曲線：頂部點擊起點，腰部添加控制點拖拽手柄，臀部再添加控制點，形成優雅 S 型曲線。

2. 切換畫筆工具 (B)：大小 5px，硬度 50%，前景色白。開啟路徑面板，右鍵「工作路徑」選「描邊路徑」，工具選「畫筆」，勾選「模擬壓力」，獲得首尾尖細中間粗的動態線條。

3. 複製圖層 2 為「圖層 2 副本」。雙擊添加「外發光」圖層樣式：

圖層	外發光顏色	不透明度	擴展	大小	用途
圖層 2 副本	白 #ffffff	100%	0%	4px	核心高亮流光帶
圖層 2	紫 #cc66ff	100%	3%	3px	氛圍色彩暈染

流光動畫核心：蒙版位移技法

1. 給「圖層 2 副本」添加黑色圖層蒙版 (Alt+點擊蒙版圖示)。選中蒙版，畫筆工具：大小 22px，硬度 50%，前景色白。按住 Shift 在畫布右上方拖出一條橫跨畫面的白色橫線（蒙版上可見，畫面上被遮罩隱藏）。

2. 關鍵步驟：點擊蒙版與圖層間的鏈接圖示解除鏈接。這樣移動蒙版時不會移動圖層像素，實現「光帶固定、遮罩滑動」的流光效果。

幀動畫製作流程

1. 開啟 視窗 > 時間軸，點擊「建立影格動畫」。第一幀：選中「圖層 2 副本」蒙版，白線位於曲線起點上方（未顯示流光）。幀延遲 0.1 秒。

2. 點擊「複製選定影格」建立第 2 幀。選中第 2 幀，移動工具 (V) 向下拖動蒙版，白線滑過曲線全程至終點下方。此過程中畫面實時顯示流光掃過效果。

3. 按 Ctrl 全選兩幀，設定幀延遲 0.1 秒，循環「永遠」。點擊播放預覽，流光順滑循環。

4. 進階：點擊幀面板選單「補間」，在兩關鍵幀間插入 5-10 幀過渡，獲得更絲滑動畫。導出 檔案 > 匯出 > 存儲為 Web 所用格式 選 GIF 或 MP4（需 CC 版本）。

實戰應用拓展

• 多條流光：複製「圖層 2 副本」組，蒙版白線錯開起始位置、調整寬度顏色，形成多條平行流光。
• 粒子拖尾：在流光頭部添加「外發光」+「散射」畫筆繪製粒子，蒙版同步位移。
• 文字描邊動畫：將路徑替換為文字工作路徑，同樣蒙版位移實現寫字動畫。
• SVG/Lottie 輸出：配合 Bodymovin 外掛導出 JSON，實現網頁/APP 無損矢量動畫。