在 GIMP 中為 GIF 加上文字,需要個別編輯每一幀的圖層,因為文字工具只會寫入你按下「確定」時當下作用中的那一個圖層。GIMP 會把動畫 GIF 載入成一疊圖層,每一幀一個,而你建立的文字方框會變成一個浮動圖層,停在目前這一幀的上方,但動畫中的其他圖層都沒有它。想讓標題在整個動畫中都出現,你必須把那個文字圖層向下複製穿過整疊圖層、合併進每一幀,然後把檔案匯出成新的 GIF。GIMP 之所以會這樣運作,是因為動畫 GIF 並不是一連串各自獨立的圖片:每一幀可以是完整影像,也可以是只更新部分畫布的小矩形,而檔案裡帶有處置指令,告訴下一幀要保留、清除或還原先前的像素。理解這個結構,就是避免背景消失、出現殘影、以及字幕在循環播到一半不見的關鍵。

在 GIMP 中為 GIF 加上文字時會發生什麼事
當你在 GIMP 中開啟動畫 GIF 時,程式會把每一個影像區塊拆成各自獨立的圖層,並依照它們在檔案中的出現順序疊起來。文字工具接著會像其他繪圖操作一樣運作:它只把像素寫入你確認文字那一刻、在圖層面板中被反白的那一個圖層。當你切換到不同幀時,文字就消失了,因為它本來就不屬於那一個圖層。
GIMP 確實有「影像平面化」指令和一些基於濾鏡的做法,但要讓字幕在整個循環中都存活下來,標準做法仍然需要手動操作。你先建立一次文字,對文字圖層按右鍵、選擇「複製圖層」、把複本拖到圖層疊中的下一幀,然後重複這個步驟,直到字幕疊在每一個圖層上方。「圖層位移」工具、「對齊」工具,或固定的錨點位置都可以避免文字跑掉,但每一個步驟都必須針對動畫裡有多少幀就重複做多少次。
當文字已經合併進每一個圖層之後,匯出階段又會多一個選項。「檔案 > 匯出為」會產生一個新的 GIF,而 GIMP 會詢問你要把它存成動畫還是單一靜態影像。選擇「作為動畫」會保留每一幀的延遲時間,但產生的檔案是對整個畫布的完整重新編碼,而不是對原始檔案進行位元層級的修補。
使用「為 GIF 加文字」工具加上字幕
如果不想安裝 GIMP、不想學圖層面板,也不想手動把文字一層一層往下複製,一個專門的 Add Text to GIF 工具會自動處理合成。這個工具會在一般的瀏覽器分頁中開啟,在本機解碼 GIF,並在每一個完整的可見幀上畫上一段外框字幕,再重新編碼輸出結果。
- 從你的裝置選擇一個不超過 20 MB 的動畫 GIF。檔案選擇器會直接從磁碟讀取 GIF,位元組完全不會離開這個瀏覽器分頁。超過 20 MB 的檔案,或邏輯畫布任一邊超過 4,096 像素的檔案,會在任何繪圖動作開始之前就以清楚的錯誤訊息被拒絕。
- 輸入簡短的字幕,然後選擇它的位置為上方、置中或下方。字幕欄位最多接受 80 個字元。字級大小會根據畫布尺寸和字幕長度計算,而且文字會被限制在邏輯畫布範圍內,不會為了容納它而替動畫加上新的邊框。
- 選擇「為 GIF 加上文字」、檢視完整循環播放,然後下載新的有字幕動畫。預覽會播放完整序列,讓你能確認字幕位置正確、不會遮住主體,而且在動畫循環時依然清楚可讀。當你滿意之後,下載按鈕就會儲存一個由完整可見幀構成的新 GIF。
替換來源檔案或更改字幕會取消先前的作業並移除前一次的結果,因此舊的下載檔案不會被誤認成新的設定。下載的會是一個全新的本機 Blob,而頁面在編碼器真的產生出可下載的檔案之前,絕不會回報工作已完成。
為什麼 GIF 合成會讓簡單的編輯器踩坑
動畫 GIF 檔案比一組獨立圖片更複雜。一個檔案可以包含一張完整影像,後面接著幾個小範圍的變動矩形。它也可能使用透明度和處置指令,告訴下一幀保留像素、清除某個矩形,或還原成先前的畫布。如果直接畫在原始矩形上,有字幕的輸出畫面就會看起來像背景不見了或出現殘影,而遇到這種狀況的讀者可以在為何有字幕的 GIF 會出現殘影以及如何修復這份指南中讀到更多內容。
瀏覽器工具透過把每一個 GIF 影像區塊組合成檢視者應該看到的完整邏輯畫布,再進行繪製來避免這個問題。每一幀都會被當成一張完整的圖片,外框文字在這張完整幀上只畫一次,然後把結果送進新的 GIF 編碼器。在底層,這個工具仰賴標準的 canvas 文字繪圖函式,CanvasRenderingContext2D.strokeText 產生深色外框,而 CanvasRenderingContext2D.fillText 在上面畫出白色字形,兩者都記載於 MDN 的 Canvas API 參考資料中。由於編碼器會把每一張完整的有字幕幀量化成 GIF 調色盤,細緻的漸層和照片可能會出現些微色偏,但字幕絕不會浮在只被部分還原的背景上。
原始的調色盤表、註解、應用程式延伸、位元層級的最佳化選擇以及有限循環次數設定都不會被保留下來,因為匯出刻意是一個新的 GIF,而不是就地修改位元。解碼後的可見幀順序和每一幀的延遲時間則會被保留,因此動畫仍然以相同的速度循環,即使檔案本身是從零開始重建的。
GIMP 和瀏覽器字幕工具:各自適合的時機
兩種做法都會產生一個帶字幕的新 GIF,但它們各自要求讀者付出的心力不同。下表針對一次性字幕真正在意的幾個面向,比較 GIMP 工作流程與「為 GIF 加文字」瀏覽器工具。
| 面向 | GIMP 手動工作流程 | 「為 GIF 加文字」瀏覽器工具 |
|---|---|---|
| 軟體安裝 | 需要下載並設定 GIMP | 免安裝,在瀏覽器分頁中執行 |
| 檔案處理位置 | 本機桌面 | 本機瀏覽器分頁,不上傳 |
| 逐幀編輯 | 把文字圖層複製到每一幀 | 不需要,工具會自動合成每一張完整可見幀 |
| 字幕長度 | 受限於畫布與所選字型 | 最多 80 個字元 |
| 位置選項 | 在每一個圖層上手動擺放 | 上、置中或下 |
| 檔案大小限制 | 受限於可用記憶體 | 輸入最大 20 MB |
| 幀數限制 | 受限於可用記憶體 | 最多 50 個影像幀 |
| 原始中繼資料 | 匯出後即遺失,除非使用全平面重新編碼 | 會遺失,匯出的是新 GIF |
| 輸出大小 | 取決於匯出設定 | 匯出後回報實際大小,不保證更小 |
當你已經開啟 GIMP、需要不只一個字幕、想要自訂字型,或是基於字幕以外的理由在編輯幀時,使用 GIMP。當工作只是加上一段簡短字幕、不想安裝任何東西,而且 GIF 在 20 MB 與 50 幀的限制內時,使用瀏覽器工具。
開始前值得知道的限制與安全檢查
設定安全限制,是為了保護瀏覽器免於處理那些解壓縮後遠比檔案大小暗示的像素工作量還要龐大的壓縮檔。選擇的 GIF 最多 20 MB,其邏輯畫布任一邊不得超過 4,096 像素,或單一幀不得超過三百萬像素,且動畫最多只能包含 50 個影像幀。實作上也會在產生大型畫布工作之前,先限制修補與輸出的像素預算總和。
為了具體想像像素上限:480 × 270 的畫布是 480 × 270 = 129,600 像素,遠低於 3,000,000 的限制。把尺寸加倍成 960 × 540 是 960 × 540 = 518,400 像素,仍在上限之內。4096 × 4096 的正方形是 4,096 × 4,096 = 16,777,216 像素,遠超過 3,000,000 像素的限制,所以即使每邊都符合 4,096 像素的限制,工具仍會拒絕這個檔案。
無效的簽章、無法讀取的幀、過大的畫布,或超出預算的動畫,會產生錯誤而不是產生半成品下載,因此毀損或意外過大的來源檔案不會默默地產生損壞的輸出。同一套檢查也會攔下非常寬的橫幅、非常長的直立故事格式片段,以及那些被塞進數百個相同幀來灌水的 GIF。
讓 GIF 字幕容易閱讀的訣竅
瀏覽器工具會在每一張完整可見幀上畫一條置中的單行字幕,搭配白色文字與深色外框,因此它在許多一般背景上都仍清楚可讀,而不會自稱是完整的設計編輯器。請保持字幕簡短,貼近標題、反應或註解的精神,因為字級大小是根據畫布和字幕長度計算出來的。非常小的 GIF 可能沒有足夠的像素來呈現清楚的文字,遇到這種情況,來源動畫就是單純小到無法乾淨地加上字幕。
選擇不會蓋到動畫主體的位置。表情反應類的 GIF 通常把字幕放在上方或下方效果最佳,而教學類的片段可能需要一條置中的橫帶,以免遮住動作。上方位置往往是最安全的預設,因為大多數表情反應片段都把主要主體放在畫面的中央和下方。
瀏覽器的色彩管理、字型呈現與 GIF 解碼會因平台而略有不同,所以請在預定顯示尺寸下檢視下載下來的動畫再發佈。如果目前的瀏覽器無法解碼提供的 GIF 或無法配置所需的畫布,工具會以清楚的錯誤停止,而且不會保留任何先前的輸出;這才是正確的行為,因為半完成的字幕比完全沒有字幕更糟糕。
想看更深入的內容,請參考電子郵件附件用的 GIF 製作工具:無需上傳的工作流程。