Thomas Homepage - Homepage Information

[ Index Chapter 4 ]

Back to the table of contents
4. Graphics
4.1 An Introduction to Graphics
4.2 Backgrounds
4.3 Transparent GIF's
4.4 Animated GIF's
4.5 The Image Problem

[ An Introduction to Graphics ]

No matter how impressive your message, people respond to images. The reader's eye is naturally drawn to a picture before text and the choice and quality of the images you use will determine whether someone will take the time to read your web page or pass it by. The most browsers support inline images in GIF oder JPEG format. An inline image is an image that is displayed without the help of an external helper application. There is no limit to the number of inline images you can use in a document but each image takes time to process and slows down the inital display of a document. For this reason you should carefully select your images and the number of images in each document. In addition not everyone can view or wanted to view inline images. Some people accessing your page using a text based browser other people, especially those with a slow modem connection, turn off image loading. To clue them in to what they can's see, you should define some alternate text to show in case the browser cannot display your image.

Most cliparts and photos don't come in a format ready for Internet publishing. Luckily, converting an image into the GIF or JPEG format is as easy as saving a file. Most graphic programs let you use a "Save as" or "Export" option to save files in GIF and JPEG formats. Both formats, GIF and JPEG are compressed. JPEG is the standard of choice because of its high resolution and high compression. Many graphic editors, such as Corel Photopaint, let you choose a quality setting for the compression. In addition JPEG supports 24-bit color, GIF only 256 colors. Unlike GIF, JPEG unfortunately doesn't support animated, transparent or interlaced images. There are two different types of GIF file formats: GIF89a and GIF87a. GIF89a includes a transparency index that causes the background color of the display to remain unchanged for the color indexed as transparent. Interlaced images means the image can be progressively displayed. When an interlaced file is downloaded, it appears with a venetian blind effect. Interlaced images let the user begin viewing the rest of the document while the image is downloading.

Adding images to your web pages can give them a polished, professional look. One of the biggest hurdle in creating you own web page, however, is acquiring and editing images to add to your page. In order to add an inline image, you will need to either create an image, wich requires a bitmap editing program, such as Corel Photopaint; to have access to an existing image; or use a scanner to acquire an image.

Several sites on the web included free images you can use to create your homepage. You simply download the files to your system. Be careful of what you use in you documents. Many files are available that break copyright restrictions; just because they are available at a site doesn't mean you have the legal right to publish them in your document. You will find some URL's for image collections in my HTML link-section link library.

For most of the graphics I use Corel Draw 5.0, Corel Photopaint 5.0 and Adobe Photoshop 3.05. In addition I use a really good plug-in for Photoshop and Photopaint called "Kai's Power Tools2.0". With this plug-in I created the rainbow colored bar and most of the headlines on my pages. Kai's Power Tools is the best plug-in I know and contains more than 33 really cool filters.

For the raytraced graphics I used Asymetrix 3D/FX. With this program you can create stunning 3D effects in just minutes. In addition I use Ray Dream Designer and Macromedia Extreme 3D. I used Asymetrix 3D/FX for the gold accents on my lettering on the first page. But you can use every other raytrace program also, like Corel Draw 6.0 (Ray 3D), Macromedia Extreme 3D, and so on.

Most of the backgrounds, buttons and divider bars are created with Corel Photopaint 5.0 and Kai's Power Tools 2.0.

[ Backgrounds ]

With the introduction of Netscape Navigator 1.1, Netscape has included extensions that allow you to control the display of the background and foreground colors of the browser window. You can specify the color of the background or you can tile an image in the background, similar to using an image to Windows Wallpaper feature that you can set using the "Desktop" icon. In HTML the "Background" attribute lets you specify an URL pointing to an image that is tiled to create a background of the Netscape window.

I use Corel Photopaint 5.0, Adobe Photoshop 3.0 and Kai's Power Tools2.0 to create all my background images. I like it to design and build textures. The result is: hundreds of graphics on my harddisk. So I decide to offer some of them in my graphics download area on my homepage. All graphics on this download page are homemade and not available on other pages. You can use the graphics as web page background, for 3D modelling, for wallpaper, or anything else you want. This page will be updated at least once a month. If you like this type of texture but don't care for any of the samples, please drop me a short note and ask for your special background. If I find the time I'll be happy to make a special version to suit your needs. In addition there are several sites on the web where you can download thousands of free background images. You will find some URL's for background collections in my HTML link-section in my link library.

[ Transparent GIF's ]

Many people ask me how to make transparent and interlaced GIF's. As mention above there are two different types of GIF file formats: GIF89a and GIF87a. GIF89a includes a transparency index that causes the background color of the display to remain unchanged for the color indexed as transparent. If the web browser supports transparency, that color will be replaced by the browser's background color, whatever it may be. Interlaced images means the image can be progressively displayed. When an interlaced file is downloaded, it appears with a venetian blind effect. Interlaced images appears first with poor resolution and then improve in resolution until the entire image has arrived, as opposed to arriving linearly from the top row to the bottom row. This is great to get a quick idea of what the entire image will look like while the GIF image is downloading.

Many new grapic editors, such as Adobe Photoshop 3.05, Fractal Design Painter 4.0, Corel Photopaint 6.0, Corel Xara, and LView Pro, included the capability to save a GIF file as "transparent" or "interlaced".
The best shareware program I know to create transparent GIF's is "LView Pro". LView is an easy to use application for creating transparent GIF files and much more. The program is available in a 16-bit and 32-bit version at countless sites in the Internet. Click here to go to the LView homepage where you can download the shareware version of this really cool graphic editor. One of the best tutorials about creating transparent GIF images using LView Pro is available at Randy's Icon and Image Bazaar.

[ Animated GIF's ]

Many people ask me "How can I create an animated image like your @ at the front page?"

The best program I know for creating animated GIF's is the "GIF Construction Set" from Alchemy Mindworks. The GIF Construction Set for Windows is an easy to use application for creating transparent GIF files, looping animations GIF files for Netscape-enhanced web pages, animated text banners and much more. The program is available in both 16- and 32-bit versions. Click here to go to the Alchemy Mindworks homepage where you can download the shareware version of the GIF Construction Set.

[ The Image Problem ]

In the last few months I visited a lot of CompuServe Homepage to take a look at the creativity of other people. I saw a great number of really cool sites but I can't see a picture on the homepage. What's the problem?

Maybe you have the same problem, if you are working with the Homepage Wizard. If you decide to put an inline image on your page the Wizard creates a line with HTML code like for example the following:

I and other people can't see the image on your page because the browser, such as Netscape, wants to load the picture from the subdirectory "c:\cserve\hpwiz\image\" at the harddisk. If you enter your site you can see the pictures in Netscape, because your browser load the pictures from your PC.

All you have to do is change all <img src> -Lines like for example the following:

to the following image tag

Use a TextEditor, such as "Write" or "Word Pad", to delete the part "file:///C|/CSERVE/HPWIZ/IMAGE/" in each line. Otherwise Netscape loads the pictures from your harddisk. The part "file" points to your harddisk and not to the current URL with your homepage files and images at the CompuServe-Server. If you're going to use a separate editor to fix this problem, don't ever go back to the Homepage Wizard. To publish your site, start up the separate program "Publishing Wizard". However, keep in mind that whenever you call that page back into the Wizard to modify it, you will lose your modifications.

Thomas Kuhn 100046.1437@compuserve.com
This publication may not be duplicated in any way without the expressed written consent of the publisher.
No part of this publication may be used in any form or by any means, except by prior written permission of the publisher. Unauthorized reproduction and copying of this page is prohibited by law.
Copyright © 1996 - 1997 by Thomas Kuhn. All rights reserved.