Apply to

1

As detailed in the Properties Hierarchy topic, this specifies the scope to which almost all of the remaining controls on the panel apply (the only exception being the "Downable (Sticky)" checkbox).

Downable (Sticky)

2

Enable this checkbox to make buttons in the Preview panel downable, i.e., the kind that stays depressed when clicked. See the Preview and Button States topics for more info.

Clear

3

Displays a list of attribute groups that you can clear (return to neutral/default) for the selected Apply to scope. See the Properties Hierarchy topic.

Button Size

4

Unlike the remaining properties, button size can only be set for All buttons or for a Button in all states since a button must remain of the same size in all its states.

In Automatic mode, the button is sized automatically, according to the size of its Caption. The latter depends on the text of the Caption and on its Font. The Caption is centered, and the specified H-Margin number of pixels is added on the left and on the right of it. Similarly, V-Margin pixels are added above and below the text.

In Manual mode, you can specify the button size to be whatever you want regardless of the text it may contain, which will no longer be centered (but you can move it wherever you want using the Text X/Y Offset values).

Background / Shape

5

This section of the interface deals with perhaps the most important aspect of the button: its shape. Before we delve into specifics, it is worth mentioning that shapes effectively "cut-out" the button: transparent areas of the shape will not be filled by the applied Texture or Molding (if any). So, for example, the corners of a rounded rectangle shape will remain transparent in the final image. This rule applies to all shapes that can have transparent areas.

There are two important groups of shapes: the simple "classic" shapes (the first 3 choices) and Custom shapes.

Classic shapes: Rectangle, Rounded rectangle, Ellipsis / circle. All of these shapes share a few common properties. Back Color button controls the background color of the shape. Border Color controls that of the border whose thickness is set by the Border Width box. Setting the latter to zero makes the border disappear.

Rounded rectangles have a few additional properties that control the appearance of their corners. The X Roundness trackbar makes the corners rounder or sharper. You can also make the corners asymmetrically-round (which can produce buttons that look a bit like a lens) by enabling the Independent Y Roundness checkbox and using the Y Roundness trackbar.

Custom shapes. You can load any image you like (using the Load Shape button) and use it as the button's shape. The image will be scaled to fully cover the button. Any transparent areas in the original image will remain transparent, which is a great way to produce buttons with unusual shapes. If the shape image is textured, the texture will be seen on the button, so great-looking buttons can be produced by combining just a suitably textured shape with an appropriate Caption (even without using the Texture or Molding layers). Of course you can use them all if you like.

You can find a few shape images in the Samples\Buttons subfolder under the folder where you installed Button Workshop (usually C:\Program Files\Button Workshop\). See the Internet Resources topic for a few sources of other button shapes.

Button Offsets. The Button X/Y Offset values let you adjust the button's position at will. This only applies to the Button in all states scope. The adjustments are relative to where the button would be normally positioned, which depends on the selected Layout and the sizes of the button's preceding neighbors. Note that specifying any non-zero button offsets will preclude you from producing a pure HTML output file: the file produced will be HTML with CSS used for absolute button positioning, which should present no problems for modern Internet browsers.

Texture and Molding

6 & 7

The Texture and Molding groups of attributes are essentially identical, so we will deal with both together, referring to the Texture group for the sake of brevity. The only difference is the order of the corresponding layers, as explained in the Layers topic (Molding is the topmost layer).

Load the image of your choice using the Open button. A small preview of the loaded texture will be shown to the left of it.

Enable the Transparent checkbox to use transparency (if any) of the loaded texture. GIF and PNG images support transparency natively, so portions of images in these formats may be transparent. For GIF images, pixels that comprise the image can be either fully-opaque or fully-transparent. For PNG images, pixels can be also partially transparent. BMP images do not support transparency natively, but the common method of making them transparent is to consider all areas that have the same color as the bottom/left pixel to be transparent. JPEG images don't support transparency at all. The subject of transparency is also discussed in the Output topic. Don't forget that you can adjust the transparency of the entire image (regardless of its format and independently of the Transparent checkbox) using the Blend trackbar discussed at the beginning of this topic.

Align. This radio button group lets you control the alignment of the texture within the button.

Stretch will expand or contract the texture as needed to cover the button. If you enable the Extend mode, the texture will be "stretched", but in a rather unusual way. It will be cut-up in 4 "corners" and these texture portions will be placed in the corners of the button with no scaling. If there remains any unfilled portion of the button, it will be filled by repeating the middle portion of the texture. This mode is useful for textures that have something fancy in the corners but are simply repeated or empty along the edges. Think, for example, of a picture frame which may have some "designer" corners but which has simple "flat" edges. Such a texture would be a good candidate for the Extend mode which would better preserve the corners (since it does not apply scaling to them). The Extend section of the Tips and Tricks topic offers an example.

Tile mode will repeat the (unscaled) texture as many times as necessary to cover the button. Enabling the Mirror mode makes every other repeated column/row mirrored, so every other image is flipped horizontally and/or vertically. A very special benefit of the Mirror mode is that many textures that are not seamlessly-repetitive by themselves become seamless since you will no longer be "stitching" together the opposite edges of the texture, but always stitching the same edge. Try it, you will quickly see what textures benefit from being Mirrored. The Mirror section of the Tips and Tricks topic offers an example.

Center mode will simply center the (unscaled) texture within the button. Very simple.

Offsets. Texture X/Y Offset lets you adjust the position of the texture relative to what it would be normally. This applies to only Tile and Center modes.

Glyph

8

The Glyph layer is intended for small glyphs or icons that you may want to place on your buttons. Because of this intended use, the fairly self-explanatory Glyph Position differs from Align of otherwise similar Texture and Molding layers. Basically, glyphs can be positioned wherever you want (adjusting position using Glyph X/Y Offsets if necessary) but cannot be stretched or tiled. In all other respects, the Glyph layer resembles Texture and Molding, see above. You are of course not limited to using the Glyph layer only for small icons, so you can load a texture into this layer if this helps you achieve the effect you want.

Font

9

The Font group controls the attributes pertaining to Caption Text and Shadow. The Font button lets you select the desired font using the standard Windows dialog. Note that you can select font colors other than the basic 16 using the More Colors button in that dialog. You are reminded of the selected font above the Font button.

The Text X/Y Offset values let you adjust the Caption's position relative to what it would be normally (centered in Automatic sizing mode, top/left otherwise).

Enabling the Antialiased checkbox will make the text look smoother by eliminating the jagged edges of the characters.

Enabling the Shadow checkbox does what you'd expect it to do: enables the shadow behind the text. You can select Shadow Color by clicking that button. The shadow can be positioned relative to the text using the Shadow X/Y Offset. Finally, the shadow can be made blurry using the Shadow Blur trackbar.