Well, in this Photoshop tutorial we’ll be designing a very cool, cartoon-themed navigation set!
1. New Document & Background
First of all, make a new document that we can follow this tutorial out in. I’ve used 500×500 or so, but my images in this tutorial will be 340 x 380 to save you loading time etc.
So after you’ve created your document, make a background that will suit the tutorial (cartoonish, fun, etc.) In the background I’ve made a #61b3d9 to #2678bc gradient and a double scan lines pattern.
2. The Heading
We’ll start off with the header. Create a new layer and make a selection near the top around 200×120 in size.
Fill the selection with a nice, lightish orange. I used #edab0d.
Apply the following layer styles to the ‘header’ layer.
Create a new layer then select the main header layer again. With the gradient tool make a radial white to black gradient from the top left of the selection to the bottom right like so:
Change the layer mode for this gradient layer to Overlay, and change the opacity to 40%.
That will make it look nice and vibrant.
Again select the main header layer and make a new layer. Right click the selection and apply Stroke.
Use the following options for the stroke:
Now you should have a fairly large, white stroke around the inside of your header.
Apply this Outer Glow to your Stroke layer, and we get a nice, subtle glowing effect like this:
Lastly, add in some text for the header. I used some very simple text with a solid Drop Shadow.
Group all of your header layers together into a group called ‘header.’
2. Onto the Navigation!
At last we get to the navigation! So far this seems like a 2-step tutorial 😛
First of all, create a new group/folder underneath the ‘header’ group, call this group ‘navigation.’ Create a new layer and call it ‘main,’ now what you need to do is create a selection, about 160×200, note that I have 10 pixels of my selection underneath the header.
Fill this selection with #ee6402.
Apply the following layer styles to this layer:
Now you can either apply the Stroke thing now or later, I’ll go ahead and do it now. Just do it exactly the same as before.
Zoom in a little bit on the main area. Now what you need to do is make a 120 x 1 pixel selection in the middle area like so:
On a new layer fill this selection with white (#ffffff)
At the bottom of the layers palette, click the little square with a little circle button to add a layer mask.
Now fill the layer mask with a scan line pattern. I used a 6 x 6 pattern.
Apply the Layer Mask to the layer, duplicate the layer and move it down about 20 or so pixels, repeat this a couple more times.
I also added a Drop Shadow to my lines layer(s). I did the same for the text that I just added.
For the text I used the following settings: Tahoma, 11 pt, #ffffff.
Well, that just about does it for this tutorial, I hope it was sufficient enough for your tastes! If you need anything at all, you can either download the PSD file from this tutorial, or you can leave a comment below and I’ll get back to you as soon as possible.