Create a gritty website layout
In this tutorial I will show you how to create a clean website layout with a grunge background. You can use this layout for a Wordpress blog too. The layout has a gritty look because I have used the Add noise filter. If you want your website to load much faster stay away from such layouts.
Want to download this PSD layered layout ? Register for a VIP account. You can download ALL premium downloads even if you apply for the smallest package. The cost is 49 $. Join Now
Things you need in order to complete this grunge web layout
Download grunge texture
Download Vector Icons – direct download link
Create a new document with the following size: 960 x 900 pixels.
Place the texture you downloaded from Grafplus on your canvas. Change the opacity value from 100 % to 35 %. Your website background will be washed out.
I will create another document ( press CTRL+N ). This document will be transparent. I will zoom the document to 3200 % and with Pen Tool I will create a triangle like in the following image.
I will go to Edit > define pattern. I will chose a name for this pattern and I will click on OK. On my canvas I will create a small selection with Rectangular Marquee Tool.
I will create a new layer ( press on CTRL+SHIFT+ALT+N ) and with Paint Bucket Tool I will press one time inside my selection. Please note that you need to select the pattern we just did a few seconds ago. After I deselect ( press on CTRL+D ) this is my result
With Rectangle Tool I will create a shape and I will place it on top of the layout.
Select both layers in your layer palette ( this last layer and the one you have applied the pattern ). When you have both layers selected in your layer palette press on CTRL+E. Duplicate this new layer . to duplicate a layer you have to select the layer in your layer palette, and then press on CTRL+J.Select the new layer and go to Filter > Noise > Add noise, and use the following settings:
Add the following layer styles for this last layer.
I will create another layer, and with Brush Tool I will add a big round point in the place where I would like to place the logo.
I will change the blending mode to Overlay , and the layout will look like in the following image
With Horizontal Type Tool I will write some minus signs
I will right click on my layer and I will choose Convert to shape, and then I will duplicate the layer with minus signs and I will nudge 1 pixel to the bottom. In the same time I will change the color for minus signs from white to black. In the following image you will see a zoomed image.
With the same technique I will add another lines to the top of the layout. As you can see the minus signs will look like a stitch.
With Rectangle Tool I will create another shape on the right side of the layout. There you can create a slide show.
Here are the layer styles I have used for this shape:
Over this layer I will create another one, and I will add the noise filter effect. I will use the same settings I have used for the header.
I will create another stitches over this shape.
Now I will use Horizontal Type Tool to write some text. Click on the image to see the full size layout.
I will download the following set of vector Icons. Please note that you need a VIP account in order to download this set of vector icons.
After I will place the icons, I will create another stitches and with Eraser Tool I will delete the extremities of the stitches. This is my final result.
Want to download ? Register for a VIP account. You will be able to download our entire collection of web layouts for each tutorial. Only in this way you can learn much faster how the layouts are made.
A VIP account allows you to download our entire collection of premium downloads: PSD layouts, vector files, Vector icons, Photoshop brushes, Photoshop gradients, , textures, stock images, etc…
Simple, but nice! Thanks.
nice gritty layout, thanks for the tut..
Thank you very much for the excellent and useful subject
Greetings
Damn. This guy make things look so easy. Thanks for this great tutorial.
Another Awesome Detail Nice tutorials
Thanks so much for your kind efforts for
making & posting & sharing such a valuable knowledge
with people.I am a Big fen of you!
U don’t know how much u helped me with my website making
I will always remember u as my Best teacher in website making
Thanks so much again Sir
Keep doing good work
God Bless you
tutorial and very interesting suggestion and this is very good lesson for beginner designers like me… thank’s
Awesome tutorials
Thanks so much for your great help
I am Big friend of you
your tutorials are so detail & very useful because of your Great trick
Keep up good work man
God bless you
Nice and clean just how i like it, nice tutorial.
i llike it. Thank
Hi thank you very much for this tutorial it’s very much appreciated. I learned alot from it.
Really nice design. One thing though you cant add noise to a layer that has a colour overlay.
Hello, I am kind of new at this, and i am trying to grasp the concept of creating that triangle pattern. What should that new doc be that we create the shape? Also, when i zoom 3200% and try to use the pentool, i dont have the same display as your photo (8 boxes around to create the shape). If you can ,please shoot me some pointers, because i have some ideas and would like to use that pattern.
Thank you
Do not worry if you don’t see the boxes around the shape. Simply create the shape and try to work further to complete the tutorial.
your tutorials are great
thanks
Great job Razvan, you are the master of design!!
Hi !
Looks like a great tutorial, but…..i’m , almost, in the same situation as “Mike W”.
My problem is to get the pattern in to the “marked area” in “the step after the triangle”
Problem:
What size should the new doc be that i paint the triangle and can i draw the triangle wherever i want on the doc?
and….how do i “fill” the marked area with the pattern?
Whould be so kind if you want to answer this
(exuse my english, i’m from europe, hope you understund)
Thanks in advance !
Awesome , the way you explain it, design suddenly becomes so easy