Designing graphics for the Web


    When designing graphics for the Web, you must consider different issues than when designing graphics for print. Here are some things to keep in mind:

    Color is often a key aspect of artwork. However, the colors you see on your artboard aren't necessarily the colors that will appear in a Web browser on someone else's system. You can prevent dithering (the method of simulating unavailable colors) and other color problems by taking two precautionary steps when creating Web graphics. First, always work in RGB color mode. Second, use Web-safe colors.

    Creating small graphics file sizes is essential to distributing images on the Web. With smaller file sizes, Web servers can store and transmit images more efficiently, and viewers can download images more quickly. You can view the size and the estimated download time for a Web graphic in the Illustrator Save for Web dialog box. (See Using the Save for Web dialog box.)

    Different types of graphics need to be saved in different file formats to display their best and create a file size suitable for the Web. In general, Web graphics formats fall into two categories: bitmap and vector. The bitmap formats--GIF, JPEG, PNG, and WBMP--describe artwork as a series of colored dots called pixels. Each pixel in a bitmap image has a fixed size and is therefore resolution-dependent, meaning that dimensions of the image depend on the resolution of the monitor on which it is viewed. The vector formats--SVG and SWF--describe artwork mathematically, as a set of geometric objects. Because of this, vector graphics are resolution-independent and can be scaled up or down without losing any image quality.

    Illustration of Web page elements with these callouts: A. GIF file B. JPEG file C. Web colors D. SVG file
    Web page elements A. GIF file B. JPEG file C. Web colors D. SVG file

    Each Web file format has its own characteristics and uses. JPEG preserves the broad range and subtle variations in brightness and hue found in photographs and other continuous-tone images. GIF and PNG-8 efficiently compress solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. SVG and SWF maintain high-quality, vector artwork and produce smaller file sizes than bitmap formats. Both of these formats are ideal for creating animation frames and sophisticated Web effects.

    Tip icon There are many Illustrator templates made specifically for the Web, including Web pages and banners, located in the Illustrator/Templates/ Web folder. (See Creating new documents.)