After FX Tutorials : Outer Bevel

Outer bevels can be a great effect for interfaces with rounded edges and smooth curves. Here are a few easy steps to create the outer bevel effect using the photoshop lighting effects filter and the channels.

Figure 01

First you will need the basic skeleton of the interface loaded on its own separate layer. Make sure the interface is already using the desired color.

Figure 02

Load a selection on the interface then select the channels palette. With the selection still loaded, make a new channel then select that channel by clicking on the channel thumbnail. Fill the selection with white (fig. 3).

Figure 03

With the selection still loaded, apply FILTERS > BLUR > GUASSIAN BLUR. I used 4.5 for the amount of blur but you can use a diffrent intensity for the amount of blur. The greater the blur the more smoother the edges will be. After applying the blur, release the current selection.

Figure 04

Select the RGB channels then go back to the layers palette then select the layer containing the interface. Apply FILTERS > RENDER > LIGHTING EFFECTS and use the light position as indicated in fig. 5. The settings I used for the lighting effects filter are listed below. Light type: Intensity: Gloss: Material: Exposure: Directional 35 0 69 0 Ambience: Texture channel: White is high: Height: 8 #4 yes 11

Figure 05

The filter can sometimes create a rough dirty edge around the interface as indicated but the blue box on fig. 6. To remove the rough edge, you can simply load a selection, contract the selection by 2 pixels, inverse the selection, then hit the delete key. Download the PSD file for this tutorial. afterfx03.zip 27.5 kb

Figure 06

For your comments, questions, suggestions and complaints send your email to webmaster@eyeball-design.com.