Slick Blue Navigation

In this tutorial, you will be shown how to design something like this:



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.



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 ( ) and pick the foreground to background, linear gradient.



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 ( ) and fill the selection with white.



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



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.



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



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.



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.



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 ( ) to fill it with another color.
Color used this time is #f80000.



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



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.



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).



Add a new layer and take out the 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.



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



On to the text. Make a new layer and take out the 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.



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.



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



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 famfam.com.
So, first image is the home image here. Open it and paste it onto a new layer. Then move it into position.



Do the same for the search icon,



the forum icon



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.




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



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