Create gif animation (Photoshop CS5)

A very easy way to create an impressive banner (for your advertisements) or animation is to use Adobe Photoshop and in few steps create professional results. In this tutorial we will create a text animation gif. The Graphics Interchange Format (GIF) is a type of image files. It is widely used in web pages as it creates small sized files. It allows the creation of animations. 

I have created this small gif file.

GIF with 3 frames and size less than 20KB. Ideal  for web sites and banners.

1. File > New. Depending on what size do you want your gif to be, select the width and height. I have chosen 200 x 150 pixes and 72 pixels/inch resolution. 

2. The Gif file is a series of frames that change after some time. Go to View > Animation to see the timeline on the bottom of your screen. Until now we have only one frame. Let’s create 3 frames for our gif. 

3. Make the white background color, black. Go to Edit > Fill and Use > Black. 

4. Rename this layer to Layer 1.

1st Frame

5. Select the Horizontal Type Tool to create your text (the impact font, size more than 30 are good options). Mine 1st frame is: 

6. Copy that Layer. Click to select the first text layer and drag it to the “Create a new layer”. Rename this layer to Layer 2. 

7. Double Click the “T” symbol inside that layer so that you can edit the text. Write your second frame text. It would be difficult to distinguish between your current layer (Layer 2) and the previous one, so it would be better to deactivate the previous one (click on the eye button next to Layer 1-Indicates Layer Visibility). 

8. Now we have 2 layers but only one frame to the animation panel. Go to the bottom of your animation panel and press the “Duplicate Selected Frames”. Now we have 2 frames. 

9. Select the 1st Frame. We want to show only the Layer 1 in this one, so we uncheck the eye next to Layer 2, so that it would be invisible. 

10. Now select the 2nd Frame and check the visibility eye of Layer 2 and uncheck the visibility eye of Layer 1. 

2nd Frame

11. Repeat the steps from 8 to 10 if you want more frames. The logic is the same. We create as many layers as frames, and we make visible each layer in each frame. 

12. The last thing to do is to tell how quickly will change the frames. To do so, select and the 2 frames and select the duration of each frame. Something between 0.5 and 1.5 seconds is good enough. I chose 1 sec. Additionally, chose how many times do you want your animation to repeat. You can select to play once, forever,3 times,… 

13. Lastly, we have to export our file. Choose File > Save for web and devices. Select the GIF export type, leave everything to the defaults and press save.

3rd Frame

14. You are ready!