Her

Home Photoshop Tutorials Web Layout Aqua Theme Navigation Interface

Aqua Theme Navigation Interface

Author: PhotoTutorial.info Author's URL: www.phototutorial.info More by this author

Step 1:

Let's start out by creating a new file. I used a 8000x200 pixels canvas set at 72dpi, and I filled my background with white. Now create a new layer then draw a long dark green rectangle with #002C28 color shade and 722 x 34 px dimensions.

image 1

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your dark green rectangle layer.

image 2

image 3

image 4

Step 3:

Using the Rounded Rectangle Tool draw a dark green rounded rectangle with #002C28 color shade and 101 x 60 px dimensions. Then cut the bottom corners of the rounded rectangle and position as shown below.

image 5

Step 4:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to your small rounded rectangle layer.

image 6

image 7

image 8

image 9

Step 5:

Select the Horizontal Type Tool then set the font family to Arial, bold, 12 pt, none and white color shade. In a new text layer type 'Home' on the first tab.

image 10

Step 6:

Now add the rest of your navigation links with its own tab design. Make sure to remove the Inner Glow layer style from the original tab, that effect is for the active links.

image 11

Step 7:

Create a new layer then add a black tab design with 173 x 28 px dimensions next to your navigation tabs.

image 12

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your black rectangle layer. Then set the layer's blending mode to Lighten.

image 13

image 14

image 15

image 16

Step 9:

Select the Horizontal Type Tool then set the font family to Arial, bold, 12 pt, none and #002421 color shade. In a new text layer type your rss feed link on the light tab design.

image 17

Step 10:

Next to the light tab design add another tab for your contact and advertisement links.

image 18

Step 11:

Select the Horizontal Type Tool then set the font family to Arial, bold, 11 pt, none and #74807F color shade. In a new text layer type out your sub navigation links on the long rectangle, use #A8C1BF color shade for links.

image 19

Result:

Aqua Theme Navigation Interface