Ok, today you will be making this incredible web layout.. i personally think it’s one of the most professional tuts I have made recently but that is for you to judge.. anyway, here is your result:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Before you get started, you need some resources, such as grungy texture and photos for the background. We used two images and blended them, first was a fabric texture taken from here .

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Create a new canvas, 750*602. Paste your fabric texture unto the canvas.

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Since our canvas is very brights, go to Image >> Adjustment >> Brightness / Contrast and reduce both Brightness and Contrast, as shown on the picture below.

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Take some grungy texture. We used a dark paper provided by nighty.

Paste it unto the existing fabric canvas, and set the new layer’s opacity to about 30%.

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Opacity may vary, depending on the desired effect. so far, out template’s background interface looks like this:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Select the Rectangular marquee tool, and draw a rectangular as shown on the illustration below:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Now, select the gradient tool, select the gradient – “black to transparent” and draw a line from right to left, so that your box will have a mild gradient as shown below:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Make a new layer. Using the marquee tool again, draw a box at the upper left corner, like this:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

Go to Layer >> Layer styles >> Stroke and apply these settings:

Design A Professional Art Grunge Web Layout - PS Tutorials Lorelei Web Design

For the gradient effect we used these colours: #603f16 … #c4843a … #603f16