Sign Up Now
Twitter Facebook Flickr Buzz
PhotoshopSociety.org
 
Search:   
 
Social Networks

LOGIN     

Go
Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Email custserv@photoshopsociety.org
 
Need Web Solutions? Get Free Sample Issue

Library: Creative Design

 

Make quick work of animating GIFs with Illustrator's 3-D effects

Added on Saturday 4th of July 2009 09:23 am EST

 
Applications > Adobe Illustrator CS/CS2, ImageReady CS/CS2
Operating Systems > Macintosh, Microsoft Windows

Animated GIF files are a great way to draw a viewer's attention to a web page. A spinning arrow can tell of a new posting to a message board, falling snow in a weather map icon can quickly convey the day's forecast, and a swimming goldfish can add a smile to a young one's face. As fascinating as 2-D animated GIFs may be, 3-D examples can be even more so, as shown in Figure A.

To create 2-D animated GIFs, ImageReady enables you to draw as well as animate your required images. However, it contains no 3-D drawing component. To solve the problem, you could use a high end application such as 3D Studio Max. But if you're looking for a not so over-the-top solution, then Illustrator's 3-D Effect coupled with ImageReady is the perfect answer. To demonstrate how to use this dynamic duo, let's start with Illustrator, and then work with ImageReady.
Although animated GIFs can be as involved as you wish to make them, generally those intended for web use are best kept simple. This helps keep download times short and ensures that the animations don't become the central focus of a page. For our example, let's create a shape and then animate it as a cube:
1. Launch Illustrator and open a new RGB document.
2. Choose the Rectangle tool from the Toolbox, and drag a square that's about 4 inches by 4 inches in size.
3. Choose the Latte swatch from the Swatches palette for the fill, and select None for the stroke to color the shape as shown in Figure B.

4. Create a new layer and locate it below Layer 1.
5. Drag a rectangle about 7 inches wide by 6 inches high. Locate ...