Design A Professional Art Grunge Web Layout

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:

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 .

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

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

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%.

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

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

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:

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

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

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

This is what it gave you (you may want to fill the box with some colour for now, but this is not essential as we will overwrite this colour with a photo or picture later.

Now, select the typing tool and write the title of your website next to the box, on the grungy background… We used the ‘Boycott’ font and the #31250d colour.

In order to avoid excess of simplicity, go to Layer >> Layer Styles >> Bevel and Emboss and apply these settings, to create the illusion as if the letters were engraved on the texture itself.

So, you got nicely embossed text…

Also, this is optional, but you can add some more text below, preferably in handwriting style font. We used a font called ‘Ballpark’ and the #6d4311 colour.

Did this? great! now lets proceed to the box we made before and add a picture to it. I used a photo from here http://www.deviantart.com/deviation/…qh=sort%3Atime Please note that if you use it, you must link back to www.loreleiweb.com and give us credits.
Cut the edges so it will fit perfect into the box (be sure it will lay “above” the box layer) and set the image’s blending option to ‘Luminosity”

Next step is to make the body of the template. Create a new layer and go to ‘shapes’ and select a rounded rectangle tool.

Draw a box as shown on the picture below, fill it with any brown hue of your choice…

Go to Layer >> Layer Styles >> Pattern Overlay and apply these settings, to give your inner box its own texture filling, yet it shouldn’t be too standing out, because don’t forget – your text goes there!

Add also brown shadow…

and inner shadow…

Before you press OK, save these settings as a new style, so that layer on, when we would need to make buttons, you will be able to pull it from your sleeve in one second without having to go through all these steps again.

Anyway, here is where you stand at present…

Ok, lets proceed to the buttons. Using same Rounded rectangular tool, draw 4 or 5 buttons. on the left column of the page. We made it easier and after having created one button, just duplicated the layer and dragged it down a bit… then duplicated it and dragged it even more down… this would guarantee all your buttons will be of the same size. Apply the style you saved after making the text box for each button, only I’d recommend to make it lighter.

Using the same handwriting font and #603f12 colour, add text to each of your buttons…

Make a new layer. Select the brush tool, Harsh Round 9px, #484131 colour, and draw to lines above the buttons.

One will cover the line where you made the gradient effect earlier, and the other will just be symmetrical and “hold” the buttons. Look what we did on the pic below to get a better idea. Using the Eraser tool, remove any remains in case your line went over the box with girl’s picture.

Remember that these two lines have to be a separate layer.

So, after you finished making them, go to Layer >> Layer Styles >> Drop Shadow and add this wide range shadow, to make the lines blend nicely with the design… You can use any dark colour for it.

You are almost done, only a few final touches left..
Add a new layer, and select the brush tool. Choose the “Spatter” brush, 59px (comes default in PS CS2). Use the grey color #626262 and draw a line below and above your template… The only thing u have to make sure is that you won’t draw a line over the box with picture. place the new layer below it!