Browser Problems!

Ooops, your browser is to old! So that you do not go empty-handed, here the main facts about us: // Leider ist dein Browser zu alt. Damit du nicht leer ausgehst, hier die wichtigsten Infos über uns:

we are moving graphic design: We are a matey creative Design Agency based in Munich (germany). Our passion is Motion Design and Animation in every possible way. // Wir sind eine aufstrebende Designagentur aus München. Wir lieben alles, was mit Animation und Motion Design möglich ist.

You can find us also here: // Besuch uns auf:

Instagram Vimeo Facebook

From character design to animation - tips from practice
2021.04

 

 

Before we begin the process from character design to animation, you should have internalised the principles of animation. It helps to familiarise yourself with the book "Illusion of Life" which deals with animation principles. Those who do not wish to buy the book or don’t have time to work through it can watch the fantastic Youtube-Video by Alan Becker anschauen or THIS post by Walt Disney.

This'll give you insight into how a character is developed, prepared for animation and then animated. Of course, we are available for any questions and support! Contact information is provided at the end of this post. Enjoy!

 

 

 

What you can expect:

 

Step 1: Preparations
Step 2: Character design in practice
Step 3: Motion graphics or animation for my character?
Step 4.1: Character rigging in After Effects (motion graphics)
Step 4.2: Frame-by-frame animation
Step 5: 10 animation tips from the experts!

 

 

 

BLOG Tutorial GIF CharacterAnimation naked man walkBLOG Tutorial GIF CharacterAnimation old you transistion animation

 

 

 

Step 1: Preparations

Whether for a client or your own project, you should always begin by determining whether a character is actually necessary. Why do you want to use it? What message should they convey? Is it worth the time (and cost)? A well thought-out character is always a popular, identifiable figure and can help convey difficult or complex topics. For some companies, it involves bringing their mascot to life. Characters or faces attract attention and increase acceptance of videos.

If you decide to opt for a character, you should now determine WHAT they should do. Do they simply stand there or should they perform spectacular karate moves? The more complex the movements, the greater the time and costs involved. The next point focuses on the character design and so you should have a basic idea of one thing: what should your character look like? This easily determines between:

 

character animation vs graphic style!

In other words, the more simplistic the graphic style, the faster (and more cost-effective) even complex animations can be created. On the other hand, this naturally means that the more details included such as shadows, outlines or a complex hairdo, the more expensive it is. Take time to research and find comparable styles that you like and take a look at the complexity of the illustrations. Every shadow, line and detail involves additional work.

 

 

 

Step 2: Character design in practice

Have you decided what your character can do and settled on a graphic style? Great, then it's time to get started on the sketch. If your drawing skills are somewhat limited, get some professionals on board! Anything that is not clearly visualised in this stage can soon ramp up the animation costs!

Why?

If the customer is on board with your vision early on and they can see the character's movements as a sketch beforehand, you can avoid costly decision changes later on. You might have spent several days working on an animation that the customer doesn’t like. This is irritating for everyone involved

 

2.1 Get to know your character!

Of course, there are countless books and online courses when it comes to character design. In our opinion, the main thing is to get to know your character in detail! And not just in terms of design! Think about what motivates your character, where they come from or what their emotional state is right now. What scares them? Wishes? Goals? And a really important tip: AVOID PREJUDICES! The more a character is united in opposites, the more exciting it becomes. You can find more tips in the last section of this post.

 

BLOG makingof Thumbnail Character design venice after dark giovanni skizzeBLOG makingof Thumbnail Character design venice after dark aiko skizze

 

2.2 Experiment with your characterr!

Experiment widely with your character and sketch whatever takes your fancy. Don’t worry about the details and try out as many things as possible. See whether all of the poses work in your design, play around with perspectives and let the character experience all kinds of emotions. Ensure a clear silhouette for each pose! Ideally, your character and their mood should be identifiable from this alone.

 

BLOG makingof Thumbnail Character design venice after dark aiko zeichnung

 

2.3 Character illustration

Once you've got a good gut feeling about things and have got to know your character, you should think about the next step. Do you want to implement it as a pixel or vector graphic? To decide this, it's important not only to know where the graphics will be used (advertising material on a website etc.) but also HOW your character will be animated! Which brings us to the next point...

 

 

 

Step 3: Motion graphics or frame-by-frame animation for my character?

What are the differences between motion graphic design and animation? And when do you use them?

 

 

3.1 What is motion graphic design?

 

Motion graphic design basically works with graphics which can be moved and distorted with the help of key frames in programs such as Adobe After Effects. More simply put: like a puppeteer handling a puppet. This is of course far more complex in reality and offers a number of options when combined with effects.

This method has the advantage of changing and adapting the movements at any time. Fluid movements with a high refresh rate can be created and both pixel and vector files can be used. It is recommended to work witht Photoshop or Illustrator in After Effecs. We have summarised the precise definition of motion graphic design for you HERE.

 

 

3.2 Examples of motion graphic graphics:

 

BLOG Tutorial GIF CharacterAnimation Katze shortBLOG Tutorial GIF CharacterAnimation horse and bird

 

 

 

3.3 What are animations?

 

We have described the term animation in detail for you on THIS page. In this blog, we’re focussing on the classic animation technique known as frame-by-frame. This technique is also known as a cartoon, such as in old Disney films. These offer a whole host of opportunities for animating your character but is more time-consuming than motion design. We would even go so far as to refer to supreme discipline!

 

 

