<?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; drawing tutorial</title>
	<atom:link href="http://www.pstut.info/tag/drawing-tutorial/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>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>Christmas Snowy Night Sky &#8211; Photoshop Graphic Design Tutorial 7</title>
		<link>http://www.pstut.info/photoshop-tutorials/beautiful-snowy-sky/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/beautiful-snowy-sky/#comments</comments>
		<pubDate>Wed, 12 Dec 2007 00:25:38 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[Christmas cheer]]></category>
		<category><![CDATA[Christmas cheers]]></category>
		<category><![CDATA[Christmas image]]></category>
		<category><![CDATA[Christmas theme]]></category>
		<category><![CDATA[Christmas toast]]></category>
		<category><![CDATA[dark sky]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Merry Christmas]]></category>
		<category><![CDATA[night sky]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[Santa Claus]]></category>
		<category><![CDATA[Santa Claus image]]></category>
		<category><![CDATA[Santa Claus with glasses]]></category>
		<category><![CDATA[Santa Claus with wine]]></category>
		<category><![CDATA[Santa image]]></category>
		<category><![CDATA[Santa with glasses]]></category>
		<category><![CDATA[snowballs]]></category>
		<category><![CDATA[snowy night]]></category>
		<category><![CDATA[snowy sky]]></category>
		<category><![CDATA[winter sky]]></category>

		<guid isPermaLink="false">http://www.pstut.info/tutorials/beautiful-snowy-sky/</guid>
		<description><![CDATA[Today, we are going to design a winter white Christmas image on Photoshop that features a beautiful snowing night sky.  This snowy Christmas theme can be used for either a nice Christmas header or a web banner.  The Christmas image could also be used as a pretty Christmas ecard that you can email to others [...]]]></description>
			<content:encoded><![CDATA[<p>Today, we are going to design a winter white Christmas image on Photoshop that features a beautiful snowing night sky.  This snowy Christmas theme can be used for either a nice Christmas header or a web banner.  The Christmas image could also be used as a pretty Christmas ecard that you can email to others or pretty Christmas card that you can print out.  This is a relatively simple Photoshop tutorial, but it brings out a nice, beautiful Christmas picture with a snowing night sky as a result.  In my belief, any beginner in Photoshop can work around this Photoshop drawing tutorial and achieve the same results.</p>
<p><span id="more-122"></span></p>
<p>Let&#8217;s begin by establishing our working environment-in other words, a background.  You may use mine; however, it&#8217;s relatively simple to create.  All that I did was to grab the Dodge Tool, set the exposure to 50%, and went over the darkish blue color.  It creates a nice effect that will help us further in the tutorial.</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/2007/12/cfirst.jpg" alt="white-christmas-snowy-sky-photoshop-image-1" /></p>
<p>Now, we will start by adding some faded snow drops that should adjust the contrast as we apply white and lightish blue sprinkles of snow.  Select your Brush Tool with a Hard Round Tip the size of 5, and sprinkle little snow drops all around the center and a little around the background.  Make sure that you have your color preset set to white.  Now, set the the size to 1px and the color to black.  Go over around the white dots a little, do not go crazy with it-at least, not yet.  Once you have done that, set the Opacity level to 30%.</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/2007/12/csecond.jpg" alt="white-christmas-snowy-sky-photoshop-image-2" /></p>
<p>Now that we set up our base, let&#8217;s throw some sparkle to make it a little more vibrant.  Create a new layer and grab your Brush Tool again with a white color tip, and sort of make some dust all around the shaded snow drops.  After you have done the dusty sparkle, apply the following settings to your layer style properties in the Outer Glow feature:</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Third Effect" src="http://www.pstut.info/wp-content/uploads/2007/12/cthirdeffect.jpg" alt="white-christmas-snowy-sky-photoshop-third-effect" /></p>
<p><strong>Results</strong></p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/2007/12/cthird.jpg" alt="white-christmas-snowy-sky-photoshop-image-3" /></p>
<p>As you can see, it seems like there is not enough sparkle, so just duplicate the layer and spread it around a little.  Now that you have done that, let&#8217;s add some darker and bigger snow drops.  So grab your Brush with a Hard Tip size of 15px, and make sure that its color is black.  Make a few black circles around the sparkles, and apply the following Layer Style Properties:</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Fourth Effect" src="http://www.pstut.info/wp-content/uploads/2007/12/cfourtheffect.jpg" alt="white-christmas-snowy-sky-photoshop-fourth-effect" /></p>
<p><strong>Results</strong></p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/2007/12/cfourth.jpg" alt="white-christmas-snowy-sky-photoshop-image-4" /></p>
<p>Now, let&#8217;s add our little bond between the stars.  In order for you to create the lines, you will need to select your pen tool and set it to Paths.  If you are not sure, take a look at the image labeled on top with paths.  Now, decide which stars you want to connect together, and create the paths.  Once you have created the paths, make sure that your Brush is set to Hardtip 1px, and the color to #134469. Right click your path, and select Stroke Path and then with Brush Tool.  Once you have done that, you should have something like this:</p>
<p>Pen Path Settings<br />
<img title="White Christmas Snowy Sky Design with Photoshop Fifth Tool" src="http://www.pstut.info/wp-content/uploads/2007/12/cfifthtool.jpg" alt="white-christmas-snowy-sky-photoshop-fifth-tool" /></p>
<p><strong>Results</strong></p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/2007/12/cfifth.jpg" alt="white-christmas-snowy-sky-photoshop-image-5" /></p>
<p>Well, you are almost done.  Now, to actually create our artificially white snowdrops that are closer to the eye, grab your Brush Tool again and create a new layer.  Set the Hardtip to 16-17px, and make a nice white circle.  After that, either apply a gradient to it, or duplicate it with a greyish color and erase the top, whichever one you feel comfortable with.  Duplicate two or three of those white snowdrops, and resize them to small and smaller.  Spread them around, and you should have something like this:</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/2007/12/csixth.jpg" alt="white-christmas-snowy-sky-photoshop-image-6" /></p>
<p>You are done with your nice snowy/dreamy background.  After playing around for a little, I decided to make it a little Merry Christmas banner.</p>
<p><img title="White Christmas Snowy Sky Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/2007/12/cfinal.jpg" alt="white-christmas-snowy-sky-photoshop-image-7" /></p>
<p>I think that even though the tutorial is relatively easy and simple, the outcome is satisfying and pleasing.</p>
<p>Thank you for reading once again and I hope that you enjoyed it!</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;&#8230;</p>
<p>My banner now framed!</p>
<p><img src="http://www.pstut.info/wp-content/uploads/2007/12/examplebanner.jpg" alt="examplebanner.jpg" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/beautiful-snowy-sky/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Safety Icon Design &#8211; Photoshop Graphic Design Tutorial 6</title>
		<link>http://www.pstut.info/photoshop-tutorials/designing-a-safety-icon/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/designing-a-safety-icon/#comments</comments>
		<pubDate>Thu, 22 Nov 2007 18:02:07 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[be careful]]></category>
		<category><![CDATA[be safe]]></category>
		<category><![CDATA[caution]]></category>
		<category><![CDATA[drawing]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[exercise caution]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[safe]]></category>
		<category><![CDATA[safety]]></category>
		<category><![CDATA[safety icon]]></category>
		<category><![CDATA[safety image]]></category>
		<category><![CDATA[safety is key]]></category>
		<category><![CDATA[safety is number one]]></category>
		<category><![CDATA[safety sign]]></category>
		<category><![CDATA[safety signs]]></category>
		<category><![CDATA[take care]]></category>

		<guid isPermaLink="false">http://www.pstut.info/tutorials/designing-a-safety-iocn/</guid>
		<description><![CDATA[I was thinking about how to add to the list of Photoshop icon designs that I am working on.   Many of you have already read my &#8220;Creating a Calendar&#8221; icon.  Anyways, a new family member has arrived, and it is the Safety Icon.  Once you complete this Photoshop tutorial, you will have the following results: Let&#8217;s begin with the first [...]]]></description>
			<content:encoded><![CDATA[<p>I was thinking about how to add to the list of Photoshop icon designs that I am working on.   Many of you have already read my &#8220;Creating a Calendar&#8221; icon.  Anyways, a new family member has arrived, and it is the Safety Icon.  Once you complete this Photoshop tutorial, you will have the following results:<br />
<span id="more-89"></span><br />
Let&#8217;s begin with the first and foremost basic step, which is creating the environment or the background for our icon.  I have overlayed and added some shadows to my background so that you can just save my background, and start working straight from it.</p>
<p><img title="Safety Icon Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/2007/11/sone.jpg" alt="safety-icon-photoshop-image-1" /></p>
<p>Our first step would be creating a custom shape, which will be the Diamond Card from your Custom Shape Tool&#8217;s selection.  So grab that shape, set the background to white, and create an average size icon to the left-hand side of your background.</p>
<p><img title="Safety Icon Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/2007/11/stwo.jpg" alt="safety-icon-photoshop-image-2" /></p>
<p><img title="Safety Icon Design with Photoshop Image Two1" src="http://www.pstut.info/wp-content/uploads/2007/11/stwo1.jpg" alt="safety-icon-photoshop-image-Two1" /></p>
<p>Now that we have our shape, let&#8217;s add some base to it so that it will look more bulky.  I have put together a list of Layer Styles that you should apply, so go to Layer &gt; Layer Style &gt; &#8230; and begin!</p>
<p><img title="Safety Icon Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/2007/11/sthree.jpg" alt="safety-icon-photoshop-image-3" /></p>
<p><img title="Safety Icon Design with Photoshop Image Three1" src="http://www.pstut.info/wp-content/uploads/2007/11/sthree1.jpg" alt="safety-icon-photoshop-image-Three1" /></p>
<p><img title="Safety Icon Design with Photoshop Image Three2" src="http://www.pstut.info/wp-content/uploads/2007/11/sthree2.jpg" alt="safety-icon-photoshop-image-Three2" /></p>
<p>Looking good.  Our base is complete, so let&#8217;s begin to add details that will start the finish cut of our icon.  Grab the same Diamond Card Shape, and create the same icon, except smaller and inside the base of our icon.  Oh, and set the background to #ff6c00.</p>
<p><img title="Safety Icon Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/2007/11/sfour.jpg" alt="safety-icon-photoshop-image-4" /></p>
<p>We are getting closer to home, so now that we have the finish cut of our icon, let&#8217;s put some more detail on it.  Duplicate the shape that you have just created, and apply the following Layer Style:</p>
<p><img title="Safety Icon Design with Photoshop Image Five1" src="http://www.pstut.info/wp-content/uploads/2007/11/sfive1.jpg" alt="safety-icon-photoshop-image-Five1" /></p>
<p><strong>Results </strong></p>
<p><img title="Safety Icon Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/2007/11/sfive.jpg" alt="safety-icon-photoshop-image-5" /></p>
<p>Duplicate the same shape again, and clear all layer styles.  Now rasterize the shape, and grab your Burn Tool.  Start touching the left-hand side of the orange diamond.  Then grab the Eraser Tool to do some minor touch-up on the areas that stood out a little.</p>
<p><strong>Results </strong><br />
<img title="Safety Icon Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/2007/11/ssix.jpg" alt="safety-icon-photoshop-image-6" /></p>
<p>Now let&#8217;s add some shine to it.  Duplicate the original orange diamond again, clear off any layer styles, and grab your Dodge Tool.  Set the size to 110. and touch up on the top side of the diamond. Grab your Eraser Tool, and finish touching up on the areas that stand out.</p>
<p><strong>Results </strong></p>
<p><img title="Safety Icon Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/2007/11/sseven.jpg" alt="safety-icon-photoshop-image-7" /></p>
<p>We are almost in shape.  A few more details, and our icon is ready to be used.  Duplicate the orange diamond again, set the background to white, and rasterize it.  Then grab your Eliptical Marquee Tool, and cut off a nice chunk.  You can follow my guides beneath.  Once you have cut the shape, set the Blending Options to Overlay.  Use your Eraser Tool to touch up on the areas that stand out.</p>
<p><img title="Safety Icon Design with Photoshop Image Eight1" src="http://www.pstut.info/wp-content/uploads/2007/11/s81.jpg" alt="safety-icon-photoshop-image-eight1" /></p>
<p><img title="Safety Icon Design with Photoshop Image Eight2" src="http://www.pstut.info/wp-content/uploads/2007/11/s82.jpg" alt="safety-icon-photoshop-image-eight2" /></p>
<p><strong>Results</strong></p>
<p><img title="Safety Icon Design with Photoshop Image Eight3" src="http://www.pstut.info/wp-content/uploads/2007/11/s83.jpg" alt="safety-icon-photoshop-image-eight3" /></p>
<p>You can give yourself a nice pat on the back as we have just completed the most difficult part of the tutorial.  Everything else should go with an ease, so let&#8217;s get to it.  Go back to your Custom Shape Tool, and from the list, select School.  Place the shape in the center of the orange diamond, and go to Edit &#8211; Transform &#8211; Flip Horizontal.</p>
<p><strong>Results </strong></p>
<p><img title="Safety Icon Design with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/2007/11/s9.jpg" alt="safety-icon-photoshop-image-9" /></p>
<p>Let&#8217;s add some detail to our newly-installed shape.  Go to your Layer &#8211; Layer Style, and apply the following styles:</p>
<p><img title="Safety Icon Design with Photoshop Image 10" src="http://www.pstut.info/wp-content/uploads/2007/11/s10.jpg" alt="safety-icon-photoshop-image-10" /></p>
<p><strong>Results </strong></p>
<p><img title="Safety Icon Design with Photoshop Image 11" src="http://www.pstut.info/wp-content/uploads/2007/11/s11.jpg" alt="safety-icon-photoshop-image-11" /></p>
<p>You are now done.  You can go ahead and duplicate the icons and resize them.  After playing around a little, I got this:</p>
<p><img title="Safety Icon Design with Photoshop Image 12" src="http://www.pstut.info/wp-content/uploads/2007/11/sfinal.jpg" alt="safety-icon-photoshop-image-12" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/designing-a-safety-icon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ribbon Image Design &#8211; Photoshop Graphic Design Tutorial 5</title>
		<link>http://www.pstut.info/photoshop-tutorials/ribbon-image-design/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/ribbon-image-design/#comments</comments>
		<pubDate>Sat, 17 Nov 2007 03:40:15 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[banner]]></category>
		<category><![CDATA[banner image]]></category>
		<category><![CDATA[design tutorial]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[ribbon]]></category>
		<category><![CDATA[ribbon design]]></category>
		<category><![CDATA[ribbon image]]></category>
		<category><![CDATA[ribbon tutorial]]></category>
		<category><![CDATA[ribbons]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=68</guid>
		<description><![CDATA[Today, we are going to design in Photoshop a ribbon image that can be used for practically anything.  In our specific example for this Photoshop tutorial, we will be creating an advertisement banner for a store, a website, or any place that sells hardware. (Besides this ribbon design Photoshop tutorial described here on this site, you [...]]]></description>
			<content:encoded><![CDATA[<p>Today, we are going to design in Photoshop a ribbon image that can be used for practically anything.  In our specific example for this Photoshop tutorial, we will be creating an advertisement banner for a store, a website, or any place that sells hardware.  (Besides this ribbon design Photoshop tutorial described here on this site, you may also want to check out later on an easy way to generate an online <a href="http://www.websiteribbon.com/">ribbon corner banner design</a> where you can simply paste some JavaScript generated onto your site.)<br />
<span id="more-68"></span><br />
Let&#8217;s begin by creating for ourselves a nice background/environment on which to place our Ribbon and details.  The Color used for the background is #83b70b.  Gradient Layer Style you can see below along with the small preview.</p>
<p><img title="Ribbon Banner Design with Photoshop Image First1" src="http://www.pstut.info/wp-content/uploads/2007/11/rfirst.jpg" alt="ribbon-banner-design-photoshop-image-first1" /></p>
<p><img title="Ribbon Banner Design with Photoshop Image First2" src="http://www.pstut.info/wp-content/uploads/2007/11/rfirst2.jpg" alt="ribbon-banner-design-photoshop-image-first2" /></p>
<p>Now that you have done that, let&#8217;s proceed to adding details to our background.  Grab your Rectangular Marquee Tool, and put it maybe 50 pixels away from the top, and draw a nice dark rectangle (#3409005).  Following that, grab your Eraser Tool and smoothly erase the bottom of the newly-created rectangular.  This should leave you with a nice shadow effect.</p>
<p><img title="Ribbon Banner Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/2007/11/rsecond.jpg" alt="ribbon-banner-design-photoshop-image-2" /></p>
<p>Grab your Pencil Tool, and set the Size to 1 PX and color to #FFFFFF.  Make a nice line over the Shadow, directly on top.  After that, go to your Layer Settings, and set the Blending Options to Overlay.  Take a look below for the Blending Option Settings:</p>
<p><img title="Ribbon Banner Design with Photoshop Image Third1" src="http://www.pstut.info/wp-content/uploads/2007/11/rthird1.jpg" alt="ribbon-banner-design-photoshop-image-third1" /></p>
<p><img title="Ribbon Banner Design with Photoshop Image Third2" src="http://www.pstut.info/wp-content/uploads/2007/11/rthird2.jpg" alt="ribbon-banner-design-photoshop-image-third2" /></p>
<p>Now, it&#8217;s time to create the Ribbon, which is our main objective in this tutorial.  Grab your pen tool, and create a ribbon-like shape.  If you have problems creating one on your own, you can trace mine. Once you have created the shape, set the background color to #e84200.</p>
<p><img title="Ribbon Banner Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/2007/11/rfourt.jpg" alt="ribbon-banner-design-photoshop-image-4" /></p>
<p>We have the Ribbon made, but as you can see, its quite plain, so we need to detail it.  I have organized a list of Layer Styles below for you, so what you have to do is to go Layer &#8211; Layer Style, and Select Blending Options.  Once you get into that panel, start applying the following:</p>
<p><strong>Drop Shadow Settings</strong></p>
<p><img title="Ribbon Banner Design with Photoshop Image Fifth1" src="http://www.pstut.info/wp-content/uploads/2007/11/rfifth1.jpg" alt="ribbon-banner-design-photoshop-image-fifth1" /></p>
<p><strong>Inner Shadow Settings </strong></p>
<p><img title="Ribbon Banner Design with Photoshop Image Fifth2" src="http://www.pstut.info/wp-content/uploads/2007/11/rfifth2.jpg" alt="ribbon-banner-design-photoshop-image-fifth2" /></p>
<p><strong>Results</strong></p>
<p><img title="Ribbon Banner Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/2007/11/rfifth.jpg" alt="ribbon-banner-design-photoshop-image-5" /></p>
<p>Okay, so now that we have added details it&#8217;s time to do our so-called shine job.  Duplicate the original shape of the ribbon, and clear all layer styles.  Set the background to white, and raise (move up) the layer by 3-4 pixels.  Then select your Rectangular Marquee, and trim both sides at least 2 pixels.  Once you have trimmed, you should have a nice-looking duplicate, but a smaller version.  Grab your Eraser Tool, and set it to size 100, and gently brush off the top of the layer.  Your results should be along the lines of this:</p>
<p><img title="Ribbon Banner Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/2007/11/rsixth.jpg" alt="ribbon-banner-design-photoshop-image-6" /></p>
<p>Now it&#8217;s time to apply our Layer &#8211; Layer Style settings.  So go there, and apply the following:</p>
<p><img title="Ribbon Banner Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/2007/11/rseventh.jpg" alt="ribbon-banner-design-photoshop-image-7" /></p>
<p><strong>Results </strong></p>
<p><img title="Ribbon Banner Design with Photoshop Imgae Seventh1" src="http://www.pstut.info/wp-content/uploads/2007/11/rseventh1.jpg" alt="ribbon-banner-design-photoshop-image-seventh1" /></p>
<p>Okay, now go back to the Original Ribbon shape, duplicate it, and set the background to white once again.  After that, grab your Rectangular Marquee Tool, and cut it in half-one being white and the other one blank.  Following that, grab your Eraser Tool, and using the same settings as before, gently brush from top to bottom the right side of your newly-created layer.</p>
<p><img title="Ribbon Banner Design with Photoshop Image 8" src="http://www.pstut.info/wp-content/uploads/2007/11/reight.jpg" alt="ribbon-banner-design-photoshop-image-8" /></p>
<p>So that the Shine will look a little better, let&#8217;s apply some Blending Options.</p>
<p><img title="Ribbon Banner Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/2007/11/rseventh.jpg" alt="ribbon-banner-design-photoshop-image-7" /></p>
<p><img title="Ribbon Banner Design with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/2007/11/rnine.jpg" alt="ribbon-banner-design-photoshop-image-9" /></p>
<p>Now that your Ribbon is complete, you can detail it with anything.  I choose for it to be a discount banner for Apple Cinema Displays.  You can use it for any other purposes.  After playing around, here is what I got:</p>
<p><img title="Ribbon Banner Design with Photoshop Image Final" src="http://www.pstut.info/wp-content/uploads/2007/11/rfinal.jpg" alt="ribbon-banner-design-photoshop-image-final" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/ribbon-image-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  www.pstut.info/tag/drawing-tutorial/feed/ ) in 0.93251 seconds, on Feb 5th, 2012 at 1:30 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Feb 12th, 2012 at 1:30 am UTC -->
