<?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; gunmetal</title>
	<atom:link href="http://www.pstut.info/tag/gunmetal/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>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/tag/gunmetal/feed/ ) in 0.92477 seconds, on Feb 7th, 2012 at 7:22 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Feb 14th, 2012 at 7:22 am UTC -->
