Animation logo et mascotte

animation logo et mascotte, du dessin vectoriel au Gif animé.

> Du dessin vectoriel au Gif animé

L’animation de logo et mascotte, c’est quelque chose que j’ai beaucoup pratiqué. J’ai mes habitudes, je suis en terrain connu, je sais comment m’y prendre.

Créer un personnage graphique, en restant le plus sommaire possible, sans s’encombrer inutilement, ça aussi je connais bien.

Quand il s’agit de réaliser un dessin vectoriel, je me tourne encore et toujours du côté d’Adobe et son logiciel Illustrator. Même si, sans que celui-ci n’en sache rien, je m’essaie depuis peu à Affinity Designer sur iPad Pro. Infidélité, un drame se profile.

> Ressemblance fortuite

J’étais donc plutôt satisfait de mon personnage. Suffisamment pour l’envoyer via Messenger à mon collègue et ami Kaze Dolemite.

Confiant, j’ai attendu sa réaction. Elle n’a pas tardé à arriver.

Ses premiers mots : Bonnemine. Avec cet air suffisant. En tous cas son écriture dégageait de la suffisance.

C’est qui ça Bonnemine ?

« Quoi, tu ne connais pas Bonnemine » ? Avec cet air méprisant En tous cas son écriture dégageait du mépris.

D’où l’utilité des emojis !

Après avoir rapidement googlelisé, c’est effectivement un personnage jeunesse du journal J’aime lire, à l’apparence d’un crayon, doté de deux yeux, de bras et de jambes. Mince alors !

Bon, en même temps, ça ne doit pas être la première fois qu’un illustrateur colle des yeux et des bras à un personnage en forme de crayon.
Un peu comme les personnages en forme de saucisse à qui on met des yeux, un slip et une casquette. J’en ai vu des tas.

> Animation du Gif

J’ai animé les différents éléments sur After Effects. Ca faisait quelques semaines que je n’avais pas travaillé dessus. Ca me manquait. Je déteste perdre mes réflexes. J’aime quand ça devient naturel.

La dernière phase, je l’ai faite sur Photoshop. J’imagine qu’il y a d’autres moyens de faire un Gif animé, je ne connais que celui-ci. Ca permet de régler correctement le poids du fichier. Ne pas faire trop lourd sans trop détériorer la qualité du dessin.

After Effects animation

After effects animation pour YOYO et Pathé Carré de Soie

Voici une animation réalisée sur After Effects pour l’agence Long Island, YOYO et Pathé Carré de Soie.

Il s’agit ici de sensibiliser le spectateur des salles de cinéma de l’importance du recyclage des bouteilles en plastique.
Le but de cette animation est d’éduquer le spectateur pour qu’il ait le bon réflexe, celui de jeter sa bouteille après chaque séance.
Si l’opération est concluante, elle sera étendue dans les autres cinémas Pathé de l’agglomération Lyonnaise.

Motion Designer

Pour la première fois, je n’ai pas géré l’aspect graphique. Les images vectorielles ont été développé en interne par l’agence.
Ca ne m’a aucunement posé un problème de conscience :)
Je sais faire la part des choses entre mon travail d’illustrateur et celui plus centré sur le Motion Design.

After effects Animation | Motion Design

Je suis parti de ce storyboard, fourni par l’agence et validé par le client.

Animation After Effects | Storyboard
Storyboard | Animation 2D
Motion Design | Le storyboard
Motion | Découpage du film
Storyboard | Découpage
Animation cinéma Pathé | Carré de Soie

La première chose que j’ai commencé à faire c’est d’en réaliser une version animée. Ca rassure le client, et moi ça me donne suffisamment d’indications pour envisager sereinement les étapes suivantes.
La première difficulté qui m’apparaissait était de trouver le bon raccord entre les différents plans, pour un minimum de cuts, en privilégiant l’idée de plan séquence.

Animer sur After Effects

After Effects Animation | CC 2018

L’agence m’a envoyé le fichier Illustrator de chaque élément composant la séquence animée. J’allais pouvoir enfin animer ? Non, pas encore. Avant de basculer sur After Effects, il a fallu reprendre l’organisation des calques des images vectorielles. Et privilégier un format plus proche du 1920 x 1080. C’est une étape fastidieuse, qui peut facilement prendre plusieurs heures. Mais c’est essentiel. C’est seulement après que je passe à l’importation des éléments, isolés sur autant de calques nécessaires.

After Effects Animation | Les calques

Sur After Effects je me retrouve très rapidement avec des dizaines et des dizaines de calques. Il faut pouvoir s’y retrouver, et donc être plutôt bien organisé.

After Effects | Logiciel d'animation

J’adore After Effects. Ce logiciel offre tellement de possibilités que c’est à chaque fois un plaisir de travailler dessus. Pourtant il n’est pas rare de s’embourber dans des étapes complexes, où il n’est pas toujours facile de s’en extirper. Mais ça fait sûrement aussi parti du plaisir d’animer.

Montage sur Final Cut Pro X

J’importe l’animation sur Final Cut Pro. Le logiciel permet plus de liberté pour le travail du sound design. Comme le client n’a pas eu le budget nécessaire pour y placer une bande sonore digne de ce nom, il a fallu se rattraper sur les bruitages. Trouver le bon son n’a pas toujours été facile. Il a fallu aller piocher sur les différents sites spécialisés, éplucher leur catalogue, écouter les différentes pistes, faire une sélection, télécharger le fichier qui semblait convenir, l’importer, puis le coller à la scène pour vérifier que ça colle à l’image. Et si ce n’était pas concluant, recommencer.

Montage | Final Cut Pro X

Format DCP

La création d’un fichier au format DCP n’a pas été la partie la plus facile à exécuter. Sans doute aussi parce que c’était la première fois qu’on me demandait de gérer cette étape.
Un DCP est en réalité composé de plusieurs fichiers, images, sons, et autres informations numériques destinés au lecteur DCP d’une salle de projection.

Pour cette animation qui à la base tournait en 25 images/secondes, pour une durée de 76 secondes, l’ordinateur doit exporter 25 X 76 images au format tiff, soit 1900 tiff placés dans un dossier. Il a fallu aussi switcher sur un format scope de 2048 x 858. Comme il était à ce stade impossible de réorganiser le cadre, on s’est contenté d’y placer des bandes noires sur les côté. Envisager le scope, c’est un peu comme tourner un film en 4/3 et soudain réclamer un cadrage à la Sergio Leone. C’est un autre monde !

Le DCP fonctionnait dans les différentes salles. Malheureusement, c’était saccadé dans la salle IMAX (rien que ça !), il a donc fallu basculer en 24 images/seconde.

Je ne me suis pas encore rendu au cinéma pour voir l’animation sur grand écran, mais le projectionniste qui est aujourd’hui davantage un technicien, a filmé avec son smartphone l’écran, pour que je puisse vérifier et valider. Ma crainte était que ça bouffe de l’image au niveau de la hauteur.

Bref, au final, tout cela fonctionne.
Bien que ça ne soit pas le travail pour lequel je suis le plus fier (Parce que ce ne sont pas mes images, que le budget ne permettait pas d’y consacrer davantage de temps), la satisfaction qui en ressort est que je suis capable aujourd’hui de gérer un projet d’animation de A à Z. Ce qui était impensable il y a seulement 10 ans.
J’ai par le passé rédigé la bible d’un projet d’animation, écrit synopsis et dialogues, mis en place le découpage de séquences, dessiné des storyboards. Je peux désormais animer, monter, ajouter du son (musique bruitage et voix-off) et fournir un rendu professionnel sous la forme d’un fichier DCP. En gros, gérer toute la chaine de fabrication ! Et ça c’est plutôt agréable !

DCP | Exploitation cinéma

Animation de la ville !

La ville s’anime sur After Effects

Une animation de la ville que j’avais en tête depuis un certain moment.
Comme souvent, je prévois d’animer seulement quelques éléments et au final le moindre détail se retrouve en mouvement. Que voulez-vous, c’est plus fort que moi.
Une nouvelle fois j’ai reproduit sur after effects ce côté saccadé de l’animation qui colle plutôt bien à mes dessins.
Je reconnais que j’ai une obsession avec le graphisme des villes. Les films de Michael Mann ont fini par déteindre sur moi !

Animation de la ville | Illustration animée

Personnage animé | Faire des gifs

Personnage animé et création de gifs

Sur ce gif de personnage animé je reprends l’idée du stop-motion. Un effet que je bidouille moi-même sur After Effects. Comme je l’indiquais dans un précédent post, j’en ai un peu marre de ces animations trop parfaites sans aucune accroche. Je préfère quand ça saute, que ça accroche, que le mouvement résiste. En tous cas moi ça me plait.

Ça me laisse entrapercevoir d’autres possibilités. La prochaine fois j’essaie autre chose, autrement. Je teste.
A chaque fois j’ai l’impression d’avancer, et c’est bien le principal !

personnage animé | Création gifs

Marcher avec style | Gif

Marcher avec style pour un personnage en mouvement

En vérité je ne suis pas sûr que cette animation illustre réellement le marcher avec style. Mais si ça vous inspire, vous êtes bien évidement libre d’essayer dès votre prochaine sortie en ville. N’hésitez pas à me faire un retour !

Quoi qu’il en soit, le mouvement colle plutôt bien au personnage. Comme je le disais dans mes précédent posts, je ne cherche pas à obtenir une animation fluide et parfaite, ça ne m’intéresse pas. Mais que l’animation corresponde au style de mes illustrations. J’ai d’ailleurs dans un premier temps fait fausse route en décomposant la démarche. C’était raté et inintéressant. Ici deux phases clés suffisent pour le mouvement des jambes.

Je me sens nettement plus à l’aise avec l’animation de fichiers provenant de photoshop. Je sais bien mieux anticiper mes besoins, j’ai ainsi moins de contraintes et donc plus de liberté pour animer sur After Effects. Ça facilite nettement la tâche et procure bien plus de satisfaction.

Marcher avec style | Animation gif

Animation de gifs

Tests et essais d’animation de gifs

Je continue d’apprivoiser l’animation de gifs. J’essaie différentes possibilités sur After Effects, je vois ce que ça donne, si ça colle à mon dessin, et si ça ne le dénature pas.
Bon ici, j’ai dû compresser pour que l’animation s’affiche sans trop de souci sur mon blog, ça a donc légèrement détérioré l’image et gâché quelques effets de matière. Pas grave !

Le plus long dans le processus est certainement l’étape de la préparation des fichiers sur photoshop. Avant leur importation sur After effects. Mais là aussi, avec l’habitude, tout devient plus rapide et moins laborieux.

Une fois que j’aurais une petite série de gifs suffisamment convaincants, j’espère attaquer une animation plus longue. Affaire à suivre donc.

Animation de gifs

Créer des gifs animés

Créer des gifs animés de photoshop à After Effects

Comme il m’a été demandé de créer des gifs animés à partir de mes illustrations plus récentes, j’ai passé un peu de temps à bidouiller sur After Effects.

J’avais l’habitude de travailler l’animation avec des dessins vectoriels, un peu moins avec des fichiers provenant de calques Photoshop. Animer d’Illustrator à After Effects m’était devenu familier, il m’a fallu consacrer davantage de temps pour trouver des astuces d’animation qui collent un peu plus à ce type de dessin.
Sur Illustrator le trait était régulier, les courbes parfaites, les aplats unis, il était logique d’avoir une animation fluide.
Mon dessin actuel se veut moins régulier, c’est la raison pour laquelle je cherche à reproduite l’effet du stop motion et ses imperfections.

Je retourne donc approfondir tout ça !

Créer des Gifs animés à partir d'une illustration