Photoshop Tutorials

Tab menubar

Make those tab menu bars you see on sites like amazon.com...
1
Tab menus image 1
Create a new image 700px wide and about 400px long, with a white background. Create 2 new rounded rectangle layers like the ones opposite and merge the shapes.
1b
Tab menus image 1b
To create a smooth join, add two extra anchor points and remove the original one.
2
Tab menus image 2
Next duplicate the new shape by dragging it to the "new layer" button and align them all up in a row as shown opposite, keep duplicating until you have your required number of buttons. It should look something like what I have opposite.
3
Tab menus image 3
Now set the foreground colour to the colour you want the "active tab" to be, I'm using a darker blue. Fill the shape layer with your new darker colour. This will be your active button, you move this over the top of any of the other buttons (Be sure that you have it at the top in the layers palette).
4
Tab menus image 4
Now we are almost there but as you can see its not quite right. Create a new layer at the top of the layers palette, now using the rectangular marquee draw a rectangle all the way across the lower parts of your tabs like show in the image, once done fill the selection in with the DARKER COLOUR it will look something like I have opposite. You may want to smooth the edges of this rectangle but that's not important.
5
Tab menus image 5
That's basically it, but to change your active tab simply move the "DARKER" tab along to where you want it (make sure it covers the lighter tab underneath). All you have to do now is to add some text, this is simple.
6
Tab menus image 6
You can decorate the buttons in anyway you wish, this effect is nice for more professional site. If you have any questions/requests, post in the forum or consider contacting me.
This tutorial was brought to you by Robouk, please post any questions in the forum. Thank you.
« BACK TO TUTORIALS