Design a Grungy Web Layout (Part 2)
Continuing from the last part of this tutorial. We’ll be making the side panel for recent work, the updates area, and the footer bar for this grungy web template.
1. Introduction
Before doing this tutorial, you should have finished the previous tutorial first. If you have, open up the PSD file.
2. Latest Work Sidebar
Now after you’ve got the last PSD file open, duplicate one of the button layers and move it downwards, change the text and all to correspond to what we want.
2. Recent Work Sidebar
Next thing to do is create a new layer then make a rectangle selection beneath our button.
My selection was 140 x 100 pixels. Fill this selection with a light yellowish color, #efebdb. Now use a grunge brush to erase away some of the edges of this box.
Make the same sized selection again then contract the selection by 2 pixels (Select > Modify > Contract), fill the selection with a darkish brown color. (#5b5234)
Next, change the layer mode for this darker rectangle layer to Linear Burn and lower the opacity to around 20-35%.
Select the darker rectangle again, then again contract the selection by 2 pixels. Add a picture inside of this selection.
Looks pretty cool huh? 
Now add in a smaller box underneath this first one, in this add in some text relating to the above image.
I used exactly the same method as above to make that smaller box. Duplicate all of the layers you just made, move them down then change the latest work image and text.
3. Updates Area
Make another one of those navigation buttons to the right of the sidebar, call the number: ‘06′ and the text: ‘Recent Updates.’
Now basically just repeat the last steps. Create a new layer, fill a large selection with the light yellowy color (#efebdb), apply grunge brushes, add a darker box over the top.
Lastly for the updates box, add in some text and maybe a filler or two.
Blending image:
4. Footer Bar
Once again, repeat the step where you make a light grungy box near the bottom of the template..
Make a selection around your footer bar then contract the selection by about 2 pixels (Select > Modify > Contract) after contracting the selection, make a new layer then fill the selection with a gradient of the same colors from your header.
Gradient colors: #a32c1e and #f5d57c.
Now on a new layer do some grunge brushing inside of the gradient bar selection.
For the above brushing I used similar colors to the gradient, then I lowered the opacity to about 30%. A little more grunge brushing:
I used the layer mode Overlay for the above brushing. Lastly for the footer, add in your text. I used Tahoma, 12pt, Bold, White.
After writing out your text, to give it a cool effect apply this Outer Glow.
That’s all for this tutorial, thanks for reading. If you need to, you can download the PSD file from this tutorial from here.
Tutorial result:
You must be logged in to post a comment.
10 responses
Hey dude !!!!!!!!!!!!!!!!!
very nice
how do i customise my website like this photoshop thing..please answer back thank you so much
ray
u teach us how to make the layout but did not teach us on like on slicing it or whatsoever.
“u teach us how to make the layout but did not teach us on like on slicing it or whatsoever.”
This is a photoshop/web design tutorial not a web dev one. Learn CSS.
sir im new in web design can i ask how i may put those navigation bar with buttons that are made in photoshop on dreamweaver mx 2004 coz thats the problem i have dealing with, im very interested in web design..any tuitorial you can offer?
thanks in advance (sorry for my english)
Hey tnx a lot 4 share this kind of tutorials with us. It looks pretty nice.
Greatings frm Ecuador
Hey, its a fabulous work pal.
If you don’t mind could you please tell me, how to slice it……
Thanks and regards a lot…….
Its great!!! i had only to part 1
result:
http://i31.tinypic.com/23rmfti.jpg
eeeiiii… i liked the tutorial…its very nice…..learned much more from it…thanks….plzz if u guyz have some tips for student cards design… plzz place it here…im kind in need of smthng like that plzzzz ok…..cheers……. X-plus form MOZAMBIQUE