In this tutorial will show you how to design a black and sleek 3 columns web layout. You can use this design for your web site or just apply some techniques for your own design.

A Glossy Bar
- Now you have a bar, next step you have to make your bar glossy.
- Create a new layer.
- Make a rectangle selection width 142 and height 14 above the bar.
- Select Gradient tool, set white as foreground color.
- Select Foreground to Tranparent gradient and select Linear gradient.
- Click and drag pointer form top of selection to bottom of selection.
- Deselect by press CTRL+D.
- Decrease opacity to 30%.
- Move your bar to position as shown in an image below.

Menu
- Create a new layer.
- Create a rectangle selection width 142 pixel and about 486 pixel in height.
- Fill color #D8D8D8 into selection, deselect by press CTRL+D.
- Grab pen tool, draw 2 line, the first one color #BABABA, second line color #DEDEDE.
- The font I use is verdana 11 pixel.
- Add some small triangle icons.

Creating Content Boxs
- You've created a navigation bar, now it's not hard to create content boxs, actually it's the same technique as creating navigation bar, the only change is the width of content boxs, the width is not fix, you can change the width as you prefer or you can make it the same of mine, see an image above.

News box
- Create a new layer.
- Make a selection width 449 hieght 494 pixel, fill white into selection.
- Create a new layer, then create a news header using the same technique as creating navigation header.
- The size of butterfly image, I used in my this tutorial is 80*65 pixel.

- Hi-light box and Sponsor box
- Create a new layer.
- Size of this box doesn't fix, but mine is 171*513 pixel and background color is #D8D8D8.
- Image size is 173*67 pixel.

- Now, you have all part, put it together

- Final result!
- Add a webname or decorate your header as you want.
- Download PSD File (263 kb)