Each state of every button is represented by a separate image. Each of these images is comprised of several layers. You may be familiar with this concept from other graphics software applications. If not, think of multiple layers of transparency film laid one on top of another. Each such layer contains a partially transparent portion of the image. Together, they form the final image of the button (in a particular state).

 

The layers are always overlayed in the same order (and that order is followed by the controls on the Properties Panel). We will list them in the order from bottommost to topmost, just as they are applied:

Global Background Color, Global Background Texture, Shape, Texture, Glyph, Shadow, Text, Molding.

 

Layers06

 

With the exception of the bottommost two layers (Global Background Color/Texture), each layer can be made as opaque or as transparent as you like, using the "Blend" trackbars in the relevant sections of the Properties panel. Blending controls the overall extent to which the layer contributes to the final image. This is in addition to the fact that a layer can have certain portions completely opaque, while its other portions may be partially or completely transparent. For example, in the Text layer, only the actual text is opaque (the rest of the area is fully transparent), and you can make even the text portion partially transparent using the "Text Blend" trackbar.

 

LayersBlending01

 

Not all layers have to be present in every image. Texture-based layers (Global Background Texture, Shape (when Custom), Texture, Glyph, Molding) won't make any contribution if the layer's texture is empty. Text layer can have no text if button's Caption is empty. Shadow can be enabled or disabled using the Shadow checkbox.

 

The Tips and Tricks topic offers some examples of creative uses of various layers.

 

Back to Basic Concepts...