This blog post started with the genius idea of two pretty awesome colleagues coming togeth- er to do a presentation about GIFs. Let’s be honest, animation isn’t for the faint-hearted, so we decided to research as much as we could about the process before tackling the task and the information we found was flippen cool. What is a GIF you might ask? To put it simply, it is a “lossless format for image files that supports both animated and static images.” But for those of us who are actually human, the more simple term is an image that is animated using Adobe Photoshop. A GIF allows you to loop the animation endlessly, which you might recog- nize as it’s literally all over the internet.

In our search to find out more about these wonderful “moving images” known as GIFs, we found out that the science of animation is nearly a century old!

Enough about the history, there are two types of GIFs:

1. Frame animation
2. Video animation.

Frame animation is a sequence of frames that make up an animation, the frames are basical- ly drawings that hold a certain position in time. When putting a GIF together, you are thus able to see each separate frame, allowing you to set a unique duration and layer properties (tweening, looping, inverting colours, creating vector masks) for each of the frames. Some simple steps of how to create a frame animation include:

1. Come up with a cool idea and illustrate it
2. Plan how this awesome image will move
3. Decide how the layers will work, for example, what limbs of a person should be seperated from the rest of the body, allowing for them to move on their own
4. Save out these seperate objects as their own as PNGs with transparent backgrounds
5. Place your layers accordingly into their specific frames
6. Use the tween tool to add more frames inbetween your key frames, to give the illusion of swift movement
7. Play with the placement, timing etc to get the animation you want

 

CAZ

 

Video animation is very similar to frame animation, however it allows for a more fluid tech- nique within an animation. It is also considered less limiting than frame animation. When using video timeline, this shows you frames in a continuous timeline, allowing you to animate properties with keyframes as well as play video layers. Below are some steps of video anima- tion:

1. Draw/illustrate your idea
2. Plan how this awesome image will move
3. Place these seperate movements into your timeline
4. Using video timeline make these movements move (with Transform/Position tools)
5. Pay attention to detail; the movements of the body, natural movements etc – having these movements down will make your animation pretty bad-ass
6. Save out as mp4 or gif

 

JO

 

After great concentration and research, it has become obvious that there are numerous benefits that come with GIF making. Firstly, animating an image adds more emotional depth than just a static image, GIFs don’t need text to describe their story, they allow for an individual or a company to “keep up with the times” (just look at the world of online memes) and lastly, they can also be used as a great call-to-action. We strongly advise that you guys get on to the GIF-making train too, it was such a *moving experience.

*We made a funny.

Written by Jo and Caz – graphic designers