Site Navigation:

Home // Tutorials // Photoshop® // Tab Menus

Tab menus

Tab menus image 1
Create a new image 700px wide and about 400px long, with a white background. Create a new layer. Now use the rectangular marquee to create the size tab you want, fill it with your desired colour, I am choosing a light blue. Deselect (CTRL +D) now near the bottom of your tab draw another rectangle slightly longer either side to create a weird shape like mine shows opposite.
Tab menus image 2
Now hold CTRL and click on "layer 1" to select your shape, now go into the channels palette, create a new channel and fill your selection in white. Deselect (CTRL +D). Now go to Filter>Blur>Guassian Blur and enter a setting of about 5.0. Next go to Image>Adjust>Levels drag the two pointer into the centre to make your buttons edges nice and smooth. Once done, click OK. Hold CTRL and click on "channel 1" to select the shape, not go back to the layers palette create a new layer and fill it with your chosen colour.
Tab menus image 3
You can now delete "layer 1" as we no longer need this.

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.
Tab menus image 4
Now set the foreground colour to the colour you want the "active tab" to be, I'm using a darker blue. Click the channels palette and holding CTRL click on "channel 1" so select it, go back to the layers palette. Create a new layer and fill the selection in 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).
Tab menus image 5
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.
Tab menus image 6
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.
Tab menus image 7
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.
Click here to download the file. || BACK TO TUTORIALS

Home Tutorials Free Stuff About Gallery Forum Links Contact

Copyright © Robouk 2001.

Dreamweaver®, Flash® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Hosted by Pixelcode - web design tutorials.