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.

[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
2. Recent Work Sidebar


Next thing to do is create a new layer then make a rectangle selection beneath our button.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
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)
[You must be registered and logged in to see this image.]
Next, change the layer mode for this darker rectangle layer to Linear Burn and lower the opacity to around 20-35%.
[You must be registered and logged in to see this image.]
Select the darker rectangle again, then again contract the selection by 2 pixels. Add a picture inside of this selection.
[You must be registered and logged in to see this image.]
Looks pretty cool huh? [You must be registered and logged in to see this image.] Now add in a smaller box underneath this first one, in this add in some text relating to the above image.
[You must be registered and logged in to see this 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.

[You must be registered and logged in to see this image.]
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.’
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]

See how we’re going.
Lastly for the updates box, add in some text and maybe a filler or two.
[You must be registered and logged in to see this image.]
Blending image:
[You must be registered and logged in to see this image.]
4. Footer Bar


Once again, repeat the step where you make a light grungy box near the bottom of the template..
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
Now on a new layer do some grunge brushing inside of the gradient bar selection.
[You must be registered and logged in to see this image.]
For the above brushing I used similar colors to the gradient, then I lowered the opacity to about 30%. A little more grunge brushing:
[You must be registered and logged in to see this image.]
I used the layer mode Overlay for the above brushing. Lastly for the footer, add in your text. I used Tahoma, 12pt, Bold, White.
[You must be registered and logged in to see this image.]

After writing out your text, to give it a cool effect apply this Outer Glow.
[You must be registered and logged in to see this image.]
That’s all for this tutorial, thanks for reading.
Tutorial result:

[You must be registered and logged in to see this image.]






google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);]