WHAT

An animated gif of an album cover (Eat Yourself Whole by Kingmaker)

WHY

I’ve wanted to learn animation for a while. I’d really like to be able to offer simple animated graphics to my clients. Many of them ask for small images to use on social media, as well as full infographics, so I’d like to be able to offer an animated version as well.

Social media is so busy with images, so a GIF that plays and reveals information will help the post really stand out.

I’ve also been feeling creatively dry recently – I’ve had a lot of work on and no time to explore and play with new ideas and methods.

After some Googling I came across this great article about creating animations in Illustrator and Photoshop.

 

I followed that article to create my first animation  – a cheeky robot – using an icon from Noun Project. I specifically didn’t want to spend excess time thinking about the icon itself (I’m no illustrator) so borrowed this cute one and added some simple movement.

 

HOW

Next, I wanted to create something more detailed – but again using a current image. I was a big fan of Kingmaker in the 1990s and remembered their album cover was illustrated and fairly simple  – so in theory possible to illustrate with my new skills.

I wasn’t sure what I wanted the image to do, but this was more of an exploration of what was possible.

 

Step 1 – Prepare the Image

it wasn’t hard to find a copy of the album cover online. I dragged this into Illustrator (artboard 400px x 400px)

I quickly counted the colours that were used, and used the Image Trace tool to vectorise the image down to 6 colours.

After expanding the image I was left with the entire cover broken down by colour area.

 

Step 2 – Creating Layers

The first step was to break the various elements down into separate layers.

• the black background
• The pink circle
• The 4 spermy things
• The monster
• The drips around the monster tongue
• The text

One thing to remember is that the image existed as a flat shape – so the pink circle layer has some very unsightly gaps (see below). The same went for the black layer – which has the outline of the pink circle.

 

By this point I’d decided I wanted to rotate the pink circle which, in it’s current state, would have left ugly white spaces as it moved round.

My solution was to recreate the black background and pink circle.

The black layer was easy – I simply deleted the old black areas and replaced it with a solid black square that filled the space.

The pink layer was harder – it retrospect I should have simple counted the number of points, however I went through quite a longwinded trial-and-error process to work out the correct number of points.

Once I had completed this I was left with the following layers

 

Step 3 – The animation elements

The principle for animation in Photoshop is to create different versions of the shape you are moving, and we will move through them in the film.

The circle – the wheel was an easy animation. I duplicated the circle layer 3 times, and rotated each of them slightly. Leaving all 3 layers visible I can ensure I’ve distributed the points evenly to create a smooth motion.

I’ve given each layer a different colour so you can see the distribution:

 

The spermy things – this was even easier! I duplicated the layer with these little fellas, and flipped them  – so they looked like they were swimming in the original film.

The tongue – this was harder and took some trial and error to get the right effect. I broke each drip down into separate layers so I could animate them separately and I tried various patterns of ‘on and off’ to get the right effect.

 

TIP: The next step is to paste these separate elements into Photoshop. From my robot experiment I found it very hard to make sure all the items are placed in the right spot. So I developed this solution.

Draw a square on one of your layers – as large as you want your final image to be.

Duplicate this square onto all layers and ensure they are aligned.

Set the line and fill colour to transparent.

Then group each layer with the transparent box – now each layer is exactly the same size.

 

Step 4 – Moving to Photoshop

Open a new document.

Place Illustrator and Photoshop side by side.

In Illustrator, select all the items from one layer (ensure they’re grouped) and paste into Photoshop.

Choose Smart Object, right click and PLACE.

Repeat for each of the images.

Each of your layers now appears as layers in Photoshop which you can rename if you need to.

If it’s not selected, choose TIMELINE from the Windows menu.

All of the layers now appear as purple bars on the timeline – you can slide and move these to turn the elements on and off.

Permanent layers: 

Some of your layers will simply be ON all the time – in this case the black background, the text and the monster face. These purple bars then before full width.

The animated elements will only be on the ‘screen’ for a certain amount of time”

Circle animation: 

I had 3 versions of the wheel in its rotated stages, I duplicated these to create a faster rotation.

(Duplicate by selecting the elements in the layers menu, hold down ALT and drag!)

This is the circle animation – I’ve coloured the elements (same colours as the wheel breakdown above) so you can see how they repeat.

Tongue animation:

Each of the 8 drips has a separate layer and I staggered them in the following way to create the effect.

 

Note: this was lots of trial and error!

 

Step 5 – export from Photoshop

File > Export > save for Web (legacy)

Ensure the LOOP FOREVER option is selected, make sure you’re happy with the film (check out the preview to see the image online)

You now have an animated GIF.

Step 6 – get this damn thing on Instagram

 

This is way more complicated than it should be. Instagram doesn’t allow GIFS but can play movie files so you’ll need to convert it.

https://cloudconvert.com/gif-to-mp4

This will spit out a single play video.

To get this on Instagram your video will need to be longer than 3 seconds.

I lengthened the video by creating a new project in iMove (Windows Media tool will allow the same) and dragging the new film in as many times as needed to increase the length to >3min.