CGI/Perl Guide | Learning Center | Forums | Advertise | Login
Site Search: in
Add ListingModify ListingTell A FriendLink to TPASubscribeNew ListingsCool ListingsTop RatedRandom Link
Newest Reviews
  • review
  • hagen software
  • NOT GPL!
  • Hagan Software
  • Wasted Time with ...
  • poor pre-sale sup...
  • no response
  • rating the offer
  • Good Stuff
  • Good idea but use...

    Perl Archive : TLC : Webmaster : Improve Your Image
    Guide Search entire directory 

    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, and'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.

    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 and "solid".

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

    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
    Lynda 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:


    About The Perl ArchiveLink Validation ProcessSearch Tips
    Web Applications & Managed Hosting Powered by Gossamer Threads
    Visit our Mailing List Archives