| Abstract Grunge Interface |
pages (2): [1] 2 |
|
|
This fine tutorial has been syndicated to us by the fine folks over at
DeathxDesign.
You've seen the effect before on TemplateMonster - now learn how to create
detailed grunge interfaces yourself in double-quick time using basic Photoshop
tools. The technique is so simple it will make you wonder how you managed
to live without it!
 |
Step 1: Create a new 400x400 pixel document, and Edit >
Fill the background layer with a dark grey. Create a new blank
transparent layer on top and then, using either the Pen Tool
or the Rectangular Marquee Tool, create an object resembling the one on the left. The
exact shape of the object is entirely up to you - it just has to resemble
your proposed interface. Minor imperfections should be ignored too -
the reasons for this will become apparent later... |
 |
Step 2: If you have a pen-path object, you should now
rasterize it. Then you'll need to CTRL+click the layer, to select its
contents. Make sure that you have black and white as foreground and
background colours. Using your selection and the Gradient Tool, fill it
with a gradient that looks a little something like the one on the left.
Don't worry if it doesn't look perfect - this will all add to the effect!
|
 |
Step 3: Using rectangular selections and gradients
similar to those in step 2, add a few random bars to your creation.
NB. You might want to play with image > adjust > levels to
increase the contrast as necessary.
|
 |
At this point you might want to add
some more random boxes. With this complete, we'll progress onto the
wires & mesh:
Step 4: Create a new transparent layer on top of the others, and call it mesh.
Now create a new shape like the one on the left and Edit > Fill it
with black. CTRL+click the layer and select Edit > Stroke from the
menu. Give the object a 2px stroke outline, and then lower the opacity of
the whole mesh layer to 45%. |
 |
Step 5: Now draw some quick black 'wires' onto
another new layer, with a
5px thick brush set to 100% opacity. Again, there is no need for them to be
perfect. In fact, that this point the image usually looks pretty bad
anyway. |
 |
Step 6: Create another new layer, and make a
circular selection on top of your existing design. Fill this with the
Gradient Tool using a gradient of your choice, and then drop the opacity of
the layer down to 50%.
|
- Tutorial written by DeathxDesign
|

|
|
 |
php, shoutbox problems Author: vanhansen Posted: Nov 17th, 1:30am Activity: 5 replies, 91 views
|  | MarkupGeeks Logo Author: ahstanford Posted: Nov 16th, 8:45pm Activity: 11 replies, 146 views
|  | Drawing Tutorials Author: ahstanford Posted: Nov 16th, 12:46am Activity: 0 replies, 98 views
|  | Superbowl predictions, anyone? Author: ahstanford Posted: Nov 15th, 10:46pm Activity: 10 replies, 137 views
|  | Photomanipulation Footsteps Author: ahstanford Posted: Nov 15th, 10:43pm Activity: 4 replies, 93 views
|  | Learning to draw... Author: ahstanford Posted: Nov 15th, 12:43pm Activity: 4 replies, 115 views
|  | Looking for simple UI elements Author: FenixRoA Posted: Nov 15th, 6:40am Activity: 7 replies, 108 views
|  | HDD Help? Author: Phoenix Wynde Posted: Nov 13th, 2:31am Activity: 1 replies, 106 views
|  | Fun New Battles Posted! Author: ahstanford Posted: Nov 11th, 7:33pm Activity: 0 replies, 139 views
|  | 4-man Simon Tournament Author: ahstanford Posted: Nov 11th, 3:28pm Activity: 0 replies, 90 views
|  | Design Brief Inspiration for BioRUST Battles! Author: ahstanford Posted: Nov 11th, 7:19am Activity: 4 replies, 139 views
|  | The BioRUST Free Stock Photography Thread Author: ahstanford Posted: Nov 11th, 6:32am Activity: 2 replies, 145 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|