<?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</title>
	<atom:link href="http://www.pstut.info/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>Join Us on Aeytimes to Share Ideas on Photoshop CS5</title>
		<link>http://www.pstut.info/photoshop-tutorials/join-us-on-aeytimes-to-share-ideas-on-photoshop-cs5/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/join-us-on-aeytimes-to-share-ideas-on-photoshop-cs5/#comments</comments>
		<pubDate>Fri, 10 Sep 2010 04:50:46 +0000</pubDate>
		<dc:creator>PhotoshopTutor</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=534</guid>
		<description><![CDATA[We&#8217;ve set up an ideas page on the Aeytimes Idea Journal to encourage people to share with us their new findings on Photoshop CS5, and how they have creatively put Photoshop CS5 to good use. Please go to the following page to share your ideas on Photoshop CS5: Share Photoshop CS5 Ideas.]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve set up an ideas page on the <a href="http://aeytimes.com/">Aeytimes Idea Journal</a> to encourage people to share with us their new findings on Photoshop CS5, and how they have creatively put Photoshop CS5 to good use.  Please go to the following page to share your ideas on Photoshop CS5:  <a href="http://aeytimes.com/ideas/163/Share_Photoshop_CS5_Ideas/">Share Photoshop CS5 Ideas</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/join-us-on-aeytimes-to-share-ideas-on-photoshop-cs5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutor Web Directory</title>
		<link>http://www.pstut.info/all-and-everything-about-updates/photoshop-web-directory/</link>
		<comments>http://www.pstut.info/all-and-everything-about-updates/photoshop-web-directory/#comments</comments>
		<pubDate>Sun, 11 Jan 2009 20:57:04 +0000</pubDate>
		<dc:creator>PhotoshopTutor</dc:creator>
				<category><![CDATA[General News]]></category>
		<category><![CDATA[Photoshop web directory]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=469</guid>
		<description><![CDATA[We have now set up a new Photoshop Resource called Photoshop Tutor Web Directory, which contains Photoshop-related resources.  Feel free to browse the site for Photoshop-related resources. New submissions are temporarily closed due to excessive spam. Alternatively, if you would like to submit and promote your site on a general web directory, here is a [...]]]></description>
			<content:encoded><![CDATA[<p>We have now set up a new Photoshop Resource called <a href="http://www.pstut.info/photoshopwebdirectory/"> Photoshop Tutor Web Directory</a>, which contains Photoshop-related resources.   Feel free to browse the site for Photoshop-related resources.  New submissions are temporarily closed due to excessive spam.</p>
<p>Alternatively, if you would like to submit and promote your site on a general web directory, here is a good general <a href="http://www.lobolinks.com/">links directory</a></p>
<p><span id="more-469"></span></p>
<p>Best wishes on a great year!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/all-and-everything-about-updates/photoshop-web-directory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pyramid Icon Design &#8211; Photoshop Graphic Design Tutorial 22</title>
		<link>http://www.pstut.info/photoshop-tutorials/pyramid-icon-design/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/pyramid-icon-design/#comments</comments>
		<pubDate>Sun, 15 Jun 2008 17:29:13 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[3-d pyramid]]></category>
		<category><![CDATA[3-dimensional pyramid]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[design icon]]></category>
		<category><![CDATA[draw]]></category>
		<category><![CDATA[draw a pyramid]]></category>
		<category><![CDATA[drawing]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[pyramid]]></category>
		<category><![CDATA[pyramid icon]]></category>
		<category><![CDATA[pyramid image]]></category>
		<category><![CDATA[three-dimensional pyramid]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=407</guid>
		<description><![CDATA[This graphic design Photoshop tutorial describes creation of a simple triangular icon design for a web design logo or icon.  I will walk you through how to use your pen tool to do this. There are many insights on how to use your Burn/Dodge Tool to create shades of lights and shadows in this Photoshop tutorial. &#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;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230; [...]]]></description>
			<content:encoded><![CDATA[<p>This graphic design Photoshop tutorial describes creation of a simple triangular icon design for a web design logo or icon.  I will walk you through how to use your pen tool to do this. There are many insights on how to use your Burn/Dodge Tool to create shades of lights and shadows in this Photoshop tutorial.</p>
<p><span id="more-407"></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;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;</p>
<p>Start off by preparing your document; you may use a pre-made background listed below.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tribg.jpg"><img class="alignnone size-full wp-image-409" title="Pyramid Icon with Photoshop Image Background" src="http://www.pstut.info/wp-content/uploads/tribg.jpg" alt="pyramid-icon-photoshop-image-background" width="500" height="500" /></a></p>
<p>Let&#8217;s begin by creating one of the sides to our pyramid. The pen tool settings are listed below the preview.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri1.jpg"><img class="alignnone size-full wp-image-408" title="Pyramid Icon with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/tri1.jpg" alt="pyramid-icon-photoshop-image-1" width="500" height="500" /></a></p>
<p><a href="http://www.pstut.info/wp-content/uploads/tripen.jpg"><img class="alignnone size-full wp-image-423" title="tripen" src="http://www.pstut.info/wp-content/uploads/tripen.jpg" alt="" width="500" height="32" /></a></p>
<p>Alright.  We have one of our sides.  Let&#8217;s begin adding the indent triangle inside.  Using the same pen tool settings, create a similar shape as mine inside.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri2.jpg"><img class="alignnone size-full wp-image-410" title="Pyramid Icon with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/tri2.jpg" alt="pyramid-icon-photoshop-image-2" width="500" height="500" /></a></p>
<p>It looks a little flat because we haven&#8217;t added the base to our newly-indented side of a pyramid. Let&#8217;s do that right now</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri3.jpg"><img class="alignnone size-full wp-image-411" title="Pyramid Icon with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/tri3.jpg" alt="pyramid-icon-photoshop-image-3" width="500" height="500" /></a></p>
<p>Let&#8217;s polish our original side of the pyramid.  Take out your doge tool, set it to size 180 and Exposure to 50%, and begin brushing it following the diagram below:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri4.jpg"><img class="alignnone size-full wp-image-412" title="Pyramid Icon with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/tri4.jpg" alt="pyramid-icon-photoshop-image-4" width="500" height="500" /></a></p>
<p>Let&#8217;s add an overlay and lower the opacity so that we can make the lighting stand out more.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri4overlay.jpg"><img class="alignnone size-full wp-image-413" title="Pyramid Icon with Photoshop Image 4 Overlay" src="http://www.pstut.info/wp-content/uploads/tri4overlay.jpg" alt="pyramid-icon-photoshop-image-4-overaly" width="500" height="368" /></a></p>
<p>Let&#8217;s go back to the indented pyramid and add some shadows to the base.  Following the diagram below, set your Burn tool to size 40 and begin brushing:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri5shadow.jpg"><img class="alignnone size-full wp-image-415" title="Pyramid Icon with Photoshop Image 5 Shadow" src="http://www.pstut.info/wp-content/uploads/tri5shadow.jpg" alt="pyramid-icon-photoshop-image-5-shadow" width="500" height="499" /></a></p>
<p>Looking good.  Go back to your original layer of the big pyramid and duplicate it.  Then go to Edit &#8211; Transform &#8211; Flip Horizontal.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri6.jpg"><img class="alignnone size-full wp-image-416" title="Pyramid Icon with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/tri6.jpg" alt="pyramid-icon-photoshop-image-6" width="500" height="500" /></a></p>
<p>Time for detail once again except this time, we will begin with the shadows since we need to have a set direction of light.  Take out the Burn Tool.  Set the size to 180 and the Exposure at 50%, and start brushing following the diagram below:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri6shadow.jpg"><img class="alignnone size-full wp-image-417" title="Pyramid Icon with Photoshop Image 6 Shadow" src="http://www.pstut.info/wp-content/uploads/tri6shadow.jpg" alt="pyramid-icon-photoshop-image-6-shadow" width="500" height="500" /></a></p>
<p>After that, drop the opacity to 70% and you should have something along the lines of this:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri7.jpg"><img class="alignnone size-full wp-image-418" title="Pyramid Icon with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/tri7.jpg" alt="pyramid-icon-photoshop-image-7" width="500" height="500" /></a></p>
<p>On top of the shadows, we need to fix up the light as well.  So take out your Dodge Tool and set the size to 180 and Exposure 50%.  Begin brushing following the diagram below:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/tri8.jpg"><img class="alignnone size-full wp-image-419" title="Pyramid Icon with Photoshop Image 8" src="http://www.pstut.info/wp-content/uploads/tri8.jpg" alt="pyramid-icon-photoshop-image-8" width="500" height="499" /></a></p>
<p>Apply the same overlay as you have did in the previous step.  After that, duplicate the indented triangle and go to Edit &#8211; Transform &#8211; Flip Horizontal.  Now you&#8217;re pretty much done.  Take a look at what this pyramid came out to be:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/trifinal.jpg"><img class="alignnone size-full wp-image-419" title="Pyramid Icon with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/trifinal.jpg" alt="pyramid-icon-photoshop-image-9" width="500" height="499" /></a></p>
<p>That about wraps it all.  Hopefully it was a relatively easy tutorial to follow.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/pyramid-icon-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Open Book Tutorial &#8211; Photoshop Graphic Design Tutorial 21</title>
		<link>http://www.pstut.info/photoshop-tutorials/open-book-tutorial/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/open-book-tutorial/#comments</comments>
		<pubDate>Tue, 13 May 2008 00:31:58 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[beautiful book]]></category>
		<category><![CDATA[beautiful book design]]></category>
		<category><![CDATA[book]]></category>
		<category><![CDATA[book design]]></category>
		<category><![CDATA[book image]]></category>
		<category><![CDATA[book pages]]></category>
		<category><![CDATA[classic book]]></category>
		<category><![CDATA[classic book design]]></category>
		<category><![CDATA[design tutorial]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[open book]]></category>
		<category><![CDATA[open book design]]></category>
		<category><![CDATA[open page design]]></category>
		<category><![CDATA[open pages]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=388</guid>
		<description><![CDATA[In a series of simple steps for this Photoshop graphic design tutorial, I will teach you how to design a simple but an effective open book design that can be used either for your flash autobiography or as a splash page for your website and web designs.  This Photoshop tutorial can even be accomplished by beginners, so [...]]]></description>
			<content:encoded><![CDATA[<p>In a series of simple steps for this Photoshop graphic design tutorial, I will teach you how to design a simple but an effective open book design that can be used either for your flash autobiography or as a splash page for your website and web designs.  This Photoshop tutorial can even be accomplished by beginners, so go ahead and give it a try!</p>
<p><span id="more-388"></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;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;</p>
<p>I have already prepared a background for you, so begin by copying it over to Photoshop.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bobg.jpg"><img class="alignnone size-full wp-image-404" title="Open Book Design with Photoshop Image Background" src="http://www.pstut.info/wp-content/uploads/bobg.jpg" alt="open-book-design-photoshop-image-background" width="500" height="384" /></a></p>
<p>So let&#8217;s begin by creating the hard cover of the book.  Grab your Rectangular Marquee Tool and create a rectangle approximately the size shown below.  Now select your Dodge Tool and set the radius over to 150; lightly dodge the tip of the cover.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo1.jpg"><img class="alignnone size-full wp-image-389" title="Open Book Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/bo1.jpg" alt="open-book-design-photoshop-image-1" width="500" height="384" /></a></p>
<p>We have our foundation now.  Let&#8217;s mold some detail into our cover.  Start applying the following layer styles over the cover:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo1overlay.jpg"><img class="alignnone size-full wp-image-390" title="Open Book Design with Photoshop Image 1 Overlay" src="http://www.pstut.info/wp-content/uploads/bo1overlay.jpg" alt="open-book-design-photoshop-image-1-overlay" width="500" height="370" /></a></p>
<p>And now the shadows:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo1shadow.jpg"><img class="alignnone size-full wp-image-391" title="Open Book Design with Photoshop Image 1 Shadow" src="http://www.pstut.info/wp-content/uploads/bo1shadow.jpg" alt="open-book-design-photoshop-image-1-shadow" width="500" height="370" /></a></p>
<p>Great.  Now let&#8217;s begin with our pages.  The idea is to create almost the same dimension rectangle except with an inch cropped off from the right.  So following the example below, create a white rectangle:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo2.jpg"><img class="alignnone size-full wp-image-392" title="Open Book Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/bo2.jpg" alt="open-book-design-photoshop-image-2" width="500" height="384" /></a></p>
<p>The base is there, so its time to add some detail.  Go to your layer styles and apply the following:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo2shadow.jpg"><img class="alignnone size-full wp-image-394" title="Open Book Design with Photoshop Image 2 Shadow" src="http://www.pstut.info/wp-content/uploads/bo2shadow.jpg" alt="open-book-design-photoshop-image-2-shadow" width="500" height="370" /></a></p>
<p>Now the gradient overlay:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo2gradient.jpg"><img class="alignnone size-full wp-image-393" title="Open Book Design with Photoshop Image 2 Gradient" src="http://www.pstut.info/wp-content/uploads/bo2gradient.jpg" alt="open-book-design-photoshop-image-2-gradient" width="500" height="370" /></a></p>
<p>Alright.  Now we have to resize it little by little and center vertically to the original page.  Make sure that the duplicate layers of the white page go underneath the original.  That way, the shadow creates depth and volume.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo3.jpg"><img class="alignnone size-full wp-image-395" title="Open Book Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/bo3.jpg" alt="open-book-design-photoshop-image-3" width="500" height="384" /></a></p>
<p>And continue to do that over a few times.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo4.jpg"><img class="alignnone size-full wp-image-396" title="Open Book Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/bo4.jpg" alt="open-book-design-photoshop-image-4" width="500" height="384" /></a></p>
<p>Okay.  So we are practically done here except now we have to actually add some detail to the white page since it looks really dull at the moment.  Go back to your Rectangular Marquee tool and create a graphical page inside the white page.  Follow my example:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo5.jpg"><img class="alignnone size-full wp-image-397" title="Open Book Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/bo5.jpg" alt="open-book-design-photoshop-image-5" width="500" height="384" /></a></p>
<p>Time to add a finish and some detail to our page by the uses of a Doge &amp; Burn Tool.  Begin by taking out your Doge Tool and setting the diameter to at least 250px and lightly dodging the tip of the brown page.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo6.jpg"><img class="alignnone size-full wp-image-398" title="Open Book Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/bo6.jpg" alt="open-book-design-photoshop-image-6" width="500" height="383" /></a></p>
<p>Put on the first layer of shadows as the foundation.  I used a Burn tip the size of 200 pixels</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo7.jpg"><img class="alignnone size-full wp-image-399" title="Open Book Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/bo7.jpg" alt="open-book-design-photoshop-image-7" width="500" height="383" /></a></p>
<p>Finish it up with a second layer of shadows, except this time focus on adding more shadows to the right hand side.  In this, I used a burn tip the size of 85px.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo8.jpg"><img class="alignnone size-full wp-image-400" title="Open Book Design with Photoshop Image 8" src="http://www.pstut.info/wp-content/uploads/bo8.jpg" alt="open-book-design-photoshop-image-8" width="500" height="383" /></a></p>
<p>Great.  Now you are pretty much done.  All you have to do is put all the layers into a set, duplicate it, and then Flip it Horizontally by going to Edit &#8211; Transform &#8211; Flip Horizontal.  Make sure you have the set highlighted so that you won&#8217;t have to go through every layer.</p>
<p>But wait, you will probably notice now that your right-hand side has a different gradient pattern on the white page than your left-hand side of the book.  No worries.  Go to the Layer Style Properties of your duplicated first white page and make sure that there is a check by Reverse:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bo9.jpg"><img class="alignnone size-full wp-image-401" title="Open Book Design with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/bo9.jpg" alt="open-book-design-photoshop-image-9" width="500" height="370" /></a></p>
<p>Great, now for our final touch.  Take out the Burn Tool again and on the right-hand side layer of the brown page, add a layer of shadow.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/b10.jpg"><img class="alignnone size-full wp-image-402" title="Open Book Design with Photoshop Image 10" src="http://www.pstut.info/wp-content/uploads/b10.jpg" alt="open-book-design-photoshop-image-10" width="500" height="383" /></a></p>
<p>And there you have it, a quick and easy way to design an open book that can probably be used for anything possible&#8211;whether it be a place holder for your poems or photographs this tutorial can serve your needs in a series of easy steps!</p>
<p><a href="http://www.pstut.info/wp-content/uploads/bofin.jpg"><img class="alignnone size-full wp-image-402" title="Open Book Design with Photoshop Image 11" src="http://www.pstut.info/wp-content/uploads/bofin.jpg" alt="open-book-design-photoshop-image-11" width="500" height="383" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/open-book-tutorial/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>
		<item>
		<title>GunMetal Metallic Interface &#8211; Photoshop Graphic Design Tutorial 19</title>
		<link>http://www.pstut.info/photoshop-tutorials/simple-gunmetal-interface/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/simple-gunmetal-interface/#comments</comments>
		<pubDate>Sat, 10 May 2008 01:06:04 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[gunmetal]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[metallic]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutor]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=356</guid>
		<description><![CDATA[Today, I&#8217;m going to show you a rather simple Photoshop graphic design tutorial to make a metallic interface.  Hopefully, it gives a good foundation to those who are interested in designing metallic interfaces with Photoshop.  As a small news update, I am working on a new layout for Photoshop Tutor and some new Photoshop tutorials, so stay tuned.  I [...]]]></description>
			<content:encoded><![CDATA[<p>Today, I&#8217;m going to show you a rather simple Photoshop graphic design tutorial to make a metallic interface.  Hopefully, it gives a good foundation to those who are interested in designing metallic interfaces with Photoshop.  As a small news update, I am working on a new layout for Photoshop Tutor and some new Photoshop tutorials, so stay tuned.  I understand that it&#8217;s been a rough couple of months!</p>
<p><span id="more-356"></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;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.</p>
<p>So let&#8217;s start with creating our document, I have prepped a background for you guys already, if you wish to use it.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metbase.jpg"><img class="alignnone size-full wp-image-357" title="Gunmetal Interface Design with Photoshop Image Background" src="http://www.pstut.info/wp-content/uploads/metbase.jpg" alt="gunmetal-interface-design-photoshop-image-background" width="500" height="500" /></a></p>
<p>Now by grabbing your Rectangular Marquee tool, create a new layer and an outline for the frame of the interface.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metfirst.jpg"><img class="alignnone size-full wp-image-358" title="Gunmetal Interface Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/metfirst.jpg" alt="gunmetal-interface-design-photoshop-image-1" width="500" height="500" /></a></p>
<p>Using the preferences below, apply a stroke to the outline:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metfirsta.jpg"><img class="alignnone size-full wp-image-359" title="Gunmetal Interface Design with Photoshop Image Firsta" src="http://www.pstut.info/wp-content/uploads/metfirsta.jpg" alt="gunmetal-interface-design-photoshop-image-firsta" width="321" height="318" /></a></p>
<p>Great, now we have the border for our interface.  So let&#8217;s start adding the detail touches so that we can make it look more metal-like.  Using our Dodge Tool with a diameter set to 45px, start stroking the left edge of the frame as shown below.  Apply the following effect over and over with different sizes along the other edges.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metsecond.jpg"><img class="alignnone size-full wp-image-360" title="Gunmetal Interface Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/metsecond.jpg" alt="gunmetal-interface-design-photoshop-image-2" width="500" height="500" /></a></p>
<p>Eventually, your results should come out to be looking along the lines of this:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metseconda.jpg"><img class="alignnone size-full wp-image-361" title="Gunmetal Interface Design with Photoshop Image Seconda" src="http://www.pstut.info/wp-content/uploads/metseconda.jpg" alt="gunmetal-interface-design-photoshop-image-seconda" width="500" height="500" /></a></p>
<p>Now that we have the feel of the metallic frame, let&#8217;s work on our Gun Metal background.  Simply begin by taking out the Rectangular Marquee tool and creating another rectangle inside the current frame, approximately 2px-3px apart.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metthird.jpg"><img class="alignnone size-full wp-image-362" title="Gunmetal Interface Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/metthird.jpg" alt="gunmetal-interface-design-photoshop-image-3" width="500" height="500" /></a></p>
<p>Follow that up with adding some noise:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metthirda.jpg"><img class="alignnone size-full wp-image-363" title="Gunmetal Interface Design with Photoshop Image Thirda" src="http://www.pstut.info/wp-content/uploads/metthirda.jpg" alt="gunmetal-interface-design-photoshop-image-thirda" width="322" height="425" /></a></p>
<p>Good.  Let&#8217;s move on to our shadows.  Go to your Layer &#8211; Layer Style &#8211; Inner Shadow and apply the following preferences:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metthirdshadow.jpg"><img class="alignnone size-full wp-image-365" title="Gunmetal Interface Design with Photoshop Image Third Shadow" src="http://www.pstut.info/wp-content/uploads/metthirdshadow.jpg" alt="gunmetal-interface-design-photoshop-image-third-shadow" width="500" height="370" /></a></p>
<p>For the final touch, let&#8217;s add a little bit of bevel.  Look below:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metthirdbevel1.jpg"><img class="alignnone size-full wp-image-366" title="Gunmetal Interface Design with Photoshop Third Bevel1" src="http://www.pstut.info/wp-content/uploads/metthirdbevel1.jpg" alt="gunmetal-interface-design-photoshop-image-third-bevel1" width="500" height="370" /></a></p>
<p>Okay, now to fix a little bit of the lighting, we are going to duplicate the layer and clear it off all styles.  (Clear Layer Styles.)  Following that, grab your Dodge Tool, and set the diameter to approximately 125px and stroke in the direction shown below, gradually decreasing.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metfourtha.jpg"><img class="alignnone size-full wp-image-367" title="Gunmetal Interface Design Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/metfourtha.jpg" alt="gunmetal-interface-design-photoshop-image-4" width="500" height="500" /></a></p>
<p>After that, set the Blending options in Layer &#8211; Layer Style to Overlay, and drop the opacity to 25%.  You should be looking at aproximately the same results on your screen:</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metfinal.jpg"><img class="alignnone size-full wp-image-368" title="Gunmetal Interface Design with Photoshop Image Final" src="http://www.pstut.info/wp-content/uploads/metfinal.jpg" alt="gunmetal-interface-design-photoshop-image-final" width="500" height="500" /></a></p>
<p>You can really do a lot with this tutorial using different shapes and methods.  This is just the basic introduction, the same way that you start to learn animation with the beginner&#8217;s step of adapting the color to change under a sequence of frames.</p>
<p><a href="http://www.pstut.info/wp-content/uploads/metfinal2.jpg"><img class="alignnone size-full wp-image-368" title="Gunmetal Interface Design with Photoshop Image Final 2" src="http://www.pstut.info/wp-content/uploads/metfinal2.jpg" alt="gunmetal-interface-design-photoshop-image-final-2" width="500" height="500" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/simple-gunmetal-interface/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  www.pstut.info/feed/ ) in 0.35412 seconds, on May 12th, 2012 at 9:33 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on May 19th, 2012 at 9:33 am UTC -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Quick Cache Is Fully Functional :-) ... A Quick Cache file was just served for (  www.pstut.info/feed/ ) in 0.00038 seconds, on May 17th, 2012 at 12:31 am UTC. -->
