Menu

Animated Monster Gifs

March 22, 2017 - Design, Digital, Get Inspired, Tutorial
Animated Monster Gifs

Animated Gifs often receive a similar reaction to that of Marmite, you either love them or hate them! Personally, I love them. They are easy to make, you can pop them in an email campaign or use them to add some interest to static images on a webpage. They do not require any plugins or code to run either, just upload them to your website like any other image and hey presto they work.

They do have some drawbacks though, using too many can slow down your webpages, they only have a maximum colour depth of 256 bit (much lower in comparison too other animation formats) and they can seem jittery and pixelated if you’re not careful in the optimisation and exportation process.

Overall though I think they are a great tool for designers and email marketers everywhere. You can use them to add extra sparkle to your monthly newsletters, and their biggest plus is that they’re super-easy to create, as I will demonstrate below.

In this tutorial I am going to animate a monster so that it will pop it’s head out above the email sign up form. I am going to be using Adobe Fireworks CS6, so this tutorial you will need to install this on your computer. It has been a while now since Adobe discontinued the Fireworks software. The CS6 version was the last released. Despite this I don’t think there is a better or more simple programme out there for creating animated gifs (or perhaps I need I’m just stuck in my ways).


Alright, let’s start animating our Animated Monster Gifs.

Step 1: Create your frame in Fireworks

Right so first let’s open up Adobe Fireworks.

Click Ctrl + N or select NEW and create a document of 220px x 220px.
(You can do your frame larger if you like but I am going to keep my frame size small to try and keep the file size low.)

Change the background colour to match the colour of the webpage your gif will sit in. In this instance I am going to change it to #D0DD3C.

Fireworks Canvas Colour


Step 2: Create your artwork in Illustrator

I used Adobe Illustrator to create some monstrous characters to use in this tutorial. Each character has nine different frames, which I will use for the animation of the smile and the eyes opening. You can either make a custom animation yourself or in the words of every Blue Peter presenter that ever lived, here are a few I made earlier. You can download the artwork below.

Hairy Monster Gif
Slimy Monster Gif
Happy Monster Gif

Monster Animated GIF Tutorial

Fill in the form to download the vector pack


Your Name (required)
Your Email (required)

Step 3: Open up your artwork in Fireworks

Now we have created or downloaded our monster vector pack you will want to open the .eps file in Adobe Fireworks. (Note you will have to save Illustrator files down to version CS6 to open in Fireworks)

That will leave us with two documents open in Fireworks:-

The blank canvas where we will create the animation; and the file with different frames of animated faces


Step 4: Copy first frame onto the blank canvas

Right the next step is very easy. All you need to do is copy and then paste the first monster image/frame onto the blank canvas. If the monster is too large for the canvas you can scale him down. You can do this by selecting Modify > Transform > Scale. Remember to make a note of the percentage as the same amount will have to be used for all of the monster frames.

Once this is completed, position the figure just out of shot at the bottom of the canvas. We will edge him into shot when the animation plays.


Step 5: Duplicate states

Animation in Fireworks is created by altering the elements on the canvas in each state. Our new page contains should only one state with our object sitting in a single layer inside it.

To duplicate our objects across states, create a duplicate state instead of simply creating a new state. The easiest way to do this is to drag the state on to the new state icon this will duplicate the layer.

Now you should have two states with the same object on. To create the animation move the monster up a little bit in your second state. Now when the animation moves between frames/states the monster will appear to travel up the page. Repeat this process of duplication and movement until the monster has reached the top of the canvas.

To keep the animation steady make sure the distance remains consistent. I normally judge it by counting the clicks on the arrow keyboard (so twenty taps each time for example). This can be a laborious process, and there is an animation option that will judge it all for you, but for a short animation like this I prefer just to play it by eye. I find the animation option can end up making your animation harder to edit, especially when you are copying and pasting different item on the artboard which we will be.

States


Step 6: Copy in the different Monster frames

Press the play button in the bottom right.

This should show your animation moving from the bottom of the canvas to the top.

Now I want to open his eyes and smile. So instead of moving the single monster frame, I am going to replace him with by copy and pasting the next sequential frame in to the following state.

Be sure to make sure the monster is aligned correctly so he is not moving up and down when the state changes.

Do this until you have a different state for all nine of your monsters.


Step 7: Exit stage bottom

Press the pay button to see how it’s coming along. We should now have a monster popping in from the bottom opening his eyes and closing them again.

Now we want to move him out of frame, thus finishing the animation, to do this we can repeat the steps from stage 5 only moving him down rather than up. I am even going to start this movement while the eyes are closing to give the animation more variation.

When the monster has left the canvas all our states are complete.


Step 8: Timing

If you press the play button we should have a monster coming in from the bottom opening and closing his eyes and leaving again. But there’s a problem in that it’s all happening too fast. We need to use the state delay option to slow down certain states.

The numbers to the right of the state define the number of hundredths of a second that the state will be visible. 6 is the default setting and will make for a smooth animation. But in places where we want delays such as the start extend these:

First frame: 200 – Two second pause
Reached the top: 200 – Two second pause
Eyes Open: 400 – Four second pause
Last state: 800 – 8 second pause until the animation loops

Once this is done our animation is complete and you are ready to export.

Note: Remember to save the Fireworks file as well as exporting the animation or you’ll lose your work.


Step 9: Exportation

To preview in real time and go to File > Image Preview

Select Format > Animated Gif

Here you can change settings, select the amount of colours and preview the animation before exporting. If something doesn’t look right, you can go back and amend it. Otherwise it click Export to save as an animated GIF.

Fireworks Export Gif


Step 10: All Done

Congratulations your animated monster gif is complete. Thanks for reading our tutorial, we hope you come back again and read more of our posts. To receive notifications about our recent posts as we post them please sign up to newsletter using the signup form in the side panel. Look out for the little animated monster, it’s quite hard to miss!

Animated Monster Gif
Animated Monster Gif
Animated Monster Gif
If you liked our post please share it!Share on FacebookShare on Google+Tweet about this on Twitter

This post was written by admin