Tutorial: Page (1) of 3 - 04/18/02 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Fast, Simple Web Effects with Adobe Illustrator

How to create unique Web animations using Illustrator 10 and LiveMotion 2 By Steve Holmes
Contact the author: Steve Holmes is a Web designer, animator and LiveMotion guru. As an expert presenter and Director of Design and Animation Training for Total Training Inc., Steve develops learn-by-video packages on Adobe products. Steve is also the founder of OutlawFX, a design firm specializing in 3D web design and visual effects for digital media. You can reach him at [email protected].

Designers who work in Adobe Illustrator software are well familiar with its print design capabilities and vector graphics handling. What Illustrator users may not realize is that the power to create fast, easy Web animations is right beneath their fingertips. From a simple blend of two Bezier lines to twisted distortions of logos, text and images, Illustrator 10 generates layered graphics that can be dragged as-is into LiveMotion 2 for animation. Plus, new effects in Illustrator 10 translate directly into LiveMotion, retaining their transparency, layer and object names and correct bounding box areas. The integration between Illustrator and LiveMotion means that you can create sophisticated Web animations in less time and effort than might otherwise be required using other programs.

Here are a few examples of how to animate Illustrator files, regardless of your level of experience. For example, Illustrator experts who have never tried their hand at Web animation sometimes overlook the simple technique of animating a blend. Animation experts, on the other hand, may not be aware of new time-saving and creativity-boosting features for generating Web graphics using Illustrator 10. In either case, the following tips bring you up to speed quickly on building vector-based Web animations.

Technique 1: Create Morphing Animations using Blends
Here's a simple example. Draw two Bezier lines in Illustrator with the Pen tool, one with a yellow stroke, the other with a red stroke. Give each a very different shape, but ensure they have the same number of points. Do a Blend between the two in, say, 20 steps, then Expand the blend into separate shapes. In the Layers Palette, use the Release to Layers (Sequence) option to place the paths onto individual layers. Save, and drag the resulting Illustrator file into LiveMotion. Convert the layers into a sequence, and you've now created a morphing animation where one line melds into the other in shape and color.

Download the Adobe Illustrator project file here.

Take this blending technique to the next level when releasing the layers by using the Build option instead. When in LiveMotion, your animation not only morphs into the second object, but appears to ĎgrowÓ into it. Experimenting with this option can result in almost 3D-like morph animations. Try it and you'll be amazed with its simplistic, yet intricate, effects.

Download the Adobe Illustrator project files here and here.

Page: 1 2 3 Next Page

Related Keywords:Fast, Simple Web Effects with Adobe Illustrator

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Fast, Simple Web Effects with Adobe Illustrator by DMN Editorial at Aug. 03, 2004 11:05 pm gmt (Rec'd 1)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • [ServletException in:/common/ads/links.jsp] Unable to load class for JSP'

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved