Creating a character animation in Adobe Illustrator

Creating a character animation in Adobe Illustrator

This project was initially a visual for an opening sequence for the HD TV show ‘Robert Hagan’s Splash of Color’. The concept was dropped for another idea (more on that later) but the animation was re-used as a device on another of Robert hagan’s shows ‘Let’s go painting’.

In this case study, I will show you how to do a simple character walking cycle. The Robert Hagan character was drawn in illustrator for one of Robert’s books. So I already had my character style but I decided that a simple line version would be better for the TV show.

Next I found a walk cycle reference from

Now, studying the movement from the reference I created 4 generic parts of the character: The head, body, arm and boots.
The legs I decided I would draw freehand.

Then it was a case of overlaying my character parts on the animation reference and move/rotating the various elements.

Then I added a paintbrush to Bob’s left hand…

The next step was to import each frame into Photoshop as a layer,
Adjust the positioning and using the layer-to-frames option in Photoshop’s animation palette exported this animated gif.

The final insertion to the Show was done using Final Cut pro by editor, Simon Harrison, with extra frames that I created to show bob at the easel, drinking coffee and taking a step back.

You can order ‘Let’s go painting’ on DVD from Robert’s website if you have an interest in oil painting…

Happy vectoring!

Ivan Longland –

8 Responses to “Creating a character animation in Adobe Illustrator”


    Great information! Thanks!

  2. BURTON says:

    “Painting should never look as if it were done with difficulty, however difficult it may actually have been.” — Robert Henri

  3. IVAN says:

    Very profound!


    I dream a lot. I do more painting when I’m not painting. It’s in the subconscious. - Andrew Wyeth

  5. IVAN says:

    Philisophical comments about the labours and inspiration of oil painting might be better left on Robert Hagan’s site as he is more likely to give an intelligent response.


    Keep working


    OP: I might be daff (lord knows I have been told lol) but you made totally no sense what so ever…

  8. IVAN says:

    That’s about right!

Leave a Reply