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.

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

Gif animé pour la cession 4 de JouéClub sur Facebook

Gif animé

Gif animé une nouvelle fois pour JouéClub, cette fois-ci à l’occasion de la fin d’année. Et c’est encore pour l’agence GYRO PARIS.
Les dessins sont conçus en vectoriel sous le logiciel illustrator et ensuite exporté sur After Effect sur lequel je réalise les animations. Je finalise le Gif animé à l’aide de Photoshop.
Lettre J — Joyeux Noël :
Gif animé d'une chaussette Noël | Jouéclub
Lettre L — L’émotion de Miss France :
Gif animé de Miss France| Jouéclub

JouéClub | Gif animés

Pour JouéClub, cette nouvelle série de Gif animés que j’ai réalisé à partir des lettres du logo et qui sont à retrouver sur la page Facebook de l’enseigne. Agence GYRO.
Lettre J — Le froid est à nos portes :
Froid| Jouéclub
Lettre J — Anniversaire de Dumbo :
Dumbo| Jouéclub
Lettre O — Halloween :
Halloween| Jouéclub
Point d’exclamation — Changement d’heure :
Pendule| Jouéclub