只需一張靜態照片 + Photoshop 分層 + After Effects 3D 空間動畫，即可創作出令人驚艷的「裸眼 3D」動態視覺效果，無需 3D 建模、無需多角度拍攝，極低門檻實現高傳播力視覺內容。本教學授權發布自攝影師 UPLUSKY，手把手拆解關鍵步驟。

效果展示

成品 GIF 展示：人物主體從背景中分離，隨相機視角微移產生視差，呈現真實立體空間感。

核心原理

視差動畫：將 2D 圖像按深度分層(前景/中景/背景) → 在 AE 3D 空間按深度排列(Z 軸位置) → 添加虛擬相機微動畫(位置/旋轉微小位移) → 前景位移大、背景位移小，產生立體視差。

Photoshop 分層關鍵步驟（截圖演示）

PS 分層標準化流程

1. 主體抠圖：選擇與遮罩/通道/筆刷精確抠出主體(人物/前景物)，輸出帶透明通道 PNG
2. 背景修補：主體移除後的空白區域，用內容感知填充/仿製圖章/修復筆刷修補完整
3. 中景分離：中景物體(植物/建築/傢俱等)獨立圖層，同法抠圖+背景修補
4. 遠景/天空：作為最底層背景板
5. 圖層命名規範：`FG_主體`、`MG_樹木`、`BG_天空` 等，導入 AE 即時可識別
6. 存檔：PSD 保留圖層結構，或導出各圖層 PNG 序列

After Effects 動畫製作要點

1. 導入 PSD 保留圖層大小 → 啟用 3D 圖層開關
2. Z 軸位置分配：BG 0px、MG -200~-500px、FG -800~-1200px(數值視構圖深度定)
3. 新建相機(28-35mm 廣角) → 關鍵幀動畫：位置微移(±50-100px)、旋轉微動(±2-5°)、時間 2-4 秒
4. 景深效果：相機啟用景深 → 聚焦距離鎖定主體 → 光圈 F2.8-F4，前後景自然虛化
5. 動態模糊開啟，輸出 GIF/MP4/WebM

更多優秀案例賞析

避坑指南與進階方向

• ❌ 分層不乾淨 → 邊緣殘留/透視錯亂 → 破壞立體感
• ❌ 相機動幅過大 → 破綻暴露(背景拉伸、邊緣露餡)
• ❌ 層級過少(只有前/後) → 視差層次貧弱
• ✅ 3-5 層深度分層 + 微幅相機動畫 = 專業級裸眼 3D
• 🚀 進階：結合 AE 粒子系統添加飛塵/光斑/落葉等動態粒子增強沉浸感
• 🚀 進階：將分層導入 WebGL/Three.js 製作網頁端互動裸眼 3D

掌握「PS 精細分層 + AE 3D 視差動畫」這一技能組合，讓你的靜態作品瞬間擁有動態傳播力，適用於社交媒體、電商展示、作品集、品牌宣傳等多元場景。