萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Photoshop 教學 >> Photoshop 入門教學

Photoshop 製作文字淡入動畫 GIF 教學

利用 Photoshop 內建的時間軸/幀動畫功能,無需 After Effects 即可製作平滑的文字淡入動畫。本教學將帶你從建立文字遮罩、關鍵幀動畫到 GIF 輸出的完整流程,適合製作網頁載入動畫、簽名檔、簡報轉場等。

製作步驟詳解

  1. 建立文字與遮罩基礎:新建文件,輸入粗體文字;新建圖層填充白色置於文字下方。隱藏文字與背景層,選取白色層右側空白區,填充「前景到透明」白色漸變(左實右虛)。
  2. 設定溶解模式與位移:白色漸變層模式改為「溶解」,Shift+移動工具將其向左拖動使右端與文字右邊對齊;重新顯示文字與背景層。
  3. 開啟動畫面板建立關鍵幀:視窗 > 時間軸(或舊版「動畫」),建立幀動畫。第 1 幀:文字被遮罩完全遮住。複製幀,第 2 幀:Shift+移動工具將遮罩層向右拖動直至文字完全顯示。
  4. 添加補間動畫:選中第 1 幀,點擊「補間」按鈕,設定新增 15-20 幀,勾選「位置」「不透明度」「效果」,確定生成平滑過渡幀。
  5. 調整時長與循環:最後一幀延遲設為 2 秒(停留展示),其餘幀 0.1 秒;循環選項設為「永遠」。
  6. 預覽與導出:播放預覽無誤後,「檔案 > 存儲為 Web 所用格式」選 GIF,勾選動畫選項儲存。
最終動畫效果1
最終動畫效果2
新建文字圖層
白色填充層
選取右側空白區
白到透明漸變填充
漸變填充效果
溶解模式位移對齊
動畫面板複製幀
遮罩右移顯示文字
補間動畫設定
幀延遲設定
存儲為Web格式

進階變化

  • 將遮罩漸變方向改為垂直,實現上下淡入。
  • 為每個字母建立獨立遮罩層,配合不同時差補間,做出逐字淡入序列動畫。
  • 結合「圖層樣式 > 外發光」在文字顯示瞬間添加閃爍效果。

PS 幀動畫雖簡單,但掌握「遮罩位移 + 補間」核心邏輯,配合圖層樣式,足以應付大多數輕量級動態文字需求!

copyright © 萬盛學電腦網 all rights reserved