下雨動畫不只是「畫幾滴水往下移」，關鍵在於：雨滴形狀的透視變化、落下速度的層次差異、與背景的融合模式、以及幀率與循環的無縫銜接。本教學將從零繪製單顆雨滴，擴展為雨滴陣列，利用 Photoshop 時間軸面板製作循環 GIF，適合網頁裝飾、UI Loading、場景氛圍動圖製作。

完成效果預覽

Step 1：背景漸變

新建 500×200 px 白底文件。新圖層徑向漸變（深藍→淺藍），模擬雨天天空漸層。

Step 2-4：單顆雨滴繪製（向量+濾鏡）

1. 新圖層，自定義形狀工具 (U) 選「水滴」形狀，畫出雨滴向量路徑。
2. 新空白圖層，Ctrl+點擊水滴圖層載入選區 → 填白。
3. 濾鏡 > 模糊 > 高斯模糊（半徑自訂 2~5 px）。
4. 再次載入水滴選區 → Ctrl+Shift+I 反選 → Delete 刪除外緣，得到柔邊半透明水滴。
5. Ctrl+J 複製 2 份，橡皮擦/鋼筆選區刪除部分形狀，形成 3 種長短不一的雨滴變體。合併 3 層（Ctrl+E）。

Step 5-7：構建雨滴陣列（大畫布法）

1. 解鎖背景圖層，畫布高度改 2000 px（影像 > 畫布大小），雨滴層模式改「濾色」（去黑留亮）。
2. 複製雨滴層 4 次，Ctrl+T 自由變換：縮放、旋轉、水平翻轉，形成大小、角度各異的雨滴群。
3. 再 Ctrl+J 複製整組，移動工具 (V) 將雨滴隨機分佈在藍色漸變區域上方。

Step 8-11：時間軸動畫製作

1. 視窗 > 時間軸 > 「建立影格動畫」。
2. 第 1 幀：雨滴群在畫面上方（藍色區域上）。
3. 複製幀 → 第 2 幀：選中所有雨滴圖層，向下移動至藍色區域下方（移動距離決定落下速度）。
4. 選擇第 1、2 幀 → 右鍵「補間」 → 幀數 35~40、時間 0.04 秒 → 產生平滑過渡幀。
5. 刪除原第 2 幀與最後多餘幀。
6. 裁切工具：勾選「隱藏」，框選藍色漸變區域，超出區域的雨滴在動畫中自動隱藏，形成「雨滴落入畫面再消失」的循環邏輯。

Step 12：匯出 GIF

Ctrl+Shift+Alt+S 存儲為 Web 格式 → 選 GIF、循環選項「永久」、顏色 256、抖動 88% → 儲存。

進階優化建議

• 多速度層：將雨滴分為遠/中/近三組，遠組移動距離短、近組移動距離長，產生景深視差。
• 雨滴形狀隨機化：用腳本/動作批量生成 50+ 種雨滴變體，再隨機抽樣分佈。
• 濺濺效果：地面接觸區域加白色點狀筆刷、模式「濾色」、關鍵幀透明度 0→100→0。
• 效能優化：幀數過多導致檔案過大時，可降低幀率（0.06~0.08 秒/幀）或減少雨滴數量。

同邏輯可延伸動畫

• 雪花飄落（形狀換六角星、速度慢、淡入淡出）
• 櫻花瓣飄舞（形狀換花瓣、加旋轉變換關鍵幀）
• 星塵/魔法粒子上升（反向移動、淡入淡出、顏色漸變）

掌握「素材繪製 → 陣列分佈 → 時間軸關鍵幀 → 補間 → 裁切遮罩 → GIF 輸出」這套標準流程，你就擁有了在 Photoshop 內快速產出各類循環動畫的能力。雨聲淅瀝，動畫成形，享受創作的節奏感吧！