<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Branded07 &#187; tutorial</title>
	<atom:link href="http://www.branded07.com/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.branded07.com</link>
	<description>Online web design portfolio of Rob Palmer</description>
	<lastBuildDate>Tue, 06 Jul 2010 22:08:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Create a Simple Pond Ripple in Photoshop</title>
		<link>http://www.branded07.com/2008/10/11/create-a-simple-pond-ripple-in-photoshop/</link>
		<comments>http://www.branded07.com/2008/10/11/create-a-simple-pond-ripple-in-photoshop/#comments</comments>
		<pubDate>Sat, 11 Oct 2008 20:31:33 +0000</pubDate>
		<dc:creator>Rob</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.branded07.com/?p=24</guid>
		<description><![CDATA[<p>I have been having a lot of positive comments over the past month 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!</p>]]></description>
			<content:encoded><![CDATA[<p>I have been having a lot of positive comments over the past few months regarding my website <a title="Footer " href="#get_in_touch">footer design</a> 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!<span id="more-24"></span></p>
<h3>Step 1 &#8211; Setting the Stage</h3>
<p>Open up a new document in Photoshop, in this example I am using a <strong>500px</strong>x<strong>500px </strong>working area.</p>
<p>Create two new layers, first called <strong>water</strong>, next called <strong>ripple</strong>. Then select your Gradient tool or (G) and choose two nice shades of blue. Here I have used <strong>#00589d </strong>and <strong>#409ed3</strong>.</p>
<p><strong>NOTE:</strong> The further apart your fade colours are, the more harsh your ripple will look.</p>
<p>Now we select the first layer, &#8216;<strong>water</strong>&#8216; and stretch a fade straight up from top to bottom. Darker at the bottom, lighter towards the top.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple2.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple2.jpg" alt="Pond Fade" /></a></p>
<p>You then select your second layer &#8216;ripple&#8217; and reverse the process, Dark at the top, light at the bottom.</p>
<p>See example image below.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple1.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple1.jpg" alt="Pond Ripple Layer Creation" /></a></p>
<h3>Step 2 &#8211; The Ripple</h3>
<p>In this stage we are going to create the ripple, and this can be done in one simple step in Photoshop.</p>
<p>Make sure you have the &#8216;<strong>ripple</strong>&#8216; layer selected, then go to <em><strong>Filter </strong></em>&gt; <em><strong>Distort </strong></em>&gt; <em><strong>Zig Zag</strong></em></p>
<p>This will open the following box.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple3.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple3.jpg" alt="Distort Zig Zag" /></a></p>
<p>Make sure under &#8216;<strong>Style</strong>&#8216;, Pond ripples are selected. You can then tweak the <strong>Amount </strong>and the <strong>Ridges </strong>to whatever suits your project, here I have set Amount to <strong>80 </strong>and Ridges to <strong>5</strong>. Now simply select <strong>OK.</strong></p>
<p>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 &#8216;ripple&#8217; layer and select your move tool (V)</p>
<p><strong>NOTE:</strong> Select &#8216;Show Transform Controls&#8217; at the top of your tool bar.</p>
<p>Now we drag the layer vertically squashing it to around 30% of its original height. This can also be set in the top toolbar.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple4.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple4.jpg" alt="Adjust height" /></a></p>
<h3>Step 3 &#8211; Cleaning up</h3>
<p>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 <strong>feathered elliptical marquee</strong> 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.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple5.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple5.jpg" alt="Feathering" /></a></p>
<p>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.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple6.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple6.jpg" alt="Selction tool" /></a></p>
<p>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.</p>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple8.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple8.jpg" alt="After trimming" /></a></p>
<p>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.</p>
<h3>The Floating Box</h3>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example1.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example1.jpg" alt="Floating Box" /></a></p>
<h3>The Bobbing Puffin</h3>
<p><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example2.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example2.jpg" alt="Bobbing Puffin" /></a></p>
<h3>Heh, couldn&#8217;t resist!</h3>
<h3><a rel="lightbox[]" href="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example3.jpg"><img class="ngg-singlepic ngg-none" src="http://www.branded07.com/wp-content/gallery/tutorials/tut-pond-ripple-example3.jpg" alt="Arni Thumb" /></a></h3>
]]></content:encoded>
			<wfw:commentRss>http://www.branded07.com/2008/10/11/create-a-simple-pond-ripple-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
	</channel>
</rss>
