GIFs have gained quite a bad reputation over the years due to overly used animated 1990s GIFs. You would regularly see homemade websites full of Animated GIFs, the infamous dancing baby GIF being a perfect example! Saying that, GIFs do have their place in the world and you can see them regularly as banners in sidebars or even animated Twitter profile pics amongst other numerous purposes. So im guessing you want to learn how to create an animated GIF ? Well luckily for you I am going to guide you through how to make this bouncing balls which I hope will be representative of you jumping up and down with excitement with your new found skills!
Create an animated GIF
Prepare your resources captain!
1. Firstly we need to create the layers that we will use to animate our bouncing ball . Imagine a GIF as a flipbook ( like that in the music video above), each frame is a different image — now we need to create each individual element that we’re going to put together to form an animation.
2. Open up Photoshop and create a new document, ensuring it has a colored background and isn’t transparent (traditional GIFs don’t support transparency). For this tutorial I’ll be using a document that has a white background and is 160 x 160 pixels, and I’ve left it unnamed
3. Because the purpose of this tutorial is to simply get you started with creating GIFs, we won’t be making some sort of extremely complex animation masterpiece (as seen in the examples below)— I’ll keep it simple while teaching you what you need to know to create more complex animations. For now we’ll just create this bouncy bouncy ball !
3. I am assuming that you have used Photoshop before so please use the elipse tool ( holding shift to get an accurate circle ) and create a ball ( to any colour, it doesnt matter, just the colour that makes you feel all warm and gooey inside ). Rename this layer normal. This will be the ball falling.
4.So what happens when a ball hits the ground? It has 2 opposing forces gravity and the upforce..so it gets squashed. You need to duplicate the layer and call it Squashed a bit . Use free transform tool and squash the circle ( just a bit ). Copy the Squashed a bit layer and rename it squashed more. You now have all 3 layers that you require to create this animation.
Lets move that booty!
1. With all of your prepared layers, it’s now time to actually animate them. Firstly, on the menu bar at the top, go to ‘Window – Animation’ and click on the button in the bottom left of this new palette to switch to a timeline animation.
2. Now, there are 2 ways you can animate your layers, I’ll show you the way I did it.. make all layers invisible except “normal”, create a new frame with the new layer icon in the animation timeline ( looks like a new layer in the layer column ) and move the normal layer down slighlty.
3. Repeat this until you are happy with how far your ball is dropping.
4. Next you will need to make the squashed a bit layer visible and position it to the bottom of the normal layer. Then make the normal layer invisible.
5. Create a new frame again and make the squashed most layer visible ( position it at the bottom of the other layer so it matches the position ) and the little bit squashed layer invisible.
6. Repeat the process but in reverse. So make squash a bit layer visible and squash most invisible and then to normal, not forgetting to create new frames as you bring the ball back to its original state.
7. Now, we’ll make the animation loop. Select the drop-down menu underneath the first layer in the timeline and select ‘Forever’ — this will make the animation loop forever. Be warned that the liberal use of this setting is a big part of what gave GIFs a bad name!
5. You can now preview your animation by pressing the play button at the bottom of the animation palette. If everything has been done correctly, it should play a fluid animation — although you may have to tweak them slightly. Try adding longer time frames ( say 0.1 sec) for each image rather than 0 sec, see how that effects it, or what about trying different colours as the ball hits the ground? Be creative!
Exporting those balls!
Finally you want to export your hard work and share it with the world!
1. To export, go to ‘File – Save for Web & Devices…’ ( you choose this as obviously, you can only see animatons on a computer. Common sense ay!) and you’ll be presented with a dialogue that’ll display various options. Make sure GIF is selected
3. By default, the GIF preset settings are sufficient and work
4. Once you’re ready to go, click Save, give your animation a name and export the file to the destination of your choice. (P.S. It wont show the ball bouncing until you have exported it and opened it in a browser window! )
5. Fanfare please!!! Congratulations Boss, you have completed your first GIF Animation! I knew you could do it!
Any problems please dont hesitate to contact me and I will try and help or if you have any examples of what you have created please feel free to share your brilliant work.
Download the completed GIF source file