Preview:
Yahoo.com Navigation Interface.

Step 1:
Let's start out by creating a new file. I used a 1000x300 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a gray rectangle with #999999 color shade and 918 x 27 px dimensions.

Step 2:
Create a new layer, above your gray rectangle draw a dark blue rectangle with #2C4463 color shade and 918 x 27 px dimensions. Then under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options.






Step 3:
Choose the Horizontal Type Tool and set the font family to Arial, regular, 12 pt, crisp and white color. In a new text layer type the name of your first sleek button.


Step 4:
Now add the rounded rectangle tabs for your main navigation links. First select the Rounded Rectangle Tool, above your screen under the options palette choose Fill Pixels, set the radius to 4 px and check anti-aliased. Then create a new layer and draw a rounded rectangle with #2B4362 color shade and 126x30 px dimensions. Cut the bottom corners of your rounded rectangle.
Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your rounded rectangle layer.




Step 5:
Add your navigation text on the tab. Make the font bold so its not similar with the sub navigations.


Step 6:
In a new layer draw a light gray rounded rectangle tab with #F2F3F5 color shade and 77 x 18 px dimensions.

Step 7:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Satin blending options to your light gray rounded rectangle layer.






Step 8:
Add your navigation text on the tab. Make the font bold so its not similar with the sub navigations.


Step 9:
Add the rest of your navigation tabs.


Results:
Yahoo.com Navigation Interface.
Photoshop tutorials will be added to the site on a regular basis, so please check back to see the latest entries.





