Rob Weis Garren Wood    
3-D Bevel
Contact Us
Stock Photography

Latest News:

Wallpaper section is now up! More wallpapers coming soon!

The tutorials section has been transferred and updated.


Step #1: Setup

You need a basic interface shape already constructed. Make sure that the shape is on its own layer and is the general color you'd like your interface to be. Below is what I have:

Step #2: Creating your Channel

CTRL-CLICK your layer to grab a selection around your shape.

Click the Channels Tab to enter the channel mode. Create a New Channel named "ORIGINAL". Fill the selection you grabbed earlier with white in your new channel called "ORIGINAL".

Duplicate the "ORIGINAL" channel and name the new one "BEVEL".

Step #3: Working with Channels

Deselect any selections. CTRL+D

Activate the "BEVEL" channel by clicking on it (not selecting) and apply a gaussian blur.

Filter<Blur<Gaussian Blur

Use a level of about "6", then run the Gaussian Blur again with a setting of about half that, "3" in my case, and then once more with a setting of half of that, which is "1.5".

This creates a soft level of grey's to blend with the black and white.

With the "BEVEL" channel active, CTRL+CLICK on the "ORIGINAL" channel to create a selection.

Inverse the selection (CTRL-SHIFT-I) and hit "DEL" to clear it.

You should have something similar to this, depending on your shape.

Step #4: Beveling using Lighting Effects

TIP: SAVE YOUR WORK! Lighting effects has crashed my photoshop numerous times, losing everything!

Now that you have your beveled channel and saved your work, head back to your original layer by clicking on Layers Tab and activate your original colored shape. (my blue layer as shown above in step #1)

Apply a lighting effects filter by entering
Filters<Render<Lighting Effects.

Below is the basic settings I used to bevel my interface. Enter "BEVEL" as your texture channel and change the light type to directional. From this point, you'll have to play with the angle and the height (reduce it slightly), I chose to leave most of it at default for a basic bevel. Feel free to experiment to get the right effect you want and click ok!

Step #5: Cleaning up the edges

The lighting effects filter tends to place a dirty edge around the shape after its applied.

To clean it up, grab a selection of your layer, and contract the selection by 2 pixels:
Select<Modify<Contract by 2

Inverse your selection (CTRL+Shift+I) and clear the remaining edge (DEL)

Heres an example interface using what I've made so far with some other stuff added:

Contact us if you have any questions, problems, comments, clarifications, etc. Hope you find this tutorial useful!

Copyright © 2003 | Contact RGBQuest