SigTutorials > Photoshop Signature Tutorials > Other Tutorials > Slick Blue navigation

Slick Blue navigation

Posted on December 18th, 2006. Written by JaspervD.

Learn how to create a slick looking web 2.0 website banner / header!


First step off course is to create a new file for you to make your design. Go to File > new or

simply press Ctrl+N. Choose your size, depending on your own preferences and hit ok.

Size used here is 600x147 pixels.

new file

Now think on what colors you wish to use as background and pick out two shades of it to make into your background.

Two shades of blue were used here. Our foreground color was set to #10365a and the background color to #2070bf.

Then take out the gradient tool ( gradient tool ) and pick the foreground to background, linear gradient.

gradient settings

Now simply drag your gradient on the layer, going from top to bottom.


Add a new layer and think where you're going to place the navigation links. Make a rectangle there with the

rectangular marquee tool ( Marquee tool ) and fill the selection with white.

Pic 2

Change this layer's blending mode to soft light and lower the fill to 25%.

Pic 3

Now to add a seperator inbetween your links. Create a new layer and using the rectangular marquee tool again,

make a one pixel selection on this layer.

Remember the colors we used on the background? We're going to use the same, just in opposite order.

So set your foreground to #2070bf and your background color to #10365a this time. Then use the

Foreground to background, linear gradient again to drag a gradient in the selection, from top to bottom. This will be your seperator.

Pic 4

Change the blending mode of this layer to soft light, to make it blend in better.

Pic 5

Press Ctrl+J to duplicate this layer. Do this according to the amount of navigation links you want to place.

Then simply move them into position.

Pic 6

On to adding some detail to the navigation. Make a new layer and use the rectangular marquee tool to make a

selection inbetween two seperators. Then we will fill this selection with a color. First color used here is #60c100.

Pic 7

Now we must repeat this step for every seperator space. To make sure you have the exact same size each time,

simply duplicate this layer and move to the next space. Then Ctrl+click the little image in front of the layer in your

layers window palette. This will make a selection of the rectangle. Then just use the paint bucket tool ( paint bucket tool ) to fill it with another color.

Color used this time is #f80000.

Pic 8

Repeat this step, color used this time is #feb70a.

Pic 9

And do it again. Last time here and the color used was #d200ff. Offc ourse, if you have more links and thus more seperators, you

simply add in some more colors.

Pic 10

Next step is to add a border, to spice up our header/navigator some more. Therefore, add a new layer and do the following.

Use the rectangular marquee tool to make a selection in the bottom of your header. Fill that with a color matching

your background. So a dark blue was used here (#03346c).

Pic 11

Add a new layer and take out the pencil tool ( Pencil tool ). Set your foreground color to something that matches your other colors.

Ours was set to a light blue
(#7dbfff). Then draw a one pixel line just above the rectangle we created in the previous step.

Pic 12

Duplicate this layer by pressing Ctrl+J and drag it to the top of the navigation then, just above your colored boxes.

Pic 13

On to the text. Make a new layer and take out the text tool ( Text tool ). Pick a nice font and type in the title of your site in the open space

on the left. A font called 'Century Gothic' was used here and should be a default font on windows Xp. Use whatever

color you'd like, plain white was used here.

Pic 14

Then add a subtext if you wish. Do this on a new layer and off course, make the size smaller. A font called 'Silkscreen' (download)

was used here. Again, in plain white.

Pic 15

Then add your navigational links on a new layer. Again, the font 'Silkscreen' was used, in plain white.

Pic 16

Final steps will be to add the images that represent the links. You can either create them yourself but there are many

sites where you can download some nice looking images.

All the images used here came from

So, first image is the home image here. Open it and paste it onto a new layer. Then move it into position.

Pic 17

Do the same for the search icon,

Pic 18

the forum icon

Pic 19

and for the contact icon. If you have any additional or other links, I'm sure you'll find some nice icons on that site.

Pic 20
And now you should have a nice and slick, blue navigation.


This tutorial was written by Sanity penguin, I hope you've enjoyed it.

79 Responses »

  1. I was suggested this web site via my cousin. I’m now not positive whether
    or not this publish is written by means of him as no
    one else recognise such certain about my problem.
    You are wonderful! Thanks!

  2. Apparently this is what the esteemed Willis was talkin’ ’bout.


  1. Designing :Web 2.0 Tutorials Round-Up - Seenublog

Leave a Comment

Upload Image

You can include images in your comment by uploading them below. The image will automatically be added to your comment!

Premium Login

Latest Forum Discussions

< ? echo "
    "; $conn = mysql_connect('localhost', 'jaspervd_jasperv', '475fa3fF') or die ('Error connecting to mysql'); mysql_select_db('jaspervd_sigtutorialsforum'); $query="SELECT * FROM `ibf_topics` WHERE posts>3 AND (forum_id=7 OR forum_id=11 OR forum_id=13 OR forum_id=15 OR forum_id=19 OR forum_id=20 OR forum_id=21 OR forum_id=22 OR forum_id=34) ORDER BY `last_post` DESC LIMIT 0 , 7"; $result=mysql_query($query) or die(mysql_error());; while($row = mysql_fetch_assoc($result)) { $id=$row['tid']; $title=$row['title']; $description=$row['description']; $timestamp=$row['last_post']; $date=date('M j G:i', $timestamp); ?>
  • < ? echo $title; ?>
    Last reply on < ? echo $date; ?>
  • < ? } echo "
"; mysql_select_db('jaspervd_sigtutorials'); ?>

Sign up on our forums to get access to
new tutorials and resources!