|Page (1) of 1 - 02/08/05||email article||print page|
Interface Design in Adobe PhotoshopLesson 1: Creating a pitted metal effect for the interface background
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.
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).
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.
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 [email protected]. 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
Source:Digital Media Online. All Rights Reserved