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.
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.
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 here.
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.
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.
Here is a selection of my favorite animations
