The Adobe Illustrator CS Wow- P14

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

72
lượt xem 16
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

The Adobe Illustrator CS Wow- P14: Sharon Steuer is the originator of The Illustrator Wow! Books. When not working on Wow! books, Sharon is a painter, illustrator, columnist for creativepro.com, and the author of Creative Thinking in Photoshop: A New Approach to Digital Art. She lives in Connecticut with her cats, Puma and Bear, and radio star husband, Jeff Jacoby. She is extremely grateful to her co-authors, editors, testers, Wow! team members (past and present), Adobe, and Peachpit for making this book possible....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: The Adobe Illustrator CS Wow- P14

Adobe Color picker gradients or gradient mesh objects, recognize that you'll Illustrator now supports the be creating bitmapped images that will result in larger Adobe Color Picker. Double-click file sizes. on the color proxy in the Toolbox or on the Color palette to open • If you import or create rasterized art for the the Color Picker. Enable the Only Internet, rasterize at 72 ppi, not the default, to keep file Web Colors checkbox to limit the sizes small. Color Picker to Web safe colors. • To export a file's layers or paths selectively, hide the Pixel units ones you don't want before exporting. Control-click (Mac)/Right mouse- click (Win) on the rulers after • If the object you want to export to Flash contains View>Show Rulers and select Pix- a dashed stroke, expand it using the Tip "Outlining els to display the units as pixels. Dashed Strokes" in the Drawing & Coloring chapter. Or you can use your operating system's clipboard to copy the Auto-opening select libraries stroke from Illustrator and paste it into Flash. To preserve Set any swatch library (Win- the dash and gap pattern of the Illustrator object, choose dow> Swatch Libraries) to open Preferences > File Handling & Clipboard and then select automatically when you launch PDF for the Copy As option. If you don't do this, the dash Illustrator by selecting Persistent and gap pattern will be converted to the default pattern from the palette's pop-up menu. in Flash. Choose it again to reset the pal- ette to close by default. • Choosing Export Al Layers to SWF Files turns each Illustrator layer into a separate Flash file. This is the SVG or SVGZ (Compressed)? preferred method of exporting Illustrator elements for SVG compressed is gzipped or animation. "gnu-zipped," and is the W3C- sanctioned version of "raw" SVG. SVG The Adobe SVG Viewer automati- Illustrator supports the export of Scalable Vector cally decompresses the file on the Graphics (SVG). SVG is an emerging standard for a client browser and displays it as Web graphic format that contains a combination of ele- normal. So there is little difference ments such as vectors, gradients, type, raster effects, and between the formats, except that JavaScript events, all based on the popular XML stan- one is much smaller. An exception dard. SVG is also a text-based format, which means it can occurs when you use a database be easily edited even after the file has been uploaded to to serve information to a client. In a Web server. We'll talk more about this later when we this case, you will need a script to discuss data-driven graphics. SVG is potentially a very decompress and then re-compress exciting file format, because it combines very small file the file.—Andrew T. Watanabe sizes with crisp artwork that, like Illustrator vector art, 364 Chapter 11 Web & Animation
can be zoomed into and scaled up or down with no loss Pixel preview of quality. As with Flash, in order for exported SVG files Choose View >Pixel Preview and to be viewed in a browser, a special viewer (plug-in) is zoom in to 200% or more to required. The SVG plug-in is automatically installed in display a rasterized preview of your browser when you install Illustrator. your vector artwork. The SVG format supports JavaScript interactivity as well as static image display. To add a JavaScript event to No more SVG export? your artwork you must know JavaScript! Open the SVG Illustrator now lets you save as Interactivity palette (Window >SVG Interactivity); then, SVG directly from the Save and with an object selected, choose an event from the pop-up Save As dialog box. If you check menu, and type a JavaScript command in the JavaScript the Preserve Illustrator Editing text field. Capabilities option, a native ver- sion of the Al file will be included DATA-DRIVEN GRAPHICS in the SVG file, allowing for With Illustrator's Variables palette, you can create art- complete editability in Illustrator. work in Illustrator that can automatically be updated or replaced using a script you write. For example, you can Go, Go Dynamic! create a template for a news headline where the actual You can take dynamic graphics a word headline is defined as a text variable. With the use of step further if you're using Adobe a script you can retrieve a news headline from a database GoLive 6.0 or higher, which under- and automatically update the text of your headline with stands Illustrator's variable con- the current news item. The real time saver here is that tent. Simply save your file in SVG your template can be used over and over again for each format and import it into GoLive new headline—simply by running the script. as an Illustrator Smart Object. The There are four different kinds of variables you can variables you defined in Illustrator define in Illustrator: text, linked images, graph data, can then be changed in GoLive. and visibility. When text is defined as a variable, you can apply any attributes to the text and they will stick with the text object (for example: font, color, style infor- CSS Layers mation), and the text string will be replaced (as in the Illustrator allows you to export headline example we mentioned above). A linked image CSS (Cascading Style Sheets) lay- variable means that one linked image is replaced by ers. Newer browsers take advan- another. If scaling or effects have been applied to a linked tage of DHTML, which allows image, then any image that replaces it will also have the you to overlap artwork layers. scaling or effects applied to it. (This can be affected by the Top level layers can be converted Placement Options command in the Links palette menu. to CSS layers on export from the This command lets you set options for linked objects, Save for Web dialog box, and you such as whether the incoming art remembers transfor- can specify what layers to export mations such as scaling, or whether it's placed according from the Layers tab there. Chapter 11 Web & Animation 365
What is Graphics Server? to other characteristics, such as proportions, file dimen- Adobe Graphics Server is an image sions, or how it fills the bounding box. See the User Guide server product that allows you to for more about Placement Options.) automatically generate graphic Graph variables allow you to design a graph using content for the Web in real time. Illustrator's graph tools and link the graph to a database; It uses complex scripts to take when data changes, the graph is automatically updated. Illustrator templates and update The final variable type is visibility, which allows you to them with a database as a user show or hide artwork. You define whether artwork is vis- browses a Web site. ible or not simply by showing or hiding the layer or sub- layer for that artwork in the Layers palette. To define a variable, open the Variables palette Exploiting data sets (Window > Variables). Type some text on the Artboard Illustrator's variables are all based and click on the Make Text Dynamic button on the on the XML standard. You can im- Variables palette. (The same button changes to Make port and export variable libraries Graph Dynamic or Make Linked File Dynamic depend- with ease via the Variables palette ing on your selection.) Use the same technique to define menu. For a detailed description other kinds of variables. For visibility variables, use the of how Illustrator's XML variables Make Visibility Dynamic button. are defined, see the XML Gram- You can also store multiple data sets in Illustra- mar guide PDF on the Adobe Illus- tor—which almost makes Illustrator itself into a database. trator CS application CD. Once you've defined your variables, click on the Capture Data Set button (or choose Capture Data Set from the Variables palette menu). You can then change the data of Variables and objects your variables, capture another data set, and repeat. At The following variables can be ap- that point, you can use the Previous Data Set and Next plied to the following objects: Data Set icons to step between data sets and see the data • Visibility: any layer, group, or update on your screen. This is a great technique for seeing object how multiple versions of data will look when you design • Text String: any text object your template. Or, on the other hand, if you have multiple • Graph Data: any graph object versions of a design or layout to present to a client, you • Linked File: any linked file could assign the same variable to equivalent attributes in object each version of the layout design. 366 Chapter 11 Web & Animation
Ivan Torres Symbols can dramatically reduce file size, especially in art destined for the Web. Artist To create the body parts with mirrored twins Ivan Torres began this beetle by first creating on opposite sides of the beetle body, he used individual body parts, many of which were the Reflect tool, chose Vertical and clicked complex gradient meshes. (To learn more Copy. When he had completed the illustra- about creating and editing gradient meshes, tion, Torres chose File > Export and selected see the Blends, Gradients & Mesh chapter.) Macromedia SWF format. In the pop-up dialog Then he converted the parts into symbols by box, he picked Export As: Al File to SWF File. dragging and dropping each onto the Symbols After opening Macromedia Flash (SWF), Torres palette. To assemble the beetle from body imported the Illustrator Flash file (File >Import) part symbols, Torres dragged the parts from and then used Flash's tools to manipulate the the Symbols palette and dropped them on the body part symbols to create an interactive artboard, creating instances of the symbols. animation. Chapter 11 Web & Animation 367
Off in a Flash Making Artwork for a Flash Animation Overview: Sketch character artwork; create brushes and blend objects for moving parts in the anima- tion; export the artwork as a static Macromedia SWF file and a SWF animation; preview animations in Illustrator. Seattle artist and animator Kevan Atteberry knows how to get the most from Illustrator when preparing artwork for animation in Macromedia Flash. Besides making his Illustrator file a sketchpad filled with the eyes, ears, arms, and legs of the character he will animate later in Character parts sketched with a custom calli- graphic brush (see the Brushes chapter for help Flash, Atteberry uses the Layers palette to preview parts with brushes) of the animation. He also exports a Flash animation from Illustrator to view as a draft version as he works on the final animation in Flash. 1 Sketching characters, drawing body parts. Atteberry began with a custom calligraphic brush, sketching a series of facial expressions and figure poses, honing the visual character of a lemur until he was satisfied with the characterization and ready to construct the lemur's body parts. Once you're done drawing your character's parts, you can keep your artwork as Illustrator objects or turn the artwork into symbol instances. It takes fewer steps to convert your artwork to symbol instances in Illustrator than to bring your artwork into Flash and make symbols there. Also, if you plan to export a Flash movie from Illus- Symbols palette displayed in Large List View trator, turning your character parts into symbol instances 368 Chapter 11 Web & Animation
results in a smaller and faster-loading Flash file. To make symbol instances, select the artwork for each part body you drew and Shift-drag it into the Symbols palette. After you release the mouse button, Illustrator adds the artwork as a symbol in the Symbols palette and replaces the selected artwork with an instance of the sym- Two of the brushes Atteberry created for the bol that was just made. (See the Brushes, & Symbols chap- moving parts ter for more on symbols and instances). 2 Making brushes, creating blends for objects, expanding blends, and creating symbols. For any part you animate, you will need to create a sequence of parts— for example, a leg that moves from straight to bent. Atte- The straight and bent lemur legs representing berry created art brushes for the lemur's moving parts, so the extremes of a motion sequence that Atte- berry used to create a Blend he could paint each part in the motion sequence with the brush. (This saved the effort of creating separate art for each part in the sequence.) First, draw a straight version of the part. When you have the look you want, drag-and- drop it on the open Brushes palette. In the New Brush dialog box, choose New Art Brush. Next, you'll create artwork for the two extremes in the A blend using three steps created between the straight and bent lemur legs motion sequence. Draw the straight part, and a few inches away draw the bent part. Select both paths and apply Al instances to Flash symbols the art brush to both. Now, to make other parts in the If you make symbols in Illustra- movement sequence, make sure both paths are selected tor and want to import them into and choose Object > Blend >Make; then choose Object > Flash, be sure to make instances Blend > Blend Options and key in the number of steps in of your symbols first. When you the Spacing: Specified Steps field. Consider using a small export an SWF file from Illustrator, number of blend steps—Atteberry uses three or four—so the Symbols palette is not export- that if used as frames in a Flash animation, your SWF file ed with the SWF file. Flash will rec- will have a smaller number of frames and a smaller file ognize Illustrator's instances in the size. Finally, expand the blend (Object >Blend > Expand) SWF file, however, and add them and Ungroup it so you have separate objects to use in con- as symbols to its own Library. structing poses for the motion sequence. Exporting an SWF file 3 Exporting an SWF animation. Once your artwork is Illustrator's three Export As op- complete, you can export the file as a draft or final anima- tions for exporting an SWF file tion that you can view in a browser or in the Flash player. produce files you can import into To prepare your file for animation, first add as many the Macromedia Flash application. Chapter 11 Web & Animation 369
layers as frames needed to show the motion sequence. Treating each layer as an animation frame, assemble the artwork for a particular pose or step in the motion sequence on each layer. Move from layer to layer, creating renditions of the character on each layer until the char- acter has performed all of the poses or movements you want to preview. When you have completed all the layers, select File >Export. From the Format pop-up, select Mac- romedia Flash (SWF) and in the Format Options dialog box, choose Export As: AI Layers to SWF Frames. If your animation will use a lot of frames, or will include complex motion sequences that require many intermediate poses or steps, create the final animation in Flash instead of in Illustrator. Flash's tweening commands automatically cre- ate many of the intermediate poses you would otherwise assemble manually in Illustrator. There is another animation technique you can use to preview motion—from within Illustrator itself. Atteberry constructed a draft version of part of the animation to preview the look of objects and of the motion sequence. To do this, you can construct a preview by first following the steps described above for positioning poses on succes- sive layers. After you've filled all your layers with artwork, select Palette Options from the Layers palette menu. Click on the Show Layers Only checkbox to enable this option and key in 100 pixels in the Other field. To preview the animation, position the cursor over a Layers palette scroll- ing arrow and press the mouse button to cause the layer Previewing a motion sequence using Illustrator's Layers palette as a crude film projector thumbnails to scroll like frames in a projector. 4 Exporting an SWF file to import into Macromedia Pasting into Flash Flash. Another use of your artwork is to export it as an You can copy Illustrator artwork SWF file and then import the SWF into Flash to develop and paste in Flash. Be careful, the finished animation. To export, choose File > Export though—some Illustrator artwork and from the Format pop-up, choose Macromedia Flash with complex styles and bitmap (SWF). Then, in the Format Options dialog box, choose effects will not look correct when the Export As option that saves the SWF in the format pasted in Flash. (single frame file, animation file, or multiple files) that you need. 370 Chapter 11 Web & Animation
Kevan Atteberry To assist in constructing his animation "Millard and the Pear," which is described in the previ- ous lesson, artist Kevan Atteberry developed a file of recyclable parts—a cartoon "morgue"— from which he copied parts and pasted them in the file in which he created the animation. Atteberry selected the instance and chose To trim the file size of the animation, Atteberry Object > Expand. After editing the artwork, converted the artwork for parts into symbol Atteberry selected the artwork and Shift- instances by Shift-dragging them to the Sym- dragged it to the Symbols palette to automati- bols palette. When he needed to edit a symbol, cally convert it back into a symbol instance. Chapter 11 Web & Animation 371
Layering Frames Turning Layered Artwork into Keyframes Overview: Draw artwork for print; design animation sequences using artwork; create layers and lay out art and text in positions for anima- tion keyframes; export layers as Shockwave Flash frames. After designing the brand identity, menu artwork, and a wall mural in Illustrator for The Red Grape, a Sonoma, California restaurant, Hugh Whyte of Lehner and Whyte faced one more task. He needed to turn his art- work into Flash animations for the restaurant's Web site (www.theredgrape.com). The key to recycling the artwork was to develop a productive workflow between Illustra- tor and Macromedia Flash that would allow Whyte and Mark Murphy of DigitalKick to work within the software that each designer knew best. Artwork originally created for The Red Grape's printed restaurant menu 1 Drawing artwork and planning objects and type for keyframes. While his drawings of people and food were originally designed for the printed menus, Whyte returned to the artwork and prepared it for the Web as a Flash animation. If you are more comfortable designing in Illustra- tor than in Flash, stay in Illustrator and use the artwork you've already created. Think about how your artwork will move in the animation sequences you plan. Identify the starting and ending locations of each object in an animation sequence. Also note where objects will change direction as they move during the sequence. 2 Arranging artwork on layers. To facilitate their collab- Planning an animation sequence by positioning oration, Whyte and Murphy devised a workflow in which objects and text at beginning and end of the sequence Whyte created in Illustrator what Murphy would use as 372 Chapter 11 Web & Animation
keyframes in Flash. You can do the same (even if you will be producing the final animation yourself in Flash) and enjoy the ease of using Illustrator to build the foundation of your animation. Begin by creating a new file (File >New). In the default layer of the new file, arrange objects and text in the posi- tions you plan for the first frame of the animation. Next, duplicate the default layer by dragging the layer name and dropping it on the Create New Layer icon at the bottom of the Layers palette (see the Layers chapter for more on managing layers and the artwork on them). In the new layer, arrange the objects and text for their next positions in the animation sequence. These positions might be the final ones in the animation, or points in the middle of the sequence where something occurs (for example, a text object stops moving). Continue creating new layers, copy- ing and pasting artwork, and positioning the artwork, until you've created as many layers as you'll need to cover the beginning, end, and any important intermediate frames of the animation. Keep in mind that you don't need to make every frame that will appear in the final animation. That would Artwork for the final animation sequence ar- ranged on three layers; the Layers palette show- be unnecessary! Instead, create layers and arrange the ing the layers in the sequential frame order of the animation text and graphic objects on them for the critical frames (which will be used as "key frames" in Flash). Once exported, the Flash software will generate the in-between frames (or "tweens") to fill in the frames you haven't cre- ated, saving time and producing a smaller Flash file size. 3 Exporting the Illustrator layers as Shockwave Flash frames. When Whyte finished building the file, he deleted any artwork or layers that weren't required as Flash frames. To save the file, choose File>Export and from the Export dialog box, choose Macromedia Flash (SWF) from the Format pop-up. Click Export, and in the Macromedia Flash (SWF) Format Options dialog box choose AI Layers to SWF Frames. Set the other dialog options as you prefer and then click OK. Macromedia Flash (SWF) Format Options dialog Chapter 11 Web & Animation 373
Webward Ho! Designing a Web Page in Illustrator Overview: Set up a document for Web page design; use layers to struc- ture artwork for pages and frames; save layouts as template images; slice text and artwork and save an HTML file and sliced image files. If you are comfortable designing and drawing in Illustrator, why go elsewhere to design your Web pages? Steven Gordon uses Illustrator to design and preview Web pages, create comps for client approval, export a lay- out as a template for use in Adobe GoLive, and slice and optimize artwork before saving it for use on Web pages. 1 Choosing document settings. With Illustrator, you can draw and organize artwork to design a simple Web page Gordon constructed the Cartagram Web site around a two-frame design; the black rectangle or a more complex page with multiple frames. To start represented the top frame's Web page, used for the logo and main navigation controls; the other your page, create a new document (File >New). In the colored rectangles served as a design grid for dividing areas of the Web pages that would load New Document dialog box, set Units to pixels, specify in the bottom frame an Artboard size in pixels equal to that of your intended Web page size, and choose RGB Color for Color Mode. 216 colors, or millions? You may want to create a grid (Preferences > Guides & The palette of 216 non-dithered. Grid) that will help you align and constrain artwork. Web safe colors was designed for Also, if your artwork will be exported in a bitmap text and graphics displaying on format like GIF or JPEG, consider turning on pixel 8-bit monitors. But how many preview (View > Pixel Preview) —this lets you see the anti- people are restricted to 8-bit aliasing of your artwork. (See Tip, "Anti-antialiasing," for color anymore? Not many. Most a technique that helps you reduce the amount of blurring computers are now equipped with that affects artwork when it is antialiased.) 24-or 32-bit video boards, render- ing Web safe colors unnecessary. 2 Structuring pages with layers and adding artwork. Let So you can choose from millions the Layers palette help you organize the layout and con- of colors, not just 216. tent of your Web page. (See "Nested Layers" in the Layers 374 Chapter 11 Web & Animation
chapter for more on making and manipulating layers.) Gordon created separate layers for the top and bottom frames of his page, and sublayers for multiple pages he designed for the bottom frame. He toggled layer visibility on to preview the layout and content of different pages in the bottom frame of his page design. Once you've set up the layer structure of your docu- ment, you're ready to add content to your page design. As you create text and graphics, and import images, use familiar Illustrator tools and palettes to help make The layer structure for the Web page design, and arrange objects. Gordon relied on the Align palette showing the top and bottom frames, and two sublayers representing separate pages designed to easily align and distribute navigation buttons in the to load in the bottom frame top frame and to center or justify colored background rectangles for both frames (using the Align to Artboard option in the Align palette). 3 Saving a Web page design and importing it into GoLive. Once your page design is complete, export it as a GIF or JPEG and import the file into Adobe GoLive as a "tracing image" to help you construct a finished HTML The Tracing Image palette in Adobe GoLive5; page. If you set up the Artboard to match the dimen- Gordon clicked the Browse icon to locate the layout image file he had exported previously sions of the Web pages you'll construct in GoLive, you using Illustrator's Save for Web command can crop your Illustrator artwork so that it matches those dimensions when exported as a bitmapped image. To do Anti-antialiasing this, either create cropmarks from the Artboard (see the When artwork is saved as a Type chapter for instructions on making cropmarks) and bitmapped image, straight lines then use File > Export, or skip the cropmarks and choose and other objects may be anti- File > Save for Web (which automatically crops artwork to aliased (blurred). To minimize the Artboard). this, first set Keyboard Increment When you begin working in GoLive, import the image to 0.5 pixels in the Preferences > you just exported from Illustrator and use it as a template General dialog box. Then make to guide you in building the page. First, choose Window > sure both View >Pixel Preview and Tracing Image; then, in the Tracing Image palette, click View >Snap to Pixel are turned the Source checkbox and the Browse icon to select your on. Next, draw and position your Illustrator-exported image. Next, adjust the HTML page's objects. Finally, turn off View > frame widths, and create text boxes and other objects in Snap to Pixel, and nudge aliased GoLive that match the Illustrator image. Repeat these objects in 0.5 pixel increments as steps with other exported images when building other needed, using the Arrow keys. pages in GoLive. —Mordy Golding Chapter 11 Web & Animation 375
Object or clipping path? 4 Slicing artwork. Instead of using your Illustrator artwork When making a slice using the as a template in GoLive, consider using Illustrator's slices Object>Slices>Create from to turn text, artwork, and placed images into elements Selection command, you'll need you can use when building your HTML pages. Slices also to decide whether the clipping let you divide a large image or layout into smaller areas path or the artwork it masks will that you can save as separate, optimized images. These become the slice. Clicking on a images will load simultaneously, and usually faster than a masked object will make a slice single large image in a Web browser. out of the object instead of the You can use artwork selections, guides, or the Slice clipping path. Click carefully! tool to divide your Illustrator design into slices. Gordon's design was divided by colored backgrounds and a masked image. (You can use non-contiguous objects for slic- ing; Illustrator will add slices to fill in any gaps between objects.) To make the slices, first choose Object >Slice > Clip to Artboard, then select an object and choose Object > Slice > Create from Selection. Repeat these steps until you've created all of the slices you need. If you need to remove a slice, select and delete it; or in the Layers pal- ette drag its name () to the palette's trash icon. The numbered slices created after using the Ob- ject >Slices >Create from Selection command 5 Saving slices, and using and previewing the HTML page. When you've finished slicing your artwork, you can save the slices as text and images. Choose File > Save for Web; in the dialog box, click on the Slice Select tool and click one of the slices. Pick the settings that you want to use in saving the selected slice. Gordon set GIF as the file format for the two blocks with solid color fills and text. For the globe image, he chose JPEG as the file for- mat and enabled Optimized to make the file size smaller. After clicking on Save, Gordon entered a file name for the HTML file (which automatically became the root name of each of the sliced image files), and made sure that HTML and Images were selected in the Format pop-up menu. After Illustrator saved the HTML file and the sliced image files, Gordon opened the HTML file in GoLive to add head tags (like meta tags) and then previewed the file in a In the Save for Web dialog box, a preview of the slices is displayed; Gordon clicked in a slice Web browser. with the Slice Selection tool to select it and then specified settings related to file format and other image characteristics in the Settings por- tion of the dialog box 376 Chapter 11 Web & Animation
Steven Gordon / Cartagram To build image-mapped buttons at the top of a travel Web page, Steven Gordon first placed a TIFF image in Illustrator to serve as a background image. Next, he drew a but- ton shape with rounded corners and gave it a white Fill and a 25% Opacity using the Transparency palette. He copied the button Attributes palette (Window >Attributes) chose six times and arranged the buttons in a row Rectangle from the Image Map pop-up menu. above the background image. To space the but- He then keyed in the button's URL link in the tons evenly, Gordon positioned the left and URL field. In the Save for Web dialog box, Gor- right buttons, selected all buttons, and then don selected JPEG as the output file format, clicked the Horizontal Distribute Space icon clicked Save, and then chose HTML and Images in the Align palette. To map the buttons to from the Format pop-up menu. He entered a URLs, he selected each button shape and in the file name in the Name field and clicked Save. Chapter 11 Web & Animation 377
Making Waves Transforming and Blending for Animation Advanced Technique Illustrator with Photoshop Overview: Create "key"frames with transformation tools; blend to create steps; transform your steps; bring the steps into Photoshop. Illustrator's transformation tools, used in combination with the Blend tool, are wonderful animation timesavers. Commissioned by Adobe Systems for a special promo- tion, Bert Monroy used these techniques to prepare many of the objects within a room for animation. 1 Establishing the "key" frames. To create an animation, you must first establish the "key" character positions. How many key frames you'll need will depend on the character, and how it will be animated. Create a character in a neutral position, and if you'll need help maintain- ing registration, draw an unstroked, unfilled bounding The first key frame; next, Rotating a copy; then rectangle, amply surrounding the character. Select the using the Add Anchor Point and Direct Selection tools to transform the copy into the next frame objects making up the character and the bounding rect- angle and Option-drag/Alt-drag a copy to the side of the original. On the copy of the character (not the bounding box), use the transformation tools and Direct Selection editing to create the next extreme position (for more on transformations, see the Basics and Zen chapters). In Monroy's animation, the characters were: fan, clock sec- ond hand, clock pendulum, plant, and the "wave." He first drew the wave in horizontal position using a gray rect- angle and a second object for the blue liquid. To create the Making certain that the first and last frame have left-tilted position, he rotated a copy of these two objects, the same number of anchor points in similar alignment for smooth blending (see "Unlocking then used the Add Anchor Point and Direct Selection Realism" in the Blends chapter for more on pre- paring objects for smooth blending) tools to adjust the liquid anchor points manually. 378 Chapter 11 Web & Animation
2 Using the Blend tool to generate the in-between steps. Also called "tweening," the secret to smooth ani- mation is to create the correct number of steps between the key frames. For video animations, smooth illusion of motion is achieved with 24 frames per second (fps) of animation; for film it's 30 fps; for on-screen animation it's simply as many frames as is needed for your anima- tion to run smoothly. To make the steps between your first two key frames, select each pair of like objects and blend between them (for help with blends see the Blends, Gradients & Mesh chapter); you can only apply a blend reliably between two objects, so you'll have to apply the blend separately for each pair of like objects (including your bounding rectangle), making sure that each pair has the same number of anchor points, and that you select the correlating anchor point in each object when blend- ing. For the wave, Monroy first blended in 12 steps from box to box, and then from liquid to liquid. Since the same number of steps was chosen for each transition, the liquid The outer objects after blending (left column), blends were perfectly registered within the box blends. then blending the inner wave (right column)— Note: Selecting the upper right point on the wave gives the smoothest blend 3 Transforming blends to extend the animation. Rather than continually starting from scratch, it's often easier to rotate, scale, shear or reflect your blends to extend your animation. Monroy selected the blended boxes and waves, and Reflected them vertically as copies (see the Zen chap- ter, Exercise #9) to create the right-side rocking motion. 4 Pasting into Photoshop. With Illustrator still open, launch Photoshop and create an RGB document larger than your biggest key frame. In Illustrator, copy each character frame and bounding box, and then move to the Photoshop file and paste "As Pixels" to create a new layer with that step. With that object still in memory, also paste "As Paths" for easy re-selection. Monroy used his paths to make selections for applying special effects locally—using Alpha Channels to create effects such as The option to "Paste As Pixels" or the darkening and bubbles in the liquid. (For more about "Paste As Paths" when pasting from Illustrator to Photoshop; the frames after pasting into lay- Photoshop see the Illustrator & Other Programs chapter.) ers; the wave after effects using Alpha Channels Chapter 11 Web & Animation 379
Illustrator & Other Programs 382 Introduction 382 Placing Artwork in Illustrator 383 Illustrator & Other Programs 384 Illustrator & Adobe Photoshop 385 Illustrator & Adobe InDesign 385 Illustrator, PDF & Adobe Acrobat 386 Illustrator & Adobe Streamline 386 Illustrator & 3D programs 387 Gallery: Bert Monroy 388 Illustrator with Photoshop: Software Relay: An Illustrator-Photoshop Workflow 391 Gallery: Rob Magiera 392 Advanced Technique: Illustrator with Photoshop: Shape Shifting: Exporting Paths to Shapes in Photoshop 394-407 Galleries: Judy Stead, Timothy Donaldson, April Greiman, Lance Hidy, David Pounds, Ron Chan, Louis Fishauf, Filip Yip, Chris Spollen, Bryan Christie, Eliot Bergman, Tom Willcockson, Joe Jones
Illustrator & Other Programs Prevent color shifts This chapter showcases some of the ways you can use If at all possible, you'll want to Illustrator together with other programs. Although the avoid color space mismatches and range of work you can create using Illustrator is virtually conversions, especially if you use limitless, using other programs together with Illustra- any kind of transparency. If you tor increases your creative opportunities, and in many use color management, choose instances can save you significant time in creating your your settings in Illustrator and final work. One of this chapter's highlights is the step-by- then use the same settings in Pho- step technique by renowned artist Rob Magiera for bring- toshop and InDesign; and when ing Illustrator images into Photoshop. you exchange PSD files between We'll begin by discussing how you can place artwork Illustrator, Photoshop, and InDe- in Illustrator, and then we'll provide a general look at sign, include the color profiles in how Illustrator works with other programs. Next we'll the files. —Pierre Louveaux examine how Illustrator works with specific programs, including Photoshop, InDesign, Acrobat, Streamline, and Is EPS obsolete? other 3D programs. For information about working with If your application (e.g., Illustra- Illustrator and other web or animation programs, see the tor, Photoshop, or InDesign) can Web & Animation chapter. place or open the native Al, native PSD, or PDF 1.4 formats, it's bet- PLACING ARTWORK IN ILLUSTRATOR ter to use those than EPS, because Illustrator can place more than two dozen different types they may preserve transparency, of file formats. The major choice you'll need to make is layers, and other features. whether to link or embed the file. When you link a file, you don't actually include the artwork in the Illustrator Which formats can you link? file; instead a copy of the artwork acts as a placeholder, Any BMP, EPS, GIF, JPEG, PICT, while the actual image remains separate from the Illus- PCX, PDF, PNG, Photoshop, Pixar, trator file. This can help reduce file size, but keep in mind Targa, or TIFF file can be placed that linking is supported only for certain formats (see linked (rather than embedded). Tip at left). On the other hand, when you embed artwork, you're actually including it in the file. The Links palette So you think it's linked? keeps track of linked files, but also lists all the raster Applying a filter or flattening images used in your document, regardless of whether transparency of a linked image they were created within Illustrator or embedded via the will automatically embed the Place command (see the Illustrator Basics chapter for image. In addition to increasing more). For details on how to place artwork (by linking the file size, Illustrator will no and/or embedding it), see "Importing Artwork," in Chap- longer be able to update the link. ter 2 of the User Guide. 382 Chapter 12 Illustrator & Other Programs
In general, you should embed artwork only when: Resolution of placed images • The image is small in file size. Greatly reduce your printing time • You're creating web graphics. and ensure optimal image repro- • The placed file interacts with other parts of the document duction by properly setting the via transparency. Embedding will ensure proper flatten- pixel-per-inch (ppi) resolution of ing and printing. raster images before placing them • You want more than just a placeholder with a preview into Illustrator. The ppi of images (e.g., you want editable shapes and transparency). should be 1.5 to 2 times the size of • Linking isn't supported for the format your artwork is in. the line screen at which the final In contrast to linked images, embedded image objects can image will print. For example, if be permanently altered. your illustration will be printed in a 150 dpi (dots per inch) line And you should link (rather than embed) when: screen, then the resolution of • Your illustration uses several copies of the same image. your raster images would typically • The image is large in file size. be 300 ppi. Get print resolution • You want to be able to edit the placed image using its specifications and recommenda- original application. tions from your printer before you • File will be used in Illustrator 88 through version 6.x. begin your project! Another argument for linking files is that you can make changes to a linked file and resend only the linked file to Open sesame your service bureau or client. As long as it has exactly the If you're working in an applica- same name, it'll auto-update without further editing of tion that doesn't allow you to the Illustrator document itself. save in a format that Illustrator imports (such as EPS or PDF), but ILLUSTRATOR & OTHER PROGRAMS does print to PostScript, you may The first consideration when moving artwork between be able to get the vector data by Illustrator and other programs is to decide which objects printing to File and then opening in your artwork have to remain as vectors and which can the raw PostScript file from within be allowed to become rasterized. Next, is whether you Illustrator. want to move the artwork between two open programs on your desktop (e.g. by using Copy and Paste or Drag and Drop) or if you will be moving your artwork via a file for- Faster and smaller "saves" mat. Finally, consider whether you want to move only a Turning off the PDF option when few objects or the whole file. The details of how to do the you save reduces file size and above vary depending on the program and are described makes saving faster. However, if in the corresponding program sections below. you're going to be importing your Depending on the application, when you drag or artwork into certain programs paste objects between Illustrator and another open pro- (e.g. InDesign and LiveMotion), be gram, your objects will either drag or paste as vectors or sure to leave PDF compatibility on. Chapter 12 Illustrator & Other Programs 383
as raster objects. In general, any program that supports PostScript drag and drop behavior will accept Illustrator objects via Drag and Drop (or Copy and Paste). For Mac OS only, you need to be sure that the AICB (Adobe Illus- trator ClipBoard) is selected in the File Handling & Clip- board panel of the Preferences dialog box at the time you copy the objects between AI and the other application. When you are dragging and dropping, your Illustrator art will automatically be rasterized at the same physical size, or pixel-per-inch ratio, that you have specified in the raster-based program to which you're dragging the art. You can Save (via Save, Save As, Save for Web, or Save for Microsoft Office) or Export your Illustrator artwork to many formats, including: EPS, GIF, JPEG, Legacy.ai, PDF, PICT, PNG, Photoshop (PSD) SVG, SWF, and TIFF. See Bert Monroy's Photoshop and Illustrator Knowing what file formats your other application sup- lesson, "Pattern Brushes" in the Brushes & Sym- bols chapter ports and the type of information (vector, raster, layers, paths) you want to bring from Illustrator into the other program will help you determine which format to use. See the User Guide for detailed information about these file formats. ILLUSTRATOR & ADOBE PHOTOSHOP As the lessons and galleries in this chapter demonstrate, Illustrator File Handling and Clipboard Prefer- the creative possibilities for using Illustrator and Photo- ences dialog box. To copy and paste vectors to Photoshop set the clipboard preferences as shop together are limitless. shown above. (See the User Guide for more about these options) By default, artwork that you move from Illustrator to Photoshop via the Clipboard (or by using drag and drop) will be rasterized (see figure at left for how to keep vectors as vectors). Moving artwork via a file format can be more straightforward, since Illustrator can open and export Photoshop PSD files. But the rules governing how Illustrator layers get translated into Photoshop lay- ers (and whether or not those layers get rasterized in the process) are complex. How to use these methods to move most types of Illustrator objects (such as simple paths, text, compound paths, and compound shapes) between See Adam I Lein's Gallery in the Transparency Illustrator and Photoshop is covered in detail in the cor- & Appearances chapter to find out how he used the Excel Chart Wizard and for this Pie Chart responding sections of the User Guide. 384 Chapter 12 Illustrator & Other Programs