Creative-Style Template Navigation

Well, in this Photoshop tutorial we’ll be designing a creative-style template navigation set, similar to the type you might see on some older TemplateMonster templates. You can see what we’ll be designing with this tutorial in the below image.

1.

Like always, start by creating a new document in Photoshop. I used a fairly small size of 500 x 500 pixels for this tutorial, but you can use whatever you like. For the background, I made a very simple pattern by using a few filters. First, fill your background with an olive green kind of color, then apply Filter > Noise > Add Noise with your own choice of amount. Fiddle with some other filters such as Filter > Brush Strokes > Spatter, etc.

2.

We’ll start from the bottom… make a new layer in your document, then find and get out the Polygonal Lasso Tool.

Use the polygonal lasso tool to make a sort of square slanted box, similar to this one shown below.

Fill the selection with a nice lightish red (#903e28)

Next, apply all of these layer style effects to your base layer:

1. Drop Shadow
2. Inner Glow
3. Pattern Overlay (download the pattern here)
4. Satin

And now we’re left with a pretty cool box.

3.

I then downloaded some pretty cool, somewhat old school grunge brushes from photoshopbrushes.com. I then used these brushes to add a kind of dirty, eroded look to the box. So, get your brushes, brush a bit with various colors on a new layer, then change the layer mode to either Soft Light or Overlay.

Time to add some buttons! Create a new layer, then get the Rectangular Marquee Tool and make a set-sized selection of 160 x 22 pixels.

Fill the selection with white. (#ffffff)

Now duplicate the layer and move it downwards until there’s 2 pixels space in between the buttons.

After you made all of ypur buttons, merge them together. Now rotate them slightly by going into transform mode. (ctrl+t)

In the above image, you can see I’ve hardly rotated them at all, I used around 2 degrees. Now, apply these layer styles to the buttons layer:

1. Drop Shadow
2. Inner Shadow

4.

Type out some simply black text onto the canvas, rotate it slightly and move it into place.

Add any other creative touches you can think of!

Thanks for reading this tutorial, I hope you enjoyed. The PSD file from this tutorial can be downloaded from here

You must be logged in to post a comment.