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.

Illustrator - Rockets and Pears

In this workshop, the second focusing on Illustrator, we were taught how to cut down on the layers you require within a vector and also how to create realistic looking gradients.

Artboard Setup

Before starting our creations we needed to create a new artboard within illustrator. In this instance it was to be print profile set at A4 portrait with the colour on CMYK with the raster effects set to “High” or 300ppi. This needs to be set to high as it varies and dictates how the software renders certain blends, transparency and drop shadows, which in these example we want it at its best. It is set to CMYK as to allow for printing, though the version you will see displayed here will be at RGB values as to display the colour accurately on screen.

Simplified Rocket

This part of the lesson involved using a mixture of tools and effects including create a pattern option, the shape tool, the direct selection tool and the standard selection tool. The aim of the techniques used is to cut down on the amount of layers required within your layers window, therefore creating a cleaner and easier workspace, especially useful for if you were to create something similar but on a much more detailed or accurate level. I like how using the path offset tool can allow for some precise yet agile creations.

Finished rocket, while drop shadow is seen being applied.

I found the workshop to be really useful and I plan on creating a further experimental piece in my spare time on Illustrator using the techniques that I have learnt today.

Realistic Grade Pear

Within this section of the lesson we were to learn the techniques of mesh’s and how they can be used to create photorealistic vectors through the use of more precise gradients. The technique is pretty simple once you know how to do so, the most time consuming element to creating the pear vector was manually inputting each colour into the anchor points. The main tools we used for these techniques were the direct selection tool, eyedropper, livetrace, clipping path and the mesh tool. Also to start off we did a brief Google search for pears, to use as a reference image to work from.

I found this interesting to know, as I didn’t realise there was a way to get such photorealistic looking gradients within Illustrator.

Final Photorealistic Pear

Credit to “DivsM-stock” on DeviantArt for the textured image I used to create the speckled effect of the pear. Their work can be found in the link below: 

http://divsm-stock.deviantart.com/art/Unrestricted-Vintage-design-texture-378502730