Adding Depth

by DL-44

This is Part II of my Interface Concepts tutorial series. We will continue along the path we started in Part I: Creating the Shapes You Need. If you have not Followed that tutorial, no problem! All you'll need are some shapes to work with -- whatever you feel like.

---

For those of you who did not come here from Part I, here's a quick preview of what we were working on -- first our initial sketch, then the results of our Shape Making:

---

So we're ready to explore some different ways to add the depth our image desperately needs! As we go, each section of our interface gives us unique challenges for adding depth -- which gives us the opportunity to use a variety of methods throughout this tutorial (yes, I know, I'm a genius...what planning!)

The lessons will proceed in the following manner:

• Phase I: Simple Bevels
• Phase II: The Lighting Effects Filter
• Phase II.v: Simple Bevels Revisited
• Phase III: Gradients
• Phase IV: Simple Inset Lines
• Phase V: Bringing it all Together

- Phase I: Simple Bevels -

We're going to start with some of the easier areas to work with, making some simple bevels to bring our pieces forward. To the right you see my current layers palette as it appears at the completion of Part I.

We're going to work right now on the body inset layer. Make sure that it is your active layer (or whatever shape you may have in your piece to work on : ). Ctrl+Click on the layer to select the shape.

Press Ctrl+Shift+I to Inverse the selection (or go to "Select >> Inverse"). This will select everything outside of our shape

To make the bevels smooth, we need to Feather the selection. Hit Ctrl+Alt+D to bring up the feathering dialogue box. The number you enter will esentially apply a blur of that many pixels to whatever effect you apply to the selected area, making the transition between the efected area and the uneffected area smoother the higher you go. We want this shape to have a nice smooth rounded edge, so I'm using about 3 pixels here.

Now we need to move our selection to right spot to make our highlights. Make sure your Marquee Tool is selected and use your arrow keys to nudge the selection.

Since we feathered at 3 pixels, we're also going to nudge 3 pixels (general rule of thumb, usually yields the best results). First nudge down 3 pixels, then either left or right 3 pixels, depending on your light source (I usually use a top-right light source, which means I'll nudge my selection 3 pixels to the left).

Now for the actual bevel! Go to Image >> Adjust >> Brightness/Contrast. Slide the Brightness slider up to +100% (try 50-75% if your colors are light).

Now for the shadow. Nudge the selection back Up 6 pixels and back to the Right 6 pixels. Go back to Image >> Adjust >> Brightness/Contrast and slide the Brightness Slider down to -100%. Deselect and take a look at what you've got!

That's the basic process, but there are (as always) a few thing we can do to refine it all. For starters let's identify what could use improvement:
a) the edge is a little washed out
b) the fade is not quite as smooth as I'd like
c) the overall contrast is less than I had wanted

So, now what do we do about those things...they are all a part of whether or not our depth is believable! For the edges, there's a nice simple trick to add a little bit of bite back to it: Create a New Layer directly below the current layer. Select the shape again, and fill it with black. Deselect and take a look. It's not a big difference, but it's enough to effect the overall appearance of the image!

With: Without:

Now to take care of smoothing it out a bit more: make sure the Preserve Transparency box is ticked for the layer, and give it a Gaussian Blur (filters >> blur >> gaussian blur) of about 1-2 pixels.

Now to add a little more "oomph" to it. I won't go into a lot of detail for this part -- go to Image >> Adjust >> Curves. Grab the line and pull your points until it's something like what you see in the image to the right. This will deepen the shadows, and brighten the highlights, and gives you a lot more control and a lot better result than the using the Contrast slider of the Brightness/Contrast option. For a detailed explanation of the use of Curves, stop by Steve's Curves Tutorial -- definately worth your time.

This method of beveling has many benefits. It can be applied universally to large areas without deviations in depth or tone. It can be precisely controlled by altering both the Feather setting and the nudge distance, as well as the Brightness level.

The main shortcoming of this method is that it does not lend itself to large round objects requiring a lot of depth -- but that's okay, we have other ways to do that (don't worry, we'll get to that!!).

So, let's move on to the next method, with Phase II ---->