Create a light grunge website layout

n this tutorial i will show you how to create a light grunge website layout with very simple techniques. With small modifications you can use this layout for any theme you like: business layout, corporate layout, blog layout, etc..
Bellow you can see my final result.

First you need to download the following pattern: Paper pattern

Open this nice grunge paper pattern in Photoshop, and go to Edit > Define Pattern.
Choose a name for this pattern,and then you can close this nice pattern.

Open a new document with the following size: 1100X1200 pixels. If you have already an account with us you can download Ultimate CSS Framework.

On this new document we will need to add the pattern we have already made a few seconds ago.

Your document will look like in the following image. The pattern is seamless, this means it will fill your document, and later when you will code this layout it will look very nice in any browser.

We will build this layout on our Ultimate CSS Framework, so you will have to take care how you will arrange the next element on your layout. the better you will have the arrangements on your layout the easier will be for you later to code this layout.

On the middle of the layout create a new shape with Rounded rectangle tool.

For this shape please add the following layer styles.

I will select a pattern from our set of Photoshop patterns

After you add the layer styles from above , it will look like in the following image.

Over this shape i will add a simple colored background image.

And i will use the following layer style to create a white stroke around the image.

With horizontal type tool i will create the logo of the website.

For this text logo i will add an indented layer style.

On the top right side of the layout i will create a simple menu, and for the first button i will create a simple round shape with Rounded rectangle tool.

Under the main image of this layout, i will start adding pieces of text

As you can see from this image it will be very good if you will use the PSD file provided in the Ultimate CSS framework because it has already some useful guides. All these guides will help you to align the layout very professional.
here i will create another white shape, and on the right side i will create a call to action button.

Bellow you can see the gradient used to create this button.

On the bottom of the layout i will create another 3 shapes like in the following image.

Here you can find the layer styles used to create all these 3 shapes.

In the middle of the shape i will add one more time the same colorful image. Of course you can use your own stock images. Please note that you need to add also a white stroke.

On the footer of the layout i will create another shape.

I will use the following layer styles.

This is my result so far. On the left side i will add some text.

and on the right side i will add some social bookmarking icons.

I will add two lines. the first one will have 5 pixels, and a white color, and the second one will have 1 pixel and i have used a gray color. Both lines were made with Line tool.

Here is the final result. You can use this layout for a lot of websites with different themes.