40 Photoshop Tutorials On Rain Showers and Water Drops

Advertisement

With fall just around the corner, designers are looking for ways to complement their work with fall imagery like water droplets, rain on leaves and fall rain showers. Including rain or water drops in a scene can be a nice effect because water is a very compelling element. As you’ll see in the tutorials below, water drops and rain can completely change the dynamic of a design or photo.

Adding the illusion of water and rain to photographs using Photoshop can be a bit tricky. Many times the effect feels forced and cheesy, as if you’re looking at a grainy picture instead of an authentic rain shower. The tutorials below will give any designer inspiration for incorporating water scenes in fall designs and showcase some amazing water work by excellent designers. You’ll learn how to create realistic photos.

Here are other collections of Photoshop tutorials from Smashing Magazine:

Water Drop Tutorials

Basic water drops
An excellent tutorial showing how to make artistic, realistic water drops.

finaldrip.jpg

Designing a war movie poster
A step-by-step tutorial that teaches how to design a dark movie poster with water drops.

Screenshot

The Making Of “Our Future”
It is not really a tutorial, but the designer’s description provides some insight into how this poster was designed.

Screenshot

Artistic rain on an illustration
Beautiful example of adding rain to a dark illustration.

picture.jpg

Alien Water Photoshop Tutorial
With this Photoshop tutorial you learn how to make realistic alien-looking water.

Screenshot

The Rain Photoshop Tutorial
A simple Photoshop tutorial that will teach you how to embed water drops in dark sci-fi image.

Screenshot

Artistic rain effect
Create a complex composition with rain.

final.jpg

Displacement Water Photoshop Tutorial
The following tutorial shows how to create a relatively simple displacement map and how to create a water surface with it. This method does not adjust for wave height and distances, but it produces good results if the water is calm and if the surface is not intersected by other elements.

Screenshot

Water effect photo montage
An extremely creative way to turn a person into water.

20.jpg

Water Dress
Creating a Gisele Bundchen water dress

20.jpg

Waterdrops Photoshop Tutorial (video)
“In this video I’ll show you how to make realistic water drops. This is nothing original as I have learned this from other tutorials. I have
made some slight adjustments to suit my taste. Very simple to do. Have fun.”

waterdrops.jpg

Waterdrops in 5 Minutes
The basic idea to keep in mind when creating water drops is that they are a bit complex and they have highlights, shadows, transparencies, inner shadows and inner highlights. The best way to achieve these effects is by using the Layer Styles in Photoshop. You’ll be using shadow, inner shadow, inner glow, glow, bevel and many more.

leaf_drop1.jpg

Leaf drop tutorial
Big stylized leaf drops.

leaf_drop1.jpg

Add A Rainbow To A Photo
In this Photoshop photo effects tutorial, we’re going to learn how to easily add a rainbow, even a double rainbow, to a photo. Of course, as with most photo effects, it helps if you start with the right type of image.

Screenshot

Create Silky Smooth Waterfalls
In this Adobe Photoshop tutorial you are going to look at how to give waterfalls a silky smooth appearance, as if the photo was taken with a longer exposure which would normally require the use of a neutral density filter.

Screenshot

The Ocean’s Freshness Photo Effects
This tutorial teaches how to create a wallpaper in a fresh “ocean” style. Original illustration.

Screenshot

Water Drops
So realistic, these water drops (and optional ice drops) are also simple to do anywhere, anytime.

finaldrip.jpg

Rainy Day Animation Using Photoshop
“Today let’s try to make something special like an artificial rain drop using our Adobe Photoshop. Just follow the simple steps. Hope that you will enjoy the tutorial.”

Screenshot

Create Water Droplets Tutorial
Here are visual step-by-step instructions to quickly create realistic
water droplets. This tutorial assumes a basic knowledge of how to use Photoshop layers.

Rain Drops
“This is a technique I came up with when Photoshop version 6 came out. I was experimenting with some of the more advanced features of the Layer Styles dialog box and discovered some very handy techniques that can be used when you are creating transparent effects.”

Screenshot

Maple Water Drop

Screenshot

Water Shower Out of an Elephant’s Trunk

20.jpg

Create a Waterdrop
Older tutorial for Photoshop CS1

Water/Liquid Effects Tutorial Using Adobe Photoshop CS3 (video)

Water Drops! (YouTube video)
Drops on a Coke bottle.

waterdrops.jpg

Add A Snow To A Photo
This very easy tutorial will tell you how you can add snow to your photo.

Screenshot

Water drops on a spiderweb
Great effect for creating dewy spiderwebs.

Leaf drops
Realistic water droplets on leaves.

005.jpg

Adding water drops to waves
Excellent tutorial on spicing up an action photo, like of surfing, with water.

final-result1.jpg

Reflective writing with water
A great tutorial on how to write with reflective water lines.

image21.jpg

Ripple Tutorials

Illustrated water ripples

Great tutorial on how to create water ripples in Illustrator, but not Photoshop unfortunately.

ripple-04.jpg

water-ripple.jpg

Water Ripples

This tutorial is contained in a single picture.

water-ripple.jpg

Creating Water In Photoshop
“This is going to be a quick tutorial on how to create a water effect in Photoshop. This tutorial doesn’t take long and you can get a really awesome effect that does surprisingly look like water. Hopefully by the end you should end up with something like this.”

water-ripple.jpg

Running Water Tutorial

How to create running water

Create incredibly realistic flowing water.

tap_water_20.jpg

Realistic water running on tap
“Through this tutorial, we will learn how to use a combination of Photoshop filters to create a realistic effect of water running from a tap. Requires Photoshop CS2 or later.”

tap_water_20.jpg

Water Running Effect – Photoshop CS3 Tutorial
“In this tutorial we will show you how to create a water running effect in Photoshop CS3.”

tap_water_20.jpg

Seamless Water Texture
“In addition to using it for image backgrounds, this texture makes a great reflection map for more complicated works such as chrome objects.”

tap_water_20.jpg

Rain Tutorials

Transform a daylight image into a dark and stormy night
Amazing tutorial that shows how to modify a perfectly sunny image into a night picture with nasty elements.

final_large.jpg

Filtered rain effect
Learn how to use several filters to get a rain effect in photos.

final-result-2.jpg

Photoshop tutorial make rain cloud lighthouse

final-result-2.jpg

Rain Effect
Learn how to create an artificial rain effect. Follow this simple tutorial that shows how to add a rain effect to any image using Photoshop CS.

final-result-2.jpg

Rainy streets
Take a perfectly dry street and make it look rain-soaked.

rainy_day23.jpg

Photoshop Brushes

water_photoshop_brushes.jpg

Obsidian Dawn has created a couple of sets of Photoshop brushes that can greatly aid in the creation of water effects. You can find bubbles, drops, tears, rain, splashes and many other elements from this first set of brushes, Photoshop water brush set I. The second set of Photoshop brushes is similar to the first, except with a much higher resolution: Photoshop water brush set II.

Besides: Vector Water Drops in Adobe Illustrator, Rain – Tear Drop Brushes

Related Resources

Here are some other tutorials and Photoshop tutorials from Smashing Magazine:

Glen Stansberry writes for the web development blog Web Jackalope (feed).

(al)

Glen Stansberry is the editor at Web Jackalope, a blog about creative Web development.

  1. 1

    Bob

    September 25th, 2008 11:43 am

    first :) nice trick….

    -2
  2. 2

    KodAk

    September 25th, 2008 11:51 am

    Aww, Water effect photo montage looks like Shinybinary’s tutorial for DA, but it is more detailed :) Nice collection of tutorials, good job. ;)

    Second :proud: =D

    0
  3. 3

    Doferson

    September 25th, 2008 11:53 am

    yep, really nice techniques! thanks 2 Smash 4 a post!

    -2
  4. 4

    Justin

    September 25th, 2008 11:55 am

    A good selection of tutorials here…
    11:53am? In the UK its 9pm.

    -3
  5. 5

    MSOnWired

    September 25th, 2008 12:27 pm

    Nice post. I love how easy some of these effects are. They give each photo a totally different feel. I love the Andrei Bilan under water effect. The water effect photo montage is also very cool – great detail.

    onwired.com

    -3
  6. 6

    nick

    September 25th, 2008 1:34 pm

    Some are cool but others are lame. The “waterdrops to waves” looks like a 3rd grader did it.

    -2
  7. 7

    Roshan

    September 25th, 2008 2:03 pm

    I cannot say anything more but its a great article. with lots of resources as always.

    After gone through few of the examples I feel I need to learn a lot of new things. lol

    http://www.instantshift.com/

    -2
  8. 8

    lolol

    September 25th, 2008 2:15 pm

    Cool stuff. lulz

    -3
  9. 9

    xen-art.com

    September 25th, 2008 2:54 pm

    Wonderful effect on the “Water Dress”. It’s a good effect in web design

    -2
  10. 10

    yuki

    September 25th, 2008 3:07 pm

    Great! thank you!

    -2
  11. 11

    ArtHack

    September 25th, 2008 3:34 pm

    The very classical source material, thanks

    -2
  12. 12

    xiaoc

    September 25th, 2008 4:53 pm

    非常喜欢。
    I like it very much!
    thanks

    -2
  13. 13

    Vlad Gerasimov

    September 25th, 2008 6:03 pm

    Hey! You might also like a couple of my water drops tutorials:

    http://www.vladstudio.com/photoshoptutorials/?40

    http://www.vladstudio.com/photoshoptutorials/?37

    -2
  14. 14

    Fabio Badaró

    September 25th, 2008 6:06 pm

    Muito boa a galeria de Tutoriais….^.^)

    Great Job, thank you !!!!!!!!!!!! In Brazil now its 11pm.

    -2
  15. 15

    Ronald@naldzgraphics.com

    September 25th, 2008 8:16 pm

    great tutorials and collection.thanks a lot

    Ronald

    -2
  16. 16

    Bill Biwer

    September 25th, 2008 8:29 pm

    Really nice collection.

    http://www.williambiwer.com

    -2
  17. 17

    ixley

    September 25th, 2008 9:43 pm

    yeah, I’d say mixed bag. There are definitely some decent ones here, but I’d rather see consistent quality rather than a big selection with a bunch of unimpressive tuts mixed in.

    -2
  18. 18

    Spindrift

    September 25th, 2008 11:15 pm

    Smashing delivers. good job :)

    -3
  19. 19

    Justin (www.DotNetMushroom.com)

    September 25th, 2008 11:58 pm

    Absolutely love the artistic rain effect and the Alien water ! … The basic water drops tutorial will surely be useful for banners for a couple of products that we sell. Once again, great to see everything in one place ! .. Good job guys ! Keep us inspired !!

    DotNetMushroom

    -3
  20. 20

    Jani blog for a living

    September 26th, 2008 2:16 am

    Wow, these are great! I want to learn Photoshop, just have to get one :D
    I think my school gives it for free, I go now and check it out

    -1
  21. 21

    Shobhit

    September 26th, 2008 3:45 am

    You guys are God to US… :)

    Cheerios …

    -2
  22. 22

    Nathan Beck

    September 26th, 2008 4:08 am

    Awesome tutorials, more food for thought at lunch!

    -3
  23. 23

    Jackie

    September 26th, 2008 4:40 am

    Whoa…fantastic list. Thankyou!

    -2
  24. 24

    Ash

    September 26th, 2008 8:14 am

    Excellent article ! Thanx

    -2
  25. 25

    RD

    September 26th, 2008 8:29 am

    Rather unimpressed by the whole bunch… none (or at least a majority) of them appear realistic or well done in my opinion. I look forward to an explosion of terrible looking water effects on the internet. :(

    -2
  26. 26

    Russell Bishop

    September 26th, 2008 9:18 am

    Apologies Smashing, I do love you guys, but there are some very bad tutorials there.

    -2
  27. 27

    lumi

    September 26th, 2008 11:49 am

    very impressive i must say..

    -2
  28. 28

    Philip

    September 26th, 2008 12:46 pm

    You miss this tut (below the article) Underwater

    Water & Underwater in modern webdesign + Tutorial

    -2
  29. 29

    James

    September 26th, 2008 2:29 pm

    haha spot the typo!

    -2
  30. 30

    john

    September 26th, 2008 4:21 pm

    i seriously can’t stand the stuff posted on this site.

    nobody has any criticisms? everyone just praises everything.

    -2
  31. 31

    Fokus

    September 26th, 2008 10:24 pm

    excelent compilation as usual!

    -2
  32. 32

    scraby

    September 27th, 2008 6:19 am

    very classical source material, thanks

    -2
  33. 33

    James

    September 27th, 2008 6:40 am

    Nice tutorials!

    -2
  34. 34

    datu rocc

    September 27th, 2008 9:46 am

    thanks, now i have some stuff to do and lear to keep me occupied for the next month. peace.

    -1
  35. 35

    design

    September 27th, 2008 12:16 pm

    smashing magazine always have interesting articles and this one doesn’t disappoint. There’s always a need for good photoshop tutorials

    -1
  36. 36

    Heri

    September 27th, 2008 9:07 pm

    I naturally liked the water dress tutorial the best, hehe.

    -1
  37. 37

    bobmartien

    September 28th, 2008 7:18 am

    Thks ! Cool effect :D

    -1
  38. 38

    Yeahhh

    September 28th, 2008 10:14 am

    The Ocean’s Freshness Photo Effects, the result of doing an extremely shitty job ripping off someone else (http://mosk.deviantart.com/art/Fruit-43854159).

    -1
  39. 39

    Jason

    September 28th, 2008 10:31 am

    Wow. Great collection. These will definitely be of use to me.

    -1
  40. 40

    Daniel

    September 28th, 2008 11:23 am

    Another fantastic post… I’m your fan!

    Beat & Soul Records

    -1
  41. 41

    www.geeksbr.com

    September 28th, 2008 12:12 pm

    mto bom o blog!

    -1
  42. 42

    Eric

    September 29th, 2008 5:40 am

    The one with the asian girl in the bonnet, in front of the castle-like building looks horrible. Some of these look horrible too, some are okay.

    -1
  43. 43

    banban79

    October 1st, 2008 2:23 am

    very nice!!!!!!

    -1
  44. 44

    Bokatamz

    October 1st, 2008 9:02 pm

    Great! this is very useful!

    Thanks!

    -1
  45. 45

    Cahaya

    October 12th, 2008 10:27 am

    hellooooooooooo……………………

    -1
  46. 46

    Lynn

    October 19th, 2008 4:39 am

    I’m new @ this and I’m still trying to figure out what to do after the rain is added. I’ve followed all of the steps and have the actual rain image,but what do I enter to make the rain fall?

    -2
  47. 47

    Lynn

    October 19th, 2008 6:23 am

    And how do I get to Image ready and animation? Someone PLEASE assist! :)

    -2
  48. 48

    zee

    December 24th, 2008 1:01 am

    Really love this collection,it is really worth for improving our skills, how about smoke and ground edition?? can’t wait to see those topics

    -1
  49. 49

    Ethel Powers

    December 30th, 2008 4:16 pm

    I love this set of toots. However, when I finally got to the water skirt, I got a 404 error. Even the photo is taken down from sxc.com. Disappointed because I really need that one. I did the one above it instead.

    -1
  50. 50

    sivas

    March 21st, 2009 2:56 am


    great, thank you

    -1
  51. 51

    venkatesh

    August 7th, 2009 2:10 am

    awesome

    -1
  52. 52

    sivas

    August 15th, 2009 9:01 am

    very good, thank you

    -2
  53. 53

    DesignInn

    September 10th, 2009 5:12 am
    -1
  54. 54

    nitesh

    September 30th, 2009 11:05 am

    yaar thanx to the water effect plz give me more effects it’s truly umbilical
    it’s lovely

    -2
  55. 55

    Cizal

    October 1st, 2009 4:26 am

    I like the collection a lot :) One of my tutorials is actually in this collection: Leaf Drop tutorial. Thanks Smashing!

    -2
  56. 56

    Armig Esfahani

    October 8th, 2009 5:37 am

    awesome collection

    -2
  57. 57

    Arnold81

    October 22nd, 2009 2:17 am

    Race is one of those topics where it is almost impossible for a person to come to the table with an open mind. ,

    -2
  58. 58

    Daiyen

    January 18th, 2010 9:48 am

    Thanks for this article it’s very awesome tutorial,I like the ripple water,…nice job guys,…

    -2
  59. 59

    oytun

    January 28th, 2010 2:27 pm

    This source is just amazing!

    Thanks a lot!

    -2
  60. 60

    Jhun

    June 5th, 2010 6:07 am

    bro, the Sexy Girl Comic With Photoshop, is broken link

    -2
  61. 61

    Peter Nudo

    June 9th, 2010 11:05 pm

    Honestly, such a great roundup.

    -2
  62. 62

    sainump

    June 28th, 2010 7:28 pm

    oh!!

    -2
  63. 63

    Obrien

    July 1st, 2010 12:32 am

    amazing collection…
    thanks a lot :-)))

    -2
  64. 64

    yoonus

    July 9th, 2010 12:05 pm

    very Excellent article

    -2
  65. 65

    rasoul

    October 2nd, 2010 2:30 pm

    I love this set of toots
    very good, thank you
    rasul-from Iran

    -2
  66. 66

    aagii

    November 23rd, 2010 12:22 am

    nice

    -2
  67. 67

    annabelle

    December 7th, 2010 6:46 pm

    ooh!!!

    -2
  68. 68

    Mohammad

    December 8th, 2010 4:51 am

    well done

    -2
  69. 69

    Raghu

    January 5th, 2011 9:56 pm

    Great Material. I need some good photo affects in Photoshop7. i still use PS7. i like the version.

    -2
  70. 70

    Manish Kumar

    May 27th, 2011 12:42 am

    I used wolf’s tutorial it was amazing. Now I ll try nay next one.

    -2
  71. 71

    shameer basheerkutty

    July 5th, 2011 6:30 am

    nice treatment!!!!thanks a lot.

    -2
  72. 72

    Manoj Jirel

    August 25th, 2011 1:32 am

    I like the design, it’s great!

    -2
  73. 73

    bobby

    September 20th, 2011 8:11 am

    thanx for this nice tutorial,,,,,,
    its very helpful for me….

    -2
  74. 74

    MWAHAHA!!!

    September 28th, 2011 1:29 am

    MWAHAHAHA I AM SO EVIL< THAT I RATED EVERY COMMENT DOWN!!!!!! now rate me up plz!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top