Creative Process

How I Create Animations

How I Create Animations
Written by Magoz
5 min read 17.9k views 52 comments

I started collaborating on animations three years ago when I created the animated logo for my website. After that first experience, a new world opened up to me.

As I’m not an animator, I worked with a variety of animators until I met Jose Lorenzo , who I consistently work with now.

Today, I’m sharing with you the process we follow to create our animations.

1. The animation conceptual process

The conceptual process of animations is very similar to the process I follow to create illustrations.

I focus on one or two concepts, and then modify elements using figures of speech to try to find something interesting.

I’m usually the one who works on the concept and ideas behind each animation, and Jose is the one who makes them possible. I think that’s the key behind our teamwork–we complement each other so well.
 
When I think I have something that might work, I start sketching.

2. The animated sketch

I start sketching the static version of the animation.
It allows me to capture the essence of the image, keeping only the essential elements and using the minimum number of colors I can without compromising the visual aspect.

When I have this first static image, I start creating variations to craft a very basic gif sketch that shows the potential of the animation.

Magoz animation sketch for Muster

Magoz animation sketch for Migros - Helping others

Magoz animation sketch for Migros - Art and Museums

These sketches help us to understand the animation and they are the sketches I send to clients for approval.

3. Previous preparation

If the animation is very complex, Jose creates some movement studies to show me the different positions. Sometimes he also creates 3D studies of the space if necessary.

Jose Lorenzo animation sketch of the sequence for St Giles Trust - Future Without Bars

4. Animation assets

When we started working together, I was still creating my illustrations using Photoshop.

I realized very quickly that this way of creating images wasn’t optimized for animation. My images weren’t vector files, and I had to convert them to vector shapes and then spend a lot of time tweaking them.

Since I switched to Illustrator, the animation process has become easier for both of us.

The process is quite simple. Jose and I establish the different images/positions we need for the animation, and I create them.

One important detail is that I create all images using the first image as a model, preserving the same vector structure. It helps a lot in the animation process.

5. Creating the basic animation

This is when Jose does the magic. He transforms all the ideas, plans and assets into the first version of a smooth animation.

It isn’t the final version; we still work a lot to refine it.

He creates the animations in After Effects using the assets I provide.
You can read more about the techniques and processes that Jose follows to create our animations.

6. Refining and tweaking the animation

I use trial and error and comparing versions to polish my illustrations.
This is how I allow my intuition to finish my images.

We use the same system for creating the animations.

The final tweaks and refinements include correcting positions, speed, adding bouncing and eases, tweaking the colors, and other small improvements.

Magoz and Jose Lorenzo animation final tweaks - Toolkit for creatives and freelancers

Conclusions

Animation added time and movement to my static ideas.

That meant a lot of new possibilities and many new available resources.
But it also meant I had to change the way I worked.

With every new animation, we improve our workflows and system and become more efficient.

If you have any questions, let me know in the comments !

PS: My online course Strategy & Business for Illustrators is now available for pre-order!

Magoz

Nomadic illustrator. Thinker. Seeker.

52 comments

  1. HI! I just wanted to know if I understood well: you create different Illustrator files – one per each position/movement – and with them Jose creates the animation with After Effects, right? Or are they just different layers of the same file?
    And, yes, I’d love to hear Jose’s process as well :) Thank you very much for sharing this.

    • Hi Cinzia! It very depends on the kind of animation. If the animation is not very complex, I usually use one Illustrator file with different layers (each layer containing one element). If the animation is complex we split it in different scenes and each scene has its own illustrator file (with several layers inside of each file).

      After the assets are finished, Jose imports the files in After Effects and animate them.

      Thanks for commenting!

  2. Thank you for sharing your process. It’s very inspirational.
    I was wondering if you created the walk cycle sketch sequence in an application like photoshop or flash and then bring that rough sequence in after effects?
    I do like that you create a rough cycle and then refine the process.
    It’s really great to see this.

    • Thanks for your support, Felice!

      I create animated sketches using Photoshop in the following way:
      – I import the static sketch.
      – I duplicate the layer and modify it to create the next frame.
      – I repeat the process until I get all the frames I need for the animated sketch. (An animated sketch usually contains 4-7 frames).
      – I transform the layers into frames. (Animation panel > Make frames from layers.)
      – I adjust the speed.
      – I export the animation as a GIF using File > Export > Save for Web.

      This is the process I follow to create my animated sketches.

      For the “real” animation we use the process I describe in this article (points 4, 5, and 6). The final animations are entirely created in After Effects using the Illustrator file I provide.

  3. Hi, just letting you know that I enjoyed this post a lot, especially all the before/after gifs. And yes, I’d also love to know about Jose’s process :)
    Thanks!

  4. So great to hear about your process! But I miss some explanation about the work of Jose! I’m ilustrator and grphic designer, and I want to open my knowledge to new horizons as animation. I think, as you explained so well, that opens a new perspective in our ilustrations, bringing new posibilities to them. Thanks for sharing your ideas and work! You’re a great professional!!

  5. L
    Loek

    Always fun to see more about your process.
    I would love to see something written by Jose as well.

  6. hi Mike! I met you at the ING Creatives event in Dubai (but I’d known your work before!). However I’ve only recently discovered your blog. Thanks for sharing this useful information with us. I enjoy your blog and its simplicity. And yes, it would be awesome if you can get Jose to write a few tips on his animation process!!
    Looking forward for more posts!

  7. I join to the request of a Jose’s entry about how he animates your animation works :)

  8. J
    Juan

    We’re all waiting for Jose’s article! ;-)

  9. P
    Paul

    This is great! I’d love to see something from Jose too! I’d love to see what he gets from you and how he transforms it. These are great compositions.

  10. This is great!

    Thanks for sharing your process in detail! the before / after scenes are great to show the extend of tweaking each artwork goes through to look like they do. Wonderful!

  11. Great article! I would also be interested in an article from Jose about his animation process.

  12. We want an article written by Jose explaining some shape layers treatment !!, thanks for share @Magoz!, I find your blog very very inspiring.

    • Thanks for your suggestion, Facundo. I’ve just passed your comment to Jose and hopefully he will include it in the upcoming article.

  13. Á
    Álvaro

    Awesome article, Magoz!

    The animations of Jose are very nice, Im very interested in the process that he use in After Effects :)

    Congrats, guys!

  14. I loved this article but as someone is struggling to go from basic animation to a tweaked out version, with all of the little bounces and ticks it really won’t be complete for me until I can read Jose’s process. (Would especially appreciate a little thing on how to create such smooth bounces in after effects)

  15. Hey, guys!
    Thank you very much for your support.

    I’ve spoken with Jose, and he is very excited about writing an article sharing his process. Mission accomplished! :-)

  16. Thanks for sharing. Yes please, I’m interested in Joses workflow as well. And do you create some of your animation sketches or even finished files on an ipad pro by chance? I’ve recently became interested in gifs (again) and trying to find a convenient app..

    • Hi Rina, I use an iPad Pro and Procreate to create my sketches but not animations. I never tried to create animations on the iPad Pro.

      If you end up finding a good app, please let us know!

      • I haven’t found a good app yet to make finished animation on the ipad (sadly). The main problem being, that they either don’t provide enough drawing tools while at the same time do not support a convenient workflow with other apps (like procreate).

        I’m experimenting with several apps for hand drawn animation at the moment (Animation Desk, Animation Creator and even FlipPad), which are all pretty neat to start and plan a drawn animation. As stated above though, none of them is perfect to import/export your file to another app on the ipad, let alone finish a neat animation. Some problems can be solved with a workaround, but in the end you still need to at least touch up and finish the animation on a computer.

        That said, you can actually work on your ipad for the first steps rather nicely if you like hand drawn animation. Still looking for a vector animation app (I’ve heard some things about DoInk, haven’t tried it yet though) and of course an app for finishing/rendering more complex animation.

        I’m not an animator but I recently became interested in making animated gifs from my illustrations. So I’m especially looking for an app that is user friendly and enables me to switch from drawing to animation app as well as finishing/exporting gif files directly from the ipad. I’ll let you know when I’ve found one or when I develop a convenient workflow with various apps :)

        • Thank you for developing, Rina!
          I wish you can find one that suits your needs. And of course, would be awesome if you update us, then :-)

  17. A
    Anvay

    Thanks for the post! It would be really interesting to know Jose’s process as well. (:

  18. Thanks for sharing your process, would love to hear from Jose, love the work you guys do

  19. Great process description. Looking forward to Jose’s piece too.

  20. Qué pasada Magoz! Muy generoso de compartir :=) A mí sí que me gustaría saber más del proceso que sigue Jose. Gracias!

  21. Estupendo!

  22. Fantàstic! Thanks for share it! :)

  23. R
    Rafael

    Heck yes I want to hear more about how he does his animation! :)

  24. I would like to do some simple animations of some of my iPad art – in an iPad animator app (I have illustrator and photoshop, but I prefer iPad).
    Do you have knowledge of any vector based animation apps where I dont need to build a lot of pictures / frames, but rather edit a vector drawing and make them move along bezier curves?

    • I’m sorry, Bo, I haven’t tried any vector based animation apps for the iPad.
      Please, if you find some, come back and share your experience with us! :-)

      Good luck!

  25. Hello!
    You are very generous to share so much knowledge, thank you. I love your work.

  26. Well, I love your work, Magoz, but let’s praise Lorenzo here… holy f***, how good are those animations? Spetacular flow and rhythm and weight and etc. I’ve work with animators before but this is next level.

  27. M
    Mariam Beirouty

    This is amazing! thank you so much for sharing!

    Can you show one simple tutorial of the process..
    the illustrator file and the cinema 4D\after effect process.. so we could see the process of it.

    again, again and again!
    thank you for sharing!

  28. Since finding your blog, my spark for editorial and animated illustrations is lit on fire again. Your blog post on finding work is a bit outdated but is a huge resource for me. Any thoughts on adding an updated version?

More from Creative Process