Thursday, February 5, 2009

How to make an animated GIF in Photoshop



Learn how to make basic animated GIFs using Photoshop CS and above!





In this, first post of this blog, we will learn how to make a rudimentary animated gif. There are ways to get very detailed and make very complicated animations. However, those are a bit out of the scope of this tutorial. I will put together another tutorial (or 2) to illustrate these methods. In this tutorial, you will learn the basics of animating and making layers "move" using the tools that are in Adobe Photoshop CS and above.



This is going to be the final product!



1. Create a New Document with the dimensions that are shown in the below image.





2. Upon the palette loading, make a new layer and name the first one "Background".

3. Fill the background layer with whatever color you like.

4. Select the Type Tool and type your name or whatever text you want to animate.

Depending on your screen resolution, the animation palette can be pretty large and encroaching. So you don't want the palette out unless you are ready to start animating. We are now ready to start animating out text.

5. Start by pulling out the animation palette. To do this go to Window > Animation. The below image shows what this looks like.




This will bring up the horizontal animation palette. The following image will show what this will look like and show you the main buttons that you will be using.





6. Next, click on the text layer and then click on the "Move" Tool.

7. Go to the Animation Palette and click on the New Frame button.

8. Then move your text anywhere on the canvas you want it to "move" to.



9. Then go back the Animation Palette and click on the first frame. (There should be two)

10. Click on the "Tween" Button and a dialogue will pop-up.

The "New Frame" button is what you will most likely be using the most.
The "Tween" button is probably the coolest button in Photoshop.



Below is a reference image to show what this dialogue looks like.



I set up mine to have 15 frames. This controls how fast the animation moves. I also chose to have all layers animate. If you were doing an advanced animation, you would choose "Selected layers". Again, that's for another tutorial. If you also notice , by default, it tweens to the next frame. Keep it there. you can play with other options later. Click ok.

This will add 15 frames for a total of 17 frames. Then you can use the move tool to drag the text back down to the bottom of the canvas. Then you would go back to the animation palette and click to the second to last frame (16 I believe, if not then the second to last one). Then click the Tween button again. and use the same options as last time.

You can then move over to the left of the tween button and hit play. Test this until it is as clean and fluid as you like.

Saving Your Animation





Go to File > Save For Web



This will bring up a dialogue that may be kinda confusing. Use the defaults that are already there and simply hit save. Give it a meaningful name and your done! You may now embed it on any website or forum. Below is a reference to what this dialogue should look like. I didn't include the whole dialogue, just the important part.



This should be close to your Final Result.

Main


If you have any questions or comments, please feel free to write a review at the bottom of the page.


Rate This Tutorial!