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 - Photoshop 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 - Photoshop Tutorials Lorelei Web Design

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

Design A Professional Art Grunge Web Layout - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop Tutorials Lorelei Web Design

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.