WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

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)

inde.jpg (2122 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.

wpeC.jpg (2483 bytes) 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.

wpeD.jpg (2591 bytes)

Don't be scared of lines - just draw the inlines as you want. Add some type inside. Change brightness/contrast as needed.

final.jpg (4998 bytes)

You can also make some nice JavaScript rollovers to make it all look even better. See the JavaScript Beginner's Guidefor more details!

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

butt1.jpg (1689 bytes)

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.

wpe12.jpg (1231 bytes)

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

wpe13.jpg (1285 bytes)
wpe14.jpg (1278 bytes)

Some airbrush strokes change it all, right?butt2.jpg (1409 bytes)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.wpe3.jpg (6033 bytes)

wpe2.jpg (1323 bytes)

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.

Woops, you got a nice looking button. Now you can put some text over it or change the color by Image >Adjust >Hue/ Saturation.

Move your mouse over the last button to light it! (JavaScript rollover)

This article first appeared in November 1998.


Refresh Daily
Join Editor-in-Chief David Fiedler The Editor With No Timeand find truth, justice, and a clue or two.

Browse by Category
[ Site Map ]

ActiveX / VBscript
CGI / Perl
Database Connectivity
Design / Graphics
HTML / Site Authoring Tools
Multimedia: Audio / Video / Streaming Technologies
Refresh Daily: Editorial Column
Servers & Server Tools
Site Design / Graphics
Site Management / Marketing / Log File Analysis

HTML5 Development Center

Recent Articles