Design a Cartoon-Themed Navigation Set

Advertisement

Well, in this Photoshop tutorial we’ll be designing a very cool, cartoon-themed navigation set!

result image

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.

background

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.

header selection

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

filled selection

Apply the following layer styles to the ‘header’ layer.

  1. Gradient Overlay
  2. Pattern Overlay (You can download the pattern from here)

after layer styles

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:

black to white gradient

Change the layer mode for this gradient layer to Overlay, and change the opacity to 40%.

layer options

That will make it look nice and vibrant.

after blending mode

Again select the main header layer and make a new layer. Right click the selection and apply Stroke.

apply stroke

Use the following options for the stroke:

stroke options

Now you should have a fairly large, white stroke around the inside of your header.

with the stroke

Apply this Outer Glow to your Stroke layer, and we get a nice, subtle glowing effect like this:

with outer glow

Lastly, add in some text for the header. I used some very simple text with a solid Drop Shadow.

added text

Group all of your header layers together into a group called ‘header.’

2. Onto the Navigation!

the navigation

At last we get to the navigation! So far this seems like a 2-step tutorial :P

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.

navigation selection

Fill this selection with #ee6402.
Apply the following layer styles to this layer:

  1. Gradient Overlay
  2. Pattern Overlay (same pattern as before)

layer styles applied

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.

stroke applied

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:

small selection

On a new layer fill this selection with white (#ffffff)

filled selection

At the bottom of the layers palette, click the little square with a little circle button to add a layer mask.

add a layer mask

Now fill the layer mask with a scan line pattern. I used a 6 x 6 pattern.

scan line layer mask

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.

duplicate lines

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.

result image

Completition

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.

Advertisement


11 Responses

  1. Adrian says:

    Nice tutorial Eli! I like it!

  2. empty says:

    good tutorial :) thx for this

  3. disn3y says:

    only gods are making tutorials, thanks much :)

  4. nick says:

    It’s cool !

  5. umabdullah says:

    Salam, thanks alot for your lovely & helpfull tutorial.

  6. Anonymous says:

    Thanx,Nice tutorial

  7. Jalpari says:

    i am a newbie can anyone tell me how we can create double scan lines pm me

  8. KIRAN says:

    it’s very nice tutorial

  9. Ryan says:

    You definitely have a nice touch with the graphics. Web 2.0 with a cartoon feel. Keep it up!

  10. Adam says:

    “Create a new layer then select the main header layer again. With the gradient tool make a radial white to black gradient”

    Will this not then replace the orrange fill? As you advise to do this on the header layer which is the layer with orange fill.

    Photoshop doesnt appear to add a stroke to a blank layer either when you advise “Again select the main header layer and make a new layer. Right click the selection and apply Stroke.”

    I could only add a stroke to the header layer which is fine but then it would not work correctly when you advise “Apply this Outer Glow to your Stroke layer, and we get a nice, subtle glowing effect” as the effect went in between the stroke & the blue gradient background rather than in between the orange & stroke.