Photoshop - Animated Gifs

Overview

Animated gifs are a simple way of producing moving content for web design and are typically used within advertising banners. However, they can also be used as an easy way to create interesting visuals, whether this be for emotional response or just to add to the apparel design.

Gif’s are lossless in quality but limited to 256 colours however, which is great for simple animations involving the use of a couple of colours and for type. But for photographs this degrades the image and therefore it is better to use jpeg. However, now you can use Jpeg images within a Gif, this combines the animated element with the wider Gamut of colours.

As a graphic designer, unless you create an animation intended for the big screen, such as within Television or for an advert then you wont need to use any pixel type other then square pixels.

Basic Frame Animation

Key Steps

For the first exercise we were talked through creating a Frame based animation. We were asked to create up to 10 images as these would make up our little gif, however I created a sunset scene, not realising it wouldn’t work well with this technique. To export this file we went to file, save for web and saved this as a Gif set at looping forever. I learnt from this that frame animations are best to have a set background if you plan on doing such as I had.

Frame to Movie

Scanned image used was created by tutor as example.

Render Settings

Another way to output such animations is by exporting them as a movie file. This allows you to add further effects and possibly audio to accompany the film. We can also use scanned in imagery within animation such as these and create a flick book effect. We used the same method of Frame animation, though the difference comes in the form of the export tools. With this method it uses Jpeg quality and therefore is good for scanned imagery and/or photos. There is two options for exporting this file, the first being as a QuickTime file and the second as a H.264. The difference between using these is basically on whether you want the video to relay on QuickTime and generally the latter is chosen. As this is for a simple frame animation for web we will choose medium quality.

Digital Cel Based Animation

New Video Layer

The third exercise was a development from the first and this involved taking the concept of Celluloid (or Cel for short) animation and applying it within Photoshop. This can be quite a laborious process if you have many moving elements, however if you build the image up as they would do in traditional cel animation then this makes it a smoother process. In order to set up your active cel as it were go to Layer, Video Layers and select New Blank Video Layer. I found using both the trackpad and the mouse quite challenging when drawing out the imagery, especially using the freehand paintbrush tool. I feel using the paintbrush would feel more natural and in turn become easier when using a graphics tablet. For this task we rendered out the video at 24fps and had the resolution set to half of a full HD screen, this being 960 x 540 square pixel. In order to accurately track where your animated subject is, use the Onion Skin feature. This feature speaks for itself; it makes the top layer semi-transparent as to enable the designer to trace over the previous lines.

Appearing Box - Cel Animation from Nicole H.D.W. Sinclair on Vimeo.

Moving Image Trace

Import Video & Set Timeline Frame Rate

For the forth and final exercise we imported a video file and set the frame rate to 12fps as to enable simple quick experimentation with this technique, as it would have been 24 usually. These videos provided to base our animation on were that of action shots, dancing, skateboarding and the like. I chose a video of a break-dancer and on a new blank video layer, using very rough marks I drew out a stickman as to represent the dancer. I drew out enough of these frames to achieve 3 seconds and again using a graphics tablet may help in this process. At first I used the Onion Layer option to aid in positioning my stickman, though once many frames had been drawn out this became difficult to distinguish between.



Stickman Loop from Nicole H.D.W. Sinclair on Vimeo.

Cel Animation Tutorial

 

Following on from the workshop, I watched the above video which guides the viewer through the traditional Cel animation process. I found this useful in understanding how to lay out such frame animation within the digital method.