Graphic Design for Your Website
Graphics set the mood of your website They add interest to your text. You can create a good impression with some well designed graphics on the home page. Repeat a few design elements throughout the site to create a sense of continuity. Follow these basic design suggestions and your site will look well planned. A good designer can be of enormous help.
The most important thing to keep in mind in choosing graphic designers is to work with professionals who understand the unique requirements of the Web. The technical limitations (and opportunities) of web pages are foreign to most graphic designers trained in other media. File size requirements, color limitations, and screen resolutions are much different from those in print and must be understood. Even if you have an in-house graphics department, you may want to hire a Web graphic designer to explain and the necessary techniques.
The key to creating suitable graphics is to keep the file sizes small so they download quickly. Large graphic files take a long time to download, especially at slower modem speeds. You don't want people leaving your site before they've had a chance to see your work.
Keeping the file size small does not necessarily mean that the graphic itself must be small. The file size is determined by the amount of information in the image. A large image with only a few colors can actually have a smaller file size than a small graphic with many colors. Ideally, file sizes should be between 20K and 30K each. At this size, they load almost instantly. Larger images, such as a banner you place at the top of a page, can be as large as 75K. But at this size, the image alone can take 15 seconds to download with a 56 Kbps modem. A good rule of thumb is to keep the total sum of all the images on a page at 50K or less.
Web graphics are usually in one of two formats: JPEG (a compression method developed by the Joint Photographic Experts Group, used for photographic images) and GIF (Graphics Interchange Format--a compression scheme developed by CompuServe).
To create or convert your graphics to a Web format, you need image editing software. If you are working on a large site, you will benefit greatly from programs designed to catalog and manage graphics and graphic elements. Sometimes this can be done with a single program, but usually it's better to use separate ones. Software ranges in price from a few dollars for shareware to more than $500 for professional programs like Adobe Photoshop. Whether you use GIF or JPEG format, here are some guidelines for working with graphic files:
Always design in RGB (red, green, blue) mode at 72 dpi (dots per inch) with an 8-bit maximum size. Many older computer monitors display a maximum of 256 colors, and this is the Web standard. The fewer colors you use, the smaller the file size will be. For example, 8 bits gives you 256 colors to play with, while 3 bits gives you only eight colors. You'll be surprised at what you can do with only eight to 16 colors; your readers will be pleased with the snappy downloading time of your pages.
Converting existing high-resolution graphics usually means reducing the image from 300 pixels or more per inch to 72 pixels per inch. This can make a big difference in the appearance of an image, creating jagged edges, or gaps where colors have been removed. Use techniques like indexing and dithering to fix these problems. Dithering or diffusion fills in missing colors in a uniform way to make the transitions between colors smoother. You should only dither an image once, because the more you dither, the blurrier the separations get between colors. In some cases, to get a clean result you may have to open the lower resolution GIF and touch it up, pixel by pixel. Also, when working with palettes, stick to either the Adaptive Palette or the System Palette.
For crisp looking graphics, make your images transparent. This entails changing the background color to match that of the page (which more often than not is white) so your image appears to float on the page.
Be careful you don't have images (such as a banner or a masthead) that run across the top of your screen and off the right-hand side of the monitor. This can happen if you are designing your web graphics using a high-resolution monitor. Many people set their monitors to a resolution of 800 x 600 pixels. If you're working on a higher resolution monitor, chances are you've designed your mastheads or banners at a width of 770 pixels or more. At this width your graphic will spill off the right side of many screens, affecting the look and overall presentation of your pages. The best way to avoid this problem is to keep graphics at a width of 470 pixels or less.
Save images as "interlaced." This allows a GIF to load into the browser as a fuzzy, pixelated picture that slowly comes into focus. Whether this is a pleasing effect is a matter of taste. Test your graphics both with and without interlacing to see for yourself how it looks.
If you are displaying large graphics, such as photos, give your readers the opportunity to decide if they want to see them or not. The best way to do this is to make a "thumbnail" or miniature version of the graphic, which links to a larger version of that image. The thumbnail gives readers a preview; if they are interested in seeing the larger version they can click on the thumbnail. It's always a good idea to warn people if they are about to download a large (more than 50K) graphic by including the file size in parentheses next to the thumbnail.
A border is displayed around each linked graphic. This border is the same color as all other links on the page. This may or may not be visually pleasing. If you don't like the way it looks, you can suppress the border by adding "border=0" to the <img> tag. You can also add additional tags to align the graphic to the right or left of text or to the top, middle, or bottom of a graphic. These extensions are not universally supported and can result in your page layout looking different--even sloppy--in different browsers. Test your pages in several browsers to see how they look, then make adjustments as necessary.
Finally, as a courtesy to people who are reading your pages in text-only mode, include an "alt" tag inside the image tag with a brief description of the topic. |
