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 steve@outlawfx.com.

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

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

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