Photoshop 用濾鏡製作下雨 GIF 動畫

用 PS 做下雨動畫，核心是動作錄製加時間軸。先錄一段造雨滴的動作讓圖層自動複製，再用時間軸生成幀動畫，然後匯出 GIF。檔案小，當網頁背景或表情都合適，線上PS 也能錄動作。

1️⃣ 準備工作

1. 開啟 線上ps（zaixianps.cc）。
2. 按 Ctrl+O（或點選左上角 檔案 → 開啟）載入你想製作雨滴效果的背景圖。
3. 確認背景圖已在圖層面板中位於最底層（通常顯示為 背景，若有鎖定請雙擊解鎖為普通圖層）。

2️⃣ 建立動作（Action）並錄製雨滴圖層

1. 按 Alt+F9 開啟 動作面板。
2. 點選面板右上角的 建立新組，命名為 預設動作1組。
3. 在該組裡點選 建立新動作，設定：
   • 名稱：下雨
   • 組：預設動作1組
   • 功能鍵：F2
4. 點選 記錄（紅點閃爍）開始錄製。
5. 錄製雨滴圖層
1. 按 Shift+Ctrl+N 新建圖層，預設命名為 圖層 1。
2. 選中 圖層 1 後，按 Shift+F5 開啟填滿，對話方塊裡：
   • 內容：黑色
   • 模式：正常
   • 不透明度：100%
3. 依次選擇 濾鏡 → 噪點 → 新增噪點，引數：
   • 數量：20%
   • 分佈：高斯
   • 單色：✅（勾選）
   ※ 噪點數量決定雨點的密度與尺寸，太大畫面會顯得灰暗，太小則看不出動態。
4. 繼續選擇 濾鏡 → 模糊 → 動態模糊，引數：
   • 角度：90°（垂直向下）
   • 距離：25 畫素
5. 在 圖層 1 的 混合模式下拉框中選擇 濾色（Screen）。此時雨滴呈現透明的白色效果。
6. 如果雨滴邊緣出現深色或噪點，可按 Ctrl+T（自由變形），適當放大圖層，使邊緣超出畫布範圍，從而隱藏不需要的顏色。
6. 完成以上步驟後，點選動作面板底部的 停止播放/記錄（方塊圖示）結束錄製。

3️⃣ 讓動作自動複製圖層

1. 確保動作面板仍開啟，選中剛才錄好的 下雨 動作。
2. 連續按兩次 F2（即快速鍵），系統會自動執行該動作兩次，分別生成 圖層 2 與 圖層 3（共 3 個雨滴圖層）。
3. 此時圖層面板應該看到：
   背景、圖層 1、圖層 2、圖層 3。

4️⃣ 用時間軸製作幀動畫（GIF）

1. 開啟 視窗 → 時間軸（Window → Timeline）。
2. 彈出對話方塊預設是 建立影片時間軸，點選左下角的 建立幀動畫（不是影片）。
3. 建立三幀雨滴動畫
1. 預設出現 第一幀，點選幀下方的時間文字，設定 0.1 秒。
2. 在圖層面板中只保留 背景 與 圖層 1 的眼睛（可檢視標）為開啟狀態，其他圖層全部關閉。
3. 點選時間軸右下角的 複製所選幀（複製圖示），生成 第二幀。
   • 同樣設定時間為 0.1 秒。
   • 開啟 背景 與 圖層 2，關閉其餘圖層。
4. 再次點選 複製所選幀，生成 第三幀。
   • 時間仍為 0.1 秒。
   • 開啟 背景 與 圖層 3，關閉其餘圖層。

注意：每一幀對應的雨滴圖層是遞增的（幀1‑>圖層1，幀2‑>圖層2，幀3‑>圖層3），背景圖層始終保持可見。

4. 在時間軸左上角的 迴圈選項中選擇 永遠（Forever），保證 GIF 無限迴圈。
5. 點選時間軸中的 播放 按鈕預覽效果，若滿意進入下一步。

5️⃣ 匯出為 GIF（Web 用）

1. 使用快速鍵 Alt+Shift+Ctrl+S（或選單 檔案 → 匯出為 → GIF...）。
2. 彈出的設定面板中建議引數如下：
   • 顏色數量：256（最高品質）
   • 尺寸：保持原始寬高（或自行縮放）
   • 迴圈次數：永遠
   • 幀延遲：0.1 秒（已在時間軸中設定）
   • 其他：保持“統一調色盤”勾選
3. 點選 儲存，將生成的 .gif 檔案下載到本地。

🎉 完成！

現在你已經擁有一段 下雨 GIF 動畫，可直接用於網頁、社交媒體或任何需要動態雨景的場景。

參考資料

• Adobe Photoshop官方文件
• HTML5與現代前端圖片處理原理
• 線上ps