想自製可愛倒數計時 GIF 動圖？本教學將帶你從零製作 5-4-3-2-1 跳動倒計時動畫，掌握圖層樣式、幀動畫時間軸、GIF 優化輸出全流程，零基礎也能輕鬆上手。

最終效果預覽

步驟 1：建立基礎數字圖層

新建 10×10 cm、透明背景文件。文字工具 (T) 或筆刷工具在畫布中心輸入「5」，套用圖層樣式 (斜面浮雕、外發光、投影等) 賦予立體質感。

步驟 2：複製製作 4-3-2-1 圖層

複製「5」圖層 4 次，分別修改文字內容為 4、3、2、1，保持位置、樣式完全一致。圖層面板自上而下排序：5、4、3、2、1。

步驟 3：刪除背景層確保透明

若背景層為白色，右鍵 → 「從背景轉為圖層」後刪除，確保圖層面板僅剩 5 個數字圖層，透明背景為 GIF 動畫必備條件。

步驟 4：切換至 ImageReady (舊版) / 當代 PS 使用時間軸面板

注意：教學截圖為舊版 PS + ImageReady 流程。現代 Photoshop (CS6 以上) 直接使用 視窗 → 時間軸 面板，選擇「創建幀動畫」模式，操作邏輯完全一致。

步驟 5：建立幀動畫序列

1. 時間軸面板選單 → 「從圖層建立幀」，自動生成 5 幀對應 5 個圖層。
2. 每幀持續時間設為 1 秒 (最後一幀可設 2-3 秒增加停留感)。
3. 播放預覽 (空白鍵/播放鈕) 確認數字依序跳動無誤。

步驟 6：優化輸出 GIF

檔案 → 匯出 → 存儲為 Web 所用格式 (舊版) / 檔案 → 匯出 → 導出為 → GIF (新版)：
— 格式：GIF
— 色板：256 色 (可降至 128/64 減小體積)
— 雜色：無/擴散
— 循環選項：永久
— 勾選「透明度」

完成作品賞析

現代 PS 時間軸面板操作補充

1. 視窗 → 時間軸 → 「創建幀動畫」
2. 圖層面板依序開啟/關閉各數字圖層眼球圖標，時間軸面板點擊「複製選定幀」建立新幀，對應顯示下一數字圖層。
3. 或使用「從圖層建立幀」自動化 (需圖層順序正確)。
4. 調整幀延遲、循環次數、匯出 GIF。

創意延伸

• 數字替換為圖標、表情符號、手寫字體
• 添加背景漸變色塊跳動
• 結合「幀之間插入中間幀」製作平滑變形動畫
• 輸出 APNG/WebP 獲得更高畫質與透明度支援

掌握幀動畫基礎，你就能為社群貼文、EDM 郵件、網頁 Banner 注入動態生命力。快動手試試！