We hate to say it but a picture is worth a thousand words. Yeah, that cliche' is overused but it is a slogan for web design. Think about the last time you surfed into a site that was nothing but text or maybe had a few average pictures. Honestly, what went through your head? Did you leave quickly? High speed Internet access is quickly becoming the most common access. There are no more reasons for poor quality graphics and speckled or tiny photos.

Broadband access also allows us the luxury of using even more graphics and photos. This is also a good time to point out that too many graphics and photos is also bad. OK, so how many graphics is too many? When you sacrifice text for pictures, you've gone too far. If the page looks more like a picture gallery, you have too many. Just use common sense. Use enough graphics so the page looks good and is balanced with the other elements on the page. The major emphasis is on quality not quantity.

The next step is to decide on the graphic's dimensions. The width is the most important. There's no standard but a good target width is between 200 and 300 pixels. This is large enough to show the subject clearly without having to make it 'clickable' to a larger version of the image. It's also small enough to cause the surrounding text to word-wrap nicely.

Once you select a width that works well with your site, you should make all the pictures the same width. This 'consistency' is a large part of why visitors like the look of a certain website and they aren't even conscious of it. If you can crop and resize all photos to be the same width AND height, even better. This may eliminate a few graphics that you planned on using because sometimes you run into pictures whose dimensions will not allow you to resize and crop them to match the rest. A small sacrifice to pay for the good of the website.

Borders, vignettes, matting and drop-shadows are great ways to make a photo or graphic more interesting and call more attention to it. Borders can be simple like a thin, 1 pixel line (usually, black works best) or complex like picture frame for a painting. A vignette is a photo or picture in which the tones fade gradually away until they blend with the color of the background. This produces a softer look but can be more difficult to align. Matting and drop-shadows are an excellent way to create the illusion of depth into or on top of the page, respectively.


Common web formats

PNG is the Portable Network Graphics format. Pronounced "ping", it was created as a replacement for GIF. PNG is quickly becoming a new web standard. It is lossless, portable and well-compressed. PNG provides a patent-free format and can replace many common uses of JPGs. Greyscale and truecolor are supported and it also has an alpha channel for transparency.

JPEG is a lossy compression method created by the Independent JPEG Group (IJG). Progressive JPEG is a means of reordering the information so that a hazy view of the entire image is shown at first while the rest of image information is being downloaded. Broadband is making the Progressive JPEG format unnecessary as the entire graphic can be downloaded instantly. Unfortunately, saving a JPEG repeatedly will result in loss of image quality. If you use the JPEG format, make sure to save your graphic in another format first like a BMP or TIFF. Then save a copy as a JPEG when you are done editing it.

GIF is the Graphics Interchange Format and still quite popular. There are two types of GIFs, the old 87 and the newer 89a. 89a adds features like transparency and animation. GIF animations are very popular on the Web because they're small, display on all browsers, do not require a special plug-in and carry little CPU overhead. Animated GIFs can start to become excessively large, though, when files contain many frames. This is one reason why it's also a good idea to learn FLASH. The main disadvantage is it's 256 color limitation which makes it a poor format for photos and pictures with lots of color.


www.Web-Max.com
(440) 471-4127


© 1996-2005 Web-Max, Inc. All rights reserved.

 

ADDITIONAL
RESOURCES:
Corel
Fireworks
Adobe