| Print designers save their graphic files as PSD, AI, TIFF, or EPS documents in order to use them in their print layouts. Web designers use very different formats. Here is a quick glossary of the type of formats for web graphics. GIF is used for artwork that has solid areas of color. GIF images are limited to 256 colors. However, most designers try to use even fewer colors to keep the file sizes as small as possible. JPEG is used primarily for photographic artwork. JPEG files can contain millions of colors. JPEG format uses compression to reduce file size. As the amount of compression increases, the more the quality of the image degrades. PNG can be saved as 8-bit (256 colors) or 24-bit (millions of colors) images. PNG files support a much more sophisticated form of transparency than GIF images can. Unfortunately, because of a problem with Microsoft Internet Explorer, PNG files are not used often in web graphics. See the sidebar "PNG: The Best Web Format That Nobody Uses." SVG is a vector format that describes images as shapes, paths, text, and filter effects. Because they are very small, SVG files are used for web graphics as well as handheld devices such as cell phones. SVG-t is an alternate version of SVG files. These files are even smaller. SWF is the format for Flash files that are viewed in browsers and web devices. In addition to creating extremely small files, it also lets you create animations that contain sounds and movies. WBMP is the format for raster images that are viewed on cell phones. The WBMP format is 1-bit, which means the images are only black and white pixels. This format is no longer of primary importance, since many cell phones have colored screens.
PNG: The Best Web Format That Nobody Uses The PNG format was originally created when it was discovered that CompuServe owned the patent on GIF (Graphic Interchange Format) and threatened to make everyone, including viewers, pay for the right to see GIF images. In response to this potential financial snarl, the patent-free Portable Network Graphics (pronounced ping) format was developed. PNG files are incredibly useful. They can be saved as 8-bit files (like GIF images) or 24-bit files (like JPEG files). The images do not compress or lose quality. Unlike GIF images that create a single-color transparency, PNG files support anti-aliased transparency that can be used for subtle fades and shadows. So how come we rarely see PNG images on web pages? Because years back, browsers could not view PNG files without a specialized plug-in. Web designers didn't want to have to instruct their readers to download the plug-in. And web surfers hate installing new plug-ins anyway. The PNG format fell out of favor. Later, when most browsers came installed with support for PNG, people discovered a bug in Microsoft Internet Explorer (IE) that prevented the transparency in PNG files from displaying properly. Once again, it seemed like too much work to have to deal with the PNG format. Recently, however, Microsoft announced they will be creating a new version of IE version 7. Reports indicate that this version of IE will display PNG transparency correctly. Ironically, some of the best uses for PNG graphics are in Microsoft's own Office applications, such as Word and PowerPoint. There is no problem using PNG transparency in those applications. Sandee routinely creates PNG files from Illustrator documents to use in Word files because PNG format converts the vectors into a format that Word understands without flattening the entire file into a white background. |
Saving and Exporting Directly to Web Formats When you choose Save As in Photoshop, the Format menu gives you a long list of options which includes CompuServe GIF, JPEG, PNG, and BMP a lot of web formats. Choose Export in Illustrator, and the Format menu lets you select JPEG, PNG, BMP, or Macromedia Flash again, all web formats. So why not use these easy methods to create web graphics? Are these formats less professional than the Save For Web dialog box (covered in the next section)? We don't mean at all to imply that these formats and methods don't work, and give professional results they do. The main reason why we dismiss saving or exporting web graphics this way is that while you can set your options for the files, there's no way to preview what the image will look like. The whole point of creating web graphics is to do a careful balance between keeping the file size small and preserving the quality of the finished artwork. You can't do that well without a preview, which is why we use, and advocate, the Save For Web dialog box. Save For Web Dialog Box The Save For Web dialog box is your one-stop interface for creating almost every possible web graphic. You can find it in Photoshop, Illustrator, and GoLive. To open it in Photoshop or Illustrator, choose File > Save For Web (Figure 17-1). In GoLive, however, you need to import a smart object first before you can open the Save For Web dialog box. (See "Working with GoLive Smart Objects" in Chapter 9, "Smart Objects and Intelligent Layouts.") Figure 17-1. Save For Web dialog box as shown in Photoshop. 
Most of the features are identical in all three applications, but a few of them appear in only one of the applications in the suite. Following is a brief description of the main areas and tools in the Save For Web dialog box. Optimization tabs allow you to split the dialog box into halves or quarters to compare different settings. This is especially helpful when deciding between different types of formats or choosing the compression or color settings for images. The Hand tool allows you to move around the dialog box. The Slice Select tool lets you select the slices in the image so that you can apply different optimization settings to the area within the slice. (Slices are rectangular areas that divide an image into smaller segments.) This tool only selects the slices in the Save For Web dialog box. The slices themselves need to have been created before opening the Save For Web dialog box. The Zoom tool allows you to zoom in or out on the image in the dialog box. The Eyedropper tool lets you pick a color from the image to use as the matte color into which transparent images can fade. The Eyedropper can also select the color to be inserted into slice backgrounds. Eyedropper color displays the color that has been selected by the Eyedropper tool. Click inside the Eyedropper color square to open the Color Picker. Show/Hide slices toggles the display of slices in the image. Optimization settings area displays the optimization controls for the various web formats. Photoshop, GoLive, and Illustrator allow you to save as GIF, JPEG, PNG-8, PNG-24, and WBMP. Illustrator adds SWF and SVG to the list. (GoLive also lets you save files in the SWF and SVG formats, but not through the Save For Web dialog box.) Color Table displays the colors in GIF and PNG-8 images. Image Size allows you to change the pixel dimensions of an image without leaving the Save For Web dialog box. Frame Controls become active after you've added animation frames to the document. They're available only in Photoshop. Edit In ImageReady lets you quickly switch from the Save For Web dialog box in Photoshop to editing the image using ImageReady. Preview in Browser menu lets you select a browser to display the image at the current optimization settings. Color Information gives you the RGB, Alpha channel, Hexadecimal, and Index color information for wherever you move the cursor. Magnification menu lets you quickly move to a specific magnification setting.
As you set the optimization controls, you'll see the file-transfer time listed below the preview of the image. Although these times are given using the ancient 28.8 Kbps measurement, they still give you a warning when your image will take too long to be seen. When you have the optimization settings as you wish, click the Save button. This lets you name and save the web images. If you have created slices, you will also be given the opportunity to choose to save the HTML code that is necessary to reassemble the slices. (See the section "Slicing and Dicing Images" later in this chapter.) Choosing Photoshop or ImageReady Years ago, ImageReady was its own application, sold separately from Photoshop. But customers didn't like the idea of having to buy another program to create web graphics. So beginning with Photoshop 5.5 and ImageReady 2, Adobe included ImageReady free with Photoshop. Even better, ImageReady was automatically installed along with Photoshop. Adobe also added a nifty little button on the Tools palette that lets you quickly switch between Photoshop and ImageReady (Figure 17-2). Figure 17-2. Click the Edit In ImageReady (left) and Edit In Photoshop (right) buttons to quickly switch between Photoshop and ImageReady. 
Unfortunately, that wasn't enough for the users. They didn't want to have to switch between applications at all. They weren't happy that some tools in Photoshop weren't available in ImageReady. They wanted all of ImageReady added to Photoshop. So Adobe slowly began adding features from ImageReady into Photoshop. As each new version of Photoshop came out, more ImageReady features were transferred. So which program should you use to create web graphics? At this point, the only major features that ImageReady has that Photoshop doesn't are the ones for creating image maps and rollovers. But there are some minor features still found only in ImageReady. For instance, both programs have ways to set the options for sliced images, but only ImageReady has options for more advanced features such as cell alignment. Even where Photoshop does have the same feature as ImageReady, however, it may not be as accessible as it is in ImageReady. Most of the web features in ImageReady are found in palettes that are available at all times as you work. Many of those features are available in Photoshop only in dialog boxes or the Save For Web dialog box where you can't work directly on the file. If you are a very experienced web graphics production person, you may want to work in ImageReady since you have the most advanced features. If you are mostly used to working in Photoshop, you may want to stick with it for web graphics. |
Powered By ImageReady: More Than a Slogan In both Photoshop and GoLive, the Save For Web dialog box has the words "Powered By ImageReady" in its title bar. Besides sounding like some sort of slogan for a battery, what does the slogan mean? It means that the exact same technology that is in ImageReady is in the Save For Web dialog box. It doesn't matter if you use Photoshop, GoLive, or ImageReady itself to create your web graphics the results will be the same. What about the Save For Web dialog box in Illustrator? Why isn't it "Powered By ImageReady"? The answer is simple. Illustrator has additional features not found in ImageReady, such as options to save as SWF or SVG (covered later in this chapter). This is why the Illustrator Save For Web dialog box doesn't get the "Powered by ImageReady" label. |
|
