Select Tip...

Advanced Interface Design

This tip explains how to build an interface based on an existing sketch. Use it for practice and to learn some cool
tricks, including channels, masks, finishing, detailing, and those little finetunes that make an interface cool.

To start, you have two options: Download the starter file by clicking here or use your
own file.

If you are using our file, open it up in Photoshop and get ready to explore a ton of
really good information. If you are using your own file, stand up, walk away from your
computer (yes, we are serious), find a piece of paper and pencil, and draw your
interface. No, you don't have to be Syd Mead, but you do have to be able to visualize
your interface. You'll save time working out problems on paper rather than on the
computer. Once you have drawn your interface, go back to your machine and create
the shapes or line art.

Make some masks of your shapes. Select the Body layer

(CTRL+a, arrow up, arrow down) and go to the Channels
palette. Create a new channel named Body mask and fill it
with white. Follow these steps for all the shapes: screen
body mask, buttons mask, and so on. Be sure to name both
your layers and channels. You will be glad you did when
you have 30+ layers you are working with in one file.

Take the Body mask channel and duplicate it. With the
channel selected, Gaussian blur it by 7-13 pix. We will use
the amount of Gaussian blur to determine how much 3D
goes into our shape. The more blur, the more rounded the
shape is; the less blur, the sharper it is. Now, deselect and
run another Gaussian blur set for 2-4 just to smooth the
shape out a bit. Finetune your image, knowing that "white"
is high and the more round you want the shape, the more
blending has to go into it. You will learn through practice
with the filter what it takes to make the shape look the way
that you want.
Go back to the Layers palette, and create a new layer
named 3D Body and fill it with whatever color you want. We
used 204,204,204 to have more room for tuning at the end.
We can add whatever we want for color or texture without
being "committed" to using a "blue body" or a specific
texture. This flexibility makes doing "comps" for clients really
easy.

Select Filter>>Render>>Lighting Effects and look at the

settings we have below. You can match these or use your
own. Be sure to mess with everything and see what it does.
Be original in your designs. Now, as you can see, our shape
has been extruded, but it is less then pretty and probably a
bit different from what you imagined. No problem: we can fix
the texturing.

Load the selection for your Body channel and invert the
selection. Press Delete and deselect, then check Preserve
Transparency in the Layers palette for the layer 3D Body.
This step ensures that what we do next works right.
 Now run a Gaussian blur with settings you select. (We used
6.2) What we are doing is smoothing out the surface of our
body. Because we checked Preserve Transparency in the
Layers pallet, what we do to this layer from now on will only
affect the body itself. This option really comes in handy
when you are doing the finetuning.

Now that you have completed steps 1-6, we can finetune the body with the Airbrush or Dodge & Burn. What you do
here is up to you. We have added a bit of contrast to the body to make it "pop out" a bit more. Don't get too wild yet;
just make it look good. You will have an opportunity for more finetuning at the end, when you are finished with the
main steps.

Go back to the Screen Body channel, and make a copy of it

called Screen Body3d. Run Gaussian blur the same way
you did on the body. Again keep in mind that the more blur
you use, the more rounded the shape will end up. Click
back into the Layers palette, and create a new layer called
3D Screen, filled with the same gray (204,204,204).
Now run Lighting Effects again. The settings we used are
below, but be sure to play with this a bit. Load your
selection for the Screen Body channel and then invert and
delete, leaving just the textured 3D screen. Check Preserve
Transparency for this layer as well, and blur it to your
satisfaction, to smooth it out.

Now you should have something like this. We have created

our 3D Body and Screen. Now it is time for detailing. We
could add simple buttons and a black box for a screen, but
we want something that is going to look slick and well
finished. So take a moment to blink and walk around... OK,
since we are working on the screen part of the interface,
let's take it a bit further by insetting a screen into it. We are
also going to introduce a new method of getting that
beveled look without an after-market plug-in!

Create a new layer, and make the shape of your screen in

it. Use the marquee to get the shape the way you want it to
look.
Go into the Channels palette, and create a new channel
named Screen and fill it with white. What you have is a
sharp-edged version of the screen shape. Now blur that
channel by about 7 pix. You will adjust the levels to clean
up the edges and round them out. You should also notice
that this step can finetune the size as well.

Open your levels (CTRL+l ), grab the left handle and drag it
close to the center, and then do the same with the right
handle. If you watch your channel, you will see what this
does. Click OK when you have it where you want it. To see
the fit of this screen in the screen body, turn on the Screen
Body channel. You will see a red/pink mask appear that is
the screen. Use this as a model of your real screen. If you
are satisfied, turn off the Screen Body channel and move to
the next step. If you are not, turn off the Screen Body
channel, press CTRL+z, and repeat until you are happy with
the shape.

Load the selection for the screen and click into the Layers
palette. Delete the layer that has your screen shapes in it
and create a new layer called Screen and fill the selection
with white. Check Preserve Transparency for this layer and
move it under your 3D Screen Body layer. Make a copy of
the 3D Screen Body layer and turn it off. DO NOT
DESELECT! We want an original clean screen body so you
don't have to start over if you do not like the shape.
Make the 3D Screen Body the active layer, and press
Delete. Keeping your selection... now feather your selection
by 3-4 depending on the amount of bevel you want.

Press m to make sure that you are using the marquee tool,
and bump the selection down and to the right 3. Select
Image>>Adjust>>Brightness/Contrast with
Brightness=+100, Contrast=0, and then bump your
selection up and to the left 6 pixels. Select
Image>>Adjust>>Brightness/Contrast and choose
Brightness=-100, Contrast=+40. Click OK. Repeat this step
if you want to make things a bit darker.

Move your selection back down and to the right 6 pixels.

Select Image>>Adjust>> Brightness/Contrast with the
settings Brightness=+100, Contrast=+15, and then
deselect. Add a drop shadow using your layer effects. We
used offset=4, blur=6. Now you should have a nice "inner
bevel" on your screen. You can use this effect to create 3D
buttons, titles, and even text. You just have to play with it,
and learn how it works, and where to use it.
Go back to our Screen layer, and fill it with a color or
gradient, and set the opacity to 85%.

Now you should start to see the interface coming together

and your Layers palette should look something like this.
Let's get back to the body. We are now going to start
adding some details and effects to the body. Include the
buttons...

Go back to the Channels palette, select Body Mask, and

create a new channel called Body#2. Contract your
selection by 15 or so and fill it with white. Now when you
turn on your Body Mask, you will see how it is smaller and
fits right on top. Be sure to turn off that channel before you
continue. You will also notice that your edges are a bit
rough. We can fix that using the blur, levels trick.

Gaussian blur this layer by 7 and then open your levels

(CTRL+l) and drag your outer handles into the middle to get
the effect that you want. Duplicate this channel and call it
3d Body#2, and Gaussian blur it. Now click back into the
Layers palette.
Click the 3D Body layer, and create a new layer above it
called 3d Body#2 and fill it with gray (204,204,204). Now
using Lighting effects, trick create your 3d Body#2. It should
look something like this.

Let's create some buttons. You can skip this step if you
want or modify it to use your own buttons.

Click the Body#2 layer, and create a new layer on top of it.
Select Body#2 and fill our selection in the new layer with
black. Using the tools you have, make the shape for the
buttons the same way you did the screen. When you think
you have the shape you want, click into the Channels
palette.

Create a new channel called Buttons and fill it with white.

Now smooth it out using blur and levels to get the final
shape you want. Then make a copy of it called (yup, you're
catching on now) Buttons 3D. Move back into the Layers
palette and delete the layer you made the button shape in.

Create a new layer above our Body#2 called Buttons 3D

and make that baby 3D using the techniques that you have
learned so far...
Did you get it? Feel free to go back to previous steps to review. We are providing less detail at this point in the tip
because we want you to learn this stuff. Now we are going to add some details to this button shape and make it look
more like a set of buttons. You can also move them on top of the screen if you want. We are very interested in the
experimentation you do; so when you are done, be sure to leave your rating of this tutorial and any
comments/suggestions you have, and post a link to your version. We will go take a look at it!

Let's add some separation lines. If you already know how to do this, skip this step.

Create a new layer above your Buttons called Button

Details. Using the line tool set at 2 pix, no anti-aliasing,
create two horizontal lines that are about as far apart as
you want the buttons to be. Use the move tool: press and
hold down the ALT key, click and drag to create another set
of those lines, making the top line of the new lines line up
on the bottom line of the old lines. Now merge the new layer
onto the Button Details layer. Now do it again. Every time,
merge the new lines onto the old lines until you have the
look you want.

Now duplicate the Button Details layer, and bump it up 1,

and invert the new layer. Then merge it back down onto the
Button Details layer. Now select the "B" shape and invert
your selection, and press Delete. This should give you clean
lines that match the body shape. Set the Button Details
layer to softlight in the Layers palette to get a nice-looking
inset group. Add a drop shadow to the Buttons layer, and
you now have buttons!

.....The buttons you have just created meet and or exceed the federally approved daily dosage for buttons in a single
serving!.....

And now on to the finetuning of the rest of the interface.... hang in there; you are almost done.
This is the most important part: what really separates the professional designer from the amateur. Now is your
opportunity to take the design that you have in your mind and partly in front of you and make it truly unique.
First to lift this big heavy thing off the ground a bit. Go
ahead and add a drop shadow to the main body. You can
do this with the Layers effects or you can just duplicate it, fill
it with black, and blur it...whichever gives you the look you
want.

Now select Image>>Adjust>>Variations. Change the color

and/or add a texture. We have added a wooden texture.
You will notice the green tinge of color on these images,
which is because they are gifs.

Move on to Body#2 and do the same thing. Drop shadow

first, so that it looks like it fits. Try to stay away from crazy
color combos, which can detract from the design a bit. We
have used a nice dark onyx, which looks classy with the
wood. Remember when you are doing these "mods" to work
with a copy of the original, so you can do a few versions
and see what you like without messing up the original.
 Now it is time to use some hardware, and bolt that Body#2
to our Body 3D. After all, there is nothing holding it down
but pixel juice! So create a new layer above our Body#2
and make a nice round selection. Fill it with Radial Gradient,
which we will use to either create bolt heads, screws, or just
rivets. We played with our curves a bit to make the ball nice
and dark, really smooth. To do this, just open the Curves
palette (CTRL+m) and work with the settings to the left.
What you do with them is up to you. We used the settings
for rivets by changing to a gold color using variations and
inset them into the metal using the same trick that we used
for the screen inset. And we are also going to go way
overboard with it just to show the effect. We also think our
screen is a bit too light, so we are going to increase the
opacity to 95%. Play around; finetune. Now let's take a look
at that bland screen frame.

Click this image to see the full-sized finished version. We

increased the contrast to make it fit a bit better with where
we have taken this design. Now for the final touches. We
added a new layer called Details, inset some lines, added
rivet holes, and adjusted the brightness and contrast a bit.
We then added some rings to the left side. For the last
detail, we added scan lines to the screen.

Now the interface is ready for a logo, text on the buttons,

and a header if you want. And there you have it. You are
finished... NOW GET UP AND JUMP AROUND!!! You made
it through... and what have you learned? You can do
almost anything with the stock out-of-the-box version of
Photoshop 5.x. Let's recap. The following techniques were
covered:

Naming conventions
Organization and good file structure
Masks and channels
How to use the Layers and Channels palettes
Shape creation and modification
Advanced lighting effects
Beveling without after-market plug-ins!
Tuning and adjusting with the use of layer effects
Finishing techniques
And a ton of patience...

This tip comes from

[Link]