效果預覽

素材準備

• 卡通娃娃素材圖（透明背景 PNG）
• 背景圖（可選）

製作流程

1. 素材拆分與定位

1. 開啟素材圖，若為單圖層需自行分離各肢體部位（頭、身、手、腳）至獨立圖層。
2. 新建文件（如 400×400px），將背景圖與拆分後的娃娃部位圖層拖入。
3. 使用移動工具（V）配合方向鍵，將各部位排列為「待機姿勢」基準位置。

2. 建立關鍵姿態圖層組

1. 針對每個關鍵動作姿態（如走路 4-5 個關鍵幀），複製完整娃娃圖層組，重命名為「姿態 1/2/3/4/5」。
2. 每組內部調整各部位位置/旋轉構成該姿態。
3. 新建圖層組「動畫圖層」，將 5 個姿態組依序拖入（由上至下對應幀順序）。

3. 動畫面板製作幀動畫

1. 開啟動畫面板（時間軸面板切換「影格動畫」）。
2. 新建 5 個幀，對應 5 個姿態組：
   第 1 幀顯示「姿態 1」+ 背景，其餘隱藏；
   第 2 幀顯示「姿態 2」+ 背景……以此類推。

4. 插入過渡幀實現平滑動畫

1. 選中第 5 幀，點擊面板選單「插幀」：目標幀選「下一幀」（即第 1 幀形成循環），幀數設 6，勾選「所有圖層」。
2. 同理在第 3、2、1 幀各插入 6 個過渡幀。
3. 最終擁有 5 個關鍵幀 + 4×6 = 24 個過渡幀 = 29 幀流暢動畫。

5. 設定幀延遲與匯出

1. 全選所有幀（Shift+點擊首尾幀），設定延遲 0.1 秒（或根據速度調整）。
2. 循環選項選「永遠」。
3. 檔案 > 存儲為 Web 所用格式，GIF 格式，色板 256 色，儲存。

進階技巧

• 關鍵幀設計：參考動畫原理「關鍵幀+中間幀」，關鍵幀只畫極限姿態（雙腿最大張角、手臂最高點），中間幀由 PS 自動插值。
• 部位分離動畫：若需手臂擺動、腳步走動不同步，可將手臂、腿部分離為獨立圖層組，各自設定不同幀率的關鍵幀。
• 時間軸模式進階：切換「視訊時間軸」，對位置/旋轉/不透明度打關鍵幀，自動插值更自然，支援緩動曲線編輯。
• 表情變化：在關鍵幀加入嘴巴/眉毛/眼睛形狀變化圖層，豐富表現力。

替代方案對比

方法	優點	缺點	適用場景
PS 幀動畫+插幀	無需外掛、像素級控制、GIF 輸出原生	關鍵幀多時繁瑣、無緩動曲線、檔案大	簡單循環動畫、表情包、UI 載入圖標
PS 時間軸關鍵幀	屬性級關鍵幀、緩動曲線、可導出視訊	GIF 匯出需轉幀、學習曲線稍高	複雜位移/縮放/旋轉/透明度動畫
After Effects + Bodymovin/Lottie	專業動畫工具、向量輸出、極小體積、互動可控	需學 AE、流程較長	商業級 UI 動畫、網頁 Lottie 動畫
Spine/DragonBones 骨骼動畫	骨骼綁定、換裝、網格變形、運行時極輕量	專業工具、學習成本高	遊戲角色、複雜角色動畫