Alpha Color - create free-shaped objects using graphics with transparent areas

Applies to:
Working with BrowserBob

BrowserBob allows you to define transparent areas for each graphical object you use. The transparent region of a graphic will not be visible, so you can see the underlying objects through the picture. Using this feature, graphics don't have to look square anymore - and you can design real free-shaped objects. There are no restrictions regarding the shape of your application or functional objects.

 

The Lara Croft browser for example uses a lot of transparent regions, making it a real nice free-shaped browser.

 

Usage:
If you want to use transparent areas in your graphics, you should already prepare it while designing them in your graphics editor. Future transparent areas should be designed in one single color only (monochromatic).

Use a single color only for transparency

Make sure you really use a single color only, not a set of similar colors, like some brush options of common graphics editors would provide them.

Also make sure that the color you use is not used in the part of the picture you want displayed later - if not they will be transparent as well. For this purpose you might want to use very strange, unusual colors.
 

 

Use Sharply separated colors and edges:
Please avoid any anti-aliasing on the borders of the part of your picture which should later be visible (no soft edges etc.).

The area which will be transparent later on, should be sharply separated from later visible parts of your graphic everywhere (create sharp edges, like shown in the example to the right).
:

 

 

Use Bitmap or Gif graphics for best accuracy
Graphics containing transparency should be saved in windows bitmap (BMP) or graphics interchange format (GIF). JPG's should not be used, as JPG compression does not generate areas with uniform colors (one single color) even if your picture has been created correctly before.

 

Define the transparent area in your project by selecting the intended invisible color.
After having added your graphics to BrowserBob via assigning them as a button or background graphic for example, you define the transparent area by selecting the color which should be defined as the transparent one - picture by picture. This is done by the function Alpha Color on the properties window.

The easiest way to choose the color is by grabbing it directly from the picture, using the Alpha color "pick" button. Click on this button first, then click into your picture (in the design area, not on the preview image) on that very color. The transparent color will be shown in the Alpha Color box on the properties window.

Alternatively you can click on the Alpha Color box to open a windows color dialog to choose the color from there.

 

 

Note: each graphic in BrowserBob can have transparent regions. As you define the transparent color picture by picture, you do not need to use the same color for every graphic - the transparency color could be different for each single picture you use.

 

Related topics:
Buttons as graphical elements

BrowserBob objects overview
Properties by object