 Database Journal: The Knowledge Center for Database Professionals
|
Enhancing Designs - ChopsBy Nick Ustinov 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.
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.
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.
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).
Now, duplicate channel "outline" and name it "shadow". Gaussian blur it by 4 or 5 pixels.
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, 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.
Here's the result: 
This article first appeared in November 1998.
Contact the WebDeveloper.com® staff Last modified: 20
|
Refresh Daily
|
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.
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.
Remember, that you must always sketch what you are going to draw on paper to have a visual presentation in front of you. 
Hit Ctrl-J to create a layer. Rename a layer to "shadow". Click "Preserve Transparency" and fill the layer with black.
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.
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.
and find truth, justice, and a clue or two.
| Solutions | ||||||
|
||||||
|
||||||
|
||||||
|
||||||