Read an Excerpt
The Hidden Power of Illustrator CS
By Steve Kurth
John Wiley & SonsISBN: 0-7821-4158-7
Chapter OneCore Terms and Concepts
Any Illustrator user who plans to make graphics for the Web needs to be aware of some basic ideas and options. For example, you must take into account how you control the space for a graphic in an HTML document, what file formats are available to you, and how download time affects the site visitor's experience. Within Illustrator itself, you can choose among various ways of putting graphics into a web page. Which workflow you use will affect the choices you make as you create graphics. We'll refer to these issues throughout the book. If you already have a clear sense of them, consider skipping ahead to Chapter 2, "Essential Illustrator Tools and Techniques."
This chapter covers the following topics:
Graphic space in HTML
Using Illustrator in a web workflow
Web Terms and Concepts
This section introduces the core issues involved in working with graphics in HTML pages: how graphics can be placed on a page, the various web file formats, download times, and the "web-safe" color limitations.
Graphic Space in HTML
Users of Illustrator are accustomed to being able to place objects exactly where they want them. If you want an object in a specific position on a page, you just put it there. This is not how things work in HTML. HTML was designed to transfer text data; it was never intended to do the work it is doing now, and that includes handling robust page design. Objects flow in HTML as in a text document. Things start in the upper left and flow to the right and down. Graphics appear inline, as though they were characters in a word. This means that to place objects in specific locations, you'll need to work around HTML with one of four basic workflows (listed here in order of preference).
The most common way to control graphic space is by using a table. These tables are similar to the ones you'd create in a word processor or spreadsheet. You divide a rectangular area into boxes. Each box, or cell, can contain text, graphics, or even other tables. You can make the table large enough to cover an entire page. The contents of each cell are expanded, contracted, or combined with other cells to push and pull items into the position you desire. By nesting tables together and adjusting the amount of area cells take up, you can place items where you want them to be. Figure 1.1 shows the difference between simply placing an image on a page and placing it within a table.
Tables are useful and common, but they have limitations. Objects can't be on top of other objects, and they may not appear the same in different browsers. These issues aren't showstoppers, but you need to be aware of them. Illustrator can generate tables for you automatically. For more information, see Chapter 8, "Creating Complete Pages."
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) create a model for defining graphic space that is understood by 4.0 and later browsers. This means site visitors must have Netscape 4 or Internet Explorer 4 or later to view pages that use CSS. Other contemporary browsers, such as Safari, Camino, and Phoenix, also recognize CSS. Current statistics place the number of users with pre-4.0 browsers at less than 1 percent. This number is still a concern for conservative designers and those responsible for sites that reach broad audiences.
This is not an insurmountable problem. Often, sites designers create two versions of websites: one for those with modern browsers, and one for those without. When users load the site's home page, they are sent to the version of the site that's appropriate for their browser.
Why would you go to these lengths? Because style sheets enable you to do things you can't with standard HTML. Namely, you can position objects where you want them, make objects overlap each other, show and hide the items with scripting, and animate objects. Most of the drop-down menus that you see in web pages (like the one shown in Figure 1.2) are created using CSS. As time passes, this model will likely surpass tables as the de facto choice for web page creation. Like any technology, CSS can be misused to create visual noise and incompatible web pages, but it is very promising.
CSSs are commonly referred to as layers, or floating boxes. They can be used in conjunction with tables or in lieu of them. Illustrator can generate them for you; you'll learn more about working with Cascading Style Sheets in Chapter 8.
Frames are HTML documents that contain other HTML documents. This breaks space up into rectangular space, as shown in Figure 1.3. Often, users set up common items in a single document, creating links that load in another frame. This doesn't exactly solve the positioning issue, but it can be used to block out documents. Because frame documents can contain other frame documents, you could conceivably nest enough of them together to position objects exactly. And, of course, framed documents can use layers or CSS.
Frames have other problems, though. Their structure prevents them from being indexed properly, making it harder for users to find your page. In addition, they can't be understood by screen readers. When the visually impaired experience a web page, it is read to them by screen-reader software. Frame documents contain only references to other HTML pages, so there is no text to read. This flummoxes the software, rendering the page unusable to a portion of your potential audience.
Illustrator doesn't make frames. Likely you shouldn't either.
PDF files can appear in a browser exactly as you designed them in Illustrator (Figure 1.4). Given this, they could be used to set up entire pages, complete with the font of your choice. That is seldom the case, however. Instead, PDFs are used almost exclusively for downloadable versions of print documents.
Some people feel that requiring a plug-in has prevented PDF files from being more widely used as web content. The truth is more likely that the viewing experience is just different enough to irritate users. You have to wait for the plug-in to load, the Acrobat interface loads by default, and you need a special tool to select text. Until Acrobat 5, PDF files also couldn't be understood by screen-reading software. So while it's possible to use PDFs to design graphic space, it's rarely done. The reasons in this case concern individual preference more than technical limits.
When you save art, you need to assign a format to it. The format encodes the picture in a specific way. This may alter the way the file appears and may change what you can and can't do to the file later.
You should consider two major aspects: the way graphic space is described and how color is handled. Let's look at the most basic difference first-pixels, which are often also called "bitmap" or "raster" art, and vectors.
Pixel-Based (Bitmapped) vs. Vector Graphics
Web graphics may be either pixel-based (bitmapped) or vector based. Illustrator is one of the few applications that can create both. Pixel graphics are the most popular online choice. Pixels are tiny, colored squares. The file is composed of a grid of these squares. Together they create the appearance of the image. The larger an image is, the more pixels are required to describe it and the larger the file size is. Pixel images are optimized to a specific physical size and, once optimized, work best at that size. HTML tags can change the size at which the image is displayed, but this usually results in poorer image quality or inefficiency (Figure 1.5). Additionally, the requirements for displaying pixel images are different than those for printing them. This means that viewers will be able to see your images clearly, but will not get great results if they attempt to print the images.
Pixels can be saved into several file formats, and each has its own set of requirements (which we discuss in the sections that follow). Several of these formats are extremely popular online because web browsers understand them right out of the box. The HTML tags used with pixel images enable you to add links and image maps to graphics, increasing their functionality.
Vector is the model Illustrator uses to describe graphics by default. When you are working in Illustrator, you are most commonly creating vector art right on the page. As you may know, vectors create art with a connect-the-dots model. Points in space are identified and lines are drawn between them to create shapes (Figure 1.6).
Vector graphics are great because they can be sized up and down without affecting edge definition or detail. Edges in these graphics are sharp, and type can even be retained so that it may be copied or searched. Normally, when you make raster art, text becomes a picture of the characters. It's locked in that format and you can't highlight the word to select its content. With Scalable Vector Graphics (SVG), you can. You can select text, or even assign it to a different font on the fly. These graphics may even be printed at high resolution. Vector graphics may contain links, animation, and additional functionality, but these features must be added in the application that authors the graphics, rather than in the HTML that surrounds them.
Several vector file formats can be understood online by web browsers. The Shock Wave Flash (SWF) and SVG are the two most commonly used. Unfortunately, browsers don't have the ability to display these graphics out of the box and require a plug-in to view them. The plug-ins are free, and modern browsers come with the Flash plug-in already installed. A recent study by Macromedia (creators of the SWF format) indicated that over 92 percent of current web surfers have the Flash plug-in installed. Still, many designers are concerned that requiring users to download a missing plug-in will drive them away from their site. In addition, the SVG plug-in doesn't have anywhere near the penetration that Flash does.
When deciding whether to use pixels or vectors, take the plug-in into account. Consider your audience: the more technically sophisticated they are, the more likely they are to already have the plug-ins required. You may be developing for CD or intranet distribution, where you can control the environment the page is viewed in. You should also consider whether you intend to author entire pages in vectors or integrate them with HTML items and pixel graphics. Often, designers will isolate the use of vector graphics to selfcontained vector pages that open as separate windows or offer complete alternate websites for non-vector-enabled websites. You may simply decide that the advantages of vector graphics outweigh the risk of inconvenience and proceed.
Different file formats support different color models. This means that the act of saving to a particular format switches the color in the image to the model the format understands. This is mostly an issue when saving pixel graphics. Each pixel must be set to a specific color. The act of changing each pixel may alter the appearance of the image overall.
Colors are measured in terms of the amount of memory assigned to each pixel. The more memory that is allotted, the larger the number of colors that can be used. Memory is measured in bits. Bits are computer units that are typically grouped in sets of eight (the byte). An 8-bit image can support up to 256 color choices. Grayscale art uses this model of color. Twenty-four-bit color uses three bit channels, or color components. The famous RGB (Red, Green Blue) color space uses this model.
How pixels are assigned each color is also an issue worth discussing. In an 8-bit format, each pixel is assigned to one of the 256 colors available in the document. In practice, you'll have some power over which specific colors are used. In full RGB color, you won't be choosing specific color sets, but you will still have to make choices. Files are smaller, and transfer over the Internet faster, if pixels are similar to each other. To make files smaller, pixel values are changed in the course of saving them. You will have to balance between speed and quality of your image. Further, as you save over a web graphic again and again, the degradation keeps adding up. This is not a function of bit depth, but it's good to be aware of that up front.
In this section, we'll examine each of the popular file formats.
GIFs are typically used for logos, buttons, and art with areas of flat color. It's a common format for Illustrator to create because the strengths of the format often dovetail with the kinds of images created in Illustrator. GIFs are also commonly used as spacer graphics-placeholder objects that help control graphic space inside a table (see the earlier section "Tables"). Illustrator may produce these automatically as it generates HTML, but it is rarely done manually.
GIFs use an 8-bit color model. This means that each pixel must be assigned one of 256 possible colors. You need not use all 256 colors. In fact, using fewer colors reduces the overall file size. The set of possible colors that each pixel can call from is called a color table. You can define color tables for different graphics to help optimize image quality. Still, reducing the colors in a file down to this number may seriously hurt the appearance of the art, as you can see in the bottom two images in Figure 1.7. Understanding the process of defining and applying color tables is a major part of creating GIFs.
Because GIFs use a limited number of colors, they tend to be best suited for graphics that have large areas of flat color rather than ones with a lot of color changes, like photographs. Illustrator files often consist of solid areas of color, making GIFs a common choice for their optimization. The presence of gradients, gradient meshes, feathers, drop shadows, or raster art in an image may result in a file better served as a JPEG, though, as you can see in Figure 1.8. You should certainly consider all options as you optimize files.
GIFs support both sequential animation and transparency. Many of the animated banner ads that you see on the Web today are GIFs. You can't produce animated GIFs directly out of Illustrator, but you can set up objects to be animated in another application. In fact, Illustrator is often an excellent choice for setting up animation because of such features as blends and brushes. For more information, see Chapter 9, "Creating Animations."
Illustrator supports one hundred levels of opacity. GIFs support one. Pixels in the GIF format must be either opaque or transparent. You won't be able to make pixels semitransparent and build them atop other images in a web page; Figure 1.9 shows what happens when you try. Nonetheless, this is a fine feature and enables you to create objects with negative space. This is often used to display background images behind art (Figure 1.10) or to give the appearance of a non-square image.
GIFs may be interlaced, which means they load in stages. As shown in Figure 1.11, they start as blocky images and resolve themselves over time. Users are given a sense of the item at first, but it may take a few passes to see what it really is. This is intended to make the loading of pages quicker. It does reduce the load time overall but can be frustrating when used on important or large images. In addition, this approach increases the file's size slightly. For this reason, interlacing is usually reserved for nonessential graphics.
Assuming that all JPEGs are web-ready is a mistake. The format supports multiple color models (including both RGB and CMYK) and high resolution. CMYK images can't be viewed in web browsers, and images are displayed at screen resolution, making high-resolution images gigantic. You can avoid both of these issues if you are making JPEGs from Illustrator by choosing File -> Save For Web. Do not confuse this command with the File -> Export method for making JPEGs, which you'd use to create print graphics.
JPEGs use 24-bit color (RGB). Images are simply RGB; no color tables are needed. JPEGs are well suited for photographs and images with continuous tones. When you are creating graphics in Illustrator that have a lot of gradients, meshes, or soft-edge effects (such as Gaussian Blur), you should consider JPEGs.
JPEGs use a lossy compression model. When making JPEGs, there is a direct connection between the amount of compression and the amount of damage done to an image (Figure 1.12). In photos, you may not notice this damage, especially at higher settings. In solid images, though, it often results in noticeable artifacts about the edges. You can mitigate this effect somewhat, but you may end up with unrecoverable files.
Excerpted from The Hidden Power of Illustrator CS by Steve Kurth Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.