Enhancing Designs - Interface

By Nick Ustinov

I am getting lot of e-mails about my previous enhancing designs article. People ask me to share some more techniques you can do using airbrush tool. I'll show how to create 3D-looking interface and buttons in this article along with some examples.

pult.jpg (5992 bytes) This is a sample of airbrushed interface. It's taken from a program Kai's Power Soap, that is a simple photo retouching proggie by MetaCreations. I've spent a lot of time looking at Soap's interface since I liked it alot and decided to learn to create something similar. Of course, having a WACOM or other tablet is highly recommended here since you can control your strokes more precisely. However, if you have a good mouse it can also be done.

Before you continue reading, it would recommend reading Practical Drawing lessons from Alex Birjukoff (those can be found at the main Cooltype.com page).

First thing I noticed is that it was originally drawn at a very high resolution (I suppose 300 dpi) and then scaled down to 72 dpi. Very smart step since after you scale it down unprecisely drawn parts are eliminated. The main color is chosen as gray and that's quite good too, since you can introduce more composition contrast - you can have more dark and more bright areas. Then the light source is chosen to be in the top right corner. Also, in such things it is recommended to use soft rounded corners.

Let's start with something more simple than this navigational remote control. You will learn to create more comlex things once you figure out how it all works. Once again, I show scaled down pictures here. It's all should be made at higher res. Here's an example of interface I made for one of my friend's program.

iface.jpg (17143 bytes)

	I started with a simple figure with rounded corners. Let this be my interface element. I first created a channel with it's edges, loaded the selection and filled with gray. Clear? Don't remove the selection yet.
	Hit Ctrl-E to create a layer of the selection, make sure Preserve Transparency checkbox is checked so when you paint it only paints inside the layer. Pick reasonably big brush, set pressure to 7-10% and paint it over with black. Also, cut a piece out from the left side Now some white lines (hold Shift to make the lines straight). I also cut a piece of it out so it looks more sci-fi. Let's add some more drama here.
	Don't be scared of lines - just draw the inlines as you want. Add some type inside. Change brightness/contrast as needed.
	You can also make some nice JavaScript rollovers to make it all look even better. See the JavaScript Beginner's Guide for more details!

Of course, you should practice alot with that to achieve good results. Let's look at some buttons.

I took a button from Kai's Power Soap again - left part of it looks like it's made of glass. The effect is achieved because of that hard specular that is only specific to glass-like materials. It's just drawn using plain white color and airbrush in Photoshop.

As before I started with just a simple layer filled with gray.

Some airbrush strokes change it all, right?

By just adding 2 speculars and dropping a simple shadow I dramatically changed overall look of the button we were working on. Now it looks like made of shiny plastic.

The next step would be to make that glass thingie in the left side of the button. To produce that you gotta know what's the difference between glass and plastic. Glass is more reflective, so all you have to do is to add some more "reflected" speculars there. But before doing this, select a desired "glass" area using a rectangular selection tool, use free transform tool to scale it down just a little bit and make sure it fits good. Decrease brightness of this area too. Then Zoom In to 500-600% and using different size brushes and pressure setting gently stroke a few speculars.