3.4 Examples of frame-by-frame (cartoon:

 

BLOG Tutorial GIF CharacterAnimation burning snowman shortBLOG Tutorial GIF CharacterAnimation Biertrinken

 

 

 

3.5 What are 3D animations?

 

Of course, there are also 3D character animations but we’ll talk about these in a separate blog post. Let’s just say here that for the 3D workflow, the character drawings must be created in a so-called T-pose on all sides so that they can be used as a template for the subsequent 3D process.

 

In practice, hybrids of all areas are often used. Excellent results can be achieved with all options though!

 

 

3.6 Examples of animation:

 

Animation Fight GIF by Weltenwandler downsized largeBLOG Tutorial GIF CharacterAnimation Shadow Tactics

 

Title GIF Handwerk animation by Weltenwandler Designagentur GmbH

 

BLOG Tutorial GIF CharacterAnimation Oktoberfest short richtigBLOG Tutorial GIF CharacterAnimation cows animation

 

 

3.7 What is the Adobe Character Animator?

 

This is software from Adobe hat is exclusively developed for live character animation. The software recognises movements via camera and implements them onto a graphic character in real time. We experimented with this a lot at the start but have not found a practical use for it yet. One of the few successful applications was in 2016 in the talk show with Stephen Colbert.

 

 

 

Step 4.1: Character rigging in After Effects (motion graphics)

If you have opted for motion design, there are now various ways to bring your character graphics to life. The graphic editing process for subsequently producing animations is called rigging. Motion designers have adopted the term from the 3D workflow. Here, designers generally work on so-called BONES,which we place over our graphics and join together. This can be done using the After Effects PIN tool but the options are limited and the quality is often unsatisfactory. Here, we present three of the best character rigging plugins that we use on a daily basis:

 

 

4.1.1 The DUIK plugin:

A powerful plugin from France! This lets you rig complex characters and easily animate them afterwards (includes premade walk loops for example). Ideal for both humans and animals. Suitable for pixel images and vector files. It’s complex, but the plugin is a great solution for anyone who needs to animate characters on a regular basis! This plugin also allows you to create key frames and automated animations. It's worth taking a look! The plugin is also financed from donations; you can download it HERE. Take a look at how to rig characters in DUIK on the YouTube channel “Jake in Motion”:

 

 

 

 

4.1.2 The Joy Stick’n Sliders plugin:

This small but fine plugin lets you easily and conveniently rig faces! It provides just five key frames for different facial poses: STRAIGHT ON, LEFT, RIGHT, UP and DOWN, and the plugin magics up the rest. Afterwards, as the name suggests, you'll have a joystick for moving the face in all directions! Also works really well with abstract graphics. You can buy this plugin on aescripts.com and get more insight on the official YouTube vide:

 

 

 

 

4.1.3 The Rubberhose plugin:

The Rubberhose plugin is great for easily creating legs and arms and animating them. The plugin creates a stroke that you can graphically adapt as desired. The various settings allow you to adjust the movement and appearance (round or square elbows).

You can even create the so-called autoflop – this means that you define an area in which the arm bends downwards and upwards. This allows joint rotation to change automatically. The difference between forward kinematics and inverse kinematics is well explained in this Wikipedia article! This can save lots of work, time and angst. The plugin is available on Battleaxe.co, and you can view the promo clip here:

 

 

 

 

Step 4.2: Frame-by-frame animation

As mentioned earlier, there is great literature and countless online training sessions for classic frame-by-frame animation. If you really want to work with this animation technique, we'll give everything to make this happen. At Weltenwandler, we work with the Clip Studio Paint program (formerly Manga Studio). Widely used and highly specialized programs are also adobe Animate and ToomBoom Harmony.

This makes it easy to create frames at different levels, has great premade and customisable brushes, is a lot faster than Photoshop, onion skinning is easy to handle and it has a special fill function that allows you to colour in even unfinished outlines! We now use this program for complex illustrations! Our colleague Reuben Lara gives insight into this animation technique on YouTube:

 

 

 

 

Step 5: 10 animation tips from the experts!

To finish, the animated characters are typically integrated into an animation project. With classic cartoon animation, you can now add particle effects or other graphic elements, or change the look with filters and effects. If your character has been rigged in After Effects, the animation work begins now. This separates the wheat from the chaff! Here are ten tips to improve the animation quality of your characters:

 

» Tip #01: Read the book “Illusion of Life” or learn more about animation principles elsewhere!

 

» Tip #02: Focus on the right timing and correct speed of your movements.

 

» Tip #03: Annunciate movements so that the viewer can follow them better (before the little gerbil runs off, it takes a little swing!

 

» Tip #04: Incorporate 'secondary actions’ such as hair or clothing to make the animation more dynamic!

 

» Tip #05: Put yourself in your character’s position! What are they thinking? How would they react?

 

» Tip #06: What mood is your character in right now? How would that impact their movement?

 

» Tip #07: Act out the movement in front of a mirror or record it.

 

» Tip #08: Experiment! This is the only way to find exciting, new types of movement.

 

» Tip #09: Consciously use the opportunity to let movements start and finish smoothly but don’t be afraid to be quick or abrupt either! For example, eyes are usually too fast to see their movement (except when reading).

 

» Tip #10: Use exaggeration if it fits in with your style and target group! This can make your animation more exciting and interesting.

 

 

 

❤ We're here for you ❤

Do you have any questions or criticisms about our article? Do you need support for a project or someone to help you implement it? Then feel free to contact us with no obligation bya phone or use our contact form. Until next time!

 

 

 

Accept

Decline

This website uses cookies to enhance your browsing experience on our website.

Learn more ...