Preview:
Sleek Navigation Interface.
Step 1:
Let’s start out by creating a new file. I used a 1000×400 pixels canvas set at 72dpi, and I filled my background with #002344 color shade. Now create a new layer then draw a long white rounded rectangle with 784 x49 px dimensions. Then cut the top corners of the white rounded rectangle.
Step 2:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the long white rounded rectangle layer.
Result:
Step 3:
In a new layer draw a white rounded rectangle with 108 x 36 px dimensions. Then cut the bottom corners off the small white rounded rectangle.
Step 4:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the small white rounded rectangle layer.
Result:
Step 5:
Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, smooth and #002344 color shade. In a new text layer type your first navigation link on the white button.
Step 6:
Create a new layer, next to your white rounded rectangle button draw a light blue button with #6BC6FF color shade.
Step 7:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your light blue button layer.
Result:
Step 8:
Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, smooth and white color. In a new text layer type your second navigation link on the blue button design.
Step 9:
Now add more buttons for the rest of your navigation links.
Step 10:
On the right end of your interface add buttons for your twitter and rss feed links.
Step 11:
Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, none and #002344 color shade. In a new text layer type your sub links on the long rectangle design.
Results:
Sleek Navigation Interface.
Linear Mode
