Grunge Interface Revisited
Grungy metallic interfaces revisited

author:
  Eli
title:
  Grunge Interface Revisited
date:
  Tue 4 April 2006
category:
  Web Layout and Design
credits:
 
Make a new document about 400 x 400, might need to be a bit bigger but lets just use this



Fill the background layer with #5B5B5B and create a new layer
Make a small selection and make a gradient inside of it


Duplicate the layer, flip it vertically (Edit > Transform > Flip Vertical) then move it underneath the original
Press ctrl+t and make the 2nd gradient half the size


Merge the layers together and use the Dodge tool to brighten up the light areas





Make another new layer and make a shape with the pen tool
[img=2117 ; name=4
like so:


With the path still open and the pen tool still out, right click the path and choose "Make Selection"
Hit it with a gradient again then move it to the corner of the bars


Duplicate the bars layer and move it above the shape layer, set the layer opacity to 30%





Merge all the layers again and make some more selections and gradients etc


Merge the layers as you go along and use the Dodge tool to highlight some areas of the gradients





Remember to keep merging the layers together as you go on, though it doesn't really matter too much
With all the layers merged together you can center the main thing if you want


Make some round bolt type things, they don't really look like bolts, but whatever!


Alright.. now make a new layer underneath the main layer and use the pen tool again to make a path like so:


Now go back to the brush tool and get the 13px hard brush and take the size down to 10 on the lever


Back to the pen tool, right click the path and select "Stroke Path"
Use brush and antic Stimulate Pressure



Put the brush size down to 8px and redo the path then make another wire on the same layer


Now you could make a new layer above the main layer, make a selection and fill it with a scan line pattern, erase some parts and lower opacity's etc


And another..





Make another new layer and use a small grunge brush over the top of the interface
You can lower the opacity's etc if you want


Now make sure all the layers are merged together, press ctrl+t and resize the interface to a really small state, at the top you can see the percentage you're resizing it to, so do it about 11.0% by 10.0%


Use the dodge tool to highlight up some boring parts then apply Filter > Sharpen > Sharpen to this layer to make it look a bit less dull





Duplicate the main layer and move it down about 20px (shift+down arrow twice)
Apply this drop shadow to the duplicate layer


Merge the 2 layers together and duplicate it again, flip it horizontally (Edit > Transform > Flip Horizontal) and move it about 100px to the right


Merge the layers together again and duplicate it again, flip it vertically and move it down wards about 180px
Merge the layers together again and apply this drop shadow:





Make a 1px tall selection across the bottom of the top metal pieces


And copy and paste that to a new layer
Position it underneath where you copied it from and go into the transform mode (ctrl+t)
Stretch it all the way to the top of the other pieces


Softly erase a few bits and apply Filter > Sharpen > Sharpen


Do the same to the side parts


Now you could apply the same drop shadow to these parts except a bit lower opacity



Make some selections underneath the metal like so


Now fill the selections with a dark grey


Make sure this layer is underneath all the metal layers
Apply this feint Inner Shadow to this layer:







Alright.. that's about done!


You could add a few small details like a light or something


I've made quite a few good outcomes using this method:





For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?