Create a Navigation Bar and Title Background

This tutorial with guide you through how to make a navigation bar for your site using a repeated image for the background and CSS to apply text on top of it. This tutorials takes in to account that you have a reasonable knowledge of Photoshop and CSS. You can see result here.

1. Create a new document 300x100

2. Set the background to #EEEEEE

3. Using the rectangular marquee tool make a large selection taking up most of the canvas like this:

4. Create a new layer and fill the selection with any colour.

5. Right Click the layer and select Blending Options and use these options:

Blend Mode color: #000000

For the gradient use these settings:

Gradient colors: #EEEEEE to #DDDDDD

6. Using the selection tool again create a small rectangle and delete this from Layer 1

7. With the selection still active create a new layer and fill with any color.

8. Apply these Blending Options to the new layer:

Gradient Colors: #0080C0 to #006699

9. Now select the Slice tool and slice it up like this:

10. Go to Save For Web and use whatever image settings you wish to use.

11. You will get 3 images, you can delete the 2 sides, but keep the narrow one.

12. This can now be placed as a repeated image on the x axis. To do this use this CSS:

This will place the image as the background and repeat it across the page.

This is an example of the layout - click here.