Simple Business Navigation Bar

Simple Business Navigation Bar

This tutorial with guide you through how to make a simple navigation bar for your website. Your result should be similar to this:

View Example

If you need help on this tutorial register on the forum and post your question.

1.

First we will start by making a pattern preset that we will use for the background of the bar.

2.

Create a new document 5x5 with a transparent background.

3.

Using the Rectangular Marquee Tool draw small 1x1 pixel squares and fill them with black until you get this effect:

4.

Once you have this effect, go to Edit then Define Pattern. Give it a name and press OK.

5.

Now we can make the navigation bar

6.

Create a new document 800x30 (these dimensions depend on what your sites dimensions are, it can be adapted to fit 100% of the width, but thats another tutorial altogether.) You can use either a transparent background or use a background which you fill with what ever your site colours are.

7.

Select the Rounded Rectangle Tool, and set the Radius to 10px.

8.

Make the rectangle take up most of the canvas, but leave a small amount of space around the outside.

9.

Rasterize the shape and right click it and select Blending Options

10.

Use these Blending Options:

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

11.

Ctrl + Click the shape layers preview, and create a new layer.

12.

Select the Paint Bucket Tool and select Pattern, select the pattern that we made earlier and fill the selected area. This should create a hatched area across the nabigation bar.

13.

Change the Opacity of the layer to 15%

14.

Now you have the back to your navigation bar. Add text for the links and you are finished.

If you enjoyed this tutorial please register at our forums.