效果預覽

經典論壇/部落格簽名檔動畫：歌詞文字在固定區域內上下循環滾動，配合背景圖與靜態資訊（歌名、歌手、簽名），檔案小、兼容性好、製作門檻低。

製作完整流程

第一階段：靜態版面佈局

1. 新建畫布：寬 400-500px、高 100-150px（論壇簽名檔常見比例 4:1 ~ 3:1），72 dpi，透明背景或填充基調色

2. 背景圖置入：拖入背景素材 → Ctrl+T 自由變換填滿畫布 → 置於圖層最底層

3. 靜態文字排版：文字工具（T）分別輸入：
• 歌名 (字號 14-16px，粗體，白/淡色)
• 歌手 (字號 12px，常規，灰色)
• 個人簽名/ID (字號 10-11px，斜體，半透明)
• 歌詞主體 (字號 14px，行高 1.8，置中對齊)

第二階段：動畫時間軸設定

4. 開啟時間軸：視窗 → 時間軸 → 「建立影格動畫」

5. 設定基礎幀率：第一幀延遲設 0.1 秒 (10fps)，勾選「全選幀」統一應用

第三階段：關鍵幀位移動畫

6. 第 1 幀 (起始位置)：選中歌詞文字圖層 → 移動工具 (V) → 按 Ctrl+↓ 將歌詞移至畫布最下方（僅露底部或完全移出）

7. 第 2 幀 (結束位置)：複製第 1 幀 → 選中第 2 幀 → 歌詞圖層按 Ctrl+↑ 移至畫布最上方（僅露頂部或完全移出）

第四階段：補間動畫平滑過渡

8. 選中第 1 幀 → 點擊「補間」圖示 → 新增幀數 35 (可根據歌詞行數與滾動速度調整，建議 30-50)

9. 時間軸自動生成 35 個中間幀，歌詞平滑從下往上滾動
10. 選中最後一幀 → 補間 → 新增 35 幀 → 回到起始位置形成無縫循環

11. 刪除重複的最後一幀 (與第 1 幀相同)
12. 播放預覽，調整總幀數與單幀延遲至滿意速度

第五階段：優化匯出

12. 檔案 → 存儲為 Web 所用格式 (Ctrl+Alt+Shift+S)
13. 格式：GIF，顏色：128 或 256，抖動：88%，勾選「轉換為 sRGB」
14. 循環選項：「永遠」
15. 優化：若檔案 > 200KB，嘗試：減少顏色數、降低幀率 (刪除隔幀)、裁減畫布高度、簡化背景圖

進階技巧與變體

雙向滾動 (來回循環)

第 1 幀 (底部) → 補間 30 幀 → 第 2 幀 (頂部) → 補間 30 幀 → 第 3 幀 (底部，複製第 1 幀) → 刪除重複尾幀。形成「下→上→下」來回運動。

多行歌詞交替顯示

1. 每行歌詞獨立圖層
2. 關鍵幀交替顯示：幀 1 顯示第 1 行、幀 10 顯示第 2 行、幀 20 顯示第 3 行…
3. 每行淡入淡出：圖層樣式「不透明度」關鍵幀動畫 (PS 2021+ 支援圖層樣式關鍵幀)

歌詞同步高亮 (卡拉 OK 風)

文字圖層複製兩份：底層灰色 (未唱)、上層高亮色 (正在唱) → 上層添加矩形蒙版 → 時間軸關鍵幀動畫蒙版位置/寬度，同步歌詞進度。

透明背景 PNG 序列 / APNG / WebP

現代網頁建議匯出 APNG 或 WebP 動畫：檔案更小、支援 24 位色彩 + Alpha 透明、無鋸齒邊緣。PS 2023+ 原生支援，舊版可用 ezgif.com 轉換。

常見問題排查

問題	原因	解決
滾動不流暢/跳幀	補間幀數不足	增加補間幀數至 40-60，或減少單幀延遲
循環有明顯斷點	首尾位置不連貫	確保第 1 幀與倒數第 2 幀位置對稱、刪除重複尾幀
文字邊緣鋸齒	GIF 索引色透明度單bit	文字加外發光 1px 同背景色、或換 APNG/WebP 格式
檔案過大無法上傳	幀數多/顏色數多/尺寸大	壓縮三要素：尺寸↓、幀率↓、色數↓，三者平衡
背景圖模糊	自由變換縮放導致重採樣	背景圖置入前先調整至目標尺寸，或轉智能物件再縮放