How do I work with transparent images?

SiteSpinner and Web Engine support transparency in a number of ways.


Importing:

If you drag a image file that contains transparency into SiteSpinner, the transparency will be maintained in the work window.

If you copy and paste (or select and drag) from an image editing program, the transparency will probably be lost. (because Windows sends images on the clipboard as DIBs or BMPs)

You can use the transparency mapping feature to make a color transparent after importing (see below).


In the Work Window:

You can adjust the transparency for the whole image. The will make the image appear to fade as more of the background shows through. To do this, select the image object then open the Shading Editor. Next, select either the 'Bright' or 'Contrast' button (in order to turn off the Transparency mapping button). Now, if you move the transparency (Trans.) slider to the right, the image will become more transparent. Press OK.

You can also use the 'Trans.' slider in the Quick Properties Editor's Shading tab, to adjust this.

To create transparency on a specific area of the image, based on the color in that area, you can use the Shading Editor's 'Transparency Mapping' option. For example, if you have a picture of an apple on a white cloth, you can map the color white as transparent so that only the apple will remain.

To map transparency: Select the image object then open the Shading Editor. Click on the Transparency mapping option (the colored push button to the right of the word 'Transparency Mapping') then select the color that you want to be transparent using the Red/Green/Blue sliders or the color picker (dropper icon). You can use the color picker and pick from the thumbnail image itself - just remember to hold still and release when you get to the color you want.

Use the transparency (Trans.) slider to adjust how much beyond the single color to go. That will expand or decrease the range of transparency so that more or less of the edges will be transparent. Press OK to save and close the Shading Editor.

IMPORTANT: Make sure the Quick Properties Editor is closed when transparency mapping. There is a bug in the current version (2.50f) and having it open when the image is selected removes the transparency mapping.


Exporting:

When you preview or publish to HTML, you have a few choices:

If 'Render Background' is ON, anything in the background will be drawn into the picture to simulate transparency.

If 'Render Background' is OFF, the background will be not be drawn into the picture. One of two things will happen instead:

If the format is one that supports transparency (PNG8 or GIF) then the background will be transparent.

If the format does not support transparency (PNG, JPG or BMP) then the background will be filled with the page's background color.


NOTE: PNG-8 and GIF are the only formats that can use transparency and will work on all HTML browsers. Regular PNG does support transparency but since not all browsers respect it, we do not use it that way.

PNG8 and GIF are 8bpp formats. That means they can only have a maximum of 256 colors so you may see some loss of color. If you import a full color image and then change it to GIF or PNG-8, SiteSpinner will choose the best 256 colors. That will minimize the loss of color.

If you are publishing to SVG, then full color PNG will also support transparency.