早期 GIF 動畫依賴 ImageReady（PS 內置獨立程序），現代 Photoshop（CS3+）已整合時間軸/幀動畫面板，實現全流程無縫制作。本教程對比新舊工作流，以「兩圖淡入淡出」為例，詳細講解幀創建、補間、延遲設置、優化導出的標準化步驟。

素材準備與尺寸統一

啟動 PS，打開兩張素材圖。「圖像 > 圖像大小」統一寬高像素，取消「約束比例」防止變形。雙擊背景層轉為普通圖層（解鎖）。移動工具拖拽一圖進入另一文檔，對齊畫面，保存為 .psd。

ImageReady 經典工作流（歷史參考）

1. 啟動 ImageReady，打開 .psd，圖層面板顯示兩層。
2. 動畫面板點擊「複製當前幀」→ 兩幀對應兩層。
3. 點擊「補間」→ 添加 5 幀 → 共 7 幀。
4. 第 2 幀選中上層，不透明度 80% → 第 3 幀 60% → 第 4 幀 40% → 第 5 幀 20% → 第 6 幀 0%（手動設置漸變）。
5. 第 1 幀、第 7 幀設置延遲 0.2 秒。
6. 預覽播放 → 「文件 > 存儲為優化結果」→ 預設 GIF 128 仿色。

現代 Photoshop 時間軸工作流（推薦）

「視窗 > 時間軸」→「創建幀動畫」。

1. 第 1 幀：顯示底層，隱藏頂層。
2. 新建幀 → 顯示頂層，隱藏底層。
3. 選中兩幀 → 右鍵「創建補間幀」→ 幀數 5 → 自動生成不透明度插值幀（無需手動逐幀調整）。
4. 設置循環選項「永遠」，統一幀延遲 0.2 秒。
5. Ctrl+Alt+Shift+S 導出 GIF，預設「GIF 128 仿色」，根據文件大小調整顏色數/抖動/無損壓縮。

核心差異與優勢

維度	ImageReady	Photoshop 時間軸
補間屬性	僅位置/不透明度/效果（需手動逐幀）	位置/不透明度/樣式/蒙版/變換/濾鏡參數全自動插值
關鍵幀編輯	幀級離散編輯	支持關鍵幀曲線編輯器（視頻時間軸模式）
圖層關聯	幀與圖層可見度綁定	幀記錄圖層屬性狀態，支持智能對象動畫
導出優化	獨立優化面板	整合「存儲為 Web」完整功能

避坑指南

• ❌ 素材尺寸不一 → 導出抖動/錯位 → ✅ 預處理統一尺寸。
• ❌ 背景層未解鎖 → 無法移動/混合 → ✅ 雙擊背景層轉普通層。
• ❌ 幀延遲未設置 → 播放過快/卡頓 → ✅ 統一設置或按節奏差異化設置。
• ❌ 顏色數過低 → 漸變斷層 → ✅ 256 色 + 高抖動；關鍵漸變區域預乘 Alpha 通道。

掌握現代時間軸工作流，你可以用 PS 制作 UI 微交互、表情包、電商主圖動圖、社交媒體貼紙等全品類動效產出，無需跨軟件協作。