Samuel Wan : News, Information and Resources

Emboss, bevel, pillow emboss

This is for all the designers who love sharp pxiel-style bevels but spend way too much time tweaking rectangular fills in Flash. I'm going to post a new set of small but helpful components for beveling, probably by the end of the week. But first, here's a brief explanation by Ric Ewing about the difference between emboss, bevel, and pillow emboss:

____________Explanation by Ric Ewing:__________
All of these effects visually trick the eye into seeing a surface as being raised or lowered by adding shading. They differ in where that shading is applied and whether the effect seems to raise or lower the area effected.

Bevel: This comes in two flavors, inner and outer. This differs from emboss in that the effect is restricted to either the inner area of the shape being effected or outside the area, depending on whether you've chosen inner or outer bevel. It is distinguished by having a 'hard edge' where the effect meets the boundary of the area effected. Beveling can visually either raise or lower an area.

Emboss: This effect straddles the boundary of the area effected making a smooth visual surface that has a raised or lowered area in it with no hard edge.

Pillow Emboss: This effect makes the boundary of the area effected appear to be raised or lowered while leaving the inner and outer areas at the same visual height. You can simulate this effect by having an inner bevel with the light source at n degrees, and an outer bevel at n+180 degrees. This will make more sense if you look at the JPG.

Embed: This is not a 'standard' effect. Depending on which software package you use you can get different results. The most common version of this effect is something like a drop shadow, but with the shaded area being restricted to the inside area of the shape. This visually looks like a hole has been cut in the outer surface and the inner surface is revealed behind it. Photoshop calls this effect Inner Shadow.

Hope this helps.

-Ric