流光字是網頁 Banner、簽名檔、動態海報的經典視覺元素。本教學基於 Photoshop 時間軸面板，詳細拆解從靜態文字到流光動畫的完整製作流程，掌握關鍵幀動畫、剪貼蒙版、Web 導出的專業級工作流。

最終效果預覽

文檔設置與文字排版

新建文件：寬 200px、高 100px、解析度 72dpi、RGB 模式。文字工具設置：字體選粗體無襯線字體（如微軟雅黑 Bold/Source Han Sans Heavy），字號 48pt，顏色深灰 #333333，字距 -20 緊湊排版。輸入目標文字（如「Cc設計」）。

流光層構建與關鍵幀動畫核心流程

步驟 1：建立流光載體圖層

圖層面板新建圖層命名「流光」。畫筆工具：大小 116px、硬度 0%、顏色高亮黃 #FFD700（或品牌色）。在畫布左側畫一個柔邊光點。

步驟 2：啟用時間軸面板與幀動畫模式

視窗 > 時間軸，點擊面板右下角「轉換為時間軸動畫」按鈕。展開「流光」圖層三角箭頭，顯示動畫屬性（位置、不透明度、樣式等）。

步驟 3：設定關鍵幀實現位置動畫

1. 當前時間指標 (CTI) 移至 00:00f，點擊「位置」秒表圖標啟用關鍵幀
2. 選中「流光」圖層，將光點移動至畫布最左側（文字起始位置左側）
3. CTI 移至 00:10f（10 幀，約 0.33 秒 @30fps）
4. 將光點平移至畫布最右側（文字結束位置右側）

步驟 4：工作區域裁剪與循環設置

調整工作區域：開始 00:00f，結束 00:10f。確保動畫循環區間精確覆蓋關鍵幀範圍。

步驟 5：剪貼蒙版實現「文字內流光」

按住 Alt 鍵點擊「流光層」與「文字層」間的分界線，建立剪貼蒙版。隱藏背景圖層（點擊眼睛圖標），確保導出透明背景。

步驟 6：Web 導出優化設置

檔案 > 導出 > 存儲為 Web (舊版) (Alt+Shift+Ctrl+S)。關鍵參數：

• 格式：GIF
• 顏色：128 或 256
• 抖動：無/擴散（視色彩豐富度）
• 循環選項：永遠
• 優化：勾選「優化動畫」

進階變體與優化建議

變體類型	實現方法	適用場景
多色流光	流光層添加「漸變疊加」層樣式，角度 90°	品牌多色調識別
脈衝流光	關鍵幀控制「不透明度」屬性：0%→100%→0%	強調呼吸感、心跳感
粒子流光	流光層改用粒子筆刷，關鍵幀控制「圖層樣式 > 外發光」大小	科技感、魔法特效
路徑流光	鋼筆繪製曲線路徑，關鍵幀控制「矢量蒙版位置」	非線性文字、Logo 動畫

常見問題排查

• 流光超出文字範圍：檢查剪貼蒙版是否正確建立（Alt+點擊分界線）
• 動畫卡頓/速度不對：調整時間軸幀率（面板選單 > 設置幀率）或增減關鍵幀間隔
• GIF 色彩斑駁：增加顏色數至 256，啟用「優化調色板」
• 邊緣鋸齒：文字圖層右鍵 > 光柵化前確保已完成編輯，或使用矢量蒙版替代像素蒙版

掌握時間軸關鍵幀動畫邏輯，你就擁有了在 Photoshop 中創作任何 2D 矢量/像素動畫的鑰匙。流光字只是起點，將這套「屬性關鍵幀 + 蒙版限制 + Web 導出」的方法論應用到圖標動畫、UI 微交互、插畫動態化中，開啟你的動態設計之旅。