Tutorial: Page (1) of 1 - 02/21/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 2: rounded corner interface plates By John Selvia
I used to spend hours with the Pen tool in Photoshop to create rounded interface elements. But this technique speeds things up 10 fold. One hundred fold? This blew me away the first time I did it. This is one of the easiest techniques you can do in Adobe Photoshop, yet very powerful.

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?

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 [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

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Interface Design in Adobe Photoshop by DMN Editorial at Feb. 21, 2005 7:43 pm gmt (Rec'd 3)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • [ServletException in:/common/ads/links.jsp] Unable to load class for JSP'

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