Basic Tweening

Step 1. Because this will be a tutorial on basic tweening we will be using a document based on only two layers. So create a new document in Photoshop first, it doesn't matter what size but I advice you create something near 450x100 pixels and fill the background with black, it's not necessary to fill it with black but for tutorial purposes and to better appreciate this tutorial I suggest you do so.

Step 2. After that, create a new layer [ctrl + shift + alt + N]. In the new layer make a custom shape, or whatever shape you like, mine is the Radioactive custom shape then position it on the left side of the picture. Make sure that Fill pixels option is selected and not Paths or Shape Layer.






Step 3. Now this time we will import the document to ImageReady. Do this by pressing the bottom most button in the tools palette or pressing Shift + Ctrl + M.



Now I will acquaint you with the windows that are vital to this task.



This is the Layers Window. It has all the functions as in Photoshop but with added difference. You can perform different actions to individual layers as usual but the changes you've made will only be applied to the specific frame that you have selected. This is how animation is achieved.



This is the Animation Window. This is where you can select, create or delete individual frames and you can also choose the delay time, in seconds, for each frame. Notice the Play button, by pressing it ImageReady will begin to display chronologically the frames in the work area just like what they do in cartoons.

Step 3. Now we will begin the tweening!
First click the Duplicate Frame button. Notice that another frame will appear, this will be frame number 2, for now.

Step 4. Now that we have two frames we can now decide were our Radioactive Logo will move to. Any alterations made to the second frame will be the result of the tweening process. Now move the Radioactive Logo, or the shape that you made, to the right side of the picture.



Step 5. After moving the layer to the right side click the Tween button and a new dialogue box will appear.



Follow this settings and hit ok. Voila! Press play and your picture is now animated.



================================================================

How do I save as .gif?

Ok, so after all that tweening and stuff your work won't mean anything if you can't use it, right? You can't just save it directly 'cause it'll be saved as a .psd, and PSDs are the raw and complete save file of your work. It can't be used for anything else. So here's what you do, go to File > Save Optimized As... a new dialogue box will open. In the dialogue box, make sure that the Save as type you selected is Image only (.gif) otherwise your document will be saved as an html. Now you're through!

Remember, the only real way to make great animations is through practice and experimentation! Hope this helps you all!

By the way, there is so much more to ImageReady than just making animated GIFs, The banner and menu of this website was created using ImageReady. It has the capability to automatically generate HTML and JavaScripts.