Make it Rain – Creating Animated Rain in Photoshop Part 2

Welcome back to part two of my three part animation blog series. If you were following along with part one, let me know how it went for you by leaving your comment in the comments section. Let’s jump right into part two and start animating!
Open up Photoshop and open your save file from last time. Here is a picture of where we left off.
Now go to Window-Animation. This will open up your animation timeline on the bottom of your screen.
Double click on Layer 2 to open up your Layer style sheet. From here you want to click on patern overlay. Go inside the pattern overlay menu and click on the rain pattern that we created in part 1 of this blog.
Now, while you still have your layer style sheet open click on the Blending options dialog box. In there you want to change the fill opacity to 0 and then click ok.
Now go to your animation window and open up the properties for layer 2 by click on the little arrow next to the layer. Once you do this click on the little icon next to the style. After that you want to move your timeline bar down to the end of the animation which is 10 seconds.
Open up your layer 2 style sheet again and click on pattern overlay one more time. Now you want to hold down the shift key and click on your image. While holding the shift key and click on the image drag your rain pattern down as much as you want to show rain falling. I usually do this 10-15 times.
After that change the blend mode in that same window to screen. you will now see the rain over your original image. Click ok.
Move your animation timeline back to the beginning. Here you’ll notice that the image no longer shows with the rain so double click on layer 2 once more and go back to pattern overlay in order to change the blend mond to screen. Click ok.
Now click play on your animation timeline, and there you have it. Rain! TIP: Your rain doesn’t have to fall straight down since you can make it fall sideways by pressing CNTRL or CMND or even by simply right click on layer 2. From there convernt layer 2 into a smart object. Make sure you change the layer back to screen and pressn CMND or CNTRL T to activate free transofrm. Rotate your rain and scale it up. Then press enter and press play again on your animation timeline window.
Now you want to save your work by going to File – Save for Web & Devices. From here save your animation as a gif.

Next time, I’ll add some cool effects to the image and make it look like it’s raining outside instead of inside!


Thanks for reading!


Sign up for the latest articles and resources!

Natural health and digital entrepreneur resourses.

Scroll to Top