<?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>Design Pear &#187; icon</title>
	<atom:link href="http://www.designpear.com/tag/icon/feed" rel="self" type="application/rss+xml" />
	<link>http://www.designpear.com</link>
	<description>Web Design, Photoshop and Other Website Stuff</description>
	<lastBuildDate>Wed, 23 Sep 2009 04:51:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tutorial : Icon&#8217;s in photoshop</title>
		<link>http://www.designpear.com/tutorial-icon-in-photoshop</link>
		<comments>http://www.designpear.com/tutorial-icon-in-photoshop#comments</comments>
		<pubDate>Mon, 26 Nov 2007 04:18:13 +0000</pubDate>
		<dc:creator>designcrave</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://designpear.com/general-web/tutorial-icon-in-photoshop</guid>
		<description><![CDATA[
In this tutorial, I will show you how to create a simple home icon.  The final result will look like this:


1. First we will need to make a new canvas, I have used 40 by 40px but it&#8217;s up to you. Then make a new layer named &#8216;iconbg&#8217; and use the Rounded Rectangle Tool [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>In this tutorial, I will show you how to create a simple home icon.  The final result will look like this:</p>
<p><a href="http://www.designpear.com/?attachment_id=41"><img src="http://www.designpear.com/wp-content/uploads/2008/12/final.gif" alt="final" width="42" height="42" class="alignnone size-full wp-image-41" /></a></p>
<p><span id="more-8"></span></p>
<p>1. First we will need to make a new canvas, I have used 40 by 40px but it&#8217;s up to you. Then make a new layer named &#8216;iconbg&#8217; and use the Rounded Rectangle Tool with a radius of 5px to make a background for the icon (colour doesn&#8217;t matter).</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/step1" rel="attachment wp-att-45"><img src="http://www.designpear.com/wp-content/uploads/2008/12/step1.gif" alt="step1" width="42" height="42" class="alignnone size-full wp-image-45" /></a></p>
<p>2. Now we will need to change some layer styles, so double click on the &#8216;iconbg&#8217; layer and first check the gradient box and apply these settings<br />
<a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/gradient" rel="attachment wp-att-42"><img src="http://www.designpear.com/wp-content/uploads/2008/12/gradient.gif" alt="gradient" width="430" height="355" class="alignnone size-full wp-image-42" /></a></p>
<p>Check the stroke box and apply these settings</p>
<p><a href="http://www.designpear.com/photoshop/glossy-noise-styles/attachment/stroke" rel="attachment wp-att-49"><img src="http://www.designpear.com/wp-content/uploads/2008/12/stroke.gif" alt="stroke" width="319" height="210" class="alignnone size-full wp-image-49" /></a></p>
<p>And check the inner glow box and apply these settings</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/innerglow" rel="attachment wp-att-43"><img src="http://www.designpear.com/wp-content/uploads/2008/12/innerglow.gif" alt="innerglow" width="325" height="134" class="alignnone size-full wp-image-43" /></a></p>
<p>It should be looking something like this</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/step2" rel="attachment wp-att-46"><img src="http://www.designpear.com/wp-content/uploads/2008/12/step2.gif" alt="step2" width="42" height="42" class="alignnone size-full wp-image-46" /></a></p>
<p>3. Then create a new layer called &#8216;overlay&#8217; and select the iconbg layer by using the magic wand or CTRL + clicking the layer. Then using the Rectangular Marquee tool hold ALT and use your mouse to deselect the bottom half of what&#8217;s selected. Then using the paint bucket, fill the &#8216;overlay&#8217; layer with white. Now reduce the layers opacity to 10%.</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/step3" rel="attachment wp-att-47"><img src="http://www.designpear.com/wp-content/uploads/2008/12/step3.gif" alt="step3" width="42" height="42" class="alignnone size-full wp-image-47" /></a></p>
<p>4. Then create a new layer named &#8216;image&#8217; and make an outline of what you want the icon to show, I used a home.</p>
<p><a href="http://www.designpear.com/photoshop/glossy-noise-styles/attachment/step4" rel="attachment wp-att-48"><img src="http://www.designpear.com/wp-content/uploads/2008/12/step4.gif" alt="step4" width="42" height="42" class="alignnone size-full wp-image-48" /></a></p>
<p>5. Finally edit the layer settings of &#8216;image&#8217; layer and apply these two settings.</p>
<p>Colour overlay:</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/color2" rel="attachment wp-att-40"><img src="http://www.designpear.com/wp-content/uploads/2008/12/color2.gif" alt="color2" width="329" height="104" class="alignnone size-full wp-image-40" /></a></p>
<p>Inner Shadow:</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/innershadow" rel="attachment wp-att-44"><img src="http://www.designpear.com/wp-content/uploads/2008/12/innershadow.gif" alt="innershadow" width="318" height="272" class="alignnone size-full wp-image-44" /></a></p>
<p>You should have something like this as your final result</p>
<p><a href="http://www.designpear.com/photoshop/tutorial-icon-in-photoshop/attachment/final" rel="attachment wp-att-41"><img src="http://www.designpear.com/wp-content/uploads/2008/12/final.gif" alt="final" width="42" height="42" class="alignnone size-full wp-image-41" /></a></p>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designpear.com/tutorial-icon-in-photoshop/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
