Support | Learning Center | Web Information

Basic Web Transparency (Page 1 - Page 2 - Page 3)

Matching Background Colors
If you have a more unusual HTML background color or solid color background graphic, and you don't know the exact RGB value of it, you should sample the image color with PI:

  • Preview the page in your web browser or HTML program so you can see the background.
  • Press the Print Screen button on your keyboard—this will capture everything on the screen to the clipboard.*
  • In PI, under the Edit menu, choose Paste/Paste As a New Image. This will create a new file, and you should see what was previously on your screen.
  • Once you have the image inside PI, select the Eyedropper Tool - it's the sixth tool down on the left taskbar, as shown in Figure 3: Your cursor has changed to a small eyedropper—click on part of your web background, and you'll see the color value displayed in Figure 4.

*NOTE: You can use a screen capture program, but the PRINT SCREEN function will work on any Windows 9x/2000-based system.

In Figure 4, Area 1 shows you the color you've selected. If this isn't the correct background color, keep clicking with the eyedropper tool until you get the color you need.

Area 2 shows you the exact RGB value of your background. This is a good number to have for reference. If you match the RGB value in your other graphics you'll have an easier time matching the rest of the site.

 

Figure 3: The
Eyedropper Tool


Figure 4: The exact RGB of your image

When creating new graphics, or modifying older ones, by filling the background with this specific color (Edit/Fill or Control+F) nearly all images will be effectively transparent because the background of the image will match the selected color.

You don't need to specify a transparent color during the export process with SmartSaver Pro. Using this method is great for photo galleries and other graphically-intense areas where doing an image by image transparency effect would be cumbersome and extremely time consuming. But when that doesn't quite cut it...

 

Basic Transparency
Background matching doesn't always cut it (for a variety of reasons), so you can use the built-in transparency tools of SS PRO to get real transparency effects.

A common user mistake is to neglect to select a proper background color before merging and exporting, which often gives results like Figure 6: the white pixels around the edges of the text and photo object are commonly called a "halo" or "ghosting" effect.

This comes from a single RGB value for white being made transparent, but the pixels close to the text and object are slightly off-white because they're part of the anti-alias effect of the text and object (the smoothing effect for edges).

Once your image is created and ready for export:

  • Choose Web/SmartSaver Pro
  • Once inside SS PR0, choose GIF as the image type and optimize by choosing the number of image colors. (As a quick rule of thumb, continue to drop the number of colors until you see a visual drop in quality, then bump it back up by 16-32 colors to restore image quality.

Click the above image to
see the enlarged version.

Figure 5: Our image on
a white background.

Click the above image to
see the enlarged version.

Figure 6: The GIF "halo" or
"ghosting" effect of the same
image on a red background.

(Page 1 - Page 2 - Page 3)

Back to General Web Info