Hello! As you already know we post regularly web layout tutorials on trendyTUTS.com and as usual for today we have another one. In this tutorial I will show you how to create a cool and trendy grunge web layout.

Please note that in this tutorial I will show how to create this psd template in Photoshop and the conversion PSD to XHTML will be posted in another tutorial soon.

Here’s my final result:

Template Version 1

Template Version 2

To create this tutorial I have used:

1. Basic Tools from Photoshop (Rectangle Tool, Ellipse Tool,etc)
2. From our Premium Files (available only to our premium members), I have used: Grunge Arrows, Grunge Frames and Brush Strokes
3. This nice set of textures created by Princess of Shadows

Let’s start the tutorial. Open Photoshop and create a new document (Ctrl + N), dimensions:  1020 by 1200px

I will set the foreground color to #514c4c and with Paint Bucket Tool press one time on the document to change the color.

Next from Princess of Shadows texture I will select “ texture 1.jpg” and I will place it on my document (File > Place). Because when you place an image on the document, Free Transform Tool is automatically selected,  I will adjust the image a little bit to fit with my document size and I will press Enter to apply the transformation.

You should have something like this now.

Because this texture it’s too prominent I will reduce the opacity to 58% and I will change blending mode to Overlay.

Step 1 – Creating the logo and twitter updates

On the left side with Pen Tool I will create this shape, color: # 7a6d65 and I will apply this layer styles

Next I will use again the same texture used for background but I will make it a little bit smaller and I will place it above the shape created in previous step. I will change the blending mode to Overlay, I will lower the opacity to 47% and on the layer palette I will select his layer, I will right click on it and I will choose create clipping mask.

You should have something like this now

Now with Type Tool I will add my logo. I will write trendy using ” Aria Penci Roman “  font,  36px in size and TUTS using ” Everyday Ghost“  font, 38px in size. For the tagline – premium tutorials – I have used ” Esenin script One” with 18px in size.

Next on the left side, using Rounded Rectangle Tool with a radius of 35px, I will create this shape, I will change the blending mode to Overlay and with Type Tool I will add some text. Here is my result:

The top area is finished now.

Step 2 – Creating the navigation and featured area

To create the navigation download this brush strokes vectors . To add the vectors in Photoshop I will open first the brush vector pack in Illustrator and to import them in Photoshop I have 2 option:

• I can drag the vector from Illustrator in Photoshop using the mouse
• I can copy the vector from illustrator (Ctr+C ) and I will paste it on my document in Photoshop (Ctrl + V)

So I will open the pack first

I will select the vector than I will click Ctrl + C to copy the vector, than in Photoshop I will click Ctrl + V to paste it. A window will pop up in Photoshop asking me what I want to paste (Smart Object, Pixels, etc). I will select Smart Object and I will choose OK.

Please note that I have chosen Smart Object because I would like to use the power of the vector in Photoshop. If you will choose pixel, than the vector will become rasterized and it will behave exactly as an image (a raster object), and we don’t want that. We don’t want that because if we will try to change the size of the image (by increasing it), the image will become blurry but the vector won’t do that. You can play with it as much as you want, you can increase or decrease the size without losing the quality.

I will select Smart Object and once I will press the OK button, the vector will show up in my document with the Free Transform activated. With Shift key pressed on my keyboard I will gently drag with the mouse from the bottom right corner

You should have something like this now

Next to change the color of the vector, apply this layer styles:

I will repeat the same steps, using again from our Premium Files the Brush Stroke Vectors until I will have something like this:

The navigation is almost finished. All I have to do is to select Type Tool and using the “Telegraphem” font with 24px in size I will add the navigation links.

Next I will create the featured area.  Download this grunge frames from our Premium Files

I will select a frame and I will place it on my document, I will make it yellow  #a78425 and on the top of it I will place an image

Because this it will be a slideshow please Download this Grunge Arrows

I will select 2 arrows and I will add them in my document

Next to enhance a little bit the featured area I will use this nice pack with Spray Paint Vectors.

Than with Type Tool I will add a slogan. I have used again the ” Telegraphem ” font with 30px in size.
Here is my final result for the featured area

Step 3 – Creating the content area.

First select Rectangle Tool and create a similar shape: 951 by 508px, color: # e4d8c3

then I will select my navigation, I will duplicate it and I will drag it on the top of the content area. I have used a black color just for demonstration proposes.

Next, select Rectangular Marque Tool and make a similar selection. Please make sure that the Feather is set to 0 (zero)

Once you have a similar selection hit Delete on your keyboard, to delete the selection than click Ctrl + D to deselect.
You should have something like this now

As you can see I have created a grunge shape on the top, I will proceed in the same way for the left and the right side and for the bottom of course

I have used a black color just for demonstration proposes, now I will change the color to # e4d8c3 to integrate perfectly this grunge shapes with the main shape created with Rectangle Tool.

Next using Type Tool and another few grunge elements from our Premium Files I will create the content. Here is my final result for the content area:

And here is my result for the entire layout

Template Version 1

Template Version 2

Well the tutorial is finished now. If you have any question please ask them in your comments. Don’t forget to follow me in twitter if you’d like to know when we create new tutorials.

blog comments powered by Disqus