If you ever want to know how to make your own animated avatar, to use in forums and chats, you can do so through animation with Illustrator and ImageReady. If you want an animated banner, and wish to know how they’re made, learn from this tutorial. This post will explain a very simple process that anyone can use to create these things, in no time at all! All you need are the programs, Adobe Illustrator, any version will do, and Adobe ImageReady. Both of these programs are available in the Adobe Creative Suite.
First, you’ll want to open up Illustrator. Determine what size of animation you want to create, and create a new document that size. If you’re not sure what size to make your document, go online and look at the sizes that other people are using. Here are a few standard sizes to get you started:
Note: These sizes are all in points, not inches!
- Letter board (large banner) 728 x 90
- Full Banner 468 x 60
- Half Banner 236 x 60
- Rectangle Banner 180 x 150
- Square Banner 125 x 125
- Large Rectangle Banner 336 x 280
- Micro Bar 88 x 31
- Standard Side Bar 120 x 600
- Wide Side Bar 160 x 600
- Standard Avatar Size 80 x 80
Of course, you can create your document in whatever size you like, however, these are some of the most commonly used sizes, online.
As a rule of thumb, unless you’re working on a document for print, you should always work in RGB mode. To ensure that your animation with Illustration and ImageReady displays optimum results, you might want to consider working with the web-safe color pallet as well. You can find this pallet within the default color pallet, by clicking on the small arrow in the top right corner, and by opening up the swatch library.
The next step in the process is to create the first frame of your animation.
Keep it simple to start with.
You can do something as simple as a circle to experiment. Once you’ve created your first frame, you want to save it for the web. This is an option under the save menu. Make sure that you’re saving it as a gif, and name it ‘frame 1’.
Note: If you’ve got a lot going on outside of the document area, you might want to consider setting up crop marks. This is very easy to do, and will only save what’s in the document area. Just go to object-crop area-make, and you’ll see crop marks appear around your document. Make sure nothing’s selected when you do this, or it won’t work!
Next, go back to your document, and slightly move your graphic, in the direction that you want it to move. If you’re creating a bouncing circle, you’ll want to move it up, or down, whichever way you want it to bounce first. Then, just like before, save it for the web, as a gif, and name it ‘frame 2’.
Repeat this process until you have all of the frames that you want for your animation, naming each one accordingly. For optimum results, you might want to limit the number of frames that you use to five, or six. The more frames that you add, the bigger the file size becomes, and the longer it takes to load. Once you have all of your frames, go ahead and close the Illustrator.
The next step is to open ImageReady.
Open up all of the frames that you’ve just created in illustrator, in this program.
Make sure you have the selection tool selected, and drag all of your frames into one of the documents. It doesn’t really matter which one, but it’s convenient if you just use the first frame. You’ll notice that as you drop a frame into the document, a new layer will be created for each frame. This is what you want!
After you’ve compiled all of your frames into one document, you’ll need to make sure that the frames are aligned. If you don’t have them properly aligned, it will make for a jumpy animation. After you’ve appropriately aligned the frames, if it’s not already opened, go to the window menu and open up the animation pallet. Click on the arrow in the upper right hand corner of the pallet, and select the ‘make frames from layers’ option. You’ll see that all of the layers are then converted to frames.
If you press the play button on the animation pallet, you’ll be able to see a very fast version of your animation. You can adjust this by selecting the timing that you want between each frame, underneath each individual frame. You can also choose whether you want it to be a continuous animation, or if you just want it to play through once. Once you have your settings to your liking, choose ‘save optimized as’ and name your animation. Close the program, and double click the file you’ve just created, and you should see your animation!
Your first animation will probably take a little bit of time, but once you become comfortable with the process, you’ll be popping animations out in no time! A couple of things to remember:
-Decide what size to make your document.
-Remember to work with web-safe colors.
-Set up crop marks, so you only save what’s inside of your document.
-Keep it simple until you’re comfortable with the process.
-Have fun with it!