Back to Learning Center
General Web Info
| Page 1 2 3 4 5
Basic Web Transparency

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 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...

 

Figure 3: The Eyedropper Tool

| Page 1 2 3 4 5