|Page (1) of 1 - 02/21/05||email article||print page|
Interface Design in Adobe PhotoshopLesson 2: rounded corner interface plates
Before you get started, note that this is the second article in a series detailing the creation of interface elements in Photoshop. You can read the first installment by clicking here.
First, create a New Channel in the Channel Palette and choose the Channel Layer.
Next, choose the Rectangular Marquee tool from the tool palette and create a bunch of white boxes in the new Channel layer you just made. Something like what's shown below.
Try to avoid very thin boxes as these will round out probably more than you want on their ends.
Now, you'll want to go to the Filter menu, and choose Blur > Gaussian Blur. Blur the boxes channel until the corners look rounded and blurry, like the one below. Don't worry about what your Blur settings should be; eyeball it so it looks like the image below.
Next, choose Image > Adjustments > Levels. Again, numbers aren't important here; just make sure all three triangles meet toward the middle, but don't overlap them.
Before you close the Levels window, look at your image. If your edges look too crisp and jagged, you moved the triangles too close. If they still look blurry, you need to bring them closer together.
Here's our previously blurry boxes with nice sharp rounded corners, ready to turn into a selection to create our interface plate. So the next step is to create the dirty, pitted metal look by using this channel to create a selection and filling it with clouds.
Full details on how to do that are in my previous tutorial on creating a dirty, pitted metal effect, which you can read by clicking here. Here's how mine came out.
Wasn't that easy?
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
Source:Digital Media Online. All Rights Reserved