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
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.
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,
Now that you have your beveled channel and saved your work, head back to your
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
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
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
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
Contact us if you have any questions, problems, comments, clarifications, etc.
Hope you find this tutorial useful!