Create a Simple Pond Ripple in Photoshop
Posted Saturday, October 11th, 2008I have been having a lot of positive comments over the past few months regarding my website footer design and the pond ripple used on the water. It is actually very simple to create with only a couple of design steps in photoshop. The following tutorial will show how it is created and offer a couple of examples for its use!
Step 1 – Setting the Stage
Open up a new document in Photoshop, in this example I am using a 500pxx500px working area.
Create two new layers, first called water, next called ripple. Then select your Gradient tool or (G) and choose two nice shades of blue. Here I have used #00589d and #409ed3.
NOTE: The further apart your fade colours are, the more harsh your ripple will look.
Now we select the first layer, ‘water‘ and stretch a fade straight up from top to bottom. Darker at the bottom, lighter towards the top.
You then select your second layer ‘ripple’ and reverse the process, Dark at the top, light at the bottom.
See example image below.
Step 2 – The Ripple
In this stage we are going to create the ripple, and this can be done in one simple step in Photoshop.
Make sure you have the ‘ripple‘ layer selected, then go to Filter > Distort > Zig Zag
This will open the following box.
Make sure under ‘Style‘, Pond ripples are selected. You can then tweak the Amount and the Ridges to whatever suits your project, here I have set Amount to 80 and Ridges to 5. Now simply select OK.
This will give you a full screen ripple on your stage. Now we need to adjust the height of the layer to add perspective. Make sure you are still on the ‘ripple’ layer and select your move tool (V)
NOTE: Select ‘Show Transform Controls’ at the top of your tool bar.
Now we drag the layer vertically squashing it to around 30% of its original height. This can also be set in the top toolbar.
Step 3 – Cleaning up
Now we have our ripple and the correct angle to view on the stage we need to do some manual cleaning up. You can play around with layer effects here either by lightening or darkening the layer, I have chosen to keep it as is and perform a feathered elliptical marquee to crop off any excess layer fade. To do this select your marquee tool and make sure you have feather set, in my example it is set to 10px.
We now draw an ellipse around the area we want to crop. We then inverse the selection (Shift + Ctrl + I) and cut or mask the excess.
After your feathered mask or crop you may find you need to tidy the image up further depending on how much you cropped off, if so this can be done simple using a soft Eraser tool.
And there we have it, a very simple pond ripple. No it is not photographic! But it can be improved upon, or used in a multitude of areas. See below a couple of examples.
The Floating Box
The Bobbing Puffin
Posted Friday, Oct 16th, 09
October 14th, 2008 at 2:44 am
thanks for the tutorials. do you have an documentation on how to ge teh box into the ripples?
October 20th, 2008 at 2:29 am
Lovely, thanks for sharing
October 31st, 2008 at 7:25 am
It’s Good Yaar
very nice in Photoshop
November 21st, 2008 at 3:59 am
I’ll be back…
November 24th, 2008 at 11:39 pm
Excelente! Me encanta.
December 15th, 2008 at 12:37 pm
wow it’s very good and wonderful,
thanks u very much for sharing………………………..
December 15th, 2008 at 12:47 pm
very good effect…woooow
January 5th, 2009 at 4:02 am
[...] Create a Simple Pond Ripple in Photoshop · Branded07 – [...]
January 5th, 2009 at 7:11 am
Its awesome. Excellent. Keep it up the good work.
January 9th, 2009 at 12:13 am
Love it ! thanks for the tutorial. How do you go about placing the box in the pond like that though? it would make a great header design and logo for my new site.
February 20th, 2009 at 1:24 pm
Hey Rob,
wanted to thank you for this Tutorial,
really like it!
joeldegiovanni.com/drowning.jpg
Here’s would be my tryout if you’re interested,
hope there are more to come!
I’m visiting your page from time to time,
keep posting!
Cheers Joel
February 20th, 2009 at 4:49 pm
tks.
Very usefull
February 20th, 2009 at 8:05 pm
@Joel
Nice job! Nice to see you have had a go and like the tutorial!
I am very busy at the moment with on going projects but I will be posting a new tutorial at the end of this month so keep an eye out!
March 3rd, 2009 at 7:55 pm
Nice work buddy & thanks for sharing, hope u’ll update ur tutorial section soon enough with more awesome stuff for us
March 12th, 2009 at 11:13 am
Nice effect and incredibly easy to create. Thanks for sharing.
May 11th, 2009 at 6:13 am
This is the best ripple effect tutorial I’ve seen so far. Simple enough and versatile for anyone to use. Thanks a lot!
June 24th, 2009 at 11:26 am
Thanks for the tutorial. Very very nice site by the way
June 26th, 2009 at 10:17 pm
Ohhh what a Fantastic Tut.
July 21st, 2009 at 7:04 am
I love this type of graphical contact. It is very different from the kind of things that you’ll find on psd tuts+. That is more like taking pics from stock xchange and and making it look cool. I truly enjoyed the tutorial.
November 17th, 2009 at 10:35 pm
Hi there! It’s a great tutorial and very simple..! Thanks for this, I’ll keep visiting your site : )
November 20th, 2009 at 3:44 am
wow thanks rob this is great!
January 4th, 2010 at 10:30 am
Thanks for sharing. It is actualy so easy.
February 25th, 2010 at 11:20 am
Lovely Tutorial
Very helpful. Going to try this
Thanks