First you have to plan out what you want your animation to look like. I can't help you there, you just need to be creative.
Once you know that, set about making each "frame" of your animation. Again, this is somewhat subjective, but keep in mind that with animated GIFs, more frames are not necessarily better. Keep it simple in general.
You can draw elements in Illustrator if you want to start with and later open them up in Photoshop, or just make them directly in Photoshop, or even another image editing program.
Whatever you do, you need to end up with all your frames in Photoshop as layers. They can be on transparent backgrounds, or solid backgrounds. It's up to you. I'm assuming you know a little about Photoshop, but if not, check the documentation to learn about layers, etc.
Once you have all the frames as you like them, there is a small toggle button on the bottom of the tool palette. It looks like this:
When you click that, ImageReady will launch, and open the image you had open in Photoshop. The next step is setting up the actual animation.
In ImageReady, make sure the "Animation" pallette is showing. Find it under the Window menu.
You'll also need to have the Layers palette open, so you can see all the frames you created. Again, it's under the Window menu.
So basically, you use the animation palette to create frames and then select which layer, or layers, you want as each frame. How you do that is to make only the layer you want as the frame visible, and all other frames are turned off in the layers palette.
In the picture above, one of my animation frames is selected. And here is what I have checked off in the Layers palette:
I think you get the picture of how it works. You're basically telling each frame of your animation what you want visible by checking/unchecking the visibility of your layers.
The Animation palette lets you view a rough idea of your animation with a play/pause button, but do know that it is not very accurate. You'll need to view your result in a browser for a better idea of what it's looking like.
One other thing about the Animation palette is the timing controls, which allow you to tell it how long each frame should be visible. The default is set to 0 seconds, which in most cases is too fast. Just click on the time under the frame to get a pop up menu with presets to choose from, or you can make a custom time. Each frame can have it's own unique time.
Also, there is a "tweening" control, which allows you to create new frames from selecting 2 frames and tweening the transparency between them. It's not the best because it mostly only works to get a fading in/out effect, but at times it's useful. For ex. I used it to make the squashed banana fade away.
Once you've got it all done, you have to export it out as an animated GIF. Just use the File --> Save Optimized As
command. Use the default settings, and it will export it all out as an animated GIF. Drop it on a browser to preview, then go back and make adjustments as necessary.
Phew! OK, I have to stop now. This is one looong post.
I hope it helped though.
PS- you can download any animated GIF (such as mine) and open it in ImageReady to view the frames and animation timing. That's often the best way to start learning.
PSS- also, as TG said earlier, ImageReady is NOT the best application for this, but if that's what you have, I say use it.
OM
NOTE
he's referring to this post from TG:
TankGirl |K8|: Animation software for the mac....Fireworks would be a better choice than Photoshop. Fireworks is made to create gifs and gif animations and has a far superior set of tools than PS and ImageReady for this purpose.
OM'S ANIMATION TUTORIAL
OK, quick tutorial.
First you have to plan out what you want your animation to look like. I can't help you there, you just need to be creative.
Once you know that, set about making each "frame" of your animation. Again, this is somewhat subjective, but keep in mind that with animated GIFs, more frames are not necessarily better. Keep it simple in general.
You can draw elements in Illustrator if you want to start with and later open them up in Photoshop, or just make them directly in Photoshop, or even another image editing program.
Whatever you do, you need to end up with all your frames in Photoshop as layers. They can be on transparent backgrounds, or solid backgrounds. It's up to you. I'm assuming you know a little about Photoshop, but if not, check the documentation to learn about layers, etc.
Once you have all the frames as you like them, there is a small toggle button on the bottom of the tool palette. It looks like this:
When you click that, ImageReady will launch, and open the image you had open in Photoshop. The next step is setting up the actual animation.
In ImageReady, make sure the "Animation" pallette is showing. Find it under the Window menu.
You'll also need to have the Layers palette open, so you can see all the frames you created. Again, it's under the Window menu.
So basically, you use the animation palette to create frames and then select which layer, or layers, you want as each frame. How you do that is to make only the layer you want as the frame visible, and all other frames are turned off in the layers palette.
In the picture above, one of my animation frames is selected. And here is what I have checked off in the Layers palette:
I think you get the picture of how it works. You're basically telling each frame of your animation what you want visible by checking/unchecking the visibility of your layers.
The Animation palette lets you view a rough idea of your animation with a play/pause button, but do know that it is not very accurate. You'll need to view your result in a browser for a better idea of what it's looking like.
One other thing about the Animation palette is the timing controls, which allow you to tell it how long each frame should be visible. The default is set to 0 seconds, which in most cases is too fast. Just click on the time under the frame to get a pop up menu with presets to choose from, or you can make a custom time. Each frame can have it's own unique time.
Also, there is a "tweening" control, which allows you to create new frames from selecting 2 frames and tweening the transparency between them. It's not the best because it mostly only works to get a fading in/out effect, but at times it's useful. For ex. I used it to make the squashed banana fade away.
Once you've got it all done, you have to export it out as an animated GIF. Just use the File --> Save Optimized As command. Use the default settings, and it will export it all out as an animated GIF. Drop it on a browser to preview, then go back and make adjustments as necessary.
Phew! OK, I have to stop now. This is one looong post.
I hope it helped though.
PS- you can download any animated GIF (such as mine) and open it in ImageReady to view the frames and animation timing. That's often the best way to start learning.
PSS- also, as TG said earlier, ImageReady is NOT the best application for this, but if that's what you have, I say use it.
OM
NOTE he's referring to this post from TG:
TankGirl |K8|: Animation software for the mac....Fireworks would be a better choice than Photoshop. Fireworks is made to create gifs and gif animations and has a far superior set of tools than PS and ImageReady for this purpose.