I have been using a few animated gif files recently. They are really very easy to make. I am using Photoshop CS6 on a Mac for this, but I know it also will work with CS5, and maybe earlier versions of CS. I do not knows about Photoshop Elements.
Once you see how easy it is to make one of these, you will be making all kinds to send to the friends that you email. Just attach the gif file to the email. Or, post them on your blog. Or, however you want to use them.
This is the one I will show you how to make.
Step 1. The first thing to do is to open a new document in Photoshop. I like to know what size of document I can use for where I want to use it. I know that if I want to post the animated gif in the Forum at Jessica Sprague, then the image cannot be bigger than 800 x 800 pixels and 150 KB in size. So, if I make my document 6 x 2-inch at 72 ppi I should be able to post it there. I just have to make sure it is less than 150 KB in size when I save it.
I go to File / New and create my new file.
In my arrangement of the screen on my computer I increased the view of the document by selecting the percentage in the lower left corner and typing in 170% so that it fills my screen so I can see what I am doing a little more easily.
Step 2. Next I selected the Horizontal Type Tool, selected the font (Impact), selected the font size (36 pt), selected Center Text, selected red for font color, opened the Character Panel and changed the leading to 48 pt to make the lines farther apart, and changed the tracking to +50 to have the letters a little father apart. Also, I used the Caps Lock to type all capitals. You can see that the All Caps selection is highlighted in the Characters panel. Then I typed my text and moved it all a little to the right so that I would have space on the left to place my ornament. You can set your font however you want it. This is just what I did. I made my adjustments in the Character Panel after I had typed the text. This way I could see what was needed.
Step 3. Now I wanted to have the background behind the text to be something other than white. I decided that I wanted a gradient of some kind. I made the Background Layer the active layer. Then I clicked on the button at the bottom of the Layers panel to give me a Gradient Fill layer above the Background Layer.
I clicked on the Gradient image to open the Gradient Editor. In the Gradient Editor I selected Noise for the Gradient Type. I left the Roughness at 50%. And, then I clicked on the Randomize button several times until I was happy with the way the gradient was for me.
Then clicked OK.
Step 4. Next, I decided to put a large green stroke around the text to make it look more like a sticker. So I double clicked in the text layer to the right of the layer name to open the Layer Style dialog (of course, you could click on the ƒx button at the bottom of the Layer panel to open it, too). I selected Stroke (click 0n the word Stroke, not the check box), set the Size to 5 px, Position Outside, clicked on the Color sample to open the Color Picker, selected a green clicked OK, and clicked OK again. And that put the green stroke around the letters.
Step 5. Next I want to bring in my different colored Christmas Tree ornaments. I want to have three of them each with a different color. I brought them in and put each on its own separate layer. The blue on the layer above the text layer, then the purple, and then the green. I have them so they all line up one on top of the layer so if I turn off the layer visibility of them they look like they just change color on the layout. I know that you do not have my ornaments to use, so just use whatever you want instead of my ornaments.
Step 6. Next I brought in my star on its own layer so that I could turn if off and on.
All this up to now has just been like creating any of your page layouts. We have just put things on their own layers so that we can turn their visibility off or on as we need for the animation.
Step 7. Now I have all the elements that I need to create my animated gif. And they are all on their own layer so that I can turn their visibility off or on as need while creating my animation.
In Photoshop CS6, to set up the animation you need to open the Motion dialog. Go to Window / Workspace / Motion.
This will open the Workspace in the Motion layout.
Since I had my image at 170% while I was working on it, it is at 170% when this dialog opened. I will change it to 100% so that it fits in the work area. Also make sure that you select Create Frame Animation from the drop down menu. Then click on the Create Frame Animation button.
In Photoshop CS5, to set up the animation you need to open the Animation dialog. Go to Window / Animation. And, this will take you to essentially the same starting point as in CS6.
Back to CS6.
Step 8. I have set the image to 100% so it fits in my window. In the Timeline you see Frame 1. Click on all the eyeballs in front of all the layers , except for the Background layer and the Gradient Fill layer, to turn off the visibilities. All that you see visible is the Gradient Fill. This is what Frame 1 will be in the animation.
Here is a better view of the Timeline at this point.
Frame 1 (has the number 1 in the upper left corner) is selected. There is a zero (0) in the right bottom corner. Next to the 0 is a menu drop down arrow to open the Time Delay menu for the frame; that is, how long that frame will play. Under the frame is the word Once with a drop down arrow. This menu has you select how many times you want the animation to run. In this case, I want the gradient to show for 2 seconds. I click on the arrow to open the menu and select 2 seconds.
And then I click on the Once arrow to select the looping options. I selected Forever. Now it will just keep going.
We have now determined what Frame 1 looks like, how long it will be open, and also that we want the animation to keep running forever.
Step 9. Now we need to set up Frame 2. This is sort of the tricky part. To get Frame 2, you duplicate Frame 1. That gives you the starting point for Frame 2. That is it. Not so tricky. But, you have to remember to do that each time you want the next frame. So, when you want Frame 3, you duplicate Frame 2 for the starting point of Frame 3. Etc... etc... etc...
So, click on the button to Duplicate selected frame.
And we now have Frame 2, but it is exactly like Frame 1 until we change the visibility of the layers so that we have what we want in Frame 2.
Now in the layers panel, I turn on the visibility of the text layer so that it shows, and I click on the eyeball in front of the word Effects to turn off the stroke (of course, you could have just turned the eyeball off in front of the word Stroke) so all that is visible is the text. And that is now what Frame 2 will look like. We have now set up Frame 2.
Step 10. Now we want to set up Frame 3. To get Frame 3 in the Timeline, we duplicate Frame 2 and use it as the beginning of Frame 3. Frame 2 is selected, so click on the button to duplicate selected frame.
Now we turn on the visibility of the Stroke effect and Frame 3 has the green stroke around it. This is how Frame 3 will now look.
Step 11. I duplicate Frame 3 for Frame 4. I want the visibility of the stroke to be off for this frame. So I turn off the visibility of the stroke by clicking on the Effects eyeball in the Text layer. This way I can have the stroke blink off and on in the animation.
Step 12. I duplicate Frame 4 for the beginning of Frame 5. And I turn the visibility of the stroke back on in the Text layer. Now Frame 5 will look like this.
Step 13. I duplicate Frame 5 for Frame 6. I turned the visibility of the blue ornament on. And Frame 6 looks like this.
Step 14. I duplicate Frame 6 for Frame 7. I turn on the visibility of the purple ornament. And Frame 7 looks like this.
Step 15. I duplicate Frame 7 for Frame 8. I turn on the visibility of the green ornament. And Frame 8 looks like this.
Step 16. I duplicate Frame 8 for Frame 9. I turn on the visibility of the star. And Frame 9 looks like this.
Step 17. I now want to make the star blink off and on. I duplicate Frame 9 for Frame 10. I turn off the visibility of the star layer. Frame 10 now looks like this.
I duplicate Frame 10 for Frame 11 and turn the visibility of the star layer back on for Frame 11.
I duplicate Frame 11 for Frame 12. I turn off the visibility of the star layer. So Frame 12 now has the star off.
I duplicate Frame 12 for Frame 13. I turn on the visibility of the star layer. So Frame 13 now has the star on.
I duplicate Frame 13 for Frame 14. I turn off the visibility of the star layer. So Frame 14 now has the star off.
I duplicate Frame 14 for Frame 15. I turn on the visibility of the star layer. So Frame 15 now has the star on.
Here is the Timeline now.
Step 18. This is all we want our animation to do. We have 15 frames in our animation. When we run the animation it will start and go through Frame 1 to Frame 2 to Frame 3 etc etc Frame 15 and then repeat forever. Click on the Plays animation button in the Timeline to have the animation play.
Step 19. Since we have always been copying from the previous frame for the next frame, all the frame durations are at 2 seconds. When we run the animation, we see that we don't want them all to be at 2 seconds. We want to change some of the durations. To stop the animation, where the Run animation button was there is now a black square for the Stops animation. Click on it.
I select Frame 3, click on the duration arrow, and select 0.2 seconds for the duration of Frame 3. I also set the duration of Frame 4 at 0.2 seconds. I set the duration for Frames 5, 6, 7, and 8 to 1 second. And, I set the duration of Frames 8 through 14 to 0.2 seconds. I left Frame 15 at 2 seconds.
Now, when you press the Run animation button, the animation runs the way you want it to run.
Step 20. The next step is to save the animation as a gif file.
Go to File / Save for Web...
Go to File / Save for Web & Devices
Back to Photoshop CS6:
This opens the Save for Web dialog.
Make sure you set it to GIF, and check Convert to sRGB. Check to see if the Image Size and file size fit what you need. If the file size is too big, you can decrease the Image Size until the file size get small enough for your need.
Then click on Save. Give it a name and tell it where to save it.
Now you have your animated gif to use.
That's it. Once you have made one, you will see how easy and quick they are to make.
I hope you enjoy this technique.
Live life fully and enjoy.