Tabbed boxes in sidebars on blogs seem to be popping up everywhere so in this tutorial I’ll be teaching you how to design a professional looking tabbed box
Step 1
First off, create a new document – for the purpose of this tutorial I’ve chosen a size of 600 by 420 pixels but you could be adding this to your web design. Fill the background with a radial gradient using the two colours #2f4a5b and #15212a.
Step 2
Create a new layer and select the rounded rectangle tool set with a radius of 10 pixels and ’shape layers’ (default). Make a shape in the middle 300 pixels wide and 300 pixels high with a colour of #0e161c. To make a fixed size shape click the down arrow on the left of ‘radius’ at the top and go to ‘fixed size’ and enter the values.
Step 3
On a new layer make another shape, but this time the colour is white and the height is 270 pixels. Make it 5 pixels higher than the bottom of the first shape.
Step 4
Now using the text tool add in some text links. The font I’ve used here is Verdana size 14 pt and colour #747474. Make sure that you have the line height set at 30 pt so the next step is easier.
Step 5
On a new layer make a selection 280 pixels wide and one pixel high between the first two links. Fill the selection with the colour #dedede. To fill a selection simply go Edit > Fill with colour.
Duplicate this layer and move it down 30 pixels (Ctrl + Shift + Down x 3). Repeat this until you have an underline for each link. If you did not have a line height of 30 pt then you would of had to move the line down one pixel at a time until it was half way between the two links.
Step 6
Create a new layer and using the rounded rectangle tool again (this time set it to unconstrained not fixed size) make a shape similiar to the one below with a colour of white.
Step 7
Lastly, add in some text for the tab parts. The font is Verdana, and the colour I’ve used for the active tab is #15212a and for the others the colour is white. If you’d like to learn how to code this design using html and jQuery follow the code side of this tutorial.
discuss this topic to forum
