Note: en bas de l’article vous trouverez comment devenir motion designer (parcours, cursus scolaire, formation…)
Cliquez ici pour télécharger le fichier bonus du tutoriel.
Texte et captures de la vidéo
Bonjour à tous,
Je me présente, je m’appelle Jeremy Fassio. Je suis motion designer et réalisateur à Montréal. Je suis spécialisé en design graphique, en motion design. J’ai une chaîne YouTube qui s’appelle Mapping Motion et un blog mappingmotion.com.
Je suis très heureux d’avoir été invité par Pit pour vous faire l’animation de l’illustration ci-dessous.
Nous allons voir différents principes sous le logiciel After Effects, mais aussi plein de petites techniques, afin que vous puissiez les appliquer à votre propre illustration.
Du dessin à l’animation, il n’y a qu’un pas ou plutôt 24 images/seconde. Nous allons voir comment passer de l’un à l’autre ; je suis sûr que vous allez prendre beaucoup de plaisir et continuer par la suite.
Allez, commençons.
Donc nous allons voir comment animer des branches assez simplement, donner de la vie à une scène et comment motiver l’animation avec les éléments. Ici, il s’agira du vent qui passe par la fenêtre, créant ainsi un courant d’air qui agite les feuilles. On va voir aussi un peu plus en profondeur comment créer des petits détails, des textures, des ombres, des effets sur les murs, etc, etc.
Cela va être assez dense pour un tuto d’initiation. Mais vous en êtes capables et nous allons voir ça pas à pas.
Nous voici donc dans After Effects. Le logiciel est compris dans la “creative cloud”, qui contient toutes les applications Adobe. Donc si vous souscrivez déjà au “creative cloud”, car vous utilisez déjà Photoshop ou Illustrator, vous allez pouvoir installer After Effects et tous les (nombreux) logiciels de la suite Adobe.
Sachez que vous pouvez essayer After Effects pendant 7 jours sans avoir rien à payer. Il vous suffira de vous inscrire avec une adresse e-mail pour tester toutes les applications d’Adobe.
Bref, une fois que vous avez installé After Effects, on arrive sur l’interface ci-dessous.
Cela peut sembler austère et compliqué la première fois que l’on ouvre le logiciel, mais vous allez voir que les choses sont plutôt bien faites.
Donc pour importer une image, allez sur Fichier > Importer > Fichier
Une nouvelle fenêtre s’ouvre, dans laquelle on va aller chercher notre fichier Illustrator (car c’est avec Ilustrator que j’ai créé l’illustration qui va nous servir).
Une fois le fichier sélectionné, je clique sur Ouvrir pour procéder à l’importation du fichier. Cela me fait apparaître une petite fenêtre.
Attention, veillez bien à ce que Composition soit sélectionnée dans Importer sous. Idem pour la sélection suivante, il faut que Taille du calque soit sélectionné dans Dimensions du métrage. Cliquez sur OK et le fichier est enfin importé.
Sur la gauche, vous pouvez voir un bandeau déroulant. On remarque alors que After Effects a créé deux lignes : la première est un dossier avec tous les calques Illustrator et la seconde est une composition à l’intérieur de laquelle on retrouve encore une fois les calques.
Et c’est à partir de cette composition que l’on va animer. Cette composition va être notre scène, un peu à l’image de celles dans Première Pro pour ceux qui utilisent des logiciels de montage. Ici, la composition, c’est l’endroit dans lequel on va créer nos animations.
Une des choses que l’on va faire tout de suite, c’est ouvrir les Paramètres de composition, en faisant Commande + K (Mac) ou Ctrl + K (PC) afin de vérifier les réglages.
On voit que l’on est bien configuré en HD et que les réglages Largeur/Hauteur sont bons également. Bien qu’une cadence de 30 images par seconde soit possible, je vous conseille de rester à 24 pour ce tutoriel.
Pour la résolution, on va se mettre sur Intégrale dans un premier temps, mais c’est juste la prévisualisation. Concernant la couleur d’arrière-plan, on ne s’en occupe pas pour le moment. Pour la durée de composition, une configuration de 5 secondes sera parfaite.
Les calques Illustrator, on les retrouve en bas de la fenêtre de travail.
C’est très bien pour les importer. Maintenant, on va devoir faire une petite manipulation pour les transformer en calques de formes. Sur After Effects, les calques de formes sont les calques les plus utilisés et sur lesquels il est possible d’animer des propriétés. C’est ce qui différencie les calques de formes des calques Illustrator.
Donc l’action à faire est très simple. Il suffit de sélectionner les calques dans cette fenêtre, à l’exception du BG qui correspond à l’arrière-plan. Il est possible de le bloquer pour ne pas intervenir dessus. Pour cela, repérez le logo du cadenas et cliquez dans le carré devant BG.
$
Du coup, on sélectionne tous les autres calques (Ctrl + A) dans cette même liste. On peut les voir alors être sélectionnés sur l’image.
Ensuite, faites un clic droit puis Créer > Créer des formes à partir du calque vectoriel.
On peut voir alors que l’on a bien créé des calques de formes qui sont symbolisés par la petite étoile.
Dès lors, les calques Illustrator ne sont plus utiles et on peut les supprimer.
Lorsqu’il s’agit d’animation, je préfère aller du plus compliqué au plus simple. Mais surtout, aller à l’essentiel. Ici, la clef de notre animation, c’est l’animation des branches et du vent. Les autres animations (étoiles, lune, nuages) seront secondaires. Et tout ce qui est texturing et lightning sera mis une fois l’animation vraiment calée. Sinon on serait obligé de revenir dessus dans l’hypothèse où on devrait modifier un peu les timings de l’animation.
Il y a donc un ordre précis à respecter lorsqu’on fait de l’animation.
Donc tout de suite, nous allons isoler nos branches. Pour cela, repérez le petit cercle, à côté du cadenas dont nous parlions précédemment. Puis cliquez sur les carrés de cette colonne pour sélectionner les calques sur lesquels vous voulez travailler.
Sélectionnons la Branche 1 en cliquant dessus.
À côté de votre zone de travail, à droite, vous avez un onglet Effets et paramètres prédéfinis. S’il n’est pas visible, vous pouvez le sortir en allant dans Fenêtre > Effets et paramètres prédéfinis
Dans la zone de recherche de l’onglet Effets et paramètres prédéfinis, on va rechercher l’effet “CC Bend It”. Normalement, en tapant juste “ben”, il devrait vous être proposé.
On va ensuite prendre cet effet et le déposer sur notre branche, par un glisser-déposer sur la ligne “Branche_1 Silhouettes”.
On peut voir que cela a un peu rogné le calque.
Si vous ne voyez pas les contours du calque, ce qui est très pratique quand on anime, allez dans Affichage et cochez Afficher les contrôles du calque.
L’effet “CC Bend It” a un début et une fin. Il faut donc déplacer le curseur en forme de cible au sommet du calque.
On procède de même avec la cible du bas, que l’on positionne au pied du calque.
Pour faire plus simple, je vais même isoler ce calque de tous les autres. On voit bien nos deux points placés en haut et en bas du calque; ce qui correspond encore une fois, au début et à la fin.
Dans After Effects, il est important de savoir que tous les paramètres contenant le symbole de chronomètre sont animables. Et c’est justement ce que l’on recherche.
Donc ici, je clique sur le symbole de chronomètre de la ligne Bend, pour la sélectionner et travailler dessus. Cela s’appelle mettre “une clef d’animation”.
J’opte pour une seconde.
Je joue donc avec le critère “Bend” (courbe, plier).
Ensuite, j’appuie deux fois sur U (je “déplie”) et là, je peux voir les clefs d’animation que je viens de créer. En animation traditionnelle, les clefs d’animation correspondent aux poses des personnages; par exemple, dans un cycle de marche, les poses hautes et basses donnant l’impression que le personnage marche, sont des clefs d’animation (keyframes).
Sur After Effects, le logiciel génère une interpolation de mouvement entre nos clefs d’animation, c’est-à-dire qu’il va calculer toutes les images intermédiaires entre deux points clefs. C’est l’avantage du travail numérique, il suffit de placer des clefs d’animation et de travailler le timing et la vitesse; ce qui représente déjà pas mal de travail.
On vient donc de faire notre première animation. C’est encore rigide et les timings doivent être retravaillés. On va réduire tout ça.
Donc on sélectionne les deux clefs, en faisant un clic droit dessus, puis Assistant d’image clé et Lissage de vitesse.
On remarque alors que cela a changé la forme de nos clefs.
Sans trop rentrer dans les détails, cela nous a créé un lissage de vitesse.
Lorsqu’on regarde le paramètre de vitesse, on remarque qu’avant, la courbe était linéaire, alors qu’après le lissage, elle est plus sinueuse.
Cela veut dire que le mouvement va être plus fluide. Le démarrage est plus lent, l’animation se poursuit et fait un amorti à la fin.
Pour regarder votre animation, vous pouvez appuyer sur N afin de marquer la fin de la bracket. Cela permet de contraindre la prévisualisation à une zone précise.
Avec ces quelques modifications, je suis assez content du résultat. Je vais maintenant reproduire le même principe sur les autres calques de branche.
Donc j’active le calque Branche_2 Silhouettes, puis je vais chercher l’effet CC Bend It, que j’applique au calque. Je positionne les points de départ et d’arrivée.
Et à partir de là, j’anime l’effet Bend et je positionne les clefs d’animation. Puis je regarde le résultat.
Je vais maintenant étendre ma zone et monter jusqu’à 3 secondes d’animation. Je vais allonger un peu les clefs et faire comme avant, un lissage de vitesse. Puis je vais dupliquer les premières clefs d’animation un peu avant 3 secondes. Cela va donner un aller-retour des branches. On crée ainsi une boucle dans l’animation. Pour le moment, on ne se concentre pas trop sur le timing, on veut juste que cela fasse une boucle.
Maintenant, je recommence sur tous les calques branches.
Pensez à sauvegarder votre fichier, car plus vous allez animer et plus votre ordinateur va être sollicité, au risque de planter.
Maintenant toutes les feuilles sont animées. C’est pas mal, on a un effet ping-pong, cela fait bien un aller-retour.
Dans l’exemple du début, on a un courant d’air qui rentre par la fenêtre et génère le mouvement des branches. Ce courant d’air, on va le créer assez simplement, avec des contours et grâce à l’outil plume.
Tout d’abord, il faut que vous ayez bien désélectionné tous vos calques. On clique sur l’outil plume.
On fait ensuite un premier point en cliquant sur la zone désirée. Cela génère un calque de forme.
Avant de positionner mon deuxième point, je modifie les contours et je supprime mon fond.
Je crée ensuite un deuxième point et ainsi de suite, pour obtenir un tracé représentant le chemin du courant d’air. En animation, ce qui fonctionne bien, c’est de faire des arcs de cercle, des formes arrondies, tout en ayant le moins possible de points.
Sachant que l’on pourra modifier cela par la suite; par exemple, en cliquant sur les points, il est possible de modifier leur position. Pour les habitués de l’outil plume sur Photoshop ou Illustrator, cela fonctionne de la même manière sur After Effects. Pour les autres, cela demandera un peu de pratique.
Ce que je peux vous dire, c’est que l’outil plume crée des courbes de Bézier. Vous avez des tangentes calculées par l’ordinateur, et on peut ajuster légèrement les courbes. Cela permet vraiment d’aller dans les détails, de créer de très belles courbes. C’est avec ça que l’on va créer des formes et que j’ai notamment créé les plantes de cette illustration. C’est un outil très précieux pour les illustrateurs qui ont l’habitude de faire du dessin vectoriel.
Voilà donc mon tracé de base.
Il est important de nommer les calques et même de leur donner une couleur, afin que certains se démarquent sur la timeline. C’est par exemple le cas pour le calque du courant d’air.
C’est important de le faire dès le début pour hiérarchiser l’ensemble.
Donc je reviens sur notre courant d’air. Comme vu précédemment, il a un contour de 6, que l’on peut encore ajuster si besoin. Si je déplie les options de ce calque, on peut voir différentes options encore.
Profitons du fait d’être sur ce calque, pour lui appliquer une nouvelle propriété qui s’appelle Réduire les tracés.
Pour celles et ceux qui seraient sur une version antérieure à la version 2019, le nom était auparavant Raccorder les tracés, mais l’option est au même endroit. Pour les versions anglophones, le nom est Trim path. Bref, en cliquant dessus, cette nouvelle propriété s’ajoute au calque.
Si on joue sur les options de Fin, on va pouvoir animer. Cela ressemble un peu à l’effet CC Bend It sauf que là, c’est un effet qui permet d’animer des contours. Sur After Effects, c’est toujours un peu le même principe d’animation, mais il faut connaître les effets. Dès lors, il devient facile de les animer.
Pour plus de détails et pour caler correctement le courant d’air, je peux rendre visibles les clefs d’animation de ma première branche.
Concernant la propriété Réduire les tracés, je laisse le début à 0 pour le moment et la fin à 100%. Ce que l’on veut, c’est suivre l’animation de notre branche. Donc en réalité, au départ, la fin est à 0. On ajoute alors une clef.
Arrivé au niveau ci-dessous sur la timeline, …
… on va vouloir que le courant d’air parvienne environ à la moitié de l’image.
Cela donne une fin à 33%.
Je sélectionne ces clefs et je leur applique un lissage de vitesse. (clic droit, Assistant d’image clé > Lissage de vitesse)
On va commencer ensuite à animer le début. En réalité, le début va finir le tracé et on veut qu’il commence à suivre notre calque.
Le résultat n’est pas mal. On va lisser nos clefs.
Pour la dernière étape, le début et la fin sont à 100%.
Je vais travailler à nouveau la courbe, en la remontant un peu. Je rends visibles toutes les branches, la fenêtre et le ciel, puis je regarde ce que l’ensemble de l’animation donne. On voit donc le courant d’air entrer par la fenêtre et ressortir en s’estompant.
Après visionnage, quelque chose me chagrine. Je décide de supprimer le premier point de ma courbe, qui était en trop. J’en profite pour modifier quelques courbes du tracé.
Au final, j’ai gardé juste le lissage au début et à la fin. Mais vous pouvez très bien changer et revenir à un état de clef linéaire.
Je vais ensuite aller dans Forme, Contour. Et je vais changer l’extrémité de ligne en extrémité arrondie avec un sommet en arrondi également.
Si on zoome, on voit bien l’extrémité arrondie.
Je vous disais qu’on allait peut-être supprimer des points. Je fais alors quelques essais, pour voir ce que cela donne. Tout en tirant sur mes courbes de Bézier, je me rends compte qu’effectivement je peux supprimer des points.
En effet, le résultat est déjà plus fluide. Donc, c’est vraiment au cas par cas. Tout dépend du parcours que vous voulez donner, mais limitez au maximum les points.
Maintenant que l’effet me convient, je vais animer une autre option : l’épaisseur du contour. Donc je déplie les options et dans Forme, Contour, je peux animer la largeur du contour. Ici, je vais me positionner comme ci-dessous sur la timeline.
Je rajoute une petite clef d’animation à 6 pixels. Puis je vais revenir au début et le faire démarrer à 0; ainsi, on peut voir l’apparition du courant d’air. Puis vers la fin, je crée une autre clef d’animation. Toujours vers la fin de l’animation, avant que le courant d’air ne sorte du cadre de la fenêtre, je ramène la largeur du contour à 0 pixel.
Du coup, j’ai l’apparition du courant d’air, son mouvement et sa sortie.
Après quelques nouveaux petits ajustements, le résultat commence à me plaire. Améliorer et affiner, on peut y passer des heures.
Une fois que l’animation me convient, je renforce un peu l’effet, tout simplement en doublant mon calque Courant d’air.
J’appuie sur P pour les options de position. Je baisse alors un peu la position du tracé, qui a été doublé. On peut voir maintenant que l’animation du courant d’air a bien été doublée.
J’effectue un léger décalage dans le temps de ce deuxième calque du courant d’air avec Maj+Commande+D sur Mac ou Maj+Ctrl+D sur PC. Je le coupe en deux (et j’obtiens un courant d’air 3; avec un intervalle vide entre les deux.
Je duplique à nouveau mon premier calque courant d’air et je vais tout simplement décaler ce nouveau calque dans le temps. J’effectue encore quelques réglages avec notamment le courant d’air 2, qui sera visible tout au long de l’animation.
Une fois que l’on est satisfait de l’animation, on va commencer à faire un peu de ménage, car on se retrouve avec pas mal de calques. Donc on va sélectionner tous les calques courant d’air et faire Maj+Commande+C (ou clic droit, Précomposition) et on va précomposer. C’est le principe des poupées russes; on génère une composition dans la composition principale.
J’appuie sur OK et on remarque que cela nous a isolé l’animation de courant d’air.
Je fais de même avec les branches.
Si on zoome, on constate que les tiges des fleurs ne sont pas dans le vase. Je sélectionne le calque Précomp. Fleur et je reprends l’outil plume. On va ensuite cliquer sur l’option Créer un masque. 
Je commence ensuite à tracer le masque en suivant le bord intérieur du vase; ne pas hésiter à zoomer pour être plus précis.
Puis je continue vers le bas du vase, avant de remonter au point de départ.
Une fois que l’on a fermé le masque, cela cache la précomposition.
Il est alors important d’ouvrir les options du masque Précomp. Fleur et de sélectionner Soustraction.
On inverse ensuite l’ordre des calques Vase Silhouette et Précomp. Fleur. Ainsi, les tiges des fleurs apparaissent bien dans le vase.
Le plus gros de l’animation est maintenant fait. On va continuer élément par élément et faire apparaître nos nuages et la lune.
Commençons par cette dernière. On va aller chercher un effet Lueur diffuse dans Effets et paramètres prédéfinis. Puis on fait bien attention à l’appliquer au calque de la lune.
Cela ouvre une fenêtre de réglages dans laquelle vous pouvez modifier différents critères.
J’augmente alors le seuil (à environ 87%) et le rayon (à 35%).
Pour les nuages, on va appliquer un effet de Contours bruts. On commence par le nuage 2. Encore une fois, cela ouvre une fenêtre de réglages dans laquelle vous pouvez modifier différents critères.
À nouveau, je joue avec les réglages. Et en jouant avec l’option bordure, je déforme le nuage. Plus exactement, j’atténue les contours. J’augmente la netteté, je diminue l’influence fractale et l’échelle. Vous pouvez suivre mes réglages, mais tout dépend du style que vous voulez donner à votre illustration.
J’applique exactement les mêmes réglages pour le deuxième nuage.
Maintenant, il faut que les nuages soient en partie cachés derrière la fenêtre. Pour cela, je vais aller chercher l’effet Appliquer un cache.
Dans les options d’évolution, je vais pouvoir déterminer à l’intérieur de quel calque le nuage va être visible. En l’occurrence, je vais choisir le calque Ciel_Nocture Silhouettes.
Une partie du nuage disparaît alors. J’en profite aussi pour travailler un peu la forme du ciel afin qu’elle coïncide mieux avec l’intérieur de la fenêtre.
Je reprends l’effet du premier nuage et je l’applique sur le deuxième.
Passons aux étoiles. Pour le moment, je n’en ai qu’une seule. Je vais l’animer, puis la dupliquer. Pour son animation, je vais jouer sur son échelle. Pour cela, j’appuie sur S. Je crée une clef. Je vais faire apparaître l’étoile quelques instants après le début de l’animation. Je diminue également sa taille, sans oublier d’appliquer un lissage de vitesse.
Je copie ensuite la première clef d’animation.
Afin de réaliser une boucle, je vais vous montrer une petite manipulation. Tout d’abord, je sélectionne mes clefs. Puis je maintiens Alt et je clique sur le chronomètre. Et là on va entrer dans les expressions.
Je ne vais pas entrer dans les détails. Faites juste comme moi : Property puis loopOut.
Les expressions vont permettre de générer une répétition de l’animation. Plus exactement, ce sont les 3 clefs qui vont se répéter pendant toute la durée de la composition. J’ai réalisé un tuto spécifique sur la réalisation des boucles d’animation, donc si cela vous intéresse, je vous encourage à aller le voir.
Maintenant que je suis satisfait de l’animation de mon étoile, je la duplique et je la positionne à différents endroits, en faisant varier sa taille. Pour accentuer les variations, je peux aussi les décaler dans le temps, de quelques frames à chaque fois.
Maintenant que je suis satisfait de mon travail sur les étoiles, je vais les précomposer, comme on l’a fait précédemment. À noter que les précompositions et les expressions peuvent alourdir la prévisualisation. Mais vous y gagnerez en lisibilité.
On peut maintenant rendre visibles la table et l’arrière-plan.
Ce qu’il nous manque maintenant, c’est la lumière et l’ombre. En appuyant sur Commande+Y ou dans Calque > Nouveau > Solide, on va créer un calque solide.
On va alors avoir une option pour notre calque solide et on va aller lui chercher une couleur un peu sombre.
Cela nous génère donc un nouveau calque. En appuyant sur T, on va afficher les options d’opacité de ce calque; opacité que l’on va pouvoir baisser et on pourra créer un fond par dessus notre composition.
Et avec l’outil plume, on va dessiner directement sur le calque.
J’augmente mon opacité…
… puis j’inverse la sélection: dans les options de masques, je clique sur inversé.
Cela a pour effet d’assombrir tout ce qu’il y a en dehors du masque.
Dans les options de masques toujours, je vais jouer sur le contour progressif. Cela a pour conséquence d’atténuer les bords du calque et de renforcer l’effet de lumière.
Je vais aussi créer une ombre pour le vase. Je désélectionne tous mes calques et je dessine une ombre avec l’outil plume. Puis je lui choisis une couleur.
Je déplace le calque de l’ombre et je le positionne sous celui du vase. Ainsi, l’ombre passe bien sous le pied du vase.
J’ajuste un peu l’ombre et je lui applique un effet de Flou gaussien, que je calibre selon mes besoins. Pour les habitués de Photoshop, ce sont les mêmes noms d’effets.
Je vais m’occuper maintenant de l’ombre des fleurs. Pour cela, je duplique ma Précomp. Fleur et je la place sous le calque de l’ombre. Je renomme cette nouvelle précomposition Précomp. Fleur_OMBRE. Je lui applique un effet de Transformation, puis je joue avec les paramètres proposés, notamment la rotation, la position, mais aussi l’échelle.
Maintenant, je veux que cette Précomp. Fleur_OMBRE ait le même look que l’ombre. Je sélectionne donc la couleur de l’ombre, je la copie. Puis je cherche un effet Remplir que j’applique à Précomp. Fleur_OMBRE. Automatiquement, cela applique une couleur rouge. Je vais modifier la couleur avec celle de l’ombre que j’ai copiée juste avant.
J’applique aussi un Flou gaussien de même valeur à la Précomp. Fleur_OMBRE. Je lui applique également l’effet Appliquer un cache. Dans les options de cet effet, à la ligne « À partir du calque », je choisis le calque Table_dessus Silhouettes. Ainsi, l’ombre ne s’applique qu’au calque Table_dessus Silh.
Si votre ordinateur commence à ramer et que la prévisualisation est longue, je vous conseille d’aller dans les options de Prévisualisation. Vous pouvez notamment ignorer une image sur deux. Le logiciel va donc être soulagé, ne calculant plus qu’une image sur deux, et vous gagnerez en confort de travail.
Maintenant, je vais m’occuper un peu de la table. Je me suis rendu compte qu’il était plus efficace d’avoir la table en noir et blanc. Je vais donc aller chercher un effet Noir et Blanc et l’appliquer aux deux calques de table Table_dessus Silhouettes et Table_Dessous Silhouettes. J’assombris un peu le calque Table_Dessous Silhouettes, afin d’avoir un contour bien dense.
Passons à la touche finale, les textures. Donc à chacun de mes calques, je vais appliquer des ombres internes. Commençons par les fleurs.
Je vais vous montrer comment texturer les calques. Une fois que l’on a des calques de formes, il existe une option pratique permettant de texturer assez facilement. Je sélectionne donc l’un des calques et je fais un clic droit. Je vais sur Styles de calque puis Ombre interne. Cela génère comme un biseautage.
Dans les options d’ombre interne, on peut notamment régler le bruit, ce qui va texturer le calque. Différentes autres options existent et c’est en jouant avec elles que vous allez pouvoir facilement texturer vos calques.
Une fois que vous êtes satisfaits de vos réglages, vous pouvez sélectionner Styles de calque dans les options de votre calque, faire un Cmd+C, sélectionner les autres calques branches et leur appliquer le même effet.
Voilà, j’ai maintenant appliqué la texture à tous les autres calques.
Notre animation est maintenant terminée. On va l’exporter. Néanmoins, il y a une petite étape avant. On va réduire notre animation à 4 secondes sur la timeline, puis faire un clic droit, puis Réduire la composition à la zone de travail. Notre composition fait donc une boucle.
Mais avant de l’exporter, on va créer une nouvelle composition et la faire durer par exemple 15 secondes. Et on va tout simplement y intégrer notre composition d’animation, puis la dupliquer deux fois. On adapte ensuite l’animation sur la timeline. Puis comme tout à l’heure, faire un clic droit puis Réduire la composition à la zone de travail.
Il ne reste plus qu’à exporter notre animation.
On va dans Fichier > Exporter > Ajouter à la file d’attente de rendue.
Concernant les options de format dans la fenêtre des paramètres du module de sortie, on va opter pour un Apple ProRes 4444.
On choisit ensuite le lieu d’export et on renomme le fichier en Animation_tuto_Final. On enregistre, puis on lance le rendu. En fonction de la puissance de votre ordinateur, cela va prendre plus ou moins de temps.
Voilà le résultat final après exportation.
Vous venez donc d’animer votre première illustration et j’espère que ce ne sera pas la dernière.
J’espère aussi vous avoir donné envie d’appliquer ces techniques sur vos propres créations.
C’est donc terminé pour ce tutoriel, j’espère que cela vous a plu.
Merci encore à Pit de m’avoir invité pour vous présenter ces quelques techniques.
Si le motion design vous intéresse, abonnez-vous à ma chaîne et allez voir mon blog. Continuez d’apprendre à dessiner, c’est la base.
À bientôt
Comment devenir motion designer
Il fut un temps, pas si loin pourtant, où les termes de Motion Designer auraient interloqué plus d’une personne. Aujourd’hui, les choses ont nettement changé, mais savons-nous vraiment de quoi il retourne ? Que fait vraiment un Motion Designer ? Quelles études suivre ?
Si vous avez regardé le tuto de Jeremy, vous avez donc compris que le motion designer va concevoir des animations. Graphiste polyvalent, il doit savoir maîtriser plusieurs technologies : la vidéo, l’animation sonore, 2D/3D, mais aussi les effets spéciaux. C’est lui qui va être en charge de l’habillage de vidéos sur internet ou à la télévision. Ainsi, il est présent tout au long de la création vidéo.
Sa mission se base sur une commande client ou sur les directives de sa direction pour un projet. Dès lors, il va définir les moyens qui lui seront nécessaires pour respecter le cahier des charges et il commence ses recherches artistiques. Il présente des moodboards (planche tendance) afin de donner une idée de l’univers qu’il va développer.
Une fois ces moodboards validés par les différents acteurs, le motion designer va établir un storyboard. Comme au cinéma ou en BD, celui-ci présente toutes les phases de la scène, en décrivant en plus toutes les étapes de la production qui suivront : rendu des images, montage, étalonnage, son, encodage, transition, conception des mouvements. Lors du montage, c’est ce storyboard qui va être utilisé.
Le motion designer doit avant tout, être un professionnel polyvalent, à l’aise avec l’informatique, afin de rapidement maîtriser ses outils de travail et doit s’adapter aux changements informatiques. Ainsi, les logiciels comme After Effects, Photoshop, Illustrator … constituent son quotidien. Il assure également une veille permanente sur ce qui se fait, de façon à pouvoir proposer des animations ou interfaces dans l’air du temps.
Mais les compétences techniques ne suffisent pas. Le motion designer doit aussi faire preuve de créativité, pour être source de proposition, d’une bonne écoute, indispensable à la satisfaction des demandes et il doit savoir travailler en équipe, afin de collaborer avec d’autres intervenants du projet. En effet, il devra travailler avec différents spécialistes (développeurs web, designers sonores, animateurs 3D, illustrateurs, graphistes vidéos…). Vous l’aurez donc compris, ce professionnel est à la fois un créatif et un technicien.
Beaucoup de motion designers sont freelance, tout en ne se limitant pas à cette fonction. Ils peuvent cumuler des fonctions, Webdesigner par exemple . Les entreprises recrutant des collaborateurs sont notamment les agences de communication (interactive ou publicitaire), les chaînes TV et sociétés de production audiovisuelle, ou encore les studios de création. Des entreprises plus généralistes, ayant un volume de productions suffisant pour leur site internet ou pour leurs produits, font également appel aux motion designers.
En ce qui concerne les salaires, les jeunes salariés débutants peuvent en toucher un compris entre 2 000 € et 2 500 € par mois. Pour un confirmé, la fourchette se situe entre 3 000 € et 4 000 € . Tout dépend aussi des profils, des capacités de la personne et de l’entreprise. Les meilleurs peuvent voir leur salaire tourner autour des 6 000 € .
Pour les indépendants, tout dépendra bien évidemment du nombre de missions qu’ils rempliront. Globalement, la fourchette de salaire se situe entre 2 500 € et 6 000 €, selon les spécialités.
Les élèves peuvent suivre une formation adaptée à ce métier dans différentes écoles. Nous pouvons citer notamment Rubika, l’École Nationale Supérieure Lumière, Émile Cohl, les Gobelins, l’ESMA (École Supérieure des Métiers Artistiques ou encore l’ENSAD (École Nationale Supérieure des Arts Décoratifs).
Beaucoup de motion designers sont passés par un bac arts appliqués, un bac scientifique ou technologique (informatique). Le niveau Bac+2 est le minimum pour les entreprises. D’ailleurs, elles recrutent des diplômés d’écoles d’arts appliqués ou des titulaires de BTS ou de DUT en informatique, ayant suivi une formation complémentaire en design graphique. Avec l’arrivée des DNMADE, la donne va peut-être changer.
Enfin, certaines écoles, comme les Gobelins, proposent des diplômes spécifiques à ce métier.
Voici une liste non exhaustive de diplômes possibles :
Bac+2:
BTS Design graphique option communication et médias imprimés, option communication et médias numériques.
Bac + 3:
Bachelor en graphisme,
Bachelor Design Graphique & Numérique,
Communication visuelle,
Création digitale,
Designer graphique et multimédia,
Graphiste motion designer,
DNMADE diplôme national des métiers d’art et du design mention graphisme, mention numérique
Infographiste jeu vidéo,
Diplôme Ina motion designer.
Bac + 4:
Designer graphiste,
Dessinateur-concepteur option édition multimédia ou option jeu vidéo,
DSAA Design mention graphisme.
Bac + 5:
Diplôme national supérieur des arts décoratifs,
Diplôme national supérieur d’expression plastique options communication, design,
Master Design Graphique & Numérique.
Le cursus de Jérémy Fassio
Jeremy a tout d’abord commencé par étudier l’archéologie et l’histoire de l’art à la Sorbonne.
Il enchaîne ensuite avec 4 années d’études en design graphique, à la fonderie de l’image à Bagnolet, dont 3 années en alternance.
Il s’octroie alors un break d’un an; année durant laquelle il en profite pour voyager. Durant 6 mois, il travaille dans une agence aux Azores (Portugal) où il commence à faire du contenu en motion design, pour des visuels de show, durant un festival le Monte Verde. Par la suite, il travaillera sur de nombreux projets vidéos pour des installations extérieures en événementiel.
En 2016, il pose ses valises à Montréal, dans le but de faire des projets en mapping vidéos. C’est alors que durant 2 ans, il travaillera dans un studio, dans un premier temps comme motion designer, puis comme réalisateur multimédia. En 2018, il débute mapping motion.