<?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>Graphic Design Tutorials &#124; Web Design, Icons, Logos &#187; retro design</title>
	<atom:link href="http://www.pstut.info/tag/retro-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pstut.info</link>
	<description>Graphics design tutorials on intermediate level Photoshop for web design, icons, logos, and text effects.</description>
	<lastBuildDate>Tue, 27 Dec 2011 16:59:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>3D Retro Strip Design &#8211; Photoshop Graphic Design Tutorial 20</title>
		<link>http://www.pstut.info/photoshop-tutorials/design-a-3d-retro-strip/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/design-a-3d-retro-strip/#comments</comments>
		<pubDate>Sat, 10 May 2008 18:31:37 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[3-dimensional strip]]></category>
		<category><![CDATA[3d strip]]></category>
		<category><![CDATA[design tutorial]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[retro design]]></category>
		<category><![CDATA[retro strip]]></category>
		<category><![CDATA[three-dimensional strip]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=372</guid>
		<description><![CDATA[Today, I was browsing around some web design templates and came upon quite an interesting concept, which gave me the idea for this graphic design Photoshop tutorial.  Basically, it&#8217;s quite a simple technique to use with a pen tool, but it does create some really sweet results.  Get ready in this web design tutorial to create a [...]]]></description>
			<content:encoded><![CDATA[<p>Today, I was browsing around some web design templates and came upon quite an interesting concept, which gave me the idea for this graphic design Photoshop tutorial.  Basically, it&#8217;s quite a simple technique to use with a pen tool, but it does create some really sweet results.  Get ready in this web design tutorial to create a 3D Retro Strip in a series of simple steps.</p>
<p><span id="more-372"></span></p>
<p>&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.</p>
<p>I have prepared a background for you; however, if you wish to make your own, please open a 500&#215;500 Document.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curvebg.jpg"><img class="alignnone size-full wp-image-374" title="3D Retro Strip Design with Photoshop Image Background" src="http://www.pstut.info/wp-content/uploads/curvebg.jpg" alt="3d-retro-curve-photoshop-image-background" width="500" height="500" /></a></p>
<p>Our first step is to create the foundation of the strip, which is the first layer before it bends to 3D. Following my outline and using the preferences listed below for the Pen Tool, create your own outline:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve1.jpg"><img class="alignnone size-full wp-image-375" title="3D Retro Curve Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/curve1.jpg" alt="3d-retro-curve-design-photoshop-image-1" width="500" height="500" /></a></p>
<p>Looking good.  Now that we have our foundation, let&#8217;s add some color to it in order to create variation and spacing of colors.  Using the same Pen Tool settings, follow the guide below to create a second color inside our main strip:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve2.jpg"><img class="alignnone size-full wp-image-376" title="3D Retro Curve Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/curve2.jpg" alt="3d-retro-curve-design-photoshop-image-2" width="500" height="500" /></a></p>
<p>Repeat the same step over twice again with the following colors (HINT: You can just duplicate and slide the layer over):</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve3.jpg"><img class="alignnone size-full wp-image-378" title="3D Retro Curve Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/curve3.jpg" alt="3d-retro-curve-design-photoshop-image-3" width="500" height="500" /></a></p>
<p>Alrighty, now we are beginning to create the depth in our strip.  We will begin by creating the corner tip at the right-hand side of the main strip.  Following the guidelines below and using the same pen tool settings, create the foundation for our corner:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve4.jpg"><img class="alignnone size-full wp-image-379" title="3D Retro Curve Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/curve4.jpg" alt="3d-retro-curve-design-photoshop-image-4" width="499" height="500" /></a></p>
<p>Just like we did for the main strip, we need to add color to our foundation.  We have to make sure that our colors come in order, so first the beige then the light green:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve5.jpg"><img class="alignnone size-full wp-image-380" title="3D Retro Curve Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/curve5.jpg" alt="3d-retro-curve-design-photoshop-image-5" width="500" height="500" /></a></p>
<p>Okay, now let&#8217;s do the light shade of the green using the same simple technique:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve6.jpg"><img class="alignnone size-full wp-image-381" title="3D Retro Curve Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/curve6.jpg" alt="3d-retro-curve-design-photoshop-image-6" width="500" height="500" /></a></p>
<p>I don&#8217;t know if you guys noticed, but the idea was to pick a color a shade darker so that we can create depth.  As you can see, we managed to do that just right.  In order to save the work with the pen tool and time, using the original layer of the strip, we will duplicate it, move it up to the tip of the corner, and cut off the leftovers.  Not to get you confused, I added a preview of what should have been done before the clipping occured:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve7.jpg"><img class="alignnone size-full wp-image-382" title="3D Retro Curve Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/curve7.jpg" alt="3d-retro-curve-design-photoshop-image-7" width="500" height="499" /></a></p>
<p>Using the same method, let&#8217;s duplicate our colored strips from the main base over to the sub-base of the strip.  In other words, here is what you should have:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve8.jpg"><img class="alignnone size-full wp-image-383" title="3D Retro Curve Design with Photoshop Image 8" src="http://www.pstut.info/wp-content/uploads/curve8.jpg" alt="3d-retro-curve-design-photoshop-image-8" width="500" height="500" /></a></p>
<p>Now that we have set up our colors and aligned our strip, we already can see the 3D Effect; however, let&#8217;s add some glare to it.  Take the base and change the color to white, and then Rasterize it (Make sure its a duplicate).  Now using your Eraser Tool with a diameter set to 100px, erase everything off besides the top, so it should look like a fade.  When you&#8217;re done, just set it to overlay.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curve9.jpg"><img class="alignnone size-full wp-image-384" title="3D Retro Curve Design with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/curve9.jpg" alt="3d-retro-curve-design-photoshop-image-9" width="500" height="500" /></a></p>
<p>You&#8217;re pretty much done.  After playing around a little, I came up with this result:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curvefinal.jpg"><img class="alignnone size-full wp-image-384" title="3D Retro Curve Design with Photoshop Image 10" src="http://www.pstut.info/wp-content/uploads/curvefinal.jpg" alt="3d-retro-curve-design-photoshop-image-10" width="500" height="500" /></a></p>
<p>This is a quite simple tutorial; however, it gives a nice introduction to the way that you can create simple, but effective, 3D objects that can make your layout just POP.  The inspiration came from a layout that I found on Monster Templates.  Take a look below:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/curveinsp.jpg"><img class="alignnone size-full wp-image-387" title="curveinsp" src="http://www.pstut.info/wp-content/uploads/curveinsp.jpg" alt="" width="500" height="428" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/design-a-3d-retro-strip/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  www.pstut.info/tag/retro-design/feed/ ) in 0.52574 seconds, on Feb 4th, 2012 at 8:02 pm UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Feb 11th, 2012 at 8:02 pm UTC -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Quick Cache Is Fully Functional :-) ... A Quick Cache file was just served for (  www.pstut.info/tag/retro-design/feed/ ) in 0.06854 seconds, on Feb 8th, 2012 at 7:37 am UTC. -->
