GIFS and JPEGS and PNGS, oh my. (Images for Your Site.)

You will probably want to add some kind of graphics to your web site. The HTML requirements aren't hard:

     <img src="pretty.gif">

That's all it takes to display the graphic. There are more options that you can give to the img src statement to further control how the image is displayed--check one of your HTML reference guides.

Images displayed on a web page should be in one of the two formats that the majority of browsers work with: GIF or JPEG. You use JPEG when the image is a photograph or something similar, like an image of a painting. You use GIF when the image is line art--when it uses a limited palette of colors.

Think long and hard before you consider a format other then these two. The PNG format, for example, is technically superior to GIF or JPEG, but requires that the person viewing the web site to download and install a browser plugin. Requiring people to install any plugins before they can view your site is not how to win friends and influence people.

Clip Art

You don't have to get your hands dirty actually creating these images. There are numerous sources of "clip art." Currently, you can choose from a lot of commercial packages that contain upwards of 100,000 separate images per package for about $69.95. Granted, they aren't all gems, but it is a way to come up with art in a hurry.

Clip art is one thing that you probably should get the old fashioned way--by actually buying a physical package that contains CD-ROMs with the actual images along with a book that show small thumbnail examples of all the images. Choosing images by leafing through a book is a whole lot better than trying to do it by using any computer-based image viewer. Trust me on this.

A possible exception to the "only select from a book" rule is if the image library is somehow catagorized by keyword so that you can select images by concept, i.e., for "Christmas" images, etc. The downside to this idea is that the scheme rapidly runs out of steam when you try searching for, say, "um, something reminiscent of Edward Gorey, but a little lighter in mood." You will start wishing for the thumbnail book real quick.

One thing to watch out for if you go the clip art route is to make sure that the package has a license that allows you to actually use the images on a web site. Some of the packages don't--they give you the images, but prohibit you from actually using them in public.

Otherwise, the images may already be in a suitable format (GIF or JPEG) such that you can just use them. If they aren't, then it isn't a big deal to wrangle them so that they are.

You should also know that clip art is priced in two distinct catagories: consumer and professional grade. The above-mentioned 100,000 image packages are consumer level and are available at any store that sells consumer oriented software.

The other category of clip art is the professional level. That clip art is targeted towards professional designers, and is priced accordingly. At this level, you will typically see 100 images for $100. More expensive, but generally worth it, because it is higher quality, maybe even trendy, and more exclusive, making it a lot less likely that somebody else will use the same images as you do.

Also note that the professional designers use clip art just like you do, except that they don't buy it at Walmart, so nobody can see them doing it.

Sources to buy clip art:

 

I just want to tweak up some pictures a little bit, nothing too complicated

The minimum requirements are that it be able to Save/As in the GIF and JPEG formats. And to be able to load these formats, along with other common, non web formats, like .BMP and .PCX so that you can convert any graphics that you have in these other formats into one of the approved formats.

You must be able to edit and adjust the palette of colors. (This is a list of what colors are used in the image.)

Colors are specified using RGB notation. This is based on the way that the video monitor displays colors. Nothing on at all is 0 (black), all the way on is 255 (full color). There are three colors, Red, Green and Blue.

0,0,0 would be black. 255,0,0 would be bright red. 255,255,255 would be white. There are over 16 million possible variations of colors. (255x255x255).

Main headache is that you are supposed to specify the colors in HTML in hexidecimal notation (Explanation):

000000 = black, ff0000 = red, ffffff = white.

 

Example: to specify a light yellow background color:

<body bgcolor="ffffcc">

You also want to do some basic photograph corrections, like adjusting brightness, contrast, correcting "red eye," and the like.

I've heard that Adobe Photo Deluxe and Kai's Photo Soap are two fine programs, with the nod probably going to Photo Deluxe, for its user interface. They both are oriented towards correcting photographs, rather than towards creating original art. Also, as a consequence of their consumer orientation, they de-emphasize, or eliminate a lot of powerful techniques.

But they might do just fine for you.

However, I find that the $99 JASC Paint Shop Pro program to be one sharp tool.

 

I'm a real artist -- what programs do I need?

[Right about here is where I probably should discuss the multitude of worthy shareware programs, or talk about extracting the maximum value that you can from whatever free software that you have laying around your computer. But I'm not, because I've found that editing images is such a karma intensive task that I'm not inclined to encourage you to burn away any of yours. So, back to choosing the sharpest tool for this....]

Adobe PhotoShop. That is what all the professional graphic artists use. This would be a real easy answer except for one small problem.

Cost.

The list price for PhotoShop is $895. The cheapest that you can usually get it for is $500. You can get it bundled with the ($300) MicroTek E6 scanner for $550. Go figure.

AND, there are other, similarily priced, Adobe programs that you will find that you need if you get serious.

There are alternatives. For starters, JASC publishes Paint Shop Pro, which is a great graphics program. Very fast and handy. It may be all that you need to create web graphics. $99, complete. You can download a fully functional 30 day trial version. Works great with PhotoShop plugins.

(PhotoShop plugins (which are different than browser plugins, but, same idea) are programs that are designed to add features to the basic PhotoShop program. Adobe has apparently published the programming interface such that other, non-Adobe programs can be designed to also use these third party plugin programs. This is a good thing.)

If you still want the power of the Adobe line, but are a little bit strapped for cash, then consider the Corel Draw Suite. It still sells for the non-trivial price of $550, or so, but Corel throws in a lot of stuff. The most important is that the Corel Suite contains three major programs: Corel Draw (a vector art program), Corel Photo-Paint (a raster image program that is (arguably) better and more powerful than PhotoShop), and Corel Dream, (A 3-D rendering program.) Along with a host of assorted utility programs and a generous collection of high-quality BitStream fonts and about 10,000 clipart images.

So, why would you even consider Adobe?

Well, that is what all the graphic professionals use. If you plan on working with them, then you had better speak PhotoShop. Also, most the graphics arts "tips and tricks" articles are geared to PhotoShop. And that it is a fine, professional level tool that thousands of graphic artists have used to create the images that you see many times a day. Other than that....

Hey, hold on there. What were you trying to sneak in back there talking about that raster and vector stuff?

Well, you probably should know that computer images are implemented in two basic ways:

  • Raster (bitmap) images are literal representations of the dots that you see on the screen. When you edit a raster image, you are dealing with dots (known as pixels, but the same thing.)

  • Vector images are more indirect. The implementation focuses on storing and manipulating mathematical formulas that will later be evaluated in order to generate the image. The advantage to this is that it makes the image resizable without distortion. It is real easy for the program to change the size of the image without getting all the horrible jaggies that you get when you resize a bitmap image. (No, you don't have to be a mathmatician--you still edit the image directly on the screen. You never see the formulas, but you do get real acquainted with nodes and Bezier curves and a lot of other fun stuff.)

    Vector images are more flexible, but have several disadvantages: 1., it is a more convoluted process to create and edit them, and 2., browsers don't support vector images without having to install some plugin. Case closed then?

    Not quite. Even though you can't (or shouldn't) use vector images directly on the web, it is real handy to maintain your master artwork in a vector format, and then generate out bitmap images (i.e., GIF) in whatever sizes you want that you then can put right on the web.

When you use a scanner to scan in an image, you will end up with a bitmap image.

PhotoShop, Corel PhotoPaint, JASC Paint Shop Pro, along with most inexpensive photo-type editing programs, are bitmap editors. Adobe Illustrator ($895) and Corel Draw are vector editors. Adobe Sreamline ($199) can be used to convert existing bitmap images to a vector format. (The Corel Draw Suite includes a similar conversion program as part of the suite.)

You can get a lot of milage out of Paint Shop Pro.

Forgot to mention that the above advice also applies if you plan on doing any non-web artwork, like designing an invitation for your child's birthday party, or preparing an advertisement to run in Time magazine. Same principles apply, regardless.

Same principles do apply, but there are special considerations if you plan on having your artwork printed commercially. Best advice, is that you should have a talk with your printer before you do a lot of work.

Sources

Most of the above programs are available for both IBM PC and for the Mac.

 

What You Gotta Know

Uh...how to be an artist. I'm going to just take a pass on defining that right here, and skip on to the next subject.

Well, you need to use some design sense, even if you don't classify yourself as an artist. The best way to fake design sense is to look around the web a bit and note what works, and what doesn't work. Yes, I know that this seems like obvious advice, but examine the evidence.

This is the semi-technical stuff that you have to know about how graphics are implemented on the web. I am assuming that you already have a suitable graphics editing program and are at least partially familiar with it.

(PC users can download Paint Shop Pro to start with. Or you may already have a suitible program that was supplied with something like a scanner. Most graphics program will do to start, EXCEPT for the PaintBrush program that is installed with Windows, because it can't save images in GIF or JPEG format. Sucky.)

All images must be either GIF or JPEG. Use the JPEG format when the image is a photograph, painting, or something like that. Use GIF when the image is line art (e.g., like a cartoon) that can be represented in a limited number of colors. The GIF format is limited to 256 colors.

All graphic images are rectangular in shape. The GIF format allows you to display an irregularly shaped object without having its backround show. You then define the backgound color that you don't want to display as the transparent color, and Save/As in the GIF89 format. (Use GIF87 if you don't want a transparent background.) Check the documentation to your graphic program to see how to do this. (If your graphics program does't support this feature, you can get free-standing utility programs that will do this, like the Gif Construction Set. (PC))

If you need a photograph to have an transparent background, then you have to use the GIF format. Yes, even though it is limited to 256 colors. The JPEG format doesn't support transparent backgrounds.

A lot of web users are still using 256 color displays. In order to prevent dithering of images when they are displayed on these computers, you should arrange the pallette of colors such that they display in the 216 color browser safe pallette. (Sometimes known as the Netscape pallette.)

More Hints

An additional constraint is that you should do your design while keeping the speed of the user's browser in mind, which possibly might not be as fast as your's. There are two critera to keep in mind:

  1. Size counts. Keep the total size of the image as small as possible. Easiest way is to just make small images. Another way is to carefully reduce the the number of colors to the minimum possible.
    One other, non-trivial, concern is to try to keep adjacent colors that look the same, to actually be the same color, because the image file will be stored a lot smaller that way. One common pitfall is if your original image was scanned. Even if it looks like it only has a few colors, if you use your graphics program's dropper tool to check the colors of all the pixels, you will probably find that every pixel is a different color. You have to carefully use your program's color reduction function to fix this.

    Makes a big difference in file size.

    Or check your design to see if you really need to use a graphic image. Can the desired effect be achieved with a regular text element? Or maybe you can get a lot of milage out of using a smaller image surrounded with white space, or maybe a colored HTML table cell. (Check your HTML guide for info on doing that.)

  2. Quantity counts. Each separate element of the design (each separate file that is referenced) requires a separate process by the browser (and server). Each process takes time. So don't think that you are home free just because you have used a lot of tiny images--it's still going to be slow.
    One way to consolidate several images, especially if you want them to be clickable, is to combine them into an image map. We're talking button bars here. Do not use a bunch of individual graphics for navigation "buttons." Instead, combine them into one graphic and make it an image map.

    You will probably need an external program to help you generate the image map HTML code. However, one handy way to lay out and combine the images is to first make a HTML page displaying the individual "buttons" with separate <image src="..."> tags. Then do a "screen save" of your browser displaying the page, and then cut out the part that contains the "buttons." Then apply your image mapping to that graphic.

Anti-Aliasing Video monitors have a relatively coarse resolution of about 72 dots per inch, which tends to make graphics to have the "jaggies." One technique to alleviate this is to use anti-aliasing. (Tutorials are in links, below.)

One handy technique to anti-alias a graphic is to first have the image be three or four times the size that you want it to finally be. Then load it into your graphics program, convert it to 24 bit color, then resample it down to the final size. And finally, reduce the number of colors to 256, using the 216 color "browser safe" palette (if the graphic will be stored as a GIF.) If your original artwork is in a vector format, then it is real easy to make it oversized.

If you are scanning your image, than just make sure to keep an oversized version that you can later resample down to your final size. Always a good idea in any case.

In all cases, make sure that the background of the image matches the background of the web page before you do the resampling, in order to prevent ugly fringes around the image (if you are also going to have a transparent background.)

 

 

Some Thoughts on Site Design

 

Some More Web Site Designer References

Use your browser's back button to return to the Table of Contents. Forward if you go too far back.