Photoshop: Make a Rain GIF Animation with Filters

About 11 min read

Home/ PS Tutorials/ Photoshop: Make a Rain GIF Animation with Filters

The core of a rain animation in PS is action recording plus the Timeline. Record an action that builds a raindrop layer so the layers duplicate themselves, use the Timeline to turn it into frame animation, then export a GIF. The file stays small, which makes it good for a page background or a sticker — and Online PS can record actions too.

1️⃣ Preparation

  1. Open Online PS (zaixianps.cc).
  2. Press Ctrl+O (or click File → Open in the top left) to load the background image you want to rain on.
  3. Make sure the background image is the bottom layer in the Layers panel (usually shown as Background; if it is locked, double-click it to unlock it as a normal layer).

2️⃣ Create an action and record the raindrop layer

  1. Press Alt+F9 to open the Actions panel.
  2. Click Create new set at the top right of the panel and name it Default Actions 1.
  3. Inside that set, click Create new action and set:
    • Name: Rain
    • Set: Default Actions 1
    • Function key: F2
  4. Click Record (the red dot starts blinking) to begin recording.
  5. Record the raindrop layer
    1. Press Shift+Ctrl+N to create a new layer, named Layer 1 by default.
    2. With Layer 1 selected, press Shift+F5 to open Fill, then in the dialog:
      • Contents: Black
      • Mode: Normal
      • Opacity: 100%
    3. Choose Filter → Noise → Add Noise with:
      • Amount: 20%
      • Distribution: Gaussian
      • Monochromatic: ✅ (ticked)
      ※ The noise amount controls how dense and how large the raindrops are — too much and the image turns gray and muddy, too little and the movement barely reads.
    4. Then choose Filter → Blur → Motion Blur with:
      • Angle: 90° (straight down)
      • Distance: 25 pixels
    5. In the Blending Mode dropdown of Layer 1, choose Screen. The raindrops now appear as transparent white streaks.
    6. If dark edges or noise show up around the raindrops, press Ctrl+T (Free Transform) and scale the layer up a little so its edges run past the canvas — that hides the unwanted color.
  6. Once the steps above are done, click Stop playing/recording at the bottom of the Actions panel (the square icon) to end the recording.

3️⃣ Let the action duplicate the layers for you

  1. With the Actions panel still open, select the Rain action you just recorded.
  2. Press F2 twice. The action runs twice and produces Layer 2 and Layer 3 — three raindrop layers in total.
  3. The Layers panel should now show:
    Background, Layer 1, Layer 2, Layer 3.

4️⃣ Build the frame animation (GIF) with the Timeline

  1. Open Window → Timeline (Window → Timeline).
  2. The dialog defaults to Create Video Timeline — click Create Frame Animation in the lower left instead (not video).
  3. Create a three-frame raindrop animation
    1. Frame 1 appears by default. Click the time label under the frame and set 0.1 seconds.
    2. In the Layers panel, leave only Background and Layer 1 with their eye icons on, and turn the rest off.
    3. Click Duplicate Selected Frames at the bottom right of the timeline to create Frame 2.
      • Set the time to 0.1 seconds as well.
      • Turn on Background and Layer 2, and hide the others.
    4. Click Duplicate Selected Frames again to create Frame 3.
      • The time stays at 0.1 seconds.
      • Turn on Background and Layer 3, and hide the others.

    Note: each frame uses the next raindrop layer (frame 1 → Layer 1, frame 2 → Layer 2, frame 3 → Layer 3), and the background layer stays visible the whole time.

  4. In Loop Options at the top left of the timeline, choose Forever so the GIF loops endlessly.
  5. Click Play in the timeline to preview it. If it looks right, move on to the next step.

5️⃣ Export as GIF (for the web)

  1. Use Alt+Shift+Ctrl+S (or the menu File → Export As → GIF...).
  2. In the settings panel that opens, these values work well:
    • Colors: 256 (best quality)
    • Size: keep the original width and height (or scale it yourself)
    • Looping: Forever
    • Frame delay: 0.1 seconds (already set in the timeline)
    • Other: leave "Uniform color palette" ticked
  3. Click Save and download the generated .gif file.

🎉 Done!

You now have a rain GIF animation, ready to drop into a web page, social media, or anywhere that calls for moving rain.

References

  • Adobe Photoshop official documentation
  • HTML5 and the principles of modern front-end image processing
  • Online PS
← Back to tutorial list