How to create an animated GIF file with Photoshop CS

In this lesson I will teach you how to create a very simple animated gif using Adobe Photoshop CS and Adobe ImageReady (comes with Photoshop). The image I am making will be pretty ugly, but its only purpose is for this lesson.

STEP 1: Ok, so here we go. The very first step is to create a new file within Adobe Photoshop CS, I created a standard vertical banner size of 120 pixels wide and 240 pixels heigh, and 72 dpi:



STEP 2: I gave the image an orange background, and then I created my first layer by using the text tool, and typing in the words "Frame 1". The key to making an animated GIF file is to make a new layer for every frame of your animation. For this lesson I am just using text, and by default Photoshop makes a new layer each time you make new text. If you wanted to use shapes or images, you would need to create a new layer for each frame. I am trying to keep this simple, just so you get the basic idea of how to make the animate GIF.





STEPS 3 & 4: I just repeated step 2, two more times, to make 3 frames. So Now I have the text "Frame 1", "Frame 2" and "Frame 3" each on their own layers. So I have 3 lines of text and 3 layers:





STEP 5: So, now that we have our layers and text made, we are ready to create the animation. To to this, we need to transfer our file over to ImageReady. First, let's save our file (ctrl-s) and name it "animate-gif". Then once you have saved your file, simply click the ImageReady Icon on the bottom of your tool bar and it will automatically transfer this file over to ImageReady for you.



STEP 6: Now that we are have the file opened in ImageReady, the first thing we want to do is make sure that the file will be saved as a GIF. So you go to Window and choose Optimize to open that tool window, and then choose GIF under the Format pulldown. For this lesson leave all the other settings alone.





STEP 7: We are now ready to start creating the animation. So, we have created a layer for each frame of your animation, so the first thing we want to do is turn off all the layers, except for our Frame 1 & the Background Layer (Background will stay on the entire time), since it is the first frame and we always want to see the orange background.



Then we need to go to our Animation window (if it's not open, go to Window: Animation, to open it) and set the time we want this first frame to be visible for. For this lesson I will choose 1 sec. You can change these to what you want, to see how they affect your file later on.



STEP 8: Next we need to create a duplicate frame in the Animation Window, but clicking on the New Frame Icon, and it will create another frame of animation for you, with the same settings as the one before, leave the setting at 1 sec.



STEP 9: Ok, now that you have the new frame, all you need to do is go to the Layers window, turn off the Frame 1 layer, and turn on the Frame 2 layer, and it will update your frame for you within the Animation window.



Repeat this process for Frame 3, click the new frame icon on the Animation window




Then turn off the Frame 2 Layer and turn on the Frame 3 Layer




You have now created all the frames for this Animated GIF file. Save your File (Ctrl-S), once you save your file, it will still be a Photoshop file, but if will also retain all the animation information so you can change it in ImageReady, for instance if you want to speed it up, etc. It is important to note that if you open the file in Photoshop and save it in Photoshop, all this information will be lost, so only edit it in ImageReady. If you want to see your GIF in action click the Play Button on the Animation Window and it will give you a rough view of what your GIF will look like.

STEP 10: You are now ready to create the animated GIF file. This is very simple, just go to File and choose Save Optimized:




A new window will open. Leave all the settings alone, and just pick the folder that you want to save your file and click save:




That's it!!! You have now created an animate GIF. Pretty ugly one, but you get the basic idea. If you want to take it to the next level, just know that any changes you make on a Frame will be in the animation, so you can turn on and off Layer Styles, change colors, add blurs, whatever you want, make a frame for it, and it will happen.

posted @ 9:20 PM