Professional Navigation Bars in Photoshop

Let’s just face it – as much as Photoshop is cool for messing with our photographs, it’s the way that it produces professional web graphics really easily that keeps us messing with all the tutorials on the Internet. Whether you’re a new or established website owner, Photoshop tutorials yield a wealth of information, creative play, and ways of sprucing up that website into something jaw-dropping.

This tutorial will lead you through the very easy steps to creating your own professional navigation bar in Photoshop. It takes 5 steps to end up with a menu that you will be proud of – and it doesn’t take a major site redesign to use it. Ready to get going? Let’s do it.

Navigation Bar in 5 Steps

1. New Canvas – Open a new canvas (File, New). Set the size to 300 pixels wide by 40 pixels high, and use a white background.

2. Rounded Rectangle Tool – Grab your rounded rectangle tool, and set your foreground color to a shade that matches your website color scheme. Set your radius to 5 pixels (See Illustration 01), and draw a rectangle shape on your canvas. Once you have drawn the shape, right-click its layer and choose “Rasterize”.

3. Layer Styles – Now, we get to play with the layer styles. Click the layer style button (the little “f” icon in the bottom left of your layers palette) and choose “Outer Glow”. In the dialogue that comes up, you will apply an “Outer Glow”, an “Inner Glow”, and a “Gradient Overlay”. Reference Illustrations 02-04 to get your settings.

Depending on the base color you’re using, your menu should now look similar to the one in Illustration 05.

4. Link Text & Stroke – It’s time to add your link text. I’m using Trebuchet font at 12 pixels in size. Type your text out with plenty of space between links, and then we’ll apply a stroke. To create your stroke, go back to the layer style button, but choose “Stroke” this time. In the dialogue, apply the settings in Illustration 06, replacing the color I’ve used with one that’s just a notch or two darker than the color of your menu. You will end up with a navigation bar like mine in Illustration 07.

5. Link Dividers – To finish off this cool professional look, we’re going to “divide” each link into its own space. To do this, create a new layer (Layer, New, Layer) and grab your single column marquee tool. Place it to the right of your first link, and fill it (Edit, Fill) with the same dark shade that you used for your stroke. Then, click your right arrow key once, making the selection move one pixel to the right, and fill it with a very light gray.

Duplicate this divider layer (Right-click the layer and choose “Duplicate”), and move it between each of your links. You’ll end up with a fabulous professional navigation bar like mine in Illustration 08.