Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Gritty Website Layout

Create a Gritty Website Layout


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.

Img

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.

Img

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.

Img

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

Img

With Rectangle Tool I will create a shape and I will place it on top of the layout.

Img

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:

Img

Add the following layer styles for this last layer.

Img

Img

Img

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.

Img

I will change the blending mode to Overlay , and the layout will look like in the following image

Img

With Horizontal Type Tool I will write some minus signs

Img

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.

Img

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.

Img

With Rectangle Tool I will create another shape on the right side of the layout. There you can create a slide show.

Img

Here are the layer styles I have used for this shape:

Img

Img

Img

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.

Img

I will create another stitches over this shape.

Img

Now I will use Horizontal Type Tool to write some text. Click on the image to see the full size layout.

Img

Img

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.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: