教學目標
掌握 Photoshop 幀動畫面板的專業工作流，利用「動作」自動化重複操作，實現關鍵幀繪製 → 自動建立中間幀 → 匯出 GIF 的完整閉環。適合像素動畫、手繪幀動畫、UI 微動效製作。
核心面板與前期設定
必開三面板
- 圖層面板（F7）：管理各幀對應圖層
- 時間軸/動畫面板（視窗 → 時間軸）：幀序列編輯
- 動作面板（Alt+F9）：錄製/播放自動化步驟
關鍵面板設定
動畫面板右上角選單 → 取消勾選「新建圖層在所有幀可見」。理由：預設開啟時，新建圖層會出現在所有幀，適合靜態背景；關閉後，新圖層僅出現在當前幀，適合逐幀動畫。
動作錄製：兩大核心動作
建立動作集「GIF 動畫」，錄製兩個動作並指派快捷鍵（建議 F3/F4）：
| 動作名稱 | 快捷鍵 | 用途 | 核心步驟 |
|---|
| GIF 清空 |
Ctrl+F4 |
關鍵幀 → 全新畫面 |
1. 降低前一關鍵幀圖層不透明度（參考用）
2. 新建透明圖層（需手動重命名） |
| GIF 修改 |
F3 |
關鍵幀 → 微調變化 |
1. 新建動畫幀
2. 複製前一幀對應圖層內容
3. 降低複製圖層不透明度（洋蔥皮參考）
4. 新建透明圖層供修改 |
四幀動畫實戰流程
步驟 1：建立第一關鍵幀（圖層 a）
- 新建文件（如 400×400 px）
- 動畫面板預設第 1 幀
- 新建圖層命名「a」，繪製起始動作畫面
步驟 2：建立第二關鍵幀（圖層 d）
- 完成圖層 a 後，執行動作「GIF 清空」（Ctrl+F4）
- 圖層 a 自動降低不透明度（約 30-50%），上方自動新建圖層
- 手動重命名新圖層為「d」（中間預留 b、c 兩中間幀）
- 繪製終止動作畫面，參考半透明圖層 a 保持形體連貫
- 完成後隱藏圖層 a
步驟 3：補間中間幀（圖層 b、c）
- 在幀時間軸上新增幀（共 4 幀）
- 第 2 幀：執行「GIF 修改」或「GIF 清空」 → 繪製圖層 b（接近 a）
- 第 3 幀：同理建立圖層 c（接近 d）
- 第 4 幀：對應圖層 d
洋蔥皮原理： 前一關鍵幀保持半透明可見，作為當前幀繪製的位置/形狀參考，避免動作斷裂或形變。
步驟 4：幀對應圖層顯示設定
逐幀點擊時間軸幀，在圖層面板勾選該幀應顯示的圖層：
- 幀 1：僅顯示 a
- 幀 2：僅顯示 b
- 幀 3：僅顯示 c
- 幀 4：僅顯示 d
（若用「GIF 修改」動作，新幀會自動複製前幀圖層，需手動取消勾選舊圖層）
步驟 5：設定幀延遲與循環
- 全選幀（Shift 點擊首尾） → 右鍵設定延遲時間（如 0.1 秒/100ms）
- 底部循環選項選「永遠」
步驟 6：匯出 GIF（存儲為 Web 格式）
- 檔案 → 匯出 → 「存儲為 Web (舊版)」（Ctrl+Alt+Shift+S）
- 格式選 GIF，顏色 256，抖動 88% 以上
- 預覽動畫無誤 → 「存儲」
進階技巧與避坑指南
圖層命名規範
格式：幀序號_動作描述，如 01_idle、02_walk_1。配合圖層顏色標籤（右鍵圖層 → 顏色），快速視覺化管理。
動作面板進階用法
- 動作可插入「停頓」步驟，彈出提示框提醒手動操作（如「請繪製中間幀」）
- 批次處理：檔案 → 自動 → 批次，將動作套用到多個文件
常見問題排查
| 現象 | 原因 | 解決 |
|---|
| 動畫播放閃爍 | 幀間圖層殘留顯示 | 逐幀檢查圖層眼睛圖示，確保互斥 |
| 匯出後顏色失真 | GIF 256 色限制 | 預先降低色階/改用 WebP/APNG |
| 動作播放報錯 | 圖層名稱衝突 | 動作中改用「選擇前一圖層」而非指定名稱 |
總結
這套「關鍵幀手繪 + 動作自動建幀/洋蔥皮 + 手動補間」工作流，兼顧了手繪的靈活性與流程的標準化。核心在於：
- 面板設定正確（關閉「新圖層全幀可見」）
- 兩個動作分工明確（清空/修改）
- 圖層命名與幀對應關係清晰
- 善用半透明參考層保持動作連貫
熟練後可擴展至 8 幀、12 幀甚至更複雜的幀動畫專案。