PS 內建幀動畫 (舊版動畫面板) 與時間軸 (視訊時間軸)雙模式，支援從多張靜態圖層、視訊片段、程式化動畫生成 GIF。本教學以「地球旋轉+手部互動」為例，完整演示素材準備、幀建立、循環設定、Web 優化匯出全流程，兼顧透明背景與檔案體積控制。

模式選擇：幀動畫 vs 時間軸

維度	幀動畫 (舊版)	時間軸 (視訊)
適用場景	離散圖層序列、簡單循環、透明背景 GIF	視訊片段、關鍵幀動畫、音訊同步、MP4/WebM 輸出
操作邏輯	圖層 = 幀，手動排序	關鍵帧插值、圖層屬性動畫
透明背景支援	完美	需關閉背景圖層眼球
本教學採用	✅ 推薦初學者	進階另文說明

幀動畫製作全流程

1. 新建畫布與素材準備

• 新建畫布：尺寸 = 目標 GIF 顯示尺寸 (如 400×400 px)、72 dpi、RGB、**背景透明**。
• 置入素材：地球 (PNG 透明)、手部 (PNG 透明) → 移動工具 (V) 拖入畫布 → 調整大小位置 → 圖層命名「地球」、「手」。

2. 圖層效果與單幀輸出 (關鍵：透明背景 PNG 序列)

1. 為圖層添加圖層樣式 (外發光、投影、色彩疊加等) → 右鍵圖層「轉換為智慧物件」保護原始像素。
2. 依動畫腳本，逐幀移動/旋轉/縮放需動畫的圖層 (如手部抓取地球)。
3. 每調整一幀：檔案 > 存儲為 Web 所用格式 → PNG-24、勾選透明度 → 存儲為 `frame_01.png`、`frame_02.png`... 序列檔。

3. 動畫面板建立幀序列

1. 刪除所有圖層 (或關閉眼球)，僅保留透明背景圖層。
2. 視窗 > 時間軸 → 點擊面板中間下拉選單選「建立幀動畫」 (舊版直接開啟「視窗 > 動畫」)。
3. Ctrl+O 依序開啟 `frame_01.png` ~ `frame_N.png`，每開啟一張自動在圖層面板生成新圖層。
4. 動畫面板右上角選單 → 「從圖層建立幀」 → 幀順序 = 圖層面板自上而下順序。

4. 循環平滑化：正向 + 反向幀

• 為避免播放到最後一幀跳回第一幀的「斷層感」，選取所有幀 → 右鍵「複製幀」 → 再次右鍵「反轉幀」 → 形成「正向播放 + 反向播放」無縫循環。

5. 幀延遲與循環設定

• 全選幀 (Shift+點擊首尾) → 下方延遲時間設定：
  流暢動畫：0.07~0.1 秒 (10~14 FPS)
  較慢節奏：0.2~0.5 秒
• 循環選項：選「永遠」= 無限循環。
• 點擊播放鍵預覽，微調延遲與順序。

6. Web 專用匯出 (GIF 優化)

1. 檔案 > 存儲為 Web 所用格式 (舊版) (Ctrl+Alt+Shift+S)。
2. 預設組：GIF 128 雜色 (或 256 色) → 勾選透明度、隔行掃描 (漸進顯示)。
3. 色彩表：若畫面色彩單純，可手動減少色數 (64/128) 大幅減小體積。
4. 影像大小：若需縮小輸出，在此處設定 (啟用雙三次銳化)。
5. 動畫：循環選項「永遠」。
6. 點「存儲」→ 選路徑 → 「儲存」。

檔案體積壓縮進階技巧

體積過大 (>2 MB) 影響網頁載入？

① 減少幀數 (刪除中間過渡幀) ② 降低色數 (128→64/32) ③ 縮小尺寸 (400→300 px) ④ 裁切多餘透明邊緣 ⑤ 使用線上工具 (Ezgif、Gifski) 二次壓縮。

邊緣鋸齒/白邊？

源 PNG 邊緣未乾淨 → 步驟 2 時對圖層蒙版精修；或匯出時勾選「消除方塊邊緣」(Matte 設為 None/透明)。

想輸出 APNG/WebP/MP4？

PS 2023+ 支援「檔案 > 匯出 > 另存為」選 APNG/WebP；MP4 請用時間軸模式 + Adobe Media Encoder。

結語

「素材透明化 → 逐幀 PNG 序列 → 動畫面板建幀 → 正反向循環 → GIF Web 優化匯出」，這套標準化流程能產出透明背景、無縫循環、體積可控的專業級 GIF。掌握後，表情包、UI 互動演示、產品 360° 展示、科普動畫，統統能在 PS 內完成。立即收集素材，動手做一組屬於你的動態貼圖吧！