Tutorial: Page (1) of 1 - 02/08/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Interface Design in Adobe Photoshop

Lesson 1: Creating a pitted metal effect for the interface background By John Selvia
This series of tutorials shows how to create interfaces for games, multimedia, motion graphics and web. There will be two approaches taken-the dirty, slimy, gritty, rusty interface, and the organic, clean, modern interface often seen in television and motion graphics.

For the first installment in this series, we'll explore the creation of a rusted, pitted metal background for our final interface. This will be accomplished in two quick stages.

Interface design sample 1

Stage 1: creating the base for the effect
First, choose black and one other base metal color (grey blue works great). You will use these for the Clouds filter.

Apply Clouds using the 2 colors you chose (Filte > Render > Clouds)

Next, choose the Channels palette (under Windows > Channel if it is not already open) and create a New Channel (the little dog-earred paper icon, bottom of palette OR New Channel from the little triangle menu upper right of Channels palette).

Then choose Filter Menu > Noise > Add Noise until you get this more or less.

Now, (still in the Channels palette), open the Image Menu > Adjustments > Levels and set the levels so the triangles meet in the middle like this. It sometimes works better if your triangles meet on the right side instead of the middle.

Your graph may look totally different, by the way, owing to the nature of random noise. This helps reduce a lot of the gray and helps isolate important dots.

Next, scale the noise up a bit so that the dots are larger (Edit Menu > Transform). This has the added effect of ever so slightly blurring the dots so they look more natural.

Stage 2: adding in surface detail
Turn the dots into a selection by choosing the little icon at the bottom of the Channel palette that looks like a dotted circle, or by Command-clicking (Mac) or Control-clicking (Windows) on the Channel Layer.

Back in the Layers palette, choose your layer, and with the selection you have of the dots, copy from the base metal, then paste it. (It will create a new layer.) Bevel this new layer of dots (Layer > Layer Style > Bevel and Emboss). I think it works best if you choose Down for the direction, because it looks like pits instead of bumps.

Note: Your bevels will look much better if you don't use white for the highlight. Choose a lighter version of the main color in your image (here I chose a light gray-blue since most off the image is a medium gray-blue). If you want a warmer feel, choose a light tan instead.

Next, choose a color that would work for a basic rust.

Choose the paint brush, pick a large size brush--I used 200 pixels--and set the Mode for the brush to Color. Decrease the brush's opacity--I used 20 percent--and dab on some rust color.

You could stop here, and you'd be done, but let's go one more step....

Using the lasso tool, create irregular shapes, use the shapes to copy from the base metal, and paste (will create a new layer). Now, bevel these with the smallest of bevels (again, making sure you don't use white for highlights--I chose a light tan here). Then create diagonal scratches and copy, paste, bevel those also. Overlapping helps with the illusion.

Page: 1

John Selvia is a 3-time Emmy winning Art Director/animator at an NBC affiliate station. He has been designing interfaces since he got his first Mac, a IIsi in the early 90s, using a $29 paint program. Later, he won an illustration contest and got a free copy of Photoshop and has never looked back. He eats, lives and breathes Photoshop and LightWave 3D, and also uses After Effects on a daily basis. He is also currently an adjunct instructor at a design/photography school where he teaches Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes. John also runs a web site for creative people called The Lyzrd's Stomp (http://www.lyzrdstomp.com) and can be reached at johnselvia@mac.com. In his spare time, John writes crazy instrumental music using Garage Band, and plays guitar and bass.
Related Keywords:adobe photoshop, interface design, rusted metal, rust effects, metal effects

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved