In this tutorial I will teach you how to create a full web template that can be used for just about anything.It is always recommended that you register and refer to the video tutorial, and .PSD.

Register Now!

For simplicity I’ve seperated the tutorial into sections, these include:

1. The Background
2. The Header
3. The Boxes
5. The Footer

Here’s a Preview of our final product:

Section 1: The Background

Step 1:
Open up a fresh document 900×1000. Fill the background white.

Step 2:
Download and install the following pattern: (it’s small)

Step 3:
Open up blending options on the background layer and apply the following settings:

Step 4:
Create a new layer and make a selection like I’ve done:

Step 5:
Set your foreground color to (#e3e3e3), create a new layer, and apply a gradient going downwards.

Step 6:
Adjust the position of this layer and lower the opacity to 50%. Here is how the background should look:

Section 2: The Header

Step 1:
Select the Horizontal Text tool and Type out you’re websites name. Use the font Myraid Pro (30pt).

Step 2:
Lower the size of the “.com” to 18pt.

Step 3:
Open up text options and apply the following settings. Make your to keep your text hilighted when you do this.

Step 4:
Change the first word color to #76c800, and the secodn word color to #ff6c00.

Step 5:
Open up blending options and apply the following settings:

Section 3: Boxes

Step 1:
Set you’re foreground color to #7ecc00. Now select the rounded rectangle tool, with a radius of 6, and make a box like so:

Step 2:
Trim the box to get a nice shape like this:

Step 3:
Create a new layer, select the rectangle tool, and create a grey box like so:

Step 4:
Open up blending options and apply the following settings to the grey box.

Step 5:
Now open up blending options on the green layer and apply these settings:

Step 6:
Create a new layer, make a selection of the green layer, and make a white dot with a soft brush like I have done:

Step 7:
Grab the eclipse tool and make a selection like so, delete this area from the dot.

Step 8:
Make a selection of the green layer, and contract the selection by 1px, and delete the inverse. Now change the layer mode to overlay, and lower the opacity to 67%.

Step 9:
On a new layer create a white box in the center of the grey one.

Step 10:
Open up blending options and apply the following settings.

Step 11:
Now create all the different boxes you need, feel free to use different colors.

Section 4: The Footer

Step 1:
Create a new layer, and set your foreground color to #dbdbdb. Now create a grey box at the bottom of the page.

Step 2:
Go to blending options and apply the following settings:

Step 3:
Add some text to everything and you’re done! Here’s how mine turned out.