<?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>Photoshop Tutorials &#187; reflecting icons</title>
	<atom:link href="http://www.photoshoptutorialsandtips.com/tag/reflecting-icons/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.photoshoptutorialsandtips.com</link>
	<description>Photoshop, Illustrator, and InDesign: New, Original Tutorials Every Week!</description>
	<lastBuildDate>Tue, 23 Mar 2010 00:30:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Reflecting Web Icons in Illustrator</title>
		<link>http://www.photoshoptutorialsandtips.com/illustrator-tutorials/reflecting-web-icons-in-illustrator/</link>
		<comments>http://www.photoshoptutorialsandtips.com/illustrator-tutorials/reflecting-web-icons-in-illustrator/#comments</comments>
		<pubDate>Mon, 08 Sep 2008 02:25:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Illustrator Tutorials]]></category>
		<category><![CDATA[reflecting icons]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://www.photoshoptutorialsandtips.com/?p=270</guid>
		<description><![CDATA[
One &#8221;web 2.0&#8243; look is the reflecting icon. The clean, crisp look of these attractive images makes clicking through a website&#8217;s navigation fun. Here&#8217;s how to make one of those neat icons.
Step 1
Open a new document in RGB mode, since this will be for the web and not for print. For this example, we&#8217;ll make a black background [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-279" title="webicon-lead" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-lead.jpg" alt="" width="500" height="134" /></p>
<p>One &#8221;web 2.0&#8243; look is the reflecting icon. The clean, crisp look of these attractive images makes clicking through a website&#8217;s navigation fun. Here&#8217;s how to make one of those neat icons.<span id="more-270"></span></p>
<p><strong>Step 1<br />
</strong>Open a new document in RGB mode, since this will be for the web and not for print. For this example, we&#8217;ll make a black background with white icons for a wide variation between the icons and their background. Draw a black square or rounded square with the Rectangle tool or the Rounded Rectangle tool (click-and-hold over the Rectangle tool icon on the Toolbar to get more options). Hold Shift while dragging to make a square.</p>
<p><img class="alignnone size-full wp-image-271" title="webicon-1" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-1.jpg" alt="" width="500" height="500" /></p>
<p><strong>Step 2</strong><br />
Click-and-hold the Rectangle tool icon and then click the Star tool. Change the Fill at the bottom of the Toolbar to White. Make sure the Stroke is set to None. Click-and-drag on the black square area to draw a white star.</p>
<p><img class="alignnone size-full wp-image-272" title="webicon-2" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-2.jpg" alt="" width="500" height="500" /></p>
<p><strong>Step 3</strong><br />
Click the Selection tool on the Toolbar. Hold down Option (PC: Alt) and click-and-drag the star to duplicate it. It doesn&#8217;t matter where you move it, we&#8217;ll situate it correctly next. With the Selection tool, click-and-hold the middle box at the top border of the star. Now drag it down so that is upside down but about half the size of the original star. Move it so its two points meet the points of the original star.</p>
<p><img class="alignnone size-full wp-image-273" title="webicon-3" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-3.jpg" alt="" width="500" height="503" /></p>
<p><strong>Step 4</strong><br />
Click the Rectangle tool and draw a rectangle over the new upside down star. In the Gradient palette (Window&gt;Gradient), change the gradient to white and black, and move the middle slider to the left. I set it to about 15%. Change the angle to 270° so the black is on bottom moving vertically to lighter shades.</p>
<p><img class="alignnone size-full wp-image-274" title="webicon-4" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-4.jpg" alt="" width="232" height="165" /></p>
<p><img class="alignnone size-full wp-image-275" title="webicon-5" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-5.jpg" alt="" width="500" height="500" /></p>
<p><strong>Step 5<br />
</strong>Select the rectangle we just made as well as the upside down, smaller star. One way to di this is to click-and-drag over the area with the Selection tool, then Shift-click the black background to de-select it. In the Transparency palette (Window&gt;Transparency), click the arrow to get the flyout menu. Click Make Opacity Mask. Now we have the reflecting icon!</p>
<p><img class="alignnone size-full wp-image-276" title="webicon-6" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-6.jpg" alt="" width="500" height="291" /></p>
<p><img class="alignnone size-full wp-image-277" title="webicon-7" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-7.jpg" alt="" width="500" height="504" /></p>
<p><strong>Step 6<br />
</strong>Try a few different shapes. Here I&#8217;ve drawn a few different objects by drawing the shapes then grouping them (Object&gt;Group) to create a few more examples.</p>
<p><strong><img class="alignnone size-full wp-image-278" title="webicon-8" src="http://www.photoshoptutorialsandtips.com/wp-content/uploads/2008/09/webicon-8.jpg" alt="" width="500" height="496" /><br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.photoshoptutorialsandtips.com/illustrator-tutorials/reflecting-web-icons-in-illustrator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
