Adobe illustrator cs4- P16 docx

CHAPTER 13: WEB AND MOBILE DESIGN 424 5. Using the Rectangle tool, draw a rectangle on the artboard. Specify a fi ll of red and a stroke of none. You can clearly see that the boundary of the rectangle aligns precisely with the pixels on the grid (Figure 13.7). Use the Selection tool to move the rectangle around, and you’ll fi nd the shape snaps directly to the grid. 6. Apply a 1-pt black stroke to the rectangle. Instead of a nice 1-pixel black border, the rectangle now appears with an odd 2-pixel border that con- sists of a variety of shades of gray (Figure 13.8). Figure 13.7 With the grid visible, you can clearly see where the path edge lines up with the pixels. Figure 13.8 Because of the pixel grid and the antialias- ing, a 1-pixel black stroke appears as a fat gray stroke. CREATING PERFECT WEB GRAPHICS 425 When you add the 1-pt stroke, Illustrator paints that stroke along the center of the path. But since the path is aligned perfectly to the grid, the stroke weight is distributed a half pixel on both sides of the path. Since you already know that pixels can contain only one solid color, the antialiasing that Illustrator applies to the art results in a 2-pixel fat gray line (Figure 13.9). When you hear web designers talk, many say they use Photoshop or Adobe Fireworks CS4 to create their web graphics, not Illustrator. More often than not, the reason behind their decision is because of the antialiasing issues we have covered here. But it’s not all bad—Illustrator offers tremendous value to web designers, and in my humble opinion, it’s foolish to overlook some of the great benefi ts of using Illustrator for web design work. After all, we still have plenty of chapter left. With that in mind, there are workarounds to everything; sometimes you just need a little more effort and attention to detail. Taking Charge of Antialiasing—and Your Art Now that you’re aware of the problems with antialiasing, what can you do about them? Although there’s no single answer (each workfl ow will have its own solutions), you might fi nd this list of solutions helpful: • Avoid using strokes. As you’ve clearly seen, adding strokes really exposes the antialiasing shortcomings of Illustrator. Although you can certainly use the settings in the Stroke panel to align a stroke to the inside or outside of a path, odd antialiasing artifacts occur even with those settings. Instead, it’s better to use the Object > Path > Outline Stroke command to convert stroked objects to fi lled paths that you can then easily align to the pixel grid. Figure 13.9 This is a perfect example of how valuable the Pixel Preview feature is in Illustrator. On the left, in Preview mode, the stroke around the rectangle appears normal. On the right, in Pixel Preview mode, you can clearly see the e ect of the antialiasing. CHAPTER 13: WEB AND MOBILE DESIGN 426 • Disable antialiasing for specifi c objects. You may fi nd that for some artwork it is benefi cial to turn off antialiasing altogether. Although you can’t disable antialiasing as a general document setting, you can disable antialiasing on an object-by-object basis. To do so, make a selection, and choose Effect > Rasterize. Choose 72 ppi for the Resolution setting, choose None for the Anti-aliasing setting, and click OK. With Pixel Preview turned on, you will clearly see the difference between objects that do and do not have antialiasing applied. • Set text in Photoshop. Where possible, you might consider bringing artwork into Photoshop, specifi cally where type is concerned (you can even copy and paste text directly from Illustrator into Photoshop). While Illustrator features just a single antialiasing algorithm for text, Photoshop offers fi ve settings (None, Sharp, Crisp, Strong, and Smooth). Depend- ing on the chosen font, the size, and the application of the text, you might fi nd that one of the antialiasing settings produces the best result. • Think about Fireworks. Okay, so this is less of a solution and more of general advice: If you fi nd yourself doing a lot of web graphics and if you’re having diffi culty getting your art to play nice with antialiasing, Fireworks might be a great application for you to use. If you purchased Illustrator as part of Adobe Creative Suite 4, you already own a copy of Fireworks, which was built from the ground up to produce web graph- ics. As an added bonus, Fireworks can easily import Illustrator artwork, preserving layers, editable text, and more. SLICING UPTHE WEB The process of preparing graphics for display on the web is called optimization. This process entails choosing how artwork is exported from Illustrator, what fi le formats are being used, and what settings are being used for each fi le type. One way to optimize web graphics is to use a technique called web slicing. In simple terms, web slicing is the process of cutting a large image into several smaller images, which is desirable for various reasons. First, there’s user perception. If you try to load a web page that has a single large image on it, the user sits there impatiently waiting for it to download SLICING UP THE WEB 427 and appear on the page. But when an image is sliced into smaller parts, each smaller image loads faster, and as a result, it seems like the image itself is loading faster. Second, you can use different fi le formats for each image slice, which can save some valuable fi le size space, resulting in a faster-loading graphic over- all. As you’ll see in the section “Exporting Pixel-Based Images with Save for Web & Devices,” these settings directly impact the fi nal fi le size of your total image. Slicing is also helpful if parts of a graphic need to be updated often. Instead of always creating larger images, you can update just part of the image. Swapping out a slice or two can be more effi cient than having to work with one large, bulky fi le all the time. Finally, because each slice is its own image, you can assign a link (a URL) to it, effectively making it a button. When someone clicks a sliced part of an image, they are linked to another web page. Of course, you can specify other functionality for such a button (or slice) as well. Any Way You Slice It… Illustrator offers two ways to create web slices. The more traditional way is to draw them yourself, but Illustrator can also create slices from objects automatically using a feature called object-based slicing. Let’s explore both methods. Once your artwork is created, you can choose the Slice tool from the Tools panel and click and drag in your document window. When you do, Illustrator draws rectangular regions—slices—and each appears with a number that identifi es it (Figure 13.10 on the next page). As you create slices, other dimmed slices might appear automatically in the document. These are called auto slices. Slices that you create are called user slices. Because the overall image has to be rectangular (for an explanation, see the sidebar “Web Slices = HTML Tables”) and all the slices must be rectangles as well, Illustrator creates slices as necessary (Figure 13.11, also on the next page). As you continue to create slices, Illustrator updates the auto slices accordingly. CHAPTER 13: WEB AND MOBILE DESIGN 428 Figure 13.10 Create slices where it makes sense to do so to allow for interactivity or future editing. Figure 13.11 As you draw slices with the Slice tool, Illustrator creates other slices to  ll out the rest of the document. User Slices Auto Slices SLICING UP THE WEB 429 Web Slices = HTML Tables So, what exactly happens when you create a slice? Illustrator splits a single graphic into multiple images. It creates an HTML table, with each cell of the table containing one of these slices, or pieces of the image. In this way, when you display the web page in a browser, all the sliced-up images appear together, almost like a puzzle. This is an important concept to keep in mind because you can create only rectangular slices. Another thing to keep in mind is that when an Illustrator document contains multiple artboards, each artboard maintains its own set of slices by default. In essence, this means each artboard results in a separate HTML table. When you draw a slice with the Slice tool, Illustrator is really drawing a rectangle with no fi ll and no stroke and making it a slice (Figure 13.12). When you want to edit the slice, you can use the Slice Select tool to change the boundaries of the slice. Figure 13.12 Slices you create with the Slice tool appear listed in the Layers panel. They are special rectangles that have their Fill and Stroke attributes set to None. However, Illustrator also has a different kind of slice. Instead of creating graphics and drawing slices over them, you can apply a slice as an attribute to a selection—something Illustrator calls an object-based slice. To apply this kind of slice, make a selection, and then choose Object > Slice > Make. Illustrator uses the bounds of your selected artwork as the area for the object-based slice. Using this method, if you make an edit to your graphic, the slice updates automatically along with it. If you want to hide all the little squares and numbers that indicate slices on your screen, you can do so by choosing View > Hide Slices. CHAPTER 13: WEB AND MOBILE DESIGN 430 Editing Slice Attributes You can specify certain attributes for a slice. Remember that a slice is really a cell in an HTML table. So, for example, a slice can have its own background color or URL link. Once a slice has been defi ned using either of the two methods described earlier, you can select it with the Slice Select tool. To edit the attributes of a slice, select a slice, and choose Object > Slice > Slice Options to specify a URL and alternative (Alt) text, which is used for acces- sibility (Figure 13.13). When you specify text as an object-based slice, you can also set the slice to be an HTML slice (rather than an image slice). In that case, Illustrator exports the text as editable HTML instead of as a graphic. HTML text slices might not show up in a browser exactly as you see them in Illustrator. Although bold or character attributes are preserved, exact fonts and sizing depend on the browser used. The browser ignores other text features, such as kerning and baseline shift. Once you have created all your slices, you can choose individual fi le formats and additional settings by using the Save for Web & Devices feature, which we discuss in detail right about…now. EXPORTING PIXEL-BASED IMAGES WITH SAVE FOR WEB & DEVICES At one time, saving a graphic for use on the web was a diffi cult task that involved saving an image, opening it in a web browser, and then repeating that process again and again. The Save for Web & Devices feature in Figure 13.13 The Slice Options dialog box gives you the ability to assign speci c URLs and additional information for each slice in your document. NOTE When exporting  les in the Photoshop  le format, you can preserve slices de ned in Illustrator. Refer to Chapter 14, “Saving and Exporting Files,” for more details. EXPORTING PIXELBASED IMAGES WITH SAVE FOR WEB & DEVICES 431 Illustrator—which is also found in Photoshop—lets you speed up the process of optimizing and saving web graphics. Once you’re ready to export a fi nal version of your web graphic, choose File > Save for Web & Devices to open the Save for Web & Devices dialog box. The dialog box, which fi lls up most of your screen, is split into sev- eral sections (Figure 13.14). Along the far left are several tools you can use within the Save for Web & Devices dialog box. In the center, a preview pane lets you view up to four versions of your art. The upper-right side offers a variety of export formats and their settings, and the lower-right side offers a trio of panels that control color, image size, and layer settings. Along the bottom of the dialog box are zoom controls, color information, and a Preview in Browser button. Figure 13.14 The Save for Web & Devices dialog box is almost an entire application within itself. Zoom Color Information Preview in Browser Color, Image Size, and Layers Panels Preview Pane Export Formats and Settings Save for Web & Devices tools CHAPTER 13: WEB AND MOBILE DESIGN 432 Let’s take a closer look at each of the sections of the Save for Web & Devices dialog box: • Save for Web & Devices tools. The Save for Web & Devices dialog box has its own set of tools, which is the fi rst indication that this feature is above and beyond just a simple dialog box. The Hand tool lets you pan the view of your artwork; it is especially useful when you are view- ing your art at higher zoom levels. The Slice Select tool enables you to select a particular slice with which to work. The Zoom tool allows you to change the zoom setting of your artwork, and the Eyedropper tool allows you to sample color from an image that appears in the preview pane. In addition to the icon that indicates the eyedropper color (you can click it to open the Color Picker), there’s also a button that toggles slice visibility on and off. • Preview pane. The preview pane is the main feature of the Save for Web & Devices dialog box. By clicking any of the four tabs, you can choose to view your original art (as it appears on the Illustrator art- board), an optimized version of your art (based on the current fi le set- tings chosen), and 2-up and 4-up versions of your art. Using the 2-Up and 4-Up tabs, you can easily compare different fi le settings or how an optimized fi le looks compared to its original version. Illustrator displays useful information below each preview, including fi le size and estimated download times, making it easy to fi nd just the right fi le type for your image (Figure 13.15). Figure 13.15 Besides being able to preview the results of di erent  le and compression settings, you can also view  le size and estimated download times. EXPORTING PIXELBASED IMAGES WITH SAVE FOR WEB & DEVICES 433 • Zoom control. The zoom control allows you to easily choose from a preset zoom level to view your artwork. Alternatively, you can enter any number in the Zoom fi eld. • Color information. As you move your pointer over artwork in the preview pane, the Save for Web & Devices dialog box provides feed- back for colors in real time. This is helpful if you want to confi rm color information or if you want to sample a specifi c color from an image. • Preview in Browser icon. The Preview in Browser icon is a huge time-saver. Although you get a beautiful preview of your artwork in the preview pane of the Save for Web & Devices dialog box, it can be useful at times to see what your artwork looks like in an actual web browser. This is especially useful for when you want to preview SWF animations, because those do not preview in the Save for Web & Devices dialog box. Clicking the icon previews the selected artwork in your computer’s default web browser. Clicking the arrow opens a list of installed browsers that you can choose from, or you can edit the list of browsers to customize it to your needs. The two remaining sections feature the group of three panels and the ability to choose from different fi le types. Choosing the Right Image File Type Overall, the main benefi t of using the Save for Web & Devices feature is the ability to compare the fi nal results of multiple fi le formats and choose the one that fi ts best for a particular use. To make the right decision, you have to understand the differences between each of these fi le formats and what their strengths and weaknesses are. Here we’ll discuss the pixel-based GIF, JPEG, PNG, and WBMP formats. We’ll discuss the vector-based SWF and SVG formats later in the chapter. Choosing the GIF File Format A common image fi le format used on the web is the Graphics Interchange Format (GIF). The format was developed by the people at CompuServe, one of the pioneers of the Internet and the web, though you hardly hear that name mentioned today (it’s amazing how fast things change). Recognizing the need to send graphics fi les across modem connections (which in those [...]... mobile phone Included with Adobe Illustrator CS4 (or any of the myriad of Adobe Creative Suite 4 choices) is a component called Adobe Device Central CS4, which enables you to preview and test your artwork as it would appear and run on a mobile device Adobe Device Central is really a full-blown application on its own and therefore is beyond the scope of this book With regard to Illustrator, you can perform... with Illustrator You might still want to look to Flash and Adobe After Effects CS4 for more complex work NOTE Animation in SVG is not directly supported in Illustrator To add animation to SVG files, you can add the code by hand once you’ve exported the SVG from Illustrator, or you can use an SVG animation application, such as Ikivo Animator (www.ikivo.com) The key to creating great animations in Illustrator. .. automatically as well Illustrator CS4, Photoshop CS4, and Fireworks CS4 can already create FXG artwork, and for more information on saving FXG files from Illustrator, refer to Chapter 14 For more information on Flash Catalyst, visit http://labs .adobe. com 451 This page intentionally left blank 453 Chapter Fourteen Saving and Exporting Files The task of saving and exporting your Adobe Illustrator CS4 files... Flash, where they add the interactivity Both Illustrator and Flash are vector-based applications, and many designers are familiar with the design environment and powerful design features found in Illustrator In addition, it’s easy to create mock-ups and PDF files to submit to clients for approval from Illustrator The challenge, however, is finding a way to bring rich Illustrator content into Flash while keeping... the lower-right corner of the Adobe Device Central window (Figure 13.26) A new Illustrator document will then automatically be created at the correct size • Testing mobile content To see what your web graphics will look like on a mobile device, click the Device Central button that appears in the lower-right corner of the Save for Web & Devices dialog box in Illustrator Adobe Device Central launches,... profile in Adobe Device Central, you can choose to create a new Illustrator document NOTE Flash Lite 3, which is the latest available version at the time of the printing of this book, supports Flash Player 7 (and ActionScript 2.0), so when you export content from Illustrator, make sure you don’t specify a later version of Flash Player compatibility One important thing to keep in mind is that Adobe Device... of this book, Adobe has publicly shown one such designer/developer application— Adobe Flash Catalyst.” In this application, Adobe displays the ability to import FXG graphics into Flash Catalyst, where each of those graphics can be quickly converted to functional Flex code Similar to the Edit Original workflow we discussed in Chapter 12, “Working with Images,” you can edit a graphic in Illustrator and... you can simply copy and paste from Illustrator into Flash Any defined symbols will be retained, as well as text and other settings However, you may want to bring an entire Illustrator file into Flash, preserving layers and document structure as well To do so, save your file as a native Illustrator document (.ai), because Flash CS4 Professional is able to read native Illustrator files From Flash, choose... assistance of Adobe Device Central: You can create a new document at the proper size for a specific mobile devices or a group of devices, and you can preview or test content on a mobile device or a group of devices 447 448 CHAPTER 13: WEB AND MOBILE DESIGN • Creating a Mobile and Devices document From the Illustrator welcome screen, you can click the Mobile and Devices document profile This launches Adobe Device... custom information Figure 13.25 The Flash Text panel gives you control over how text objects in Illustrator will behave when brought into Flash Bringing Your Artwork into Flash Once you’ve created your artwork in Illustrator, you need a reliable way to bring your graphics into Flash In previous versions of both Illustrator and Flash, this was anything but easy However, in the CS4 versions of these components, . with Illustrator. You might still want to look to Flash and Adobe After Effects CS4 for more complex work. The key to creating great animations in Illustrator is to use layers carefully. Illustrator. found in Illustrator. In addition, it’s easy to create mock-ups and PDF fi les to submit to clients for approval from Illustrator. The challenge, however, is fi nding a way to bring rich Illustrator. cally where type is concerned (you can even copy and paste text directly from Illustrator into Photoshop). While Illustrator features just a single antialiasing algorithm for text, Photoshop