萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 電腦基礎知識 >  >> 電腦入門

Photoshop 製作 GIF 動畫完整指南:調整大小、裁切透明區、優化輸出不變形

許多設計師在 PS 編輯 GIF 時遇到「縮放後幀數錯亂、透明背景變白、檔案過大、存檔後不動」等問題。本文以 Photoshop CS5.1 Extended 為例(各版本操作邏輯一致),詳細講解多幀同步縮放、裁切透明像素、存為 Web 格式優化輸出的標準化流程。

前置準備

  • 開啟 PS → 視窗 → 工作區 → 選擇 「動感」(或「動畫」),開啟時間軸/幀面板。
  • Ctrl+O 開啟素材 GIF,時間軸面板會顯示所有幀(例:16 幀)。
切換動感工作區
動畫幀面板

核心難點:每幀對應獨立圖層,必須逐幀同步縮放

GIF 每幀對應圖層面板的一個圖層(或圖層組)。關鍵操作:選中第 1 幀 → 圖層面板自動高亮對應圖層 → Ctrl+T 自由變換縮放 → 確認。按住選項列「鏈結圖示」可鎖定長寬比,數值輸入同比例縮放(例:33%)。

第1幀對應圖層1
第2幀對應圖層2

重複上述動作:選第 2 幀 → 對應圖層 2 → Ctrl+T 同比例縮放 → 確認……直到所有幀完成。切記:每幀操作前必須先在時間軸選中該幀,圖層面板才會自動切換至對應圖層。

裁切多餘透明像素(減小畫布、去除邊緣空白)

  1. 工具列選 裁切工具 (C),框選保留區域。
  2. 選單列 影像 → 裁切,或按 Enter 確認。
  3. 預設「根據透明像素裁切」通常已勾選,直接確定即可精準去除四周透明區塊。
裁切工具
影像裁切確認

關鍵輸出:存為 Web 所用格式(舊版)/ 匯出 → 存為舊版 Web 格式(新版)

  1. 選單列 檔案 → 匯出 → 存為舊版 Web 格式(CC 版本路徑;舊版直接「存為 Web 及裝置格式」)。
  2. 右側預設面板關鍵設定:
  • 格式:GIF。
  • 顏色:256(最大),或視畫面複雜度降至 128/64 減小檔案。
  • 抖動:選 散佈,百分比 88%~100%(漸層畫面需較高抖動)。
  • 透明度:勾選,鬆脆邊緣可設 0% 或 128。
  • 轉換為 sRGB:勾選(確保瀏覽器色彩一致)。
  • 循環選項:永遠(無限循環)。
  • 影像大小:若前面已縮放可勾選「縮放至」100%,或在此二次調整輸出尺寸。
存為Web格式設定面板

進階優化技巧

優化目標 操作建議
減小檔案體積降低顏色數(128/64);裁切畫布;刪除冗餘幀;啟用「優化」選項(面板右上選單 → 優化動畫 → 繫結/去除重複幀)。
修復邊緣鋸齒/白邊原始圖層邊緣羽化 0.5~1px;輸出時「鬆脆」設 0 或取消透明度改用遮罩合成背景色。
解決存檔後不動必須用「存為 Web 格式」,不可用「另存為」→ GIF(會合併圖層只存第一幀)。
加速預覽/編輯時間軸面板選單 → 「面板選項」→ 縮圖大小調小;暫時關閉圖層縮圖預覽。

常見問題 Q&A

Q: 為什麼我縮放後畫面變模糊?
A: 位圖縮放必然損失銳度。建議:原始素材解析度足夠高;縮放後銳化(濾鏡 → 銳化 → Unsharp Mask);或改用向量圖層(形狀圖層/智慧物件)製作動畫再輸出 GIF。
Q: 如何批次調整所有幀的位置/不透明度?
  • 時間軸面板選單 → 「全選幀」 → 對圖層面板操作(移動/不透明度/樣式)會套用至所有選中幀對應的圖層。
  • Q: 怎麼把視頻轉 GIF?
    檔案 → 匯入 → 視頻幀到圖層 → 選取範圍/每幀間隔 → 確定 → 依本流程輸出。

    總結

    PS 處理 GIF 核心口訣:工作區切動感 → 逐幀對應圖層 Ctrl+T 同步縮放 → 裁切透明像素 → 存為 Web 格式(GIF、256色、透明度開啟、永遠循環)。掌握此流程,輕鬆解決「小圖不動、白邊、檔案過大」諸多痛點。

    copyright © 萬盛學電腦網 all rights reserved