Date Published: 2000-05-01
by Jennifer Johnson
Professional looking graphics are a must for any business site, but what can you do if you were
born without a creative bone in your body?
Don't throw in the towel or spend money on an expensive designer just yet, there may be a glimmer
of hope for you after all. The image-editing/paint programs available today make it relatively easy for
even a "newbie" to create decent web graphics.
We're going to look at some tips for improving your graphics. The program I'll use for my examples
is Paint Shop Pro v5 by Jasc. The reason I chose this particular program is because it's relatively
inexpensive (under $100), I feel it's user-friendly, you can download a free evaluation copy from
http://www.jasc.com, and well...it's the program I
use to create all my web graphics.
It's beyond the scope of this article to give you step-by-step instructions on how to create
graphics; there are many tutorials available to do that (I'll list a few at the end of the article). What
I want to do here is give you a few tips on how to improve your images.
GIF v. JPEG - WHICH SHOULD YOU USE?
These are basically the graphics formats you can choose from when designing images for the web.
GIF (Pronounced jif I'm told - like "be back in a jiffy"; although don't ask someone else to
look at the new jiffy you made unless you want to be ridiculed whenever anyone has some spare
time.) is usually the best choice for logo/line art/icon/clipart-type images that have large, solid
areas of color. It only supports a maximum of 256 colors, but it has the advantage of supporting
transparency (version 89a) and it's the format used for many animations, such as animated banners.
The image file size is usually smaller as well, which is why virtually all of my images are saved
in GIF format.
So why would you have a need for JPEG (Pronounced j peg:-)? If you have a very detailed,
highly complex image with a lot of different colors, like a photograph, JPEG is probably the best
choice. Photographs saved in GIF format tend to look downright UGLY.
If you use a patterned background tile (which I don't recommend for business sites as a general rule), you
must make sure the tile is seamless.
"Seamless" simply means that the size and shape of each individual tile isn't readily visible when
you view the page. You don't want to be able to tell where one tile ends and another begins. In other
words, you don't want your background to look like your bathroom floor; the background needs to look smooth
To accomplish this, start with a relatively large image (I use around 500x500) and select a small
square - in the center of the image if possible - using the selection tool with anti-alias OFF. Then
choose "Selections" >> "Convert to Seamless Pattern". Your image should then
be usable as a seamless background tile. Try it on a testpage first to make sure, though. If the image
isn't seamless on your testpage, try selecting another area and following the above steps again.
Intricate patterns are much harder to make seamless than other images; it may take a few tries to
find the right "spot" to attempt to make the seamless tile from.
Borders are background tiles that have the pattern or color running down the left side of the screen
and a solid color (usually white) on the right side on which the text of the page is placed. I think
these are an excellent option for business sites. You have color without compromising readability.
When making your borders, make sure to make the image at least 1600 pixels wide. Don't worry,
the HTML will "chop it off" where it's supposed to, but you have to make the image that wide to begin
with so that it doesn't repeat on higher screen resolutions.
For example, if you make a border 700 pixels wide, it will display perfectly on 640x480, but on 800x600
and above the border will repeat again on the right hand side of the page as many times as it takes to
"fill up" the screen width.
Since you have to make the border so long, you need to make it small in terms of HEIGHT. I try to
go 30 pixels or less for the HEIGHT. That way, the image file size is not huge and the download time
is relatively quick (usually).
DROP SHADOW TIPS
Have you seen pages that have a colored background and drop shadowed text that has a little ring of
white around the edges of the shadow? That doesn't do much for the look of your page; the good news is
that it's a relatively easy fix.
The default color for your new image is probably white. What you need to do is change that color to
the predominant color in your background tile. You can do this by using the flood fill tool. After you
place your text on the new image and add the drop shadow, make the background color your transparent
color and save.
The file size we'll be discussing here is the actual storage space on disk required for a specific
file, not the HEIGHT and WIDTH of the file (although that does have something to do with the storage
space required as well).
Your images must be as small as possible file size-wise. You can reduce the size somewhat by reducing
the number of colors used, but if your file is still too bloated, try using a compression utility like
GifBot at NetMechanic; it's free.
- When placing text on an image, be sure "antialias" is selected. This will smooth out the text and
make it look less jagged.
- Always edit images in 16 million color (color depth) - even if you'll eventually reduce the color
depth to 256 colors or less - this will allow you to have a smooth image as well.
- Try to design using the "browser safe palette".
- Make images as small as possible (WxH and file size) without compromising image quality.
- Save your work frequently. In the event of a snafu, you can start from your most recent save and you
won't have to start over from scratch.
- PSP 5 has a neat little feature that you can access from "View" >> Image
Information; you're allowed to enter "Creator Information". This comes in handy if you want to remember
how you created a particular effect. Of course, I suppose anyone else who had PSP 5 could access that
information as well so don't put anything in there you don't want people to know!
- Remember, most images on the Web are protected by copyright - respect that. Just because you
can copy an image, doesn't mean you should; make sure you have permission from the
designer to use their work or be sure it's public domain before you decide to use it. I know of
what I speak here, I've been the victim of people using my work without permission. Designers work hard
on their graphics, don't take them without permission, please.
For more information, tips, and tutorials, visit these sites:
Paint Shop Pro Web Graphics
Web Graphics on a Budget
Weinman's Browser Safe Palette
Copyright © 1999-2000 Jennifer Johnson
Articles and resources to help you effectively promote your site. Find out how to get a free site review
when you become a newsletter subscriber. To subscribe, send any email to: