At first everyone thought it was just a fad, but recently the Internet--or more specifically, the World Wide Web--has become a part of our daily lives. Email addresses and URLs are exchanged as often as street addresses and phone numbers. Although the Internet has been around for quite some time, the World Wide Web turned the Internet into what it is today because of two essential features: images and links. Illustrator brings the power of these two features into the palm of your hand. This hour, we cover topics such as:
I mentioned earlier that the web offers two powerful features: images and links. As the old saying goes, a picture is worth a thousand words, and using images to convey your message can be very effective. You can easily create images in Illustrator for use on the web (see Figure 23.1).
Creating eye-catching illustrations for the web is easy in Illustrator.
A link is something on a Web page that, when you click it, takes you to another page. A link can be specified in your HTML document as either text or a picture (see the following Just a Minute). A picture can also have multiple links, meaning you can specify different links for different parts of your image (see Figure 23.2). This is called an imagemap. Illustrator can create web-ready graphics, but before we begin making our art, we need to know a few things about the web.
By defining an imagemap, you can specify a different link setting for each button in this image.
Just A Minute: HTML documents are created in a text editor or an HTML editor application. HTML, Hypertext Markup Language, is the standard programming language used on the World Wide Web. If you're squeamish and don't want to get involved in "writing code," there are plenty of WYSIWYG (What You See Is What You Get) HTML editors out there, such as Adobe PageMill and Claris HomePage, that do all the programming for you.
When you design a brochure that will be printed, you have control over how the final product appears. You specify exact colors and papers to give a precise look and feel to the brochure. On the web, however, you have very little control as to how your art appears to the different people who view it. Some people might have a small, cheap monitor that displays only 256 colors. Other people may have large high-resolution monitors set to millions of colors. And if that weren't enough, different browsers such as Netscape Navigator and Microsoft Internet Explorer have different settings, so what looks perfect on your screen may look completely different on someone else's.
When you create an image on a computer with millions of colors, what happens when you view that image on a computer that only has 256 colors? Well, the results can be horrifying at times. If a computer does not have a certain color in its palette, it tries to approximate the color by arranging a variety of pixels in the same vicinity to give the appearance of that color. This process is called dithering. Sometimes the dithering is presentable, but usually it creates odd and distracting patterns and can also make text unreadable (see Just a Minute).
Just A Minute: Dithering is a lot like screening in traditional printing. When the screens are rotated just right, you get a nice rosette, but if the screens do not line up properly, you get an ugly moiré pattern.
As Douglas Adams would say, "Don't Panic." There are a few things you can do to assure that your art looks great on the web--on any machine. The first thing is to use the Web-safe color palette. As we learned in Hour 9, "Coloring Objects," computer monitors use the RGB color model. The web-safe color palette is a collection of 216 RGB colors that will not dither when viewed onscreen.
How did they come up with a number such as 216? Well, it's like this: The majority of people out there have monitors with 256 colors (VGA is 256 colors). These 256 colors are in what's called the system palette, which is built into your operating system. The Windows system palette and the Macintosh system palette, however, differ slightly. To be exact, there are 40 colors that do not match up between the two system palettes. So, if we eliminate those 40 colors, we are left with 216 colors that are identical on both platforms (see the following Just a Minute).
Just A Minute: If you are creating artwork for an intranet, where you know the type of computers people are using, you can take advantage of that by using more resources. If, for example, everyone who will be viewing your art has a Macintosh, you can use the Macintosh system palette that contains 40 more colors than the web palette does.
Now, if we would create artwork using only colors from these palettes, we can be sure that the colors will not dither when viewed on the web. By now, you're wondering, "Great! Where do I sign up?" and the answer is easy. Adobe has included system palettes for both Windows and Macintosh as well as a color-safe web palette--all right inside Illustrator. Simply choose Swatch Libraries from the Window menu and make your choice (see Figure 23.3). The Palette opens in a new Swatches-like floating palette and is not editable (see Figure 23.4). If you want to edit colors, you must drag those colors to the Swatches palette first, and then edit them.
Opening the web palette.
The Web palette looks and acts similar to the Swatches palette. Notice the little icon in the lower-left corner, indicating the palette cannot be edited.
Just A Minute: Because the web and the technology that it brings are constantly changing, dealing with every aspect of web color can take up an entire book in itself. Although many issues and techniques are beyond the scope of this book, you might want to look into books that delve deeper into web color, such as The PANTONE Web Color Resource Kit or Creating Killer Web Sites, both published by Hayden Books.
We mentioned before that a single image, otherwise known as an imagemap, can contain multiple links. Using an imagemap allows a user to follow different links, based on where he clicks in a linked image. Before Illustrator 7, you had to create an imagemap in a third-party application, which was usually a tedious task. And if you made a change to your image, you would have to redefine the imagemap as well. Now, with Illustrator 7, you can do it all in one application, and in one easy step.
You create an imagemap by assigning a URL (Uniform Resource Locator) to an object in your illustration. URL is a fancy word used for a web address, and usually looks similar to this: http://www.adobe.com. In order for you to create an imagemap, you must know the URL of the page you are linking to.
To assign a URL to an object, open the Attributes palette (F11). Select an object, and type the correct URL in the Attributes palette (see Figure 23.5). After you enter a URL, it is added to the pop-up list in the Attributes palette, so you can choose from a list as you create more links (see Figure 23.6).
Entering a URL in the Attributes palette.
Choosing a link from the pop-up menu in the Attributes palette.
If you have a web browser such as Netscape Navigator or Microsoft Internet Explorer, and an Internet connection, you can click the Launch Browser button in the Attributes palette to check your links.
You must save your file in a certain file format before it can be used for the World Wide Web. The most popular formats, GIF and JPEG, can be saved right out of Illustrator, and each has its strengths and weaknesses. Another file format, PNG, is slowly making its way into the limelight as well because it offers some features not found in GIF or JPEG. Basically, all of these formats use a compression method to make the files smaller so that they take less time to transfer over a modem.
All files saved in these formats are converted to pixels when they are saved. Always be sure to keep a copy of your original Illustrator files in case you need to make changes to your images. Also, be careful when you save your web files that you give appropriate names to your images. Use only lowercase letters, no spaces, and use the appropriate three-letter extension for your file (GIF, JPG, PNG) so that a browser can identify it.
The GIF89a format (created in 1989, hence the 89a extension) is probably the most popular file format used for images on the web. Developed by the people at CompuServe, GIF uses a lossless compression scheme called LZW. Lossless means that no information is lost when the file is compressed. The GIF format is best used for images with flat color, such as logos and illustrations.
Choosing the Export command.
Choosing the GIF89a file format.
4. Choose your options from the GIF89a Options dialog box and click OK (see Figure 23.9).
The GIF89a Options dialog box.
Let's take a closer look at some of the options presented in the GIF89a Options dialog box. First, you can select a palette of colors to be saved with the file (see Figure 23.10). Choose either the Web palette or the Adaptive palette to get even fewer colors. The GIF format supports any number of colors up to 256. The fewer colors in the palette, the smaller your file size. You then have four options: Interlace, Transparent, Anti-alias, and Imagemap.
Choosing from different palette options.
Selecting the Interlace option enables your image to appear gradually onscreen when it appears in a browser window. This gives the viewer an idea of what the image looks like as it loads.
Using Transparent makes the background of your image appear as if it were filled with nothing, letting colors that appear behind it show through. This is important with irregularly shaped or oval images, which would otherwise appear with a white background.
Anti-alias, as we mentioned earlier with the Rasterize command, smoothes out jaggy lines and curves, making the image look better onscreen. Try to avoid using this option with small font sizes as it tends to make the type too blurry to read.
Finally, if you have assigned URLs in your file, you can export an imagemap along with the GIF file. You can choose to create either a client-side imagemap or a server-side imagemap. Client-side imagemaps are generally better and are more common in today's web sites.
The JPEG format (pronounced jay-peg) uses a lossy compression scheme, meaning that information is thrown out in order to make the file size smaller. This affects the final quality of the image, and you are able to specify how much information is lost during compression (of course, the more you throw out, the smaller the file becomes). JPEG is used primarily for photographic images or complex illustrations with gradients because the JPEG format can support 24-bit color (millions of colors).
2. Choose JPEG from the Format pop-up menu (see Figure 23.11).
Choosing JPEG from the Format pop-up menu.
The JPEG Options dialog box.
In the JPEG Options dialog box, you are able to set the image quality, which also controls the amount of compression (see Figure 23.13). By selecting a higher quality file, you are also creating a larger file. To change the quality, simply drag the little triangle slider to the left or right or enter a number from 1-10 in the box.
Setting the image quality.
Recently, a new kind of JPEG format, called progressive JPEG, has begun to spread and is supported by the latest versions of popular web browsers. A progressive JPEG is essentially the same as an interlaced GIF, where the file loads gradually, enabling the viewer to get an idea of what the image is as it loads. I have even found that progressive JPEGs are usually a few K smaller than a Baseline (standard) JPEG.
The PNG format (pronounced "ping") was initially created to address the shortcomings of the GIF format. Using a completely new compression algorithm, it avoids any legal problems concerning the LZW compression scheme (see the following Just a Minute). PNG also supports 24-bit color, as well as the use of alpha channels for masking. The format, however, is new on the scene, and is supported in very few browsers.
Just A Minute: The GIF format utilizes the LZW compression scheme that was developed by Unisys Corporation. A few years ago, after a long legal battle, Unisys began to charge software developers a royalty fee if they created software that implemented the LZW compression algorithm (end users are not charged, only developers). The PNG format was developed as an alternative to the GIF format, to avoid having to pay royalty fees to Unisys.
Choosing PNG from the Format pop-up menu.
The Resolution Options dialog box.
The PNG Options dialog box.
PNG's interlacing scheme is called Adam7, or you can choose to have no interlacing. You can also choose from several filters, which are different compression methods. The Adaptive method is most effective for web images.
Illustrator's Blend tool can help you create great-looking animations for the web. The GIF89a file format supports multiple images in a single file, enabling animation. Almost all of today's web browsers support GIF89a animation.
Basically, an animation is a string of images or frames, where each frame is different than the next. When viewed one after the other, the image appears to move. You can use Illustrator's Blend tool to help create the different frames.
Two different objects.
Illustrator's Blend tool.
Selecting the point to blend from.
6. Specify the number of steps Illustrator should create (this is the number of frames).
You can then tweak each object individually (see Figure 23.21). In order to create the actual animation file, you need to export each frame as a separate GIF file, and then combine them in a third-party animation program such as GifBuilder (for Mac OS) or GIF Construction Set (for Windows).
Selecting the point to blend to.
After the blend is performed (top), you can tweak and edit each object (bottom).
The Blend tool can also be used to create airbrush effects by creating more steps. Experiment with blending small, light-colored objects within larger, dark-colored objects to create highlights and shadows. Keep in mind that blends can create a lot of shapes that make for slower print times and larger file sizes. For more information on using the Blend tool, see Hour 21, "Working Smart in Illustrator."
This hour you became a techie web-head! We learned all about using "safe" colors when designing for the web to prevent dithering. We also learned how to create imagemaps by assigning URLs to objects right in Illustrator. And if that weren't technical enough, we learned how to make our images web-ready by saving them in a variety of web-compatible formats. Heck, we even covered animation!
We're getting ready to wrap things up next hour when we learn how to print stuff and make color separations, so get ready for the home stretch!
Imagemap--A list of coordinates that, when referenced to a graphic image, enable the user to follow different links, depending on where they click on the image.
Interlacing--The process of loading an image gradually, increasing in resolution and detail as it appears in the browser.
Adaptive Color Palette--A table of a specific number of colors that are derived from the best possible match in an image.
Web Color Palette--A table of 216 specific colors that can be reliably used in any browser and on any platform.
GIF, JPEG, PNG--Image file formats that are universally accepted on the Internet and World Wide Web.
© Copyright, Macmillan Computer Publishing. All rights reserved.