教程簡介

本教程系統講解Photoshop幀動畫(GIF/MP4)製作全流程：從幀規劃、圖層結構設計、時間軸面板操作、補間動畫/逐幀動畫混合技法、導出優化設置，到Web端呈現優化。適合想掌握PS動畫基礎能力、制作UI動效/表情包/廣告動圖的設計師。

動態效果展示

PS動畫製作標準化工作流

階段一：幀規劃與圖層架構設計(靜態設計階段)

1. 腳本分鏡： 確定動畫時長(建議2-5秒)、幀率(10-15fps GIF/24-30fps MP4)、關鍵幀數量、循環邏輯(無限/有限次數)
2. 圖層結構規範化：
   • 靜態背景組(不參與動畫)
   • 動畫元素組：每個獨立運動元素獨立圖層/組(命名規範: ANI_元素名_屬性)
   • 特效/遮罩/調色組(置頂，影響所有幀)
3. 關鍵幀態佈局： 在圖層面板按時間順序排列各狀態圖層/組，利用圖層顯示/隱藏預覽關鍵幀

階段二：時間軸面板核心操作

1. 窗口→時間軸 → 「創建幀動畫」/「創建視頻時間軸」雙模式切換
2. 幀動畫模式(適合GIF/表情包/簡單循環)：
   • 每幀手動控制圖層顯隱/位置/不透明度/樣式
   • 「 Tween(補間)」功能：選中兩關鍵幀 → 點擊補間圖標 → 設置幀數/參數(位置/不透明度/效果) → 自動生成中間幀
   • 幀延遲時間設置：單幀/批量設置(按Shift/Ctrl多選)
   • 循環選項：一次/三次/永遠
3. 視頻時間軸模式(適合複雜動畫/MP4輸出)：
   • 圖層屬性(位置/不透明度/樣式/蒙版/變換)展開關鍵幀動畫
   • 關鍵幀插值：線性/貝塞爾/保持/自動貝塞爾
   • 圖層父子關係/鏈接/蒙版關鍵幀動畫
   • 圖層樣式/濾鏡/調整圖層參數關鍵幀動畫

階段三：進階動畫技法

• 智能對象動畫： 將複雜結構轉為智能對象 → 內部編輯獨立時間軸 → 主時間軸僅控制整體變換，結構清晰
• 幀差異優化： 僅保留變化像素區域 → 「優化動畫」菜單自動處理 / 手動裁剪幀邊界
• 視頻圖層導入： 文件→置入→視頻圖層 → 視頻幀作為動畫素材參與合成
• 腳本自動化： 基礎JavaScript/ExtendScript腳本批量生成幀序列/批量設置延遲/批量導出

階段四：導出優化與Web端適配

1. 存儲為Web所用格式(舊版)/導出→存儲為Web(舊版)(CC新版)：
   • 格式：GIF(動畫) / PNG-24(靜態透明) / JPEG(靜態無透明)
   • GIF關鍵設置：
     • 顏色：256(最大) / 128/64(壓縮)
     • 抖動：選擇性/擴散/圖案/噪點(視內容選擇)
     • 抖動幅度：88-100%
     • 透明度/遮蓋/無(視背景需求)
     • 循環選項：永遠
     • 圖像大小：寬度≤800px(移動端優先)/高度自適應
     • 文件大小：目標<2MB(微信)/<5MB(微博)/<10MB(網頁)
2. 視頻導出(MP4/WebM)： 文件→導出→渲染視頻 → H.264/High Quality/匹配幀率 → 體積更小、質量更高、支持音頻、現代瀏覽器全支持，強烈建議替代GIF

階段五: 實戰案例拆解(以教程展示動圖為例)

案例特徵：幾何圖形旋轉/縮放/顏色變化循環 → 核心結構：單一智能對象(包含形狀/漸變/描邊) → 時間軸關鍵幀：旋轉0°→360°、縮放100%→50%→100%、色相偏移0→360 → 24幀/12fps/2秒循環 → 導出GIF 400×400px 128色。

---

工具鏈升級建議：

• After Effects： 專業動態圖形/合成/VFX首選，PS動畫僅為輕量級補充
• Principle/Figma/ProtoPie： UI交互動效原型設計專用
• Lottie/Bodymovin： 輕量級矢量動畫Web/APP落地標準
• Blender/Geometry Nodes： 3D程序化動畫新選擇

核心心法： 動畫本質是「時間維度上的設計」。PS時間軸將熟悉的空間設計屬性(位置/大小/顏色/透明度/濾鏡)延伸至時間軸，邏輯一脈相承。掌握「關鍵幀+插值」核心範式，工具不再是障礙。

註： 更多精彩教程請關注三聯設計教程欄目。