Photoshop フィルターで雨のGIFアニメーションを作る

PSで雨のアニメーションを作るときの中心は、アクションの記録とタイムラインです。雨粒を作るアクションを記録してレイヤーを自動で複製させ、タイムラインでフレームアニメーションにしてからGIFで書き出します。ファイルは軽いので、Webページの背景やスタンプに向いています。オンラインPSでもアクションは記録できます。

1️⃣ 準備

1. オンラインPS（zaixianps.cc）を開きます。
2. Ctrl+O を押します（または左上の ファイル → 開く をクリック）。雨を降らせたい背景画像を読み込みます。
3. 背景画像がレイヤーパネルの一番下にあることを確認します（通常は 背景 と表示されます。ロックされている場合はダブルクリックして通常のレイヤーにします）。

2️⃣ アクションを作成して雨粒レイヤーを記録する

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 の描画モードのドロップダウンでスクリーンを選びます。これで雨粒が透明な白い筋として見えます。
6. 雨粒の縁に暗い色やノイズが出る場合は、Ctrl+T（自由変形）でレイヤーを少し拡大し、縁がカンバスの外に出るようにすると、不要な色が隠れます。
6. ここまで終わったら、アクションパネル下部の再生／記録を停止（四角のアイコン）をクリックして記録を終了します。

3️⃣ アクションでレイヤーを自動複製する

1. アクションパネルを開いたまま、先ほど記録した 雨 アクションを選びます。
2. F2 を2回続けて押すと、アクションが2回実行され、レイヤー2 と レイヤー3 ができます（雨粒レイヤーは合計3枚）。
3. このときレイヤーパネルは次のようになっているはずです。
   背景、レイヤー1、レイヤー2、レイヤー3。

4️⃣ タイムラインでフレームアニメーション（GIF）を作る

1. ウィンドウ → タイムライン を開きます（Window → Timeline）。
2. ダイアログは既定でビデオタイムラインを作成になっているので、左下のフレームアニメーションを作成をクリックします（ビデオではありません）。
3. 3フレームの雨粒アニメーションを作る
1. 最初のフレームが既定で表示されます。フレーム下の時間表示をクリックして 0.1 秒に設定します。
2. レイヤーパネルで 背景 と レイヤー1 の目（表示アイコン）だけをオンにし、ほかのレイヤーはすべてオフにします。
3. タイムライン右下の選択したフレームを複製（複製アイコン）をクリックして、2フレーム目を作ります。
   • 時間も同じく 0.1 秒に設定します。
   • 背景 と レイヤー2 をオンにし、ほかはオフにします。
4. もう一度「選択したフレームを複製」をクリックして、3フレーム目を作ります。
   • 時間は 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アニメーションができました。Webページ、SNS、動く雨景色が必要なあらゆる場面でそのまま使えます。

参考資料

• Adobe Photoshop 公式ドキュメント
• HTML5 と現代フロントエンドの画像処理の仕組み
• オンラインPS