效果預覽

將靜態雲霧素材通過幀動畫技術，製作出自然流動、循環無縫的 GIF 動態雲霧效果，適用於網頁 Hero 區、APP 啟動頁、數位標牌、影片轉場素材等場景。

素材準備與靜態合成

1. 基礎場景搭建

打開背景素材圖（風景/城市/抽象紋理）。新建圖層繪製選區填色（如深藍漸變）作為夜空基調。添加鏡頭暗角（濾鏡 > 校正 > 鏡頭校正 > 自訂 > 暗角量值 -50），增強畫面聚焦感。添加標題文字，圖層結構自下而上：背景 → 暗角 → 文字。

2. 雲霧素材生成

新建文檔（同尺寸）。背景填黑，執行多次 濾鏡 > 渲染 > 分層雲彩（Ctrl+F 重複）直至滿意。若白雲過多，Ctrl+M 曲線壓暗中間調。將雲霧圖層拖入主文檔，混合模式改「濾色」（Screen），黑色背景透明，僅保留白雲。移動圖層使左側貼齊畫布邊緣（為循環無縫做準備）。

動畫面板操作流程

1. 開啟時間軸/幀動畫面板

選單「視窗 > 時間軸」（CC 版）或「視窗 > 動畫」（CS6 及舊版），點擊「建立幀動畫」。

2. 建立關鍵幀與位移

1. 第 1 幀：雲霧圖層位於初始位置（左側貼齊），延遲 0.2 秒。
2. 點擊「複製選中幀」新建第 2 幀。選中第 2 幀，選中雲霧圖層，按 V 移動工具，按住 Shift + → 向右移動約畫布寬度的 1/3-1/2。

3. 添加補間幀實現平滑過渡

選中第 1 幀與第 2 幀（按 Shift 點擊），點擊面板選單「補間」，設置幀數 5-10、勾選「位置」，PS 自動生成中間位移幀，形成平滑漂移動畫。

4. 循環無縫處理（關鍵）

為實現無縫循環，最後一幀雲霧位置應與第 1 幀在視覺上銜接。兩種方案：

• 方案 A（推薦）：雲霧素材寬度 = 畫布寬度 × 2，初始左對齊，終態右對齊，中間補間，循環完美。
• 方案 B：最後一幀手動移動至視覺銜接位置，刪除多餘幀，設置「永遠」循環。

5. 導出 GIF 優化設置

檔案 > 匯出 > 存儲為 Web 所用格式（舊版）或 檔案 > 匯出 > 導出為 > GIF（新版）：

• 顏色：256 色（或 128 色減小體積）
• 抖動：選擇「擴散」，百分比 88-100%
• 循環選項：永遠
• 透明度：勾選（如背景需透明）
• 圖像尺寸：按輸出需求縮放（如 800px 寬）

進階技巧與變體

需求	實現方法
多層雲霧視差	準備 2-3 組不同尺寸/不透明度雲霧圖層，遠景移動慢、近景移動快，各自獨立補間
雲霧顏色變化	為雲霧圖層剪貼「色相/飽和度」調整圖層，在關鍵幀添加色相關鍵幀
局部雲霧消散/聚合	為雲霧圖層添加圖層蒙版，在關鍵幀用黑/白畫筆在蒙版上繪製顯示/隱藏區域
透視雲霧流動	關鍵幀對雲霧圖層執行 Ctrl+T > 右鍵「透視」變換，配合補間
導出透明背景 WebP/APNG	CC 2015+ 支援導出 APNG；或用 Ezgif 等線上工具轉 WebP，體積更小、質量更高

常見問題排查

• 動畫播放卡頓：幀數過多（>30）或尺寸過大，減少補間幀數、縮小輸出尺寸、降低顏色數。
• 循環有明顯跳躍：首尾幀視覺不銜接，檢查雲霧素材寬度是否為畫布整數倍、末幀位置是否精確對齊。
• 雲霧邊緣鋸齒：素材解析度不足，源文檔尺寸應 ≥ 2× 輸出尺寸。
• GIF 色帶條紋：開啟抖動、增加顏色數至 256，或改用 PNG 序列+CSS/JS 播放。

相關教程延伸

• PhotoShop CS3 制作流光字 Logo GIF 動畫
• PhotoShop 制作流光漸隱字 GIF 動畫教程
• PhotoShop 制作美女眨眼 GIF 動畫教程

總結

PS 幀動畫雖無 After Effects 強大，但對於「位移、透明度、變換、濾鏡參數」等屬性的關鍵幀補間已足夠應對大多數輕量級動態素材需求。掌握「素材準備→關鍵幀佈局→補間平滑→循環無縫→導出優化」這套標準化流程，你就能快速產出專業級的雲霧、煙霧、水流、光暈等循環動態素材，為網頁、APP、演示文稿注入靈動生命力。