<?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>WebDesign &#38; Such &#187; Apple Reflection</title>
	<atom:link href="http://webdesignandsuch.com/tag/apple-reflection/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdesignandsuch.com</link>
	<description>a Beantown Design Production</description>
	<lastBuildDate>Thu, 29 Jul 2010 00:02:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to create the Apple Product Image Reflection Effect in Photoshop</title>
		<link>http://webdesignandsuch.com/2009/05/how-to-create-the-apple-product-image-reflection-effect/</link>
		<comments>http://webdesignandsuch.com/2009/05/how-to-create-the-apple-product-image-reflection-effect/#comments</comments>
		<pubDate>Sat, 16 May 2009 19:31:38 +0000</pubDate>
		<dc:creator>ilz</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Apple Reflection]]></category>
		<category><![CDATA[Image Reflection Effect]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=144</guid>
		<description><![CDATA[
			
				
			
		

Apple is known for their clean designs, both in their products, and the way they display these products. One of the effects they have used a lot is displaying their images with a reflection of the product below it. When used correctly, this is a very simple, clean way to display products. 
I&#8217;m sure there [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-bottom:10px">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwebdesignandsuch.com%2F2009%2F05%2Fhow-to-create-the-apple-product-image-reflection-effect%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=?url=http%3A%2F%2Fwebdesignandsuch.com%2F2009%2F05%2Fhow-to-create-the-apple-product-image-reflection-effect%2F&amp;style=normal" height="61" width="51" /><br />
			</a>
		</div>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/12.jpg" title="reflection" class="frame" width="586" height="662" /></div>
<p><strong>Apple</strong> is known for their clean designs, both in their products, and the way they display these products. One of the effects they have used a lot is displaying their images with a reflection of the product below it. <strong>When used correctly</strong>, this is a very simple, clean way to display products. </p>
<p>I&#8217;m sure there are plenty of ways to create this, but <strong>I&#8217;ll show you the way I do it</strong>.</p>
<p><span id="more-144"></span></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/1.jpg" title="apple reflection" class="frame" width="543" height="309" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px"><strong>First, you will need an image of course</strong>.. I chose to use the exact Apple cinema display that I am staring at right now. I prefer to put the objects on a black background as I think this makes them really <strong>pop</strong>. You can use whatever color you want for yours.</p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/2.jpg" title="apple reflection effect" class="frame" width="637" height="562" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px"><strong>Double the height of your canvas</strong>, so you will have room for the reflection image</p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/3.jpg" title="apple reflection" class="frame" width="703" height="577" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">Next, <strong>click on the layer with the image</strong>, and choose <strong>Duplicate Layer</strong>. This will be the reflection image/ layer. In fact, I called this layer &#8220;reflection&#8221;, so I wouldn&#8217;t get the two confused.</p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/4.jpg" title="reflection" class="frame" width="332" height="546" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">We need to flip this image, so while clicked on the reflection layer, go to <br /><strong>Edit > Transform > Flip Vertical</strong></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/5.jpg" title="reflection" class="frame" width="637" height="574" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px"><strong>Slide the upside down image to the exact point where the two meet.</strong></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/6.jpg" title="reflection" class="frame" width="404" height="510" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">Now we need to make this reflection layer darker. <br />Go to <strong>Image > Adjustments > Levels</strong></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/7.jpg" title="apple reflection effect" class="frame" width="832" height="560" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">There is no exact number here, it depends on what <strong>you think looks good</strong>, and what image you are using. <strong>Use the slider to darken the image</strong>. </p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/8.jpg" title="reflection effect" class="frame" width="254" height="484" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">Finally, we are almost ready to create the gradient to fade out the reflection image. While clicked on the reflection layer, click on the <strong>Add vector mask</strong> icon at the bottom of your layers palette.</p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/9.jpg" title="apple reflection effect" class="frame" width="442" height="460" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">Next <strong>click on the gradient tool</strong> in your tool panel. You need your gradient to be the <strong>color of your background</strong> (in my case black) <strong>to transparent</strong></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/10.jpg" title="apple reflection" class="frame" width="673" height="575" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px">Now with the <strong>gradient tool</strong> selected, click about halfway up the image, and <strong>shift drag up to the point where the two meet</strong>. Again, this is not an exact science. Try different start and end points until you get a reflection the color and<strong> height that you want</strong>.</p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/11.jpg" title="apple effect" class="frame" width="673" height="575" /></div>
<p style="border-bottom:1px dotted #bbb; padding-bottom:10px"><strong>So there you have it, your own apple reflection image!</strong></p>
<div align="center"><img alt="" src="http://webdesignandsuch.com/imagesForPosts/reflection-images/12.jpg" title="apple reflection"  width="510" height="576" /></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/2009/05/how-to-create-the-apple-product-image-reflection-effect/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
