TutsArena

Create stylish, light navigation buttons in Photoshop

by TutsArena - Templates, Tutorials

One of the more frequently requested tutorial types is navigation. Today, we present a tutorial on creating stylish navigation buttons in Photoshop. These are suitable for a light background, but could be easily customized. Read on!

The aim of this tutorial was to produce a quick button style that would work well on a light background. We kept the tutorial fairly short and simple so you would have room to add your own elements into the button to make it really unique. Don’t hesitate to change up some of the settings to your liking!

Final outcome:

Step One: The Background

First, create a new document, any size you want… for this tutorial I used 1100×300 px. Fill your background with #e0e0e0. You should have a nice light gray background now.

Step Two: Creating The Button

Set your foreground color to #ffffff and create a rounded rectangle with the Rounded Rectangle Tool (U), sized about 150×65. Fill your new rounded rectangle shape with the foreground color (white). Now you should have something like:

Let’s continue. Add these layer styles to your button shape layer:

Now you should have something that looks very similar to this:

This is the base of our navigation button. You can duplicate this shape layer to make as many buttons as you need. For this tutorial we use 6 buttons.

Step Three: Adding The Text

Now it’s time to really make the navigation button worthy of being called a button. We’re going to add the text and spruce it up a little bit with some text effects.

For the font, I used "Delicious Heavy" which is a free font and can be downloaded here http://www.josbuivenga.demon.nl/delicious.html. Type your font using these settings:

Now that we’ve got our text typed out, we’re going to add some effects to it. Add these Blending Options to your text layer:

Now, that looks good, but to make it a little more appealing we’re going to add some funny, short yet descriptive subtext below the main navigation text.

For the subtext we used Arial as our font, with bold styling at size 9:

Apply the same text effects as above to the subtext and we’re finished with that.

Step Four: Add An Icon

I admit, these buttons are pretty boring at this point, but when we add a small icon that basically sums up the button in a picture, it really makes a difference. Have a look around for your favorite icon set (make sure you read the license first!). We used the Kombine Toolbar Icon Set in this tutorial, you can download it at http://www.kombine.net/free.

Pick your favorite icon and nudge it up to the left of your text to really finish the button off. Here’s what our final button looks like:

Step Five: Duplicating Buttons

Like I said before, you can simply duplicate the button to make several variations. Group up your layers for your button so it will be easier for you to keep track of which layers go with which button and it will make it easier to duplicate and move the buttons around.

Here, we duplicated the first button five times and changed the text and icon to make different buttons!

We hope you enjoyed this tutorial, have fun with it and experiment to make your own variation!