您是否曾看過像下面這樣顯示短片的網頁呢？
這種稱為 GIF 動畫的格式，不需要特別的工具或操作就能輕鬆觀看，因此被廣泛應用於各種場合。製作 GIF 動畫的方法有很多種，這次我們將特別聚焦於使用功能強大的「Photoshop」來製作。如果您也想親自製作 GIF 動畫，歡迎參考本文的教學。
熱門貓咪舞蹈迷因素材全新上線｜圖片・影片編輯軟體 Filmora
目錄
1. Photoshop 製作 GIF 動畫的基礎知識
首先，讓我們了解 GIF 動畫與 Photoshop 各自的特色。
1.1 什麼是 GIF 動畫？
GIF 動畫是一種將多張 GIF 圖片連續顯示，像翻頁動畫一樣呈現動態效果的影片格式。
與 MP4 或 WAV 等其他影片格式不同，GIF 動畫在電腦上是以「圖片」的形式處理。此外，相較於其他影片格式，GIF 動畫具有以下優缺點：
優點
不需要特別工具就能製作與播放影片
相較於其他影片格式，檔案容量較小
缺點
無法處理音訊資料
可用色彩僅限 256 色
相關文章： 【2025年完整版】免費 GIF 素材網站大集合・實用技巧！10 個讓影片品質大躍進的「神級」GIF 活用術【精選 10 個】
1.2 什麼是 Photoshop？GIF 動畫製作最佳選擇的 5 個理由
接著，讓我們簡單介紹 Photoshop（相片編輯軟體）。
Photoshop是 Adobe 提供的圖片編輯軟體。特別是在照片編輯（相片修圖）功能方面享有盛譽，也被設計與藝術產業的專業人士廣泛使用。功能豐富是 Photoshop 的特色，在製作 GIF 動畫時，以下 5 項功能與特點特別實用：
- 專業的編輯功能，可以精細控制影片的每個細節
- 可進行影格單位的精密控制，能在精準的時間點進行編輯
- 透過進階的色彩調整與最佳化功能，能呈現豐富的氛圍
影片編輯提供時間軸／影格動畫兩種工作流程，可依需求切換使用
具備豐富的特效與圖層功能，能自由發揮創意
2. 用 Photoshop 製作！GIF 動畫實戰指南
接下來，我們將具體介紹用 Photoshop 製作 GIF 動畫的步驟。雖然常會認為「專業軟體的使用方法很困難......」，但基本操作其實意外簡單。請參考本指南實際操作看看。
2.1 【基礎篇】從圖片製作 GIF 動畫的步驟
首先，介紹如何從多張圖片製作類似幻燈片的 GIF 動畫。本指南將以下面的逐格動畫為範例進行說明。
1. 啟動 Photoshop，將圖片載入 Photoshop
啟動 Photoshop。依序點選選單列的「檔案」>「指令碼」>「將檔案載入堆疊」。
點選「瀏覽」，選擇所有要製作成 GIF 動畫的圖片。之後點選「確定」。
各圖片會以圖層形式載入。此時可視需要編輯圖片。
2. 時間軸面板設定・製作動畫
依序點選選單列的「視窗」>「時間軸」。Photoshop 用於製作與編輯影片的時間軸會顯示在畫面下方。
從下拉選單選擇「建立影格動畫」。再次點選「建立影格動畫」，圖片就會配置在時間軸上。
點選時間軸右側的面板選單（三條線圖示），選擇「從圖層建立影格」。各圖層的圖片會顯示在時間軸上。
3. 調整・編輯動畫
點選時間軸下方的「播放」圖示，就能預覽動畫。
視需要進行以下編輯：
調整影格順序
在時間軸上拖放影格，就能調整播放順序。
變更影格顯示時間
從各影格下方的下拉選單，可以變更影格的顯示時間。
設定動畫循環次數
從畫面最下方的下拉選單，可以變更動畫的循環次數。設定為「永久」時，動畫會重複播放。
4. 匯出為 GIF 動畫
依序點選選單列的「檔案」>「轉存」>「儲存為網頁用」。
在「最佳化」分頁中，確認格式為「GIF」。視需要也可調整圖片大小等設定。
選擇「儲存」會出現彈出視窗。指定檔案名稱、儲存位置等後點選「儲存」。
這樣就完成了用 Photoshop 從圖片製作 GIF 動畫的步驟！
2.2 【應用篇】將影片轉換為 GIF 動畫的步驟
使用 Photoshop，也可以將手機拍攝的影片轉換為 GIF 動畫。以下介紹具體步驟。
1. 匯入影片檔案
啟動 Photoshop，依序選擇選單列的「檔案」>「讀取」>「視訊影格至圖層」。接著選擇要轉換成 GIF 的影片，點選「開啟」。
開啟「將視訊載入圖層」視窗後，視需要指定要載入的範圍。
點選「確定」，影片就會載入 Photoshop。
2. 轉換為「視訊時間軸」並編輯影片
與先前說明的「從圖片製作 GIF 動畫的步驟」相同，也可以逐個影格（圖層）進行編輯，但載入影片時轉換為「視訊時間軸」會更方便。
點選時間軸左下方的「轉換為視訊時間軸」圖示。
時間軸顯示會切換。在視訊時間軸中，可以設定關鍵影格、新增背景圖層等操作。
通常從 MP4 等影片製作 GIF 動畫時，檔案大小會變得非常大。若要製作容易處理的 GIF 動畫，建議進行以下編輯：
降低影格率影格率（fps）是指每秒顯示多少張影格的數值。數值越高動畫越流暢，但檔案大小也會增加。
要變更影格率，請點選時間軸右側的面板選單（三條線圖示），選擇「設定時間軸影格速率」。
接著在顯示的視窗中設定影格率，點選「確定」。GIF 動畫的情況下，設定為 15～24fps 較容易在檔案大小與視覺效果之間取得平衡。
降低解析度解析度（ppi）是指每英吋顯示多少像素的數值。數值越高圖片越清晰細緻，但同樣會增加檔案大小。
要在 Photoshop 中變更解析度，請依序點選選單列的「影像」>「影像尺寸」。
3. 匯出為 GIF 動畫
依序點選選單列的「檔案」>「轉存」>「儲存為網頁用」。
在「最佳化」分頁中，確認格式為「GIF」。視需要可調整圖片大小、循環設定等。
選擇「儲存」會出現彈出視窗。指定檔案名稱、儲存位置等後點選「儲存」。
這樣就完成了用 Photoshop 從圖片製作 GIF 動畫的步驟！順帶一提，本次製作的 GIF 動畫如下所示。
相關文章： 【完整珍藏版】MOV/AVI 與 GIF 相互轉換完全手冊
3. Photoshop 以外的選擇 - 用 Filmora 讓 GIF 動畫製作更簡單！
如前所述，Photoshop 是專業級的圖片編輯軟體。雖然在製作 GIF 動畫時很方便，但可能會有「軟體太重無法順暢運作......」「想更簡單地製作 GIF 動畫！」等想法。
因此推薦給您的是，兼具初學者也能輕鬆上手的直覺操作與專業人士認可的進階功能的影片編輯軟體「Filmora（影片編輯軟體）」。接下來將從 Filmora 的概述到使用方法，完整介紹對製作 GIF 動畫有幫助的資訊。
Filmora 圖片生成影片功能製作 GIF
3.1 影片編輯軟體 Filmora（影片編輯軟體）是什麼
Filmora（影片編輯軟體）是 Wondershare 公司提供的全方位影片編輯軟體。以滑鼠操作為主的直覺式介面，即使是第一次編輯影片也不會感到困惑。當然也完全支援繁體中文。
以下介紹 Filmora 的主要優點。
高功能且豐富的AI 功能
將長影片重新剪輯成短影片、為影片加上字幕並翻譯、剪掉無聲片段等，手動操作需要大量時間的編輯作業，都能一鍵交給 AI 處理。此外，圖片、影片、音樂或音效等，影片所需的各種素材都能透過 AI 生成製作。
Filmora 新功能文字生成影片！Google Veo 3製作高品質影片！
直覺式・視覺化的使用者介面
影片編輯軟體中，有不少需要具備前置知識或技能才能熟練使用。但 Filmora 將影片編輯所需的操作與資訊整合在單一畫面中，能一眼找到需要的功能。
此外，將滑鼠游標懸停在圖示上也能查看操作說明。不用被教學干擾，就能在製作想要的作品的同時，提升影片編輯技能。
價格實惠容易入手
Filmora 提供免費試用版與付費版。免費試用版就能使用 Filmora 的大部分功能，而且沒有期限限制。可以盡情體驗使用感受。
如果用完免費版提供的 AI 點數，或想輸出沒有浮水印的影片，可以考慮付費版。基本方案的價格為每年 6,980 元（含稅）起，換算成每月價格僅約 580 元。與 Photoshop 或其他影片編輯軟體相比，具有絕佳的性價比。
3.2 用 Filmora 製作 GIF 動畫的步驟
接下來，讓我們看看如何用 Filmora 製作 GIF 動畫。無論是從多張照片・圖片製作 GIF 動畫，還是將影片轉換為 GIF 動畫，操作方法都相同。
1. 在 Filmora 開啟新專案，並載入要製作成 GIF 動畫的素材
啟動 Filmora，點選「新增專案」。
點選「匯入」，選擇要製作成 GIF 動畫的圖片・影片。
2. 將素材配置到時間軸並編輯
將載入的素材拖放到時間軸上。
Filmora 的素材庫（圖片・影片等）、轉場效果（畫面轉換）、特效（視覺效果）、貼圖等，同樣可以透過拖放方式新增。
3. 以 GIF 格式匯出
編輯完成後，點選畫面右上方的「匯出」。
指定檔案名稱與儲存位置。「格式」請選擇「GIF」。點選「進階設定」可調整解析度與影格率。
設定完成後點選「匯出」。
這樣就完成了用 Filmora 製作 GIF 動畫！本文製作了如下的 GIF 動畫。
常見問題
GIF 動畫的最佳解析度和影格率是多少？
一般來說，GIF 動畫建議的設定如下：
畫面大小
橫向：1280 × 720 pixel（長寬比 16:9）
直向：720 × 1280 pixel（長寬比 9:16）
正方形：1080 × 1080 pixel
解析度：72 ppi
影格率：15～24 fps
檔案大小方面，放在網頁上建議 1MB 以下，上傳到社群媒體則建議 5MB 以下。
可以在 Photoshop 中重新載入 GIF 動畫進行編輯嗎？
可以，要以可編輯形式開啟 GIF 動畫，請啟動 Photoshop，從選單列的「檔案」>「開啟」指定檔案。
請注意，用拖放方式將 GIF 動畫加入編輯畫面的方法，無法在 Photoshop 上進行影片編輯。
為什麼從 Photoshop 匯出的 GIF 動畫無法播放？
如果匯出的 GIF 無法以影片方式觀看，請確認以下幾點：
播放軟體、網頁瀏覽器是否支援 GIF 動畫Mac 的預設應用程式「預覽程式」等軟體無法播放 GIF 動畫。
裝置設定是否允許顯示動畫由於無障礙設定，有時無法顯示動畫。Windows 的情況請確認「顯示動畫」，Mac 的情況請確認「自動播放動畫圖片」是否開啟。
GIF 動畫的循環播放是否正確設定如果將循環次數設定為「1 次」，GIF 動畫播放後會停止，看起來會像無法播放。請在編輯軟體的匯出設定中將循環次數設為「永久」，讓動畫重複播放。
總結
本文詳細介紹了用 Photoshop 製作 GIF 動畫的方法。使用 Photoshop，無論從圖片還是影片，都能製作出高品質的 GIF 動畫。如果想更簡單輕鬆地製作 GIF 動畫，推薦兼具直覺式操作與實惠價格的影片編輯軟體「Filmora」。
GIF 動畫可應用於網頁、社群媒體等各種場合。請參考本文，享受流暢的 GIF 動畫製作體驗！
