<?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>PSD Guides - Photoshop Tutorials and Free Psd &#187; web 2.0</title>
	<atom:link href="http://psdguides.com/tag/web-2-0/feed/" rel="self" type="application/rss+xml" />
	<link>http://psdguides.com</link>
	<description>Photoshop Tutorials and Resources</description>
	<lastBuildDate>Thu, 09 Sep 2010 07:50:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Create a quick glossy web2.0 icon in photoshop</title>
		<link>http://psdguides.com/2008/11/create-a-quick-glossy-web20-icon-in-photoshop/</link>
		<comments>http://psdguides.com/2008/11/create-a-quick-glossy-web20-icon-in-photoshop/#comments</comments>
		<pubDate>Sun, 16 Nov 2008 17:32:00 +0000</pubDate>
		<dc:creator>Rejis Dale</dc:creator>
				<category><![CDATA[Icons]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[button]]></category>
		<category><![CDATA[glossy button]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://psdguides.com/?p=448</guid>
		<description><![CDATA[In this tutorial we will learn how to create a quick, smooth and glossy a web2.0 icon. Even though the beauty of design lies in detail, we will try to make an icon in 10 steps. Open a document 300&#215;300 px. Draw guides to to make a center point. Create a circle of 250&#215;250. Apply [...]]]></description>
			<content:encoded><![CDATA[<p>In  this tutorial we will learn how to create a quick, smooth and glossy a  web2.0 icon. Even though the beauty of design lies in detail, we will  try to make an icon in 10 steps.<span id="more-448"></span><br />
Open a document 300&#215;300 px.</p>
<div class="wp-caption alignnone" style="width: 410px"><a title="Photoshop Inspiration" href="http://1.bp.blogspot.com/_h1AtqAA7avI/SR_VGAw3Z0I/AAAAAAAAAYA/r1fUtZoCMJc/s1600-h/screen1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269164388307658562" style="border: 0pt none;" title="Photoshop Inspiration" src="http://1.bp.blogspot.com/_h1AtqAA7avI/SR_VGAw3Z0I/AAAAAAAAAYA/r1fUtZoCMJc/s400/screen1.jpg" border="0" alt="Photoshop Inspiration" width="400" height="397" /></a><p class="wp-caption-text">Photoshop Inspiration 1</p></div>
<p>Draw guides to to make a center point. Create a circle of 250&#215;250. Apply a color. Here  I have put a red color #ed1c24.</p>
<p><a href="http://4.bp.blogspot.com/_h1AtqAA7avI/SR_VOA0OmKI/AAAAAAAAAYI/JVaLzZ5otBU/s1600-h/screen2.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269164525760714914" src="http://4.bp.blogspot.com/_h1AtqAA7avI/SR_VOA0OmKI/AAAAAAAAAYI/JVaLzZ5otBU/s400/screen2.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p><span> Lets apply some effects. Go to the layer style blending options and apply Inner Shadow</span></p>
<p><a href="http://3.bp.blogspot.com/_h1AtqAA7avI/SR_YnjTDyfI/AAAAAAAAAYY/kTY8y7X_NX4/s1600-h/screen3.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269168263048448498" src="http://3.bp.blogspot.com/_h1AtqAA7avI/SR_YnjTDyfI/AAAAAAAAAYY/kTY8y7X_NX4/s400/screen3.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Change the gradient to</p>
<p><a href="http://2.bp.blogspot.com/_h1AtqAA7avI/SSBCF5JAHQI/AAAAAAAAAYg/AU7w-ELugho/s1600-h/screen4.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269284233028836610" src="http://2.bp.blogspot.com/_h1AtqAA7avI/SSBCF5JAHQI/AAAAAAAAAYg/AU7w-ELugho/s400/screen4.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>After applying the result will be like this</p>
<p><a href="http://3.bp.blogspot.com/_h1AtqAA7avI/SSBEsPQU2SI/AAAAAAAAAYo/IF1_EnI4H7o/s1600-h/screen5.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269287090823420194" src="http://3.bp.blogspot.com/_h1AtqAA7avI/SSBEsPQU2SI/AAAAAAAAAYo/IF1_EnI4H7o/s400/screen5.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Make a new layer. Draw a ellipse with marquee tool as shown below. This is the main reflection layer.</p>
<p><a href="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBFTW4l81I/AAAAAAAAAZI/4tKvXPssGRk/s1600-h/screen6.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269287762886259538" src="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBFTW4l81I/AAAAAAAAAZI/4tKvXPssGRk/s400/screen6.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Select white color as foreground. Select the foreground to transparent fill from the gradient fill.</p>
<p>Fill it. It will be starting with white and blending down to red background color. Change the layer transparency to 65%.</p>
<p><a href="http://2.bp.blogspot.com/_h1AtqAA7avI/SSBFS3KYfwI/AAAAAAAAAZA/DDCbhflNyZw/s1600-h/screen7.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269287754370940674" src="http://2.bp.blogspot.com/_h1AtqAA7avI/SSBFS3KYfwI/AAAAAAAAAZA/DDCbhflNyZw/s400/screen7.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>To  make an outer ring draw another one ellipse of 15px more that the first  drawn one. Set the thickness on the outline depending on what size you  are going to use the icon size. Fifteen pixel will be fair enough for a  50px &#8211; 60px icon.</p>
<p>Apply the following settings for the ring. First we will apply gradient settings from the layer style.</p>
<p>Change the style of the gradient to reflected.</p>
<p>Angle to 13 degree. Scale to 110.</p>
<p><a href="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBNwwzXk3I/AAAAAAAAAZo/Q9oInMEF4L0/s1600-h/screen7b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269297064152896370" src="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBNwwzXk3I/AAAAAAAAAZo/Q9oInMEF4L0/s400/screen7b.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Apply the following settings for Satin.</p>
<p>Change the angle to 59 degree. Distance to 9. Size to 16.</p>
<p>Below you can see the contour settings. Click the anti-aliased  and invert check buttons.</p>
<p><a href="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBLk3tGs-I/AAAAAAAAAZY/_Pt5MBFmChg/s1600-h/screen7c.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269294660823987170" src="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBLk3tGs-I/AAAAAAAAAZY/_Pt5MBFmChg/s400/screen7c.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Make a new contour as shown.</p>
<p><a href="http://3.bp.blogspot.com/_h1AtqAA7avI/SSBQY92po9I/AAAAAAAAAZw/YUqCE7QlVhA/s1600-h/contour-settings.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269299953874346962" src="http://3.bp.blogspot.com/_h1AtqAA7avI/SSBQY92po9I/AAAAAAAAAZw/YUqCE7QlVhA/s400/contour-settings.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>Apply a pillow emboss for the inner red ellipse to stand out a little more.</p>
<p><a href="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBRfUEA5NI/AAAAAAAAAZ4/w3M7tZm7pEQ/s1600-h/setting-for-pillow.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269301162426819794" src="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBRfUEA5NI/AAAAAAAAAZ4/w3M7tZm7pEQ/s400/setting-for-pillow.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a><br />
<a href="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBHjr7g4RI/AAAAAAAAAZQ/UzDrGqHVf4M/s1600-h/screen8.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269290242436817170" src="http://1.bp.blogspot.com/_h1AtqAA7avI/SSBHjr7g4RI/AAAAAAAAAZQ/UzDrGqHVf4M/s400/screen8.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>From  the symbols font select any one and put it below the reflection layer.  Here i have used an home symbol. I gave a little black outer glow,  bevel and emboss, gradient overlay and stroke. This is the basic layer  required to make an icon.</p>
<p><a href="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBFSNQR3eI/AAAAAAAAAYw/BssoniJ1Nlo/s1600-h/screen9.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269287743121382882" src="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBFSNQR3eI/AAAAAAAAAYw/BssoniJ1Nlo/s400/screen9.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p>By changing the settings and adding a layer you can modify like below.</p>
<p><a href="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBTj7GKELI/AAAAAAAAAaA/EpbPI_ThoYQ/s1600-h/screen10.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5269303440647524530" src="http://4.bp.blogspot.com/_h1AtqAA7avI/SSBTj7GKELI/AAAAAAAAAaA/EpbPI_ThoYQ/s400/screen10.jpg" border="0" alt="%photoshop Create a quick glossy web2.0 icon in photoshop"  title="%free" /></a></p>
<p><a href="http://depositfiles.com/files/1y2qbf1ad">Download PSD file from here.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://psdguides.com/2008/11/create-a-quick-glossy-web20-icon-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
	</channel>
</rss>
