Common Problems with Web Pixel Images
Colors too similar in value (grayness)
Most people will find the image at left above uncomfortable to read or even to look at. That's because foreground and background colors should not be of nearly equal value or grayness. The image at bottom left is a grayscale version of the first; most people will see this image as nothing but a single gray. This suggests a good way to check images for this problem: Convert the file to grayscale, or change your monitor setting to grayscale if you can, and see if your image is still clearly visible. If it is not, consider changing colors. The same problem may occur when text colored by your web browser lies on top of a colored background. Solid red text on a solid blue background is a common and usually bad idea.
Drop shadow too deep
A drop shadow under a graphic element is a copy of the element in a different color (usually contrasting with the background), placed "under" the element (i.e., mostly obscured by it), and moved slightly so as to be visible at the edges of the element. Often a drop shadow will improve the legibility of text on a computer or tv screen, without invoking aliased text which increases the size of pixel files. The example at left above shows a poorly implemented drop shadow. The shadow has been displaced too far from the original text, increasing the visual complexity of the text. A drop shadow should be displaced no more than the width of the thinnest or narrowest part of the element it shadows. In this example, the thinnest part of the text occurs on the serifs or ends of the letters, for instance on the left-hand foot of the letter A. The width of the letter is only a few pixels at that point, so the drop shadow should be displaced only a few pixels, as shown in the example in the middle. Note that the text in the middle example has only the tiniest of shadows, but is easier to read than the text with no shadow at all (third example). The font used here (Bodoni Antiqua T Light) is extreme in the thinness of its lines. An obvious corollary to the drop shadow rule of thumb is: use a bold, beefy font if you want to have deep drop shadows. But note that shallow drop shadows do plenty to enhance the legibility of text no matter how light or bold the font is. Busy backgrounds
An extremely easy way to dress up a page is to add a single line of HTML code specifying BODY BACKGROUND to be an image. In Netscape, this image is used to tile the window under the rest of the text and graphics. Background tiles should not interfere with the legibility of what lies on top of them, as shown in the top example. Very little tonal variation is needed to create a background tile. The improved version on the bottom was created by drastically increasing the brightness and reducing the contrast of the original tile. Large files in small spacesThis is a problem that could be demonstrated with pictures, but I have chosen not to out of respect for the value of your time. It is possible, using the HEIGHT= and WIDTH= parameters in the IMG tag, to give a displayed image any height and width, regardless of the dimensions of the actual image. I have seen pages wherein a large graphic, say 480 pixels wide and 540 pixels tall (about 5"x7") was compressed into a space 60 pixels by 72 pixels (about 3/4" x 1"). Apart from the possibility (perhaps desirable) of distorting the proportions of the image, the single biggest drawback to squeezing a large image into a small area is that large images are large files and take a long time to download. Always make thumbnail images from larger ones in an image-processing program like Photoshop. Don't make everybody's web browsers do it. Graduated fills in GIF files
|
||||||
