17

Professional Tabbed Box

Web Layouts

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.