<?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>Vivid Web Graphics Blog &#187; apple menu photoshop</title>
	<atom:link href="http://blog.vividwebgraphics.com/tag/apple-menu-photoshop/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.vividwebgraphics.com</link>
	<description>San Diego Web Design Company</description>
	<lastBuildDate>Thu, 28 Jan 2010 00:38:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Create apple style menu navigation</title>
		<link>http://blog.vividwebgraphics.com/create-apple-style-menu-navigation</link>
		<comments>http://blog.vividwebgraphics.com/create-apple-style-menu-navigation#comments</comments>
		<pubDate>Fri, 03 Jul 2009 06:14:48 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[apple menu photoshop]]></category>
		<category><![CDATA[apple style menus]]></category>
		<category><![CDATA[create apple style menu]]></category>

		<guid isPermaLink="false">http://www.blog.vividwebgraphics.com/?p=73</guid>
		<description><![CDATA[Create apple style menu

1. Create new document
Navigate to the top menu File -&#62; New and set the document width to 850px and height to 200px â€“ click ok.
2. Set your background to white
Use the paint bucket tool to set the background color to white so we can see the artwork better.
3. Create the menu bar
- [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Create apple style menu</strong><br />
<img class="alignnone size-full wp-image-96" title="7-2-2009-11-15-30-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-11-15-30-pm.jpg" alt="7-2-2009-11-15-30-pm" width="425" height="65" /><br />
1. <strong>Create new document</strong><br />
Navigate to the top menu File -&gt; New and set the document width to 850px and height to 200px â€“ click ok.</p>
<div id="attachment_74" class="wp-caption alignnone" style="width: 550px"><img class="size-full wp-image-74" title="7-2-2009-9-53-09-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-9-53-09-pm.jpg" alt="Create New Document File-&gt; New" width="540" height="310" /><p class="wp-caption-text">Create New Document File-&gt; New</p></div>
<p>2. <strong>Set your background to white</strong><br />
Use the paint bucket tool to set the background color to white so we can see the artwork better.</p>
<div id="attachment_75" class="wp-caption alignnone" style="width: 83px"><img class="alignnone size-full wp-image-99" title="7-2-2009-9-55-17-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-9-55-17-pm.jpg" alt="7-2-2009-9-55-17-pm" width="73" height="441" /><br />
<p class="wp-caption-text">Use the Paintbucket -white foreground color</p></div>
<p>3. <strong>Create the menu bar</strong><br />
- Use the rounded rectangle tool and set the radius to 5px.<br />
- You can set the radius in your top menu toolbar (visible when the rounded rectangle tool is selected).<br />
- Draw by point clicking and stretching your rounded rectangle to about 800px wide and 40 px in height.</p>
<div id="attachment_76" class="wp-caption alignnone" style="width: 283px"><img class="size-full wp-image-76" title="7-2-2009-10-36-21-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-36-21-pm.jpg" alt="Use the Rounded Rectangle Tool" width="273" height="242" /><p class="wp-caption-text">-Use the Rounded Rectangle Tool</p></div>
<div id="attachment_77" class="wp-caption alignnone" style="width: 376px"><img class="size-full wp-image-77" title="7-2-2009-10-38-14-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-38-14-pm.jpg" alt="Set the radius to 5px" width="366" height="39" /><p class="wp-caption-text">Set the radius to 5px</p></div>
<p>4. <strong>Select your rounded rectangle to outline your selection </strong><br />
- Hold the control key and click on the white square</p>
<div id="attachment_78" class="wp-caption alignnone" style="width: 223px"><img class="size-full wp-image-78" title="7-2-2009-10-43-55-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-43-55-pm.jpg" alt="Hold the control key and click on the white square" width="213" height="155" /><p class="wp-caption-text">Hold the control key and click on the white square</p></div>
<p>- This will create a selection</p>
<div id="attachment_79" class="wp-caption alignnone" style="width: 772px"><img class="size-full wp-image-79" title="7-2-2009-10-46-01-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-46-01-pm.jpg" alt="Selection" width="762" height="189" /><p class="wp-caption-text">Selection</p></div>
<p>5. <strong>Create a new layer</strong></p>
<div id="attachment_80" class="wp-caption alignnone" style="width: 229px"><img class="size-full wp-image-80" title="7-2-2009-9-58-37-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-9-58-37-pm.jpg" alt="Create new layer" width="219" height="394" /><p class="wp-caption-text">Create new layer</p></div>
<p>6. <strong>Set your foreground and background color </strong><br />
Foreground color: #d2d2d2<br />
Background color: #949494</p>
<div id="attachment_81" class="wp-caption alignnone" style="width: 77px"><img class="size-full wp-image-81" title="7-2-2009-10-01-07-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-01-07-pm.jpg" alt="Set foreground and background color" width="67" height="140" /><p class="wp-caption-text">Set foreground and background color</p></div>
<div id="attachment_82" class="wp-caption alignnone" style="width: 536px"><img class="size-full wp-image-82" title="7-2-2009-10-08-11-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-08-11-pm.jpg" alt="Enter the values " width="526" height="353" /><p class="wp-caption-text">Enter the values #949494 and #d2d2d2 respectively</p></div>
<p>7. <strong>Use your gradient tool to create the grey-ish transition</strong></p>
<div id="attachment_83" class="wp-caption alignnone" style="width: 78px"><img class="size-full wp-image-83" title="7-2-2009-10-53-50-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-53-50-pm.jpg" alt="Use the gradient tool" width="68" height="404" /><p class="wp-caption-text">Use the gradient tool</p></div>
<p>8. <strong>Create the gradient<br />
- </strong>Once the gradient tool is selected hold down your shift key and draw from the top of your selection to the bottom Â Â  of the selection by holding down your left mouse button and letting go at the bottom of the selection.</p>
<p>9. <strong>Create the menu seperators</strong></p>
<div id="attachment_84" class="wp-caption alignnone" style="width: 298px"><img class="size-full wp-image-84" title="7-2-2009-10-04-37-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-04-37-pm.jpg" alt="Use the line tool -&gt; set to 1px " width="288" height="238" /><p class="wp-caption-text">Use the line tool -&gt; set to 1px </p></div>
<p>- make sure your line is set to 1px &#8211; no style &#8211; #666666</p>
<div id="attachment_85" class="wp-caption alignnone" style="width: 460px"><img class="size-full wp-image-85" title="7-2-2009-10-59-41-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-59-41-pm.jpg" alt="1px #666666 no style" width="450" height="37" /><p class="wp-caption-text">1px #666666 no style</p></div>
<p>10. <strong>Draw a line in the same height as your main menu bar</strong><br />
- apply a stroke effect to the line using the values here below.<br />
<img class="alignnone size-full wp-image-86" title="7-2-2009-10-11-48-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-11-48-pm.jpg" alt="7-2-2009-10-11-48-pm" width="864" height="458" /></p>
<p>11. <strong>Set the Layer opacity to 40%</strong></p>
<p><img class="alignnone size-full wp-image-87" title="7-2-2009-11-04-16-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-11-04-16-pm.jpg" alt="7-2-2009-11-04-16-pm" width="213" height="108" /></p>
<p>12. R<strong>epeat step 11 to create multiple seperators or hit CTRL + J to duplicate layer</strong> ( command + J on Mac)<br />
distribute the separators evenly using the move tool (keyboard shortcut key is &#8216;V&#8217;)</p>
<p>13. <strong>Enter your menu names and set font style </strong></p>
<div id="attachment_88" class="wp-caption alignnone" style="width: 426px"><img class="size-full wp-image-88" title="7-2-2009-10-15-40-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-15-40-pm.jpg" alt="Font Color is #383838" width="416" height="34" /><p class="wp-caption-text">Font Color is #383838</p></div>
<p>Set font Style by using the drop shadow effect on the font and set values accordingly.</p>
<p><img class="alignnone size-full wp-image-89" title="7-2-2009-10-16-30-pm" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-10-16-30-pm.jpg" alt="7-2-2009-10-16-30-pm" width="595" height="421" /></p>
<p>14. <strong>Your menu is ready</strong></p>
<p><img class="alignnone size-full wp-image-97" title="7-2-2009-11-15-30-pm1" src="http://www.blog.vividwebgraphics.com/wp-content/uploads/2009/07/7-2-2009-11-15-30-pm1.jpg" alt="7-2-2009-11-15-30-pm1" width="425" height="65" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vividwebgraphics.com/create-apple-style-menu-navigation/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
