Animated gifs

Here is another fairly common task that needs to be addressed. Though I am sure you can find plenty of documentation and free software out there that will allow you to create this I thought it would be best if did my take on it using Adobe Photoshop.

Here are the steps for creating the “Big Blue Button” animated gif. I am going to assume that at this point you have all the states for the animation in your image. If you don’t have all the different states stop reading and create all the states, or as they call them in the cartoon biz, all the keys. Your keys are just the primary points in your animation. In this case your keys would be an image with the text “Big Blue Button” and the second key is a version of this image with the text “Does Nothing” and then it goes back to the front to “cycle” the animation in a never ending loop. The image of the layers I used is there so you see how I did it. All I did is hide whatever I didn’t use for the first state, and flipped on what I needed for the second key.

Once you have all your keys go to window and select animation if you don’t already have it visible. If you look at this pane you can see that you have a set of play controls like on a DVD player. Next to that you have the “tween animation” option followed by ”Duplicates selected frames”. Click on the latter. Now you should have two frames in your animation panel. Click on the second item and set you second image to it.

Now you want to tween or make inbetweens from the first image to the second. Click the tween button we mentioned earlier. You will get a popup window that displays an option for how many frames to add to your tween. I used 5 but you are free to use whatever you want.

Now if you want to have the tween animate in a cycle you will have to make another duplicate and this time make this from the same as the first one. Now click on the second key and tween it. Once your done it should look like this.

Now you can render for web and save it as a gif and there you have it. An animated gif.