Cartoon Header & Navigation

1. Starting

First of all, make a new document that we can follow this tutorial out in.

I've used 500x500 or so, but my images in this tutorial will be 340x380 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 got a #61b3d9 to #2678bc gradient and a double scan lines pattern.

2. The Header

We'll start off with the header.

Create a new layer and make a selection near the top around 200x120 in size.

Fill the selection with a nice, lightish orange. I used #edab0d.

Apply the following layer styles to the 'header' layer.

You can download the pattern from here

Create a new layer and 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 the following Outer Glow to your Stroke layer.

Add your text. I used some basic text with a solid Drop Shadow.

Group all the layers together and name the group '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 160x200, 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:

(Same pattern as before)

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.

Now zoom in a little bit on the main area. What you need to do is make a 120x1 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 6x6 pattern.

Apply the Layer Mask to the layer then duplicate the layer and move it down 21 pixels, repeat a couple more times.

I also added a Drop Shadow to my lines.

I did the same for the text that I just added.

The font I used was Tahoma, the size I used was 11pt/11px, the color I used was #FFFFFF.

For anything you need, you can download the PSD from here.

Thanks for reading guys, I hope you enjoyed it!