Creative Web Template

1. The Background

First create a new document, for this tutorial I will be using 780x720. now fill the background with #f06502.

Create a new layer then with the Rectangular Marquee Tool, make a selection sized 20 pixels wide and the full height of the document, fill the selection with #fb9c03 and move it 20 pixels from the left side.

Move the selection 40 pixels to the right and fill it again, keep repeating this.

Note: To move the selection 10 pixels at a time, hold Shift and press an arrow key.

If you can't seem to do all that, download next image, define it as a pattern then fill the background.

Merge the layers together and apply Filter > Noise > Add Noise, use a setting of 1.6.

Now in the Filters menu, go to Render > Lighting Effects..., change the Light type to Omni.

Click to enlarge

Now we're done with the background.

2. Content & Navigation Area

Create a new layer, now make a selection about 180x400, fill it with white (#ffffff.)

Click to enlarge

Make another selection about 417x400 to the right, with just 3 pixels space in between them, fill the selection with white.

Click to enlarge

If both of these white boxes are on the same layer, you can center them by

1. Selecting Everything (Ctrl+A)
2. Copying Everything (Ctrl+C)
3. Pasting Everything (Ctrl+V)

Then deleting the old layer.

Now, Zoom in a bit to the corners of the white boxes, then make a square selection around both of the boxes only 2 pixels bigger in width and height.

On a fresh layer underneath the white boxes layer, fill the selection with a dark brown, (#7d3300.)

Click to enlarge

3. Underneath Details

In my 'Under Bits' group, I have the website title at the top left, the copyright down the bottom, and some circle shapes around the top middle.

Click to enlarge

So get the text tool and add in the text. I used the font Tahoma, 11pt & 12pt, #ffffff.

Now we'll draw these nice circles..

I made my circles by brushing on the canvas, then making some circles with the Ellipse Tool, turn it into a vector mask and added layer styles.

If you know about the pen tool and paths etc, you can do that, but if not you can make them this way...

Create a new layer and with the Elliptical Marquee Tool make a few circle selections, fill them with #7d3300.

Now apply the following layer styles:

Create another layer, make some rounded selections and fill with a lighter, more yellow color, I used #e99206, apply similar layer styles as the last layer.

4. Sidebar Text

Now let's add in the text in the left sidebar.

With the text tool, make a selection pretty much the entire width and height of the side bar, write out your text.

For the word 'Navigation' and 'Updates' text I used Tahoma, 11pt, bold, #c8c8c8. For the links text I used the same except a darker color with an underline, #b9b9b9, and for the updates links, I used the same except non-bold and with an underline.

5. Content Area Details

You can add a small banner at the top if you want, but I can't come up with anything good for it. All I added lastly was 'updates' text.

Click to enlarge

Thanks for reading, you can also download the PSD file from here.