Grunge Interface
Youve seen it on TemplateMonster, now you can do it yourself! Make grunge or futuristic interface objects now with these easy and effective tutorial!

author:
  Blake
title:
  Grunge Interface
date:
  Mon 10 January 2005
category:
  Web Layout and Design
credits:
 


Editing

Make a 400x400 document. You can edit>fill the background layer to Dark Grey



Pen Tool

use the Pen Tool:



to Make something that looks sort of like this, should be in the general shape that you want your interface object to be.





Rasterize the Layer

Now rasterize the layer by right clicking it and clicking Rasterize. Then you'll need to ctrl+click the layer, to slecect its contents.
Make sure that you have black and white as forground and background colours, then using your pen tool object's selection, fill it with a gradient, should look like this.
*note, dont worry if its perfect, this will all add to the affect





Selections

Now using rectangle selections and similar gradients used in step3, make some bars on it, randomly. So it looks like this:
*note* You might want to press image>adjust>levels to make the bars contrast come more.





Merge

At this point you might want to add some more random boxes, but we're going to add some wires, and a mesh.

First make a new layer (this will be the mesk layer) and then make a new selection like I have done, edit>fill with black, ctrl+click on this new layer and then make another new layer.

On this 2nd new layer, add a edit>stroke black as well, 2 pixels. Change the layer opacity of the mesh layer to 45, then click on the layer with the stroke, and press ctrl+e, this will merge them, press ctrl+e again to merge with our base image.

Mine looks like this:





Draw it

Now Draw some "wires" in, just take a brush of 5px and draw them on, dont need to be perfect:





Abstract stuff

Adding a little more abstract stuff.
Create a new layer, and make a new selection, with some a circle in it, and something fairly overtop of most of the design, then fill it with your favourite gradient, and change layer opacity to 50%

Should look something like this:





Settings

Now we want to selection this brush:



and use these settings (use the settings in top right.)



and for scattering





Add Spice

Now we want to add some spice to this, add some grunge. simply just draw around the top left edge with light grey, and then again with dark grey, it should come out something like this:





Shrink it

Now comes the easy part, make sure you merge all the layers except for the background layer and your object layer. Now, click on the object layer, and use edit>transform>scale to shrink this down considerable, until its around this size:





Almost done

Almost done! You just need to add some lines, and a box. Make your lines grungy by using the same sort of settings on your brush but on the eraser tool.
You can experiment by duplicating this object and cutting peices off and pasting back on, after your all finished something like this can come out.
*note, make sure to add a outerglow of black, gives it depth



Enjoy! Tell your Friends!

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