OSX Bevel Effect in Fireworks

The Apple OSX bevelled effect isn’t exactly original now but, nonetheless, there are times when the style suits your design needs, especially when wireframing OSX/iPhone applications.

I’ve found a neat little method of creating the bevel effect in Fireworks which you can reuse quite easily:

  1. Select the object you want to apply the effect to. (Note it works best on darker objects).
  2. Apply a drop shadow filter to the object (Filters > Shadow and Glow > Drop Shadow).
  3. Set the Distance to 1, Opacity to 20%, Softness to 0, Angle to 270 and the Color as #FFFFFF.

That’s it! See the following example of how it looks.

OSX bevel effect in Fireworks

For added convenience, why not set this as a favourite style?

  1. Select the object you’ve just applied the filter to (it should be the only filter applied).
  2. Click the + button next to Filters.
  3. Select Options > Save As Style….
  4. Name the style, something like “OSX Bevel“.
  5. Now you can apply the bevelled effect to any object you select in Fireworks by clicking the + button and choosing “OSX Bevel“.

Hopefully some of the designers out there will find this little tip useful.

If you can think of a quicker or more convenient way of applying this effect in Fireworks or have an alternative approach for all the Photoshop users out there, leave a comment below.

Written by Si

May 5th, 2009 at 12:17 pm

Leave a Reply