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

Grungy Web Layout

Browse Pages: << < 1  2 

Before doing this tutorial, you should have finished the previous tutorial first. If you have, open up the PSD file.

1. 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.

image 1

2. Recent Work Sidebar

Next thing to do is create a new layer then make a rectangle selection beneath this button.

image 2

My selection was 140 x 100 pixels. Fill this selection with a light yellowish color, the color I used was #efebdb.

Now use a grunge brush to erase away some of the edges of this box.

image 3

Make the selection again then contract the selection by 2 pixels (Select > Modify > Contract), fill the selection with a darker color (#5b5234)

image 4

Now change the layer mode for this darker rectangle layer to Linear Burn and lower the opacity to about 30%.

image 5

Now select the darker rectangle again, then again contract the selection by 2 pixels. Add a picture inside of this selection.

image 6

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.

image 7

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.

image 8

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.'

image 9

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.

image 10

See how we're going.

Click to enlarge
Click to enlarge

Lastly for the updates box, add in some text and maybe a filler or two.

image 12

Blending image:

image 13

4. Footer Bar

Once again, repeat the step where you make a light grungy box near the bottom of the template..

image 14

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.

image 15

Now on a new layer do some grunge brushing inside of the gradient bar selection.

image 16

For the above brushing I used similar colors to the gradient, then I lowered the opacity to about 30%.

A little more grunge brushing:

image 17

I used the layer mode Overlay for the above brushing.

Lastly for the footer, add in your text. I used Tahoma, 12pt, Bold, White.

image 18

After writing out your text, to give it a cool effect apply this Outer Glow.

image 19

image 20

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:

Grungy Web Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2 
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Grungy Web Layout"

Only registered users can write comment

No comments yet...