Back to Graphics: Links and Examples

Background Graphics and Graphic Viewers: Info and examples

Check out the Saturn background graphic that my old, old web site.

September 6, 1996

Note: This background image of Saturn is in GIF 89a format, it is "transparent", and "non- interlaced". I revised this image because I had broken the two of Laurie McCanna's rules for background graphics as stated in her new book: "Creating Great Web Graphic". She states (on page 55) that "you emphatically don't want to use either of these gif options ("transparency" or "interlacing") on background tile. Interlacing the background tile will delay everything on the page from loading until the background image has finished loading. There is no reason to use transparency with a background image."

I conceded the first point and changed it from "interlaced" to "non-interlaced", but for this particular image, I think I needed to make the black "transparent". Read on.

Her rules only apply to background graphics, not to the rest.

An "interlaced" graphic loads quickly, but the resolution isn't very good until it is fully loaded. The reason for using interlaced images is that you want the graphics to start to load quickly on your web page. Now, most browsers do support "interlaced" graphics which give the appearance that they are loading a lot quicker than the "non-interlaced" graphics. If you are familiar with a graphic, though, you don't have to wait for it to fully load to click on it or on an area of it, therefore "interlaced" graphics are better for that reason.

A "non-interlaced" image won't display on the screen until it is fully loaded and, then it loads slowly from top to bottom, so your visitors may grow impatient and leave.

Click here to see a comparison of an interlaced vs. a non-interlaced GIF.

"Transparency" just means that you can select a color that you don't want to display. You won't want to pick a color that is really needed to display the image, e.g., don't make black the transparent color in, say a three color drawing (on white background) in which black is the color that outlined the objects in the image or is part of the text because you'll lose all the lines or text - instead, make white the transparent color. I'm sure that there are some exceptions to this, though: like this background graphic. There is probably a way to do it without breaking any of the rules, but I haven't learn it, yet. (August 1, 1995 note: Now that I received the Corel Draw! 6's "fix" (Revision B176) maybe I can just adjust the "brightness" and "contrast", instead of resorting to the transparency.)

Q. - Okay, how do I make images "transparent" and "interlaced" Using Corel's PHOTO-PAINT 6?

A. - I open the graphic in Photo-Paint and if it has more than 256 colors (or is greater than 8-bit), then it has to be converted to 256 colors (8-bit) in order to be saved in .GIF format. I select "Image", then "Convert to ...", and, finally "256 colors (8-bit)". To find out whether or not you need to do this conversion, click on "Image", "Info ..." or, alternately, clicking on the small icon at the top left corner of the image, then "Info ...". GIF can be up to 256 colors (or 8-bit or less). JPEG can be up to 16 million colors (it uses 24-bit lossy compression). TIFF is also 24-bit. Laurie McCanna recommends that you keep a 24-bit (e.g., TIFF) uncompressed copy of your image due to the fact that image information is lost in lossy compression image formats (e.g., GIF and JPEG).

Next, using the eyedropper, I select the color that I want to be transparent by clicking on it (and remembering what the index color is - it is displayed on the bottom status line or whatever it is called), then I click on "File", then, "Save As", then I select "GIF", and, I change the filename a little by adding a "t" to help me remember that it is transparent (e.g., "imaget.gif"). Next, I click on "Save" ... another box appears for me to select the format (89a or 87a, I select "89a"), then, I select "Interlaced" and "Transparent color", then, I select the background color that I want to make transparent by entering the index color, then, I clicked on "OK". That's it! You can't see the interlacing effect until the image is displayed in an HTML document (web page). If you close and reopen the graphic, in Photo-Paint, it will indicate that the image is now transparent.

Also, I have used the following programs to make GIFs transparent: Paint Shop Pro, click here for directions; VuePrint (4.7c Pro) (for directions, see below); and LView Pro. Laurie McCanna recommends using a shareware program, like LViewPro, if you want to save a file that has less than 256 colors. (p.102 of her book, see above).

To make a transparent GIF using VuePrint 4.7c Pro, start by opening the graphic, then clicking on "Options", then "GIF", then, finally, selecting "Interlaced" and "Transparent".

Apparently, you can also use GIF Construction Set for Windows, GiFTrans, and probably some other graphic programs for your transparency. See the "Transparent GIFs" links, below, for how to use other programs for making transparent GIFs. Also, the "Graphic viewer/programs" links, below.

Microsoft's HTML editor/personal server, Front Page 98, allows you to save images as "Transparent"and "Interlaced"while designing your web page.

For this Saturn background graphic, I made black the transparent color (remember this is breaking one of the rules). Why did I select black as the transparent color? Everything in the image was black except for Saturn and its moons, so black text wouldn't show up on it. I could have changed the text to white but, then it would not allow my visitors to be able to print out my we page. (Tip: A savvy web surfer would know to use the "cut & paste" feature to "cut" the text off a web page and, then "paste" it in their text editor/word processor.) Click here ("saturnt.gif") to see how this background graphic looked before the "black specks" were compensated for because they would have made it impossible to read the text on the web page.

I used VuePrint 4.7c Pro to increase the brightness and decrease the contrast in order to make the "black specks" blend into the background because I haven't discovered how to do this, yet, in Corel's Photo Paint (I did receive a "fix" for Corel Draw 6! today in the mail ... I'll see.).

August 1, 1996 note: Corel Draw! 6's "fix" (Revision B176) was the solution to my problem of not being able to adjust the brightness and contrast using Photo Paint, at least I think so. After opening your image, select "Effects", "Color Adjust" and, finally, "Brightness - Contrast - Intensity" where you can adjust each variable (0% to 100%). I'll get around to trying it on this background.

I opened the image ("saturnt.gif") with VuePrint 4.7c Pro, then clicked on "Image", then I clicked on "Brightness" about four times, then I clicked on "Less Contrast" about three times. I saved the file as "saturntb.gif" to remind be that the image is transparent ("t") and was being used as a background graphic ("b"). The background graphic ("saturntb.gif") on this web page is the result.

I have also used Paint Shop Pro (under "Colors", select "Adjust" and, then "Brightness/Contrast") and LView Pro.

See my Wonder Woman web page for an example of a graphic converted for use as a background graphic.

If you don't want to convert GIFs for your background graphics, see these links for some "ready-made".

Back to Top
Back to Graphics: Links and Examples

URL: http://www.PatMcClendon.com/background.html

This page was last updated on 05/01/01.

Copyright © 1995-2008 by "Pat," Patricia D. McClendon

Please report broken links or other problems. THANKS!

Join the mailing list Enter your name and email address: Name: Email:   Subscribe      Unsubscribe

Tell A Friend! Type In Your Name: Type In Your E-mail: Your Friend's E-mail: Your Comments: Receive copy:

PatMcClendon.com Search : Search Tools and Reference Material

Pat McClendon's Clinical Social Work has moved to: ClinicalSocialWork.com