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.

3D Properties - Motion Graphics Package

Introduction

Within this animation workshop we were taught how to create the intro to a video effectively. The techniques we used are transferable to other areas of video and animation production within Adobe After Effects as are those learnt previously.

Before getting to work on our animations we first watched a few examples of how graphic packages look and the way the work. One of which, to which I took influence from was the opening title to Jo Jo In The Stars.

JO JO IN THE STARS from STUDIO AKA on Vimeo.

As you can see the title has a nostalgic feel to the use of monochrome colouring and therefore creates an atmosphere of past memories. The title typeface is created out of seemingly tinfoil backed cardboard, cut out in a very rough angular form. The same goes for the surrounding stars and visible coming from these shapes is thin wire holding the elements in place, suggesting a traditional means of production. It is set to a slow paced Jazz track that creates a sense of calm, melancholic reflection.

Task

Firstly we were required to create a set of objects and type(though the type would need rasterising beforehand) to which we would use within our animation. 

Shapes Created In Illustrator

For the purpose of altering the colour and appearance of these shapes within After Effects, we need to ensure they are saved within Illustrator as having a black fill with no outline. I made sure each element had its own layer so that I could move them independently.

Import Illustrator File As A Composition

In after effects I now needed to import the illustrator document. I went to import file and selected import as “Composition – Retain Layer Sizes” and made sure that Illustrator/PDF/EPS Sequence is unticked. This means that whatever sizing the original file is set at will stay the same within After Effects, though this does not affect After Effects own separate composition sizing. Before doing this step I ensured the Illustrator file was set to the same dimensions as that which I will need for the video, this reduces any need for resizing.

The next step turns the 2-D vector imagery into a 3D Layer, although they wont look 3-D at first the effects we apply later will create that look. The next step turns the 2-D vector imagery into a 3D Layer, although they wont look 3-D at first the effects we apply later will create that look. To turn the 3D element of manipulation on, turn on the switch that resembles a cuboid, this is the “3D Layer” switch.

3D Layer Switched On

In order to rotate the objects horizontally as to “turn” the letter over, open up the transformation properties and as simply click and drag on the co-ordinates as needed.  The same procedure applies for the x and y co-ordinates. The next step was to apply a texture to the shapes.

I first looked for scratched metal textures as to reflect the impression I want the image to give off. I made sure these textures were free to use and/or under the Creative Commons license. The below links lead you to where I obtained the textures used:

http://sirius-sdz.deviantart.com/art/Texture-291-323109624

http://www.psdgraphics.com/textures/scratched-metal-texture/

In order to apply the texture first you need to pre-compose each separate element, this creates a composition for the selected layer. You will need to apply the image to each shape individually. Firstly toggle the switches/modes, active the track mat and set this to “Alpha Matte”. This applies the image to the area occupied by the above layer, in this case a letter. You can use the standard copy and paste shortcuts to quickly and easily transfer the same layer style across to each one.

Texture Applied To Surface - Alpha TrkMat

Vignette - Feathered Mask

Finally create a simple block colour for the backdrop and then create one last layer which will guide the viewers eyes. This final layer will be used as a Vinette, create a solid and using the masking options, set the blend mode to subtract. Now you just need to invert the mask and alter the mask’s feather settings as required.

Idea

I decided to incorporate what I had learnt about Modernism and Post-Modernism into this and so created freeform lettering to make up the words Post – Modern. To further reflect the feel from these movements I created some geometric shapes to sit around the text that would infer to the primary shapes that the modernists used often. The post-modern element of the design is that of the wayward typeface through the freeform lettering and to add an element of industrialisation to this, I manipulated the text as to reflect carved metal or Chrome. 

Final Video

3-D Rotating Text from Nicole H.D.W. Sinclair on Vimeo.

How did I find it?

I found the techniques used to create this affect to be quite easy to get to grips with and look forward to employing the different skills I have learnt into future experimentations and projects. Not only can I think of ways to employ these skills into possible further experimentations but also the individual techniques can be used in conjunction with different effects we have previously learnt.