Create a stylish navigation bar background

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:

See Preview Here

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


Create a new document 300x100


Set the background to #EEEEEE


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

selection tool


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


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

drop shadow


Blend Mode color: #000000


gradient overlay


For the gradient use these settings:


gradient editor


Gradient colors: #EEEEEE to #DDDDDD


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

bar selection


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


Apply these Blending Options to the new layer:

bevel and emboss


gradient overlay


gradient editor


Gradient Colors: #0080C0 to #006699


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



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


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


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


<style type="text/css">
body {
background-image: url(navbarback_02.gif);
background-repeat: repeat-x;
background-color: #EEEEEE;


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


This is an example of the layout.


See Preview Here


If you enjoyed this tutorial please register at our forums.