Effective
Web Design

In this tutorial I’ll show you, how to make easy nice looking tab navigation for your sites.

We’ll design in photoshop so you’ll teach how to make the basic ways of creating such tab navigations. To see the full size of the image just click on it.

So open a new document with dimensions that you want. I’m using 800px x 600px, but this is just for this tutorial. The background here is white and the main colours we’ll work here are 3: orange,light Grey, dark Grey, with the opportunity to change the orange to any colour you like in future.

1. First I have made some  text “LoGo” which indicates where our logo will be, and the first thing you should do is to take Rounded rectangle tool and set it’s radius to 10 px, then draw a button like this below using some light Grey color: #d8d8d8 and move it somewhere in the right from the logo.

2. We have more work with this button! Click to the layer of the button and choose to open the layer stlye window. Add some stroke like in the image bellow, the color is dark Grey: #b4b4b4 and size of the stroke is: 2.

3. Make a selection of the button shape. The easiest way to do that is click with the mouse on the Vector mask thumbnail icon while holding CTRL keyboard key. Then grab the Rectangular Marque tool and cut the selection from the middle.Now we’ll have a selection just of the half button. Make new layer and fill with white color (To do that hit CTRL+BACKSPACE while your background color is set to white) and then change the layer mode to: soft light with opacity of 50%. Deselect! (CTRL+D shortcut)

4. After all of this, which is easy when u know it take the type tool and type some text to the new button Home, About us….etc. And I use Font:  Myriad Pro Semibold with size of 11 pt. Center the text in the middle of the button and now you can group this 3 layers which we have: hold them and hit (CTRL+G) then duplicate them and now You’ll have a better control over them, you can move them and place them right to each other and just change the texts inside to whatever you want.

5. Now take Rounded rectangle tool and set it’s radius to 3 px, with color: #f85204 and draw a shape over the end of the buttons like in the picture below. Open blending options and add a stroke 2px with color: #cc4027.

6. We’re at the final, where we must duplicate one of our buttons and place it over all other layers.  This button will be the one which is in down state in the moment. So take one and do exactly the same! Duplicate and move to the top.

7. Click on the shape of this button twice with the mouse and change the color to be exaclt like in the bottom bar: #ef6323 and remove the stroke from the blending options. (Layer style window) A good tip here is to change the text color to white maybe, and to change the stroke of the button on the other layer. Which is still there, beyond this one. This will make the button to look like it’s really  attached to the bottom bar.

8. And here is the final effect. You can experiment with the color as I said. You can do whatever you want. I Hope that this tutorial has been helpful for you.