Tips on Making Really Great Graphics

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

1. Save new graphics (those you've just scanned in or downloaded from your digital camera) as .tif files to store them in the best possible condition for later use. Then when you prepare them for use on a webpage, convert them to .gif files if you intend to make the background transparent (invisible) or if they contain text or large plain areas that would be blurred as .jpg files. Otherwise, convert them to .jpg files, which utilize the maximum amount of colors while condensing them for faster loading. Note that .jpg files deteriorate every time they are opened in a graphics program and re-saved. The deterioration especially shows up in small, plain text and areas of flat color.

2. When creating shadows, first determine the color that will serve as the background of the page where the image will be used. Take note of the RGB numbers of this background color, then use those numbers to create the same color for the background of the image before adding the shadows. Otherwise, the shadow will contain a color that does not blend in with the background of the page.

Which looks better?

3. When making a single-picture (not tiled) background graphic, make sure that the image will cover the full width of even the widest screen. The smallest screen is 640 pixels wide (although WebTV, which uses television screens, are narrower, about 550 pixels wide) and the largest is 1600 pixels wide. A good rule of thumb is to make your background image 1200 pixels wide for the most commonly used screen resolutions.

4. Use care when allowing text to pop up when a visitor places his mouse over a graphic, which comes from the HTML code alt="text" in the <image> tag. If the image fails to show up on the webpage, this can be used to identify what's supposed to be there, like so:
IMG SRC="image.gif" BORDER="0" WIDTH="80" HEIGHT="90" ALT="Click here to go to the Table of Contents">
If you're using website design program for inserting your graphics, it might automatically include the file name of the image as the ALT. This should be deleted so the viewer doesn't see distracting nonsense-to-him pop-up text. Use the ALT tag to identify the picture or to give the viewer instructions on how to use the image (eg., "click here:).  

5. There are many websites that offer free graphics for you to use on your site. When you find an image you want, place your cursor over the picture, right-click the mouse, and in the menu click on "Save Picture As..." That will download the image file into your computer. When you insert it into your webpage, the HTML tag will look something like <img src="graphic.gif">. Do not use the image by linking your webpage to the original image on the other person's site. Some people make the mistae of typing the HTML tag as a link:
<a href="">
which means that their page retrieves its graphics from the directory of other websites, and that greatly slows the downloading of the page.



When shrinking the size of an image, do it in your graphics program, not in your website design software. Always increase the "color depth" to the highest amount (16 million colors), and resize it. Next, sharpen the image, and this will give you a look that's nearly as good as the original.

Avoid increasing the size of an image through your graphics program. You might not be able to restore sharpness to a high enough quality. Instead, increase the size through your scanner's program when first scanning it in.

Background colors, text colors and image colors should not clash. Nor should they cause eye-strain or headaches!

Neon backgrounds are hard to look at.
Text colors should not blend into backgrounds, but should contrast enough to stand out.
Red text makes some monitors and all TV screens go bonkers.

For a tutorial on how to use Paint Shop Pro, see From the Heart Graphics


Return to Directory of Tutorials or GNWDA home page