Preview:

Dark Red Navigation Interface.

Step 1:

Let’s start out by creating a new file. I used a 900×160 pixels canvas set at 72dpi, and I filled my background with a black color. Now in a new layer draw a long rectangle with #79000E color shade and 900×50 px dimensions.

Step 2:

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

Result:

Step 3:

Create a new layer, above the red gradient design draw a long rectangle with #545454 color shade and 900 x 25 px dimensions.

Step 4:

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

Result:

Step 5:

Set your gray rectangle layer’s opacity level to 45%.

Step 6:

Now duplicate the low opacity gray rectangle layer and position it just below the red gradient.

Step 7:

Select your Horizontal Type Tool, above your screen under the options palette set the font family to Verdana, regular, 13 pt, none and #D50012 color shade. In a new text layer type out your navigation links with spaces between each link.

Step 8:

If you have sub navigations add them below the main links using font Arial, regular, 11 pt, none and white color shade.

Results:

Dark Red Navigation Interface.

2 Comments

Comments rss

Tadd - September 25th at 10:09 am:

Looks pretty good. I like the results. Could easily be coded up for a WP nav too it seems.

Jimbo - September 25th at 4:00 pm:

Nice and easy, when I got it. At first I created a style out the the settings for the inner shadow/color dodge and the gradient layer/color burn to your specs, and when I tried to lower the opacity, the layer just crackled. It happened over and over again. when i didn’t define it as a style, it worked fine. Is that a bug?

Post Your Comment »»

Name (required) Email (required) Website URL