利用 Photoshop 時間軸面板（舊版「動畫」面板）的關鍵幀插值（過渡）功能，僅需兩條線條移動+剪貼蒙版，即可製作出極具動態美感的雙流光掃過文字 GIF 動畫。適合論壇簽名檔、個人品牌動態 Logo、UI 載入動效原型等場景。

最終效果

第一階段：素材準備與靜態排版

1. 素材裁剪與畫布建立

開啟喜歡的圖片，用裁切工具（C）裁剪至適合簽名檔的比例（如 5:2）。新建 500×200 px、透明背景畫布，按 Shift 拖入裁剪後圖片，自動置中縮放。

2. 添加邊框與文字

• 邊框：編輯 > 描邊，寬度 1px、顏色白/灰、位置「內部」，為畫面增加邊界感。
• 文字：新建圖層，文字工具（T）輸入簽名內容，字體「新細明體」/ 微軟正黑體、12pt、白色、無效果，置於畫面適當位置（如右下角）。

第二階段：流光元素製作與關鍵幀動畫

3. 繪製兩條流光線條

• 新建圖層「流光 1」，前景色設流光色（如青色 #00ffff、金色 #ffd700、粉色 #ff69b4），畫筆工具（B）、硬邊、大小 2-3px，按住 Shift 在文字左側垂直畫一條直線（貫穿文字高度）。
• Ctrl+J 複製得「流光 1 副本」，用移動工具（V）將副本線條移至文字右側。

4. 開啟時間軸面板建立幀動畫

視窗 > 時間軸（舊版：視窗 > 動畫），點擊「建立幀動畫」。此時面板顯示第 1 幀，包含當前所有圖層狀態（兩條線條：一左一右）。

5. 建立第 2 幀：線條位置互換

• 點擊時間軸面板「複製選定幀」圖示（新建第 2 幀）。
• 在第 2 幀狀態下：
  a. 選中「流光 1」圖層，將左側線條移動至右側，與副本線條重疊（畫面僅剩一條線）。
  b. 選中「流光 1 副本」圖層，將右側線條移動至左側（畫面再次出現兩條線：一左一右，但屬屬互換）。

6. 剪貼蒙版：限制流光僅顯示在文字區域

按住 Ctrl 點選「流光 1」與「流光 1 副本」兩圖層，右鍵選擇 建立剪貼蒙版（或 Ctrl+Alt+G）。兩流光圖層縮進文字圖層下方，彎曲箭頭指向文字圖層，流光現僅顯示在文字像素範圍內。

7. 關鍵幀插值：生成平滑過渡幀

• 點擊時間軸面板第 1 幀選中。
• 點擊面板下方「過渡」圖示（雙三角形圖示 / 選單 > 過渡）。
• 「要添加的過渡幀數」設 25（幀數越多動畫越流暢、檔案越大），點確定。

PS 自動在幀 1 與幀 2 之間插入 25 個中間幀，線條位置、不透明度線性插值，形成流光從左掃至右、再從右掃至左的平滑循環動畫。

第三階段：導出 GIF 與優化

8. 添加簽名水印（可選）

新建圖層，文字工具輸入個人 ID/網址，置於畫面角落，不參與動畫（不在關鍵幀間插值）。

9. 存儲為 Web 所用格式（導出 GIF）

檔案 > 匯出 > 存儲為 Web 所用格式（舊版） 或 檔案 > 匯出 > 導出為... > GIF（新版）。
關鍵設置：
• 格式：GIF
• 顏色：256（最大）
• 抖動：選擇「擴散」，量 88%
• 循環選項：永遠
• 圖像大小：按需縮放（簽名檔建議寬 ≤ 500px）
點擊「儲存」，完成 GIF 輸出。

進階變體與優化技巧

變體	實現方法	效果特點
多色流光	建立多組流光圖層對（每組不同顏色），交錯關鍵幀時間點	彩虹流光掃過，極具賽博朋克感
單向循環	關鍵幀 1：左→中；關鍵幀 2：中→右；關鍵幀 3：右→消失（不透明度 0）	流光單向掃過消失，適合載入動效
文字描邊流光	文字圖層右鍵 > 圖層樣式 > 描邊(1px) > 將描邊單獨轉圖層 > 做流光剪貼蒙版	流光嚴格沿文字輪廓流動，更精致
減小檔案體積	降低幀數(15-20)、降低顏色數(128)、縮小尺寸、優化抖動	適應論壇簽名檔體積限制(常<200KB)
導出 APNG/WebP	使用線上轉換工具或 PS 腳本導出 APNG/WebP	支援 24bit 真彩色+Alpha 透明，畫質遠超 GIF

核心邏輯總結

1. 兩條線條位置互換 = 關鍵幀 1 與 2 的狀態差異
2. 剪貼蒙版限制顯示範圍 = 流光只在文字內顯示
3. 關鍵幀插值(過渡) = 自動生成平滑中間幀，無需手繪每一幀
4. GIF 導出優化 = 平衡畫質、流暢度、檔案大小

這套「極簡元素 + 關鍵幀插值 + 蒙版限制」的動畫製作邏輯，是 Photoshop 時間軸動畫的核心範式。掌握後，你可以用同樣思路製作：呼吸燈按鈕、載入進度條、文字逐字顯示、圖片淡入淡出、視差滾動原型 等各類 UI/品牌動態素材，無需 After Effects，PS 即可完結輕量動效產出。