Database Journal: The Knowledge Center for Database Professionals

find a web host with:
CGI Access DB Support NT Servers UNIX Servers Telnet Access advanced search

internet.com Internet News Internet Investing Internet Technology Windows Internet Tech. Linux/Open Source Web Developer ECommerce/Marketing ISP Resources ASP Resources Wireless Internet Downloads Internet Resources Internet Lists International EarthWeb Career Resources Search internet.com Advertise Corporate Info Newsletters E-mail Offers

internet.commerce Be a Commerce Partner

Enhancing Designs - Chops

My latest article on Airbrushed Interface raised very high interest among readers, and I was getting a lot of e-mails to describe the technique deeper. Here I continue airbrushed interfaces article series and introduce channel operations as a powerful tool.

However, this article is targeted to advanced Photoshop users (and for Photoshop 4.0 only). You must know basics of Photoshop since if I explained it all here the article would be too long and hard to read.

If you use just Airbrush tool it's complex to control brightness of highlights etc. So here we will use layers for each highlight or shadow etc.

Key to success are properly shown lights. To draw realistic interface you should know how the lights are distorted and reflected on different materials (at least get some basic knowledge). You might want to read Shadows and Tones article (look under Practical Drawing Series) by Alex Birjukoff that gives some understanding on that.

Here are some examples of what you can achieve with chops and airbrush techniques. I made these images while working on this article.

Main material we use here is plastic. It has soft shadows and reflexes. Reflex is a sort of highlight that is actually a reflection of surronding objects. The remote control on the example has shadows and a reflex but doesn't have a highlight area. One we will draw together should have shadows, highlight and a reflex.

First we create a channel that will containing the main outline. The good point would be to name every channel and layer we create so we don't mess up with that once we have many layers and channels.

Remember, that you must always sketch what you are going to draw on paper to have a visual presentation in front of you.

In our case we don't need anything complex so I will not sketch it on paper and draw over in vector program. However, if you feel like you may need a visual source in front of your eyes, I'd recommend to draw in on paper first.

Let's draw simplest remote control like the one I shown as an example.

I created a new channel where I drawn the main outline for my remote. Rename this channel to "outline". If you have problems drawing rounded corneres, there's a rounded corners article (look in the left frame).

Switch to RGB channel. Select>Load Selection..>outline. Hit Ctrl-J to create a layer. Open Layers Palette and click "Preserve Transparency" checkbox. Rename layer to "base". Fill it with solid grey.

Now, duplicate channel "outline" and name it "shadow". Gaussian blur it by 4 or 5 pixels.

Very well, switch to RGB channel. Select>Load Selection>shadow. Select>Modify>Contract by 3 pixels. Select>Inverse.

Hit Ctrl-J to create a layer. Rename a layer to "shadow". Click "Preserve Transparency" and fill the layer with black.

Fine, you have soft dark shadow so it all looks more 3D-ish now. Go to channels again, duplicate "shadow" channel, rename it to "reflex".

Image>Adjust>Curves and draw one like on the picture (right). This distorts a channel so it can be used as a reflex. Reflex is actually a difference between shadows (own shadow and drop shadow). In real life you cannot have a reflex if you object is located on a dark background.

That's how the reflex channel looks after the distortion. Now, switch to RGB channel. Also swith to layer "base". Select>Load Selection>relfex. Move the selection 3 pixels up and 3 pixels left. Select>Inverse. Hit Ctrl-J to create a layer. Check it's "Preserve Transparency" checkbox. Fill with white. Rename to "reflex". Now you will have to adjust the reflex layerl. Set it's opacity to 60-80% if it seems to be too bright (depending on how you feel). Also, uncheck it's "Preserve Transparency" option, pick up the eraser tool with a big soft brush and erase left and upper side of it so you can see the shadow). Switch to layer "shadow" and hit Ctrl-E twice so you now only have one "base" layer.

Image>Adjust>Curves and adjust the curve so you like the color and balance between shadows and highlights.

This is how it looks now. Now we will create a bottom layer.

Select a part of the layer and move it down.

Create a new layer and call it "inside". Draw a selection and fill with light gray just like shown on the picture. Check layer's "Preserve Transparency".

Fine. Now pick up airbrush tool set pressure to 25-30%, pick soft brush (45 pixels wide). Draw 2 lines holding Shift so they are straight. These will be shadow lines.

Now, pick up a horizontal line selection tool, switch to layer "base" and create a selection of 2 lines where the layer was divided. Image>Adjust>Levels, enter 2 in the middle "Input Levels" input box. Click OK, move the selection 1 pixel up and Image>Adjust>Levels and enter 0.4 in the middle "Input Levels" input box. This creates a bevelled line. We will also use this technique later.

Now, time for drop shadows. Create a new layer, name it "drop shadows". Ctrl-Click layer "base" first. Create a drop shadow from this selection but on layer "drop shadows". Do the same with layer "inside" then.

Now, using the same bevelled line technique create some of those on an according layer (inside or base). Also, add some type and a background.

Here's the result:

This article first appeared in November 1998.

Fast Jump to Anywhere on WebDeveloper.com®:
Home Contact Us Free Newsletter News Site Map --------------------- ActiveX Advanced HTML Browse by Category CGI/Programming Database Connectivity Design & Graphics Developers' Forum (BBS) Downloads Dr. Website ® E-Commerce HTML/Authoring Tools Intranet/Groupware Java JavaScript Library Multimedia News Product Reviews Refresh Daily -- Editorial Column Security Servers & Server Tools Site Design & Graphics Site Management Tutorials VRML Web Developer Product Awards The XML Files ----RELATED SITES---- Browserwatch.com Java Boutique The JavaScript Source PC Webopaedia ScriptSearch Search Engine Watch Web Developer's Virtual Library WebReference.com

---

Contact the WebDeveloper.com® staff

Last modified: 20

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

[ Site Map ] ActiveX / VBscript Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML