Futo Maki
The ImageReady Windows
ImageReady can do tons of things, but for an Animated Gif, these windows are all you need really.
1. The Image Window
exclaim This gets created when you make a new File or Open an existing one. There are 4 Tabs.
Original- The only tab you can have open if you want to edit the file
Optimized- Gives you the basic idea of how the final will look like.
2-Up - Original and Optimized
4-Up- The Original and three Optimized options.
2. The Animtion Window
exclaim Here is where the magic happens. I have Frame 1 and 2 so far. To make a new frame click on the New Frame icon, the little page with the corner turned. Right next to that is the Trash can, this deletes the selected frame. A nice thing to change first is the Looping option. You want it set to Forever. To the right is the playback options, this is just for your viewing pleasure. The button with the circle trail is Tweening. This generally looks like crap, but play around with it if you must. Under each frame is a number, mine are at .1 sec. When you first create a frame this is usually at 0 sec. That is way to fast. Play around with times to make your animation flow properly. If you select Other from theh timing drop down you can enter any number you wish.
3. The Optimize tab
exclaim This is your best friend. In order to save a .Gif in Image Ready you have to Save Optimized, so this tab is what makes your gif look good. If you change the New Window Tab(1) to Optimized you can get a better feel as to what you are changing. Preset [Unnamed] is fine unless you are going to save a preset of your own. Format GIF is just what we want.
-----Color Table:
arrow Reduction- Perceptual is usually what I use, you can fiddle with the Others.
arrow Colors- This is all up to your image. If you can live with 128 or less, use it, if you are doing a really nice drawing or using photos you need this set to 256.
arrow Web Snap- I hate web snap, play with it if you must...
-----Dither: I hate dither, it makes little dots to compinsate for colors it doesnt have. If you can avoid it, please do.
-----Transparency: Have a white background and what it to be transparent, check this option on. Surprisingly enough the file size goes down when you have Transparency on.
-----Options- Play with these to see if they lower your file size without making it look like crap.
4. Layers! _ Futo Maki loves layers!
exclaim The Layers tab and the Animtion Frames are closely related. A Frame of animation is made up of what Layers you have on. In Frame 1 of my animation I have the Text Layer 1 on, in Frame 2 I have the Text Layer 2 on, but Text Layer 1 off. The Layers tab is no different that in Photoshop. You can create new Layers, create Mattes, lock layers, hide layers, change their transparency and link layers together for easy moving.
5. Tools Window
exclaim Here you have the basic tools, not too different from most image apps. I am assuming that you have your frames already, before you enter Image Ready so I won't go in to deep. The Text tool is handy and if you need to make minor changes there is the Pencil tool wich draws in pixels, or hold it down to get the Brush tool. Next to that is the handy dandy eraser.
To save an animation go to File-> Save Optimized As
Clicking on Save As will only save a .PSD file, used only in Photoshop and ImageReady.. and possibly other Adobe Programs.
Importing frames from a Movie
exclaim Image Ready can open .MOV, .AVI, .QT, .MPG movie types(there's a big list of stuff it can open, but these are the main ones.
For this tutorial I am opening up a .MOV of my Nintendog Kiba.
I go to File- Open and select my Kiba.MOV
This is what comes up.
You should select a Range to Import. A large movie will be to long and cause ImageReady to cry.. and maybe freeze. so the shorter the clip the better.
You can choose:
-----From Beginning to End: Good only if the clip is short
-----Selected Range Only: YES! Click on that.
Move the slider to where you want your clips to start then hold down SHIFT and drag the slider to where you want your clip to end.
You can also change the frames it captures. For a smaller file Limit to Every 2nd Frame or even 3rd Frame.
Click OK and wait for Image REady to Read your Movie.
---When ImageReady is done you will see that each frame of animation is now it's own Layer and it is timed out already. Mine was a bit fast since it was .06 seconds. I selected all of the Animationi Frames and changed the first one's time to .08 secs, all of the frames changed and my animation isn't as fast.
Optimizing a Movie.
---With 20 frames this movie was big... like 480KB, way to big. Since I had black around the edges I used the crop tool to crop it out of my movie. If the main action is only in a certain place for you, try removing the unneeded area.
---My Image Size was 251 pixels wide and 198 pixels tall. If I am going to make this clip more friendly I need to scale it down, Ill try 60%. That cut my file size down to 193KB.
The less frames you have the smaller the file size will be. I have frames of my dog running towards me, but all I really want is the backflip, so I Delete the last 7 frames. Now my file size is 119KB. I'm going to shoot for Sig Size, so I need it to be under 98KB. Since the animation is fast I removed the Second frame(it wasn't a big jump from frame 1 to 3, so it still looks good. And Frame 5 which was the dog coming down. Removing frames is really up to you, if you remove a frame does it still look good? If not Undo your last remove. My File is now 91KB, Perfect! Now tomake it look better I'm going to hold the last frame for a while longer, like .5secs, same with the first frame. The timings will depend on your video and what looks best.
I Save Optimized As and now I just have to host it online.
ImageReady can do tons of things, but for an Animated Gif, these windows are all you need really.
1. The Image Window
exclaim This gets created when you make a new File or Open an existing one. There are 4 Tabs.
Original- The only tab you can have open if you want to edit the file
Optimized- Gives you the basic idea of how the final will look like.
2-Up - Original and Optimized
4-Up- The Original and three Optimized options.
2. The Animtion Window
exclaim Here is where the magic happens. I have Frame 1 and 2 so far. To make a new frame click on the New Frame icon, the little page with the corner turned. Right next to that is the Trash can, this deletes the selected frame. A nice thing to change first is the Looping option. You want it set to Forever. To the right is the playback options, this is just for your viewing pleasure. The button with the circle trail is Tweening. This generally looks like crap, but play around with it if you must. Under each frame is a number, mine are at .1 sec. When you first create a frame this is usually at 0 sec. That is way to fast. Play around with times to make your animation flow properly. If you select Other from theh timing drop down you can enter any number you wish.
3. The Optimize tab
exclaim This is your best friend. In order to save a .Gif in Image Ready you have to Save Optimized, so this tab is what makes your gif look good. If you change the New Window Tab(1) to Optimized you can get a better feel as to what you are changing. Preset [Unnamed] is fine unless you are going to save a preset of your own. Format GIF is just what we want.
-----Color Table:
arrow Reduction- Perceptual is usually what I use, you can fiddle with the Others.
arrow Colors- This is all up to your image. If you can live with 128 or less, use it, if you are doing a really nice drawing or using photos you need this set to 256.
arrow Web Snap- I hate web snap, play with it if you must...
-----Dither: I hate dither, it makes little dots to compinsate for colors it doesnt have. If you can avoid it, please do.
-----Transparency: Have a white background and what it to be transparent, check this option on. Surprisingly enough the file size goes down when you have Transparency on.
-----Options- Play with these to see if they lower your file size without making it look like crap.
4. Layers! _ Futo Maki loves layers!
exclaim The Layers tab and the Animtion Frames are closely related. A Frame of animation is made up of what Layers you have on. In Frame 1 of my animation I have the Text Layer 1 on, in Frame 2 I have the Text Layer 2 on, but Text Layer 1 off. The Layers tab is no different that in Photoshop. You can create new Layers, create Mattes, lock layers, hide layers, change their transparency and link layers together for easy moving.
5. Tools Window
exclaim Here you have the basic tools, not too different from most image apps. I am assuming that you have your frames already, before you enter Image Ready so I won't go in to deep. The Text tool is handy and if you need to make minor changes there is the Pencil tool wich draws in pixels, or hold it down to get the Brush tool. Next to that is the handy dandy eraser.
To save an animation go to File-> Save Optimized As
Clicking on Save As will only save a .PSD file, used only in Photoshop and ImageReady.. and possibly other Adobe Programs.
Importing frames from a Movie
exclaim Image Ready can open .MOV, .AVI, .QT, .MPG movie types(there's a big list of stuff it can open, but these are the main ones.
For this tutorial I am opening up a .MOV of my Nintendog Kiba.
I go to File- Open and select my Kiba.MOV
This is what comes up.
You should select a Range to Import. A large movie will be to long and cause ImageReady to cry.. and maybe freeze. so the shorter the clip the better.
You can choose:
-----From Beginning to End: Good only if the clip is short
-----Selected Range Only: YES! Click on that.
Move the slider to where you want your clips to start then hold down SHIFT and drag the slider to where you want your clip to end.
You can also change the frames it captures. For a smaller file Limit to Every 2nd Frame or even 3rd Frame.
Click OK and wait for Image REady to Read your Movie.
---When ImageReady is done you will see that each frame of animation is now it's own Layer and it is timed out already. Mine was a bit fast since it was .06 seconds. I selected all of the Animationi Frames and changed the first one's time to .08 secs, all of the frames changed and my animation isn't as fast.
Optimizing a Movie.
---With 20 frames this movie was big... like 480KB, way to big. Since I had black around the edges I used the crop tool to crop it out of my movie. If the main action is only in a certain place for you, try removing the unneeded area.
---My Image Size was 251 pixels wide and 198 pixels tall. If I am going to make this clip more friendly I need to scale it down, Ill try 60%. That cut my file size down to 193KB.
The less frames you have the smaller the file size will be. I have frames of my dog running towards me, but all I really want is the backflip, so I Delete the last 7 frames. Now my file size is 119KB. I'm going to shoot for Sig Size, so I need it to be under 98KB. Since the animation is fast I removed the Second frame(it wasn't a big jump from frame 1 to 3, so it still looks good. And Frame 5 which was the dog coming down. Removing frames is really up to you, if you remove a frame does it still look good? If not Undo your last remove. My File is now 91KB, Perfect! Now tomake it look better I'm going to hold the last frame for a while longer, like .5secs, same with the first frame. The timings will depend on your video and what looks best.
I Save Optimized As and now I just have to host it online.
