Hello, this is a tutorial for creating simple animations to use in your signatures. This tutorial is going to show the steps using Photoshop CS2 and ImageReady CS2, so other versions, or GIMP may not be exactly the same.
Introduction
Overall, by combining Photoshop and Imageready, you can add animation to your signatures. There are limitations, and in no way is this a replacement for most complex animation, but for signatures, PS & IR animation options should be all you need, you're really only limited by your creativity. Let's get started:
Step 1:
The first thing you need to do is have your tutorial finished, with some layer, or layers that you would like to have animated. In the above picture, there is a simple Randy Orton image, with a pen design I quickly made that circles up and around. The goal will be to make that red design fade out to 20% opacity, and fade back in to 100% opacity.
As you can see, I have created a yellow box around the 'Export to ImageReady' button on the left, once you have the layer you wish to animate, and the rest of your signature is complete, click this button, which will automatically open ImageReady CS2 and open your PSD there.
Step 2:
Your next step is to go to the top and click windows, move your cursor down to animation. This will open the animation window at the bottom left of your ImageReady screen.
Step 3:
This is what the animation window looks like. Your window should only have one picture in it thus far. To continue with the tutorial, click the 'Duplicate Current Frame' button, which I have outlined in yellow in the above picture. After this, your animation window should look the same as mine.
Step 4:
You're going to click the second image (the one you created within the animation window) and then change the opacity of your animation layer (Layer 1 in my example, as you can see it's highlighted) to what ever you wish. In this tutorial, I am changing it to 20%. In this example, Randy Orton's red swirl design has faded, and this will be the lowest point in fades out to before it fades back in to 100%. (Note: It doesn't have to fade back in to 100%, you can make it fade in to what ever you wish, just change the first animation image to any opacity you wish.)
Step 5:
After this, you can click the play button if you want, and you will see that the design image will switch from your default opacity (image #1 in the animation window, which by default is 100%), to what ever you set the second image's opacity to (which was 20% in this example).
What you want is the visual that it is fading out and fading in, so you need more frames between the 100% and the 20% opacity images. In the image above, you will see I have created a yellow box around the 'Tween' button. This will add frames between the image you have highlighted (image #2 in this example), and the image before it (which is Image#1 in this example). Overall, click image #2 and click the tween button.
Step 6:
This is the window that will pop up. As you can see, it is stating that it will tween (add frames) between the selected layer and the default selected 'Previous Layer'. What you want to change is the 'Frames to Add' selection. The way this works is that animation quickly cycles between various images, how ever if you have 50 images overall, with one part of the image lowering in opacity 2% each image, it will appear as if that part of the image is fading out. The more frames you add, the smoother the animation will be, because there will be less change per image. Click OK.
The higher the number the better, but the higher you set the number, the larger the file size will inevitably become. This usually isn't a problem, but it is something to note. Adding 30 frames is usually enough for a smooth animation, but in this example I chose 20, but experiment with differing amounts to see the differences, and then decide on what you think looks best, but 30 is a safe number.
Step 7:
That will be the extent of your animation at this point if you click the play button on the animation window. The animation cycles through your frames quickly, giving the illusion of a fading image. However as you can see in the above image, the red design fades to 20%, and then appears at 100% again before fading. This isn't ideal, and this is happening because your last frame on the animation window is a low point (20% opacity in this example), but when the animation starts anew, it begins at frame #1 again (100% opacity in this example). We will correct this now.
Step 8:
What you are going to want to do is to add another frame of animation by duplicating your last frame, the same thing that you did in Step 3, but make sure that you have your last frame selected when you duplicate, other wise you risk adding a duplicate image some where in your animation and it will screw the process up.
Change this newly duplicated layer so that it is identical to frame #1 (which in this example is 100% opacity, as that's the change we decided to do). As you can see in the above picture, I have frame 23 selected (my last frame), and I am going to change the opacity of that frame to 100%, and then I will repeat Step 5 & 6, which is clicking the tween button and adding another amount of frames.
Step 9:
As you can see, after tweening again between your newly duplicated layer (which is identical to frame #1) with the layer before that, which would be the 'lowest' part of your animation, the animation will fade out to your lowest point (20% in this case), and then fade in (to 100% in this case) before resetting back to frame#1 and starting the process over.
If you click the play button, your signature animation will have come full circle, like so:
Lastly, in order to save your animation, go to 'File' at the top left in ImageReady CS2, and click on 'Save Optimized As'. You will have to safe the image as a .gif, instead of a .jpg if that's what you normally do, but that's just so it shows the animation.
Summary:
There are various things you can do with animation, as long as you understand how it works, by cycling through many images to give the illusion of change.
You can create effects to make it look like it's raining (by having different 'rain' images cycle), or you can have pictures 'slide' in and out of frame. I have done animation to make it look like a gun is firing, by having the animation cycle between 2-4 images of muzzle flashes, so you really are only limited by your creativity.
Thanks for following the tutorial, and it would be cool to see any results or creative ways to use the animation powers of ImageReady, so if you come up with any thing, results, or creative uses, post them here.
Introduction
Overall, by combining Photoshop and Imageready, you can add animation to your signatures. There are limitations, and in no way is this a replacement for most complex animation, but for signatures, PS & IR animation options should be all you need, you're really only limited by your creativity. Let's get started:
Step 1:
The first thing you need to do is have your tutorial finished, with some layer, or layers that you would like to have animated. In the above picture, there is a simple Randy Orton image, with a pen design I quickly made that circles up and around. The goal will be to make that red design fade out to 20% opacity, and fade back in to 100% opacity.
As you can see, I have created a yellow box around the 'Export to ImageReady' button on the left, once you have the layer you wish to animate, and the rest of your signature is complete, click this button, which will automatically open ImageReady CS2 and open your PSD there.
Step 2:
Your next step is to go to the top and click windows, move your cursor down to animation. This will open the animation window at the bottom left of your ImageReady screen.
Step 3:
This is what the animation window looks like. Your window should only have one picture in it thus far. To continue with the tutorial, click the 'Duplicate Current Frame' button, which I have outlined in yellow in the above picture. After this, your animation window should look the same as mine.
Step 4:
You're going to click the second image (the one you created within the animation window) and then change the opacity of your animation layer (Layer 1 in my example, as you can see it's highlighted) to what ever you wish. In this tutorial, I am changing it to 20%. In this example, Randy Orton's red swirl design has faded, and this will be the lowest point in fades out to before it fades back in to 100%. (Note: It doesn't have to fade back in to 100%, you can make it fade in to what ever you wish, just change the first animation image to any opacity you wish.)
Step 5:
After this, you can click the play button if you want, and you will see that the design image will switch from your default opacity (image #1 in the animation window, which by default is 100%), to what ever you set the second image's opacity to (which was 20% in this example).
What you want is the visual that it is fading out and fading in, so you need more frames between the 100% and the 20% opacity images. In the image above, you will see I have created a yellow box around the 'Tween' button. This will add frames between the image you have highlighted (image #2 in this example), and the image before it (which is Image#1 in this example). Overall, click image #2 and click the tween button.
Step 6:
This is the window that will pop up. As you can see, it is stating that it will tween (add frames) between the selected layer and the default selected 'Previous Layer'. What you want to change is the 'Frames to Add' selection. The way this works is that animation quickly cycles between various images, how ever if you have 50 images overall, with one part of the image lowering in opacity 2% each image, it will appear as if that part of the image is fading out. The more frames you add, the smoother the animation will be, because there will be less change per image. Click OK.
The higher the number the better, but the higher you set the number, the larger the file size will inevitably become. This usually isn't a problem, but it is something to note. Adding 30 frames is usually enough for a smooth animation, but in this example I chose 20, but experiment with differing amounts to see the differences, and then decide on what you think looks best, but 30 is a safe number.
Step 7:
That will be the extent of your animation at this point if you click the play button on the animation window. The animation cycles through your frames quickly, giving the illusion of a fading image. However as you can see in the above image, the red design fades to 20%, and then appears at 100% again before fading. This isn't ideal, and this is happening because your last frame on the animation window is a low point (20% opacity in this example), but when the animation starts anew, it begins at frame #1 again (100% opacity in this example). We will correct this now.
Step 8:
What you are going to want to do is to add another frame of animation by duplicating your last frame, the same thing that you did in Step 3, but make sure that you have your last frame selected when you duplicate, other wise you risk adding a duplicate image some where in your animation and it will screw the process up.
Change this newly duplicated layer so that it is identical to frame #1 (which in this example is 100% opacity, as that's the change we decided to do). As you can see in the above picture, I have frame 23 selected (my last frame), and I am going to change the opacity of that frame to 100%, and then I will repeat Step 5 & 6, which is clicking the tween button and adding another amount of frames.
Step 9:
As you can see, after tweening again between your newly duplicated layer (which is identical to frame #1) with the layer before that, which would be the 'lowest' part of your animation, the animation will fade out to your lowest point (20% in this case), and then fade in (to 100% in this case) before resetting back to frame#1 and starting the process over.
If you click the play button, your signature animation will have come full circle, like so:
Lastly, in order to save your animation, go to 'File' at the top left in ImageReady CS2, and click on 'Save Optimized As'. You will have to safe the image as a .gif, instead of a .jpg if that's what you normally do, but that's just so it shows the animation.
Summary:
There are various things you can do with animation, as long as you understand how it works, by cycling through many images to give the illusion of change.
You can create effects to make it look like it's raining (by having different 'rain' images cycle), or you can have pictures 'slide' in and out of frame. I have done animation to make it look like a gun is firing, by having the animation cycle between 2-4 images of muzzle flashes, so you really are only limited by your creativity.
Thanks for following the tutorial, and it would be cool to see any results or creative ways to use the animation powers of ImageReady, so if you come up with any thing, results, or creative uses, post them here.
