Once you are satisfied with all aspects of the set of buttons you have created, you can produce some output. Each button is represented by 8 separate images - one for each state. You may not need all of them for all of your creative tasks, so you can simply discard the ones you don't need. The global background is output as a separate image file. In addition to the above, you get an HTML file that implements the button arrangement (usually, a toolbar or menu) that you created. Button layout is maintained using either HTML tables or CSS with absolute positioning. Dynamic multi-state effects (rollover/mouseover and similar) are implemented via JavaScript. A further discussion is presented in the HTML Output Integration topic. All of the above is controlled in the Output dialog.

 

ButtonWorkshopOutput01

 

Graphic Format group lets you select the desired format for the produced images.

 

BMP is standard Windows Bitmap format. You have a choice of paletted 8-bit bitmaps or true-color 24-bit ones. 8-bit color depth means the image will be limited to 256 distinct colors. 24-bit images can have over 16 million colors. Button Workshop makes every attempt to maintain the best possible image quality when saving images to 8-bit formats. For some images, 8-bit output may be indistinguishable from 24-bit. For others, especially those using colorful textures, you may notice some degradation in 8-bit mode. 24-bit is obviously a "safe bet", but images may be a bit larger. Since results will vary with the contents of the images you work with, experiment a little to see what works best for your situation.

 

PNG stands for Portable Network Graphics. You have a choice of 8-bit or 24-bit color depth (see above). You may save Transparent PNG images by enabling thus named checkbox. Any (partially) transparent areas of the button image will be saved as such to the PNG file. Otherwise, the image will be saved just as you see it on your screen, with no transparency. Please note that Microsoft Internet Explorer versions below 7.0 do not support PNG transparency, at least not directly. You can search for workarounds on the Internet using such keywords as: PNG, Transparency, AlphaImageLoader.

You can enable the Interlaced checkbox to save PNG images specifically for the Web: browsers may present the user with a quick rough preview of such images while loading the remainder of the image. Once the image is loaded, the end result is exactly the same.

 

GIF is CompuServe's Graphics Interchange Format. It is limited to 8-bit color depth, so you may find it unsuitable for very colorful buttons. GIF images can be Transparent, but a pixel of a GIF image can only be either fully-transparent or fully-opaque (unlike PNG that supports partial transparency with 256 levels), which may result in jagged edges. The operation of the Interlaced checkbox is similar to PNG as described above. The only advantage of GIF is that it is a very old and widely supported format. Unless you have compelling reasons to use GIF, you may want to consider one of the other formats, except for simpler project with little or no transparency and no need for true-color.

 

JPEG stands for Joint Photographic Experts Group. JPEG images are always 24-bit (true-color). As for BMP images, JPEG does not have a concept of transparency. JPEG Quality is inversely-proportional to compression level, which is discussed below. Progressive JPEG images have the same purpose as Interlaced BMPs described earlier. JPEGs simply use a different approach to achieve much the same result, hence the different name for this feature. JPEG format is very broadly supported and offers full-color, but it suffers from lack of support for transparency and may introduce compression artifacts at lower Quality settings, so you may find it suitable for some of your projects but not others.

 

 

Compression. PNG, GIF and JPEG images will be compressed. Depending on the image and JPEG compression settings (Quality value), one format or the other may produce smallest images. Of the three formats, JPEG compression is lossy which essentially means that the image is "simplified" to achieve better compression. This may result in slight loss of quality due to the appearance of what is known as JPEG artifacts. These may be more or less noticeable depending on the contents of the image being compressed and on the Quality setting. Higher values produce less artifacts but result in lower compression - and vice versa.

 

 

If producing buttons for Web pages, make sure your target audience uses browsers that support the image format your are choosing. You should probably do your own research, but at the time of this writing: JPEG and GIF are supported by all browsers on all platforms, PNG is likely to be supported by the majority of browsers on most platforms, and BMP may be supported by some but not others.

 

 

Save global background in each button does precisely what it says, but some explanations are in order.

When enabled, the portions of the global background (as specified in the Layout dialog) that were showing through partially or completely transparent areas of the button are saved as part of the button image. In other words, if you were seeing some background "bleeding through" the button in the Preview, that's exactly what is going to be saved. Since button's transparent areas, if any, will be filled with the global background, the Transparent checkbox has no effect for PNG and GIF images that will be saved fully-opaque. For image formats that don't support transparency (BMP, JPEG) or if disabling Transparent feature for PNG or GIF, you would probably want to have this checkbox enabled so that the background gets saved with each button.

When disabled, buttons will be saved without the global background portions. This is suitable for PNG (and possibly GIF) images that support transparency. It can be useful if you wish to change the global background at a later time without re-producing the buttons.

If in doubt, leave this checkbox enabled.

 

 

Save buttons states using group lets you select how button state files will be named. Names setting will use state names, and Numbers will use - you guessed it - numbers. There's no difference in output otherwise.

 

Output Format allows you to select how the produced HTML file will be positioning buttons.

The HTML setting will place buttons in cells of tables. This positioning method cannot be used under any of the following circumstances: any button in the project has non-zero Button X/Y Offset value(s) and thus requires absolute positioning, or in Layout, any of the Buttons Position values are negative (Margins or Distance between buttons). In which case the above option will be disabled and you will be left with the alternative:

HTML with CSS will use absolute positioning to arrange buttons the way you specified. This option can be used under all circumstances.

Both settings produce HTML that should be compatible with all modern browsers, so if you are given a choice, it is entirely up to your taste.

 

Output Folder lets you specify where the produced files will be created. You can pick one of the antecedent choices, if any, from the combo box - or browse to a folder using the familiar Windows dialog. Note that under Windows 2000 and later you can type or paste a full path in the edit box in the Select Output Folder dialog. We recommend that you set output folder to an empty folder on your hard disk (but you are free to use any writeable location you want).

 

Filename Prefix is an optional string that will be prepended to all produced file names. Since whatever you type here will form part of filenames, the usual restrictions apply: use alphanumeric characters or underscore only, start with an alphanumeric character, no spaces allowed. Other than that, you can type anything that will help you identify the produced files as a group.

 

 

A final note related to produced output images. The only limitation of the trial version of the application is that saved images receive a "Demo" watermark written over them. It is removed in the registered version of the program.