Ce tutoriel vous montrera comment animer des parties d'une image avec l'animation par images clés pour en faire une jolie émote animée !

Si vous souhaitez suivre ce tutoriel, vous pouvez télécharger le fichier .clip depuis mon site web ici :

Voici la version vidéo de mon tutoriel. Si vous préférez le texte, vous le trouverez ci-dessous.

Configuration

Calques de parties de personnage

Pour animer un personnage avec des images clés, toutes les parties qui bougent doivent être sur leurs propres calques séparés. Mon dragon a six éléments - les deux parties de l'œuf, la tête, le corps et deux ailes.

Avec les images clés, vous pouvez faire bouger, pivoter et redimensionner chaque calque comme vous le souhaitez.

 

Mais la véritable puissance de l'animation par images clés réside dans le fait que vous pouvez l'utiliser sur des dossiers et enchaîner plusieurs animations. Laissez-moi vous montrer comment cela fonctionne.

Si vous suivez avec le fichier téléchargé, j'ai arrangé les pièces comme si le dragon était aplati derrière les calques d'œuf, donnant l'impression qu'il est à l'intérieur de l'œuf.

Créer une hiérarchie de dossiers

Tout d'abord, organisons les calques en une hiérarchie à l'aide de dossiers.

La coquille supérieure de l'œuf sera équilibrée sur la tête du dragon, je vais donc commencer par créer un dossier et y placer ces deux pièces. J'appellerai ce dossier "Tête".

 

Ensuite, je voudrai déplacer toutes les pièces du dragon ensemble, je vais donc créer un dossier et y placer le dossier de la tête, ainsi que le corps et les ailes du dragon. Je nommerai celui-ci "Dragon".

 

Enfin, si l'œuf bouge, le dragon aussi, je vais donc créer un dernier dossier principal pour y placer tous les calques, et l'appeler "Base".

 

                                 + **Astuce :** Le raccourci Ctrl+G (ou **⌘**G sur Mac) créera un nouveau dossier contenant les calques que vous avez sélectionnés. Vous pouvez également simplement utiliser le bouton "Nouveau dossier de calques" en haut de la palette Calque.

Configurer la chronologie

Ensuite, nous aurons besoin d'une chronologie d'animation.

Si vous ne voyez pas la palette Chronologie, allez dans le menu Fenêtre et cliquez sur Chronologie.

Cliquez sur le bouton Nouvelle chronologie d'animation (flèche verte ci-dessus).

 

La boîte de dialogue Nouvelle chronologie apparaîtra. J'opte pour un taux de rafraîchissement de 8 et une durée de lecture de 24 images, ce qui correspond à une animation de 3 secondes. Cliquez sur OK lorsque vous avez terminé.

 

Astuce : Clip Studio Paint Pro a une limite de 24 images d'animation par chronologie, ce que beaucoup interprètent comme une limitation à 1 seconde d'animation. Mais ce n'est vrai que si votre taux de rafraîchissement est de 24 FPS ! En réduisant le taux de rafraîchissement, vous pouvez créer des animations plus longues. Il n'y a pas de limitations dans Clip Studio Paint EX.

 

Consultez mon tutoriel sur l'aperçu de l'animation pour en savoir plus sur les taux de rafraîchissement :

Lorsque vous travaillez sur une courte animation avec plusieurs calques, il peut être utile de visualiser la chronologie verticalement.

Cliquez sur l'onglet de la palette et faites-le glisser pour le repositionner sur le côté de votre espace de travail.

 

Ne vous inquiétez pas s'il couvre tout l'espace de travail au début, c'est facile à corriger !

Passez la souris sur le bord de la palette Chronologie jusqu'à ce qu'elle se transforme en double flèche, puis faites-la glisser pour la redimensionner.

                        + Utilisez la barre d'espace pour transformer votre curseur en main afin de déplacer la vue, et utilisez Ctrl+Barre d'espace (ou **⌘**+Barre d'espace sur Mac) pour activer le zoom avant et arrière.

 

Cela peut demander un peu de pratique pour s'y habituer, mais apprendre à repositionner des parties de votre espace de travail de cette manière peut vous faire gagner beaucoup de temps à long terme !

Activer les images clés et ajuster les points de pivot des calques

L'animation par images clés signifie que nous utiliserons nos dossiers et calques comme des objets.

Allez à l'outil Opération et assurez-vous que le sous-outil Objet est sélectionné.

Cliquez sur le dossier Base.

 

Astuce : Vous pouvez sélectionner des dossiers et des calques en cliquant dessus avec le bouton gauche de la souris, soit dans la palette Calque, soit directement sur la Chronologie.

 

Sur la chronologie, cliquez sur “Activer les images clés sur ce calque” pour en faire un objet animable.

Un objet peut être déplacé, pivoté et redimensionné, et il possède un centre de rotation, ou point de pivot. Pour faciliter leur animation, ajustons les points de pivot dès maintenant.

Imaginez où vous voulez que le calque de base pivote. Si nous voulons que l'œuf bascule d'avant en arrière, nous pouvons cliquer et faire glisser le point de pivot vers le bas.

Notez qu'un losange bleu indiquant une image clé est apparu sur la chronologie pour le dossier de base.

 

Une image clé apparaîtra à l'emplacement de la tête de lecture rouge chaque fois que vous modifierez un aspect d'un calque sur lequel l'animation par images clés est activée.

 

Astuce : Si la vôtre n'est pas à l'image 1, vous pouvez la faire glisser pour la déplacer.

De plus, si votre image clé n'est pas bleue, cliquez sur le menu déroulant Interpolation d'image clé et choisissez Interpolation douce, puis cliquez sur le bouton Ajouter une image clé. J'y reviendrai plus tard dans le tutoriel !

Maintenant, masquons les deux calques d'œuf afin que nous puissions voir le dragon.

Astuce : Vous pouvez masquer un calque en cliquant sur l'œil dans la palette Calque ou dans la palette Chronologie ; ils font la même chose.

Cliquez sur le dossier Tête - le dossier entier, pas seulement le calque Tête - et déplacez le point de pivot vers le milieu de la corne du nez, là où il rejoindrait le cou à l'arrière de la tête.

 

Parce que le dossier Base a des images clés activées, tous les dossiers et calques enfants hériteront de cette caractéristique, donc une image clé apparaît automatiquement ici aussi !

 

Remarque : Je saute un peu des étapes car tous les calques ne seront pas animés séparément du dossier dans lequel ils se trouvent ; cela aura plus de sens lorsque nous commencerons à animer.

Le corps du dragon sera contrôlé par le dossier Dragon, alors sélectionnez-le et placez le point de pivot au centre de la masse du corps.

Ensuite, masquez le dossier Tête et le calque Corps du dragon afin que nous puissions voir les ailes.

 

Leur position peut sembler un peu étrange, mais croyez-moi, cela aura l'air juste lorsque nous l'animerons !

Convertir des calques en objets fichier (facultatif)

Si l'objet que vous animez n'est qu'un petit calque individuel, comme chaque aile, vous voudrez peut-être le convertir en ce que l'on appelle un Objet Fichier.

Faites un clic droit sur le calque, allez dans Objet Fichier, et sélectionnez Convertir le calque en objet fichier.

 

Assurez-vous que Zone est défini sur Zone de dessin et que Conserver le calque d'origine est décoché, puis cliquez sur OK.

Il vous sera demandé d'enregistrer l'objet au format de fichier .clip de Clip Studio Paint. Choisissez un emplacement et un nom de fichier, puis cliquez sur Enregistrer.

Si vous obtenez ce message, cliquez simplement sur OK.

Nous avons maintenant un objet beaucoup plus compact entourant juste l'aile, plutôt que de la voir occuper toute la toile. La conversion de parties de l'animation en objets fichier est facultative, mais il est utile de le savoir !

 

Vous pouvez déplacer le point de pivot en position à la base de l'aile de la même manière qu'avec un objet normal.

 

Ensuite, répétez le processus pour transformer l'aile droite en objet fichier et déplacer son point de pivot.

Je vais également afficher le calque Coquille supérieure d'œuf et le convertir en objet fichier.

 

Son point de pivot est bien là où il est, mais nous voudrons toujours une image clé de départ sur ce calque, alors cliquez sur le bouton Ajouter une image clé.

Animation

Déplacement avec des images clés

Maintenant, rendez tous les calques visibles sauf la Coquille supérieure d'œuf ; nous y reviendrons.

Tout d'abord, nous voulons que le dragon sorte de l'œuf. Sélectionnez le dossier Dragon.

 

Cliquez en haut de la chronologie pour déplacer la tête de lecture rouge jusqu'à l'image 8.

Passez le curseur sur le bord de la boîte englobante de l'objet pour obtenir l'icône de déplacement, puis cliquez et faites glisser pour déplacer le dragon vers le haut.

 

Notez qu'une deuxième image clé est apparue sur la chronologie à l'emplacement de la tête de lecture sur l'image 8.

 

Les images clés indiquent le point de départ et le point d'arrivée d'une animation, et l'ordinateur calcule le chemin intermédiaire.

Il existe trois types d'images clés : Linéaire, Douce et Maintenir. Elles affectent la façon dont votre animation se déplace entre les images clés. (Vous vous souvenez peut-être de ce graphique de mon tutoriel sur l'aperçu de l'animation !)

 

 + **Linéaire** - Se déplace uniformément entre les images clés

   + **Douce** - Ralentit naturellement près des images clés

     + **Maintenir** - Passe simplement d'une position à la suivante

Vous pouvez basculer entre eux en utilisant le menu déroulant que j'ai montré précédemment. Nous utiliserons uniquement l'interpolation douce pour cette animation.

Suivi

Lorsque vous effectuez un mouvement animé rapide, vous voulez souvent aller un peu trop loin pour accentuer l'élan. C'est un principe d'animation appelé le suivi (follow through).

Allez à l'image 6, et déplacez le dragon un peu plus haut que sa position finale.

Maintenant, je vais prévisualiser l'animation - mais d'abord, une petite astuce. Si vous ne voulez pas lire toute votre animation, vous pouvez faire glisser les crochets bleus pour ne lire qu'une partie sélectionnée.

Appuyez sur le bouton lecture pour le voir en action.

Ajout d'une animation secondaire à un sous-dossier

Pour l'instant, la tête est rentrée pour tenir dans l'œuf, mais nous voulons aussi qu'elle se lève.

Assurez-vous d'être à l'image 8, sélectionnez le dossier Tête, et déplacez-le vers le haut.

 

Remarquez comment la tête continue de monter avec le corps (puisqu'il s'agit d'un sous-dossier du dossier Dragon déjà animé), mais elle a aussi son propre mouvement indépendant.

J'ajouterai également un peu de suivi avec la tête à l'image 6 pour que cela paraisse plus naturel.

Séparer les images clés de position, d'échelle et de rotation

De retour à l'image 8, je ferai également pivoter un peu le dossier de la tête.

Notez que l'inclinaison ne se produit qu'une fois que nous atteignons l'image 6, car il y a déjà une image clé à cet endroit. Maintenant, vous aimerez peut-être cet aspect, mais que se passerait-il si vous vouliez que la tête commence à tourner immédiatement ?

Cliquez sur le bouton plus à côté du nom du calque ou du dossier (dans ce cas, le dossier Tête), puis sur le menu déroulant qui apparaît à côté.

 

Comme vous pouvez le voir ici, vous créez non pas une mais plusieurs images clés pour chaque mouvement - pour la position, l'échelle, la rotation et le point de pivot.

 

Remarque : Bien que nous ne l'utiliserons pas pour ce tutoriel, notez qu'il existe une image clé où vous pouvez également ajuster l'opacité ! J'ai montré comment l'utiliser dans la section Étincelles de mon tutoriel 3 effets animés magiques si vous souhaitez en savoir plus.

Cliquez avec le bouton gauche sur l'image clé du milieu à côté de Rotation pour la sélectionner. Cette partie est importante - si vous ne voyez pas la surbrillance rouge autour de SEULEMENT l'image clé de Rotation, vous risquez de supprimer plus que vous ne le souhaitez.

 

Une fois l'image clé sélectionnée, cliquez dessus avec le bouton droit et choisissez Supprimer.

Maintenant, la rotation de la tête commence à l'image 1 à la place.

Notez également que l'image clé supérieure a changé pour prendre la forme d'un losange creux plus petit, indiquant que toutes les propriétés de cette image n'ont pas d'image clé.

Finalisation du mouvement de jaillissement

Maintenant, sélectionnez l'aile gauche et allez à l'image 8. Déplacez et faites pivoter l'aile jusqu'à sa position finale.

 

Comme auparavant, vous pouvez dépasser un peu à l'image 6 pour ajouter un mouvement de suivi ici aussi.

 

Faites de même avec l'aile droite.

Affichez la Coquille supérieure d'œuf. Puisqu'il s'agit d'un enfant du dossier Tête, il suit déjà le mouvement et l'inclinaison de la tête.

À l'image 10, je le déplacerai dans une meilleure position et le réduirai un peu pour le dégager du visage du dragon.

Et puis, à l'image 8, j'ai ajouté un léger dépassement, ce qui donne l'impression que le haut de l'œuf a rebondi un peu avant de se poser sur la tête du dragon.

 

Remarque : Lorsque vous avez des animations imbriquées comme celle-ci, assurez-vous de faire glisser la tête de lecture d'avant en arrière à travers les images (ce que l'on appelle le "scrubbing") pour vous assurer qu'aucune partie de votre animation ne se chevauche en dehors de la toile. Vous devrez peut-être ajuster un peu vos images clés pour vous assurer que l'animation finale est belle !

Voyez comment déplacer ces images un peu vers l'extérieur ajoute un joli mouvement secondaire ? Le dragon bouge, et l'œuf réagit à ce mouvement un instant plus tard.

Copier les images clés pour inverser l'animation (bouclage)

À la fin de l'animation, le dragon redescendra dans la coquille. Le moyen le plus simple de le faire est d'inverser les images.

Rappel : Si vous avez fait glisser le crochet bleu pour raccourcir votre animation, assurez-vous de le faire glisser à nouveau jusqu'à la longueur totale de l'animation.

Cliquez avec le bouton gauche sur la première image clé de l'image 8 pour la sélectionner. Maintenez la touche Maj enfoncée et cliquez sur chacune des autres images clés de l'image 8 pour les ajouter à la sélection. Ignorez le calque Coquille supérieure d'œuf pour l'instant.

 

Maintenez la touche Alt enfoncée, puis cliquez et faites glisser les images clés jusqu'à l'image 16. Cela crée une copie en double des images clés.

Faites de même avec les images clés de l'image 1, en les dupliquant jusqu'à l'image 21. Encore une fois, ignorez la Coquille supérieure d'œuf, ainsi que l'image clé sur le calque Base.

En copiant les images clés du début à la fin, nous avons maintenant créé une animation qui bouclera en toute transparence !

 

(Sauf pour le calque Coquille supérieure d'œuf, mais nous y reviendrons dans un instant.)

Anticipation

Je vais également copier les images clés de dépassement, en les déplaçant à l'image 18.

 

Notez que l'icône spéciale indiquant qu'il n'y a pas d'image clé de rotation pour le dossier Tête à l'image 6 est conservée, il n'y aura donc pas non plus d'image clé de rotation à l'image 18.

Cette légère élévation avant le mouvement descendant est une technique d'animation appelée anticipation.

 

C'est un peu l'inverse du suivi. Pensez-y comme à la façon dont vous devez vous accroupir un peu avant de sauter !

Finalisation de l'animation

Maintenant, le haut de la coquille d'œuf doit revenir en position. Comme le dragon bouge si vite, j'aimerais que la coquille plane un instant avant de le suivre - un autre type d'animation de suivi.

Copiez l'image clé de la Coquille supérieure d'œuf de l'image 10 à l'image 18, et celle de l'image 1 à l'image 23.

Parce que la coquille d'œuf est attachée à la tête, nous devrons ajouter quelques images clés supplémentaires ici pour la maintenir manuellement en l'air.

 

À partir de l'image 19, déplacez l'œuf vers le haut de la toile.

 

Répétez cela pour les images 20 et 21, en le déplaçant un petit peu chaque fois.

Une dernière chose pour la coquille supérieure d'œuf ! Allez à l'image 24 et soulevez et faites pivoter la coquille juste un petit peu pour lui donner un joli rebond.

Maintenant, le sommet fait une pause d'un instant supplémentaire, avant de retomber rapidement sur la coquille. Quand il arrive, il rebondit !

 

Cependant, le dragon entre en action un peu trop tôt, alors une dernière chose que je ferai est de décaler le début de l'animation de quelques images.

Vous pouvez sélectionner en masse des images clés en cliquant et en faisant glisser. Sélectionnez toutes les images clés avant la moitié. (Nous n'avons pas encore fait d'animation sur le dossier Base, donc je le saute.)

 

Cliquez et faites glisser pour déplacer toutes les images clés sélectionnées de deux images.

Je vais terminer mon animation en utilisant le dossier de base pour ajouter un léger mouvement de balancier, et j'ajouterai également un peu plus de mouvement aux ailes.

 

Remarque : N'oubliez pas que si vous voulez que quelque chose boucle, comme l'animation du balancement de l'œuf, copiez la première image clé en utilisant la touche Alt et déplacez-la à la fin.

 

Comme vous pouvez le constater, la finalisation d'une animation comme celle-ci consiste en grande partie à effectuer de petits ajustements jusqu'à ce que vous soyez satisfait du résultat.

Cela nous amène à l'animation terminée !

Enregistrer en tant que GIF animé

Pour les émotes et autocollants animés, vérifiez la plateforme sur laquelle vous avez l'intention de les télécharger pour connaître le format de fichier et la taille corrects. Ceux que j'ai vérifiés, comme Discord et Twitch, préféraient tous deux le format GIF animé, nous choisirons donc celui-là.

Allez dans le menu Fichier -> Exporter l'animation -> GIF animé.

 

Astuce : Il existe plusieurs autres options d'exportation ici, que j'explique beaucoup plus en détail dans mon tutoriel sur l'aperçu de l'animation !

Sélectionnez un emplacement et un nom pour votre fichier exporté, puis cliquez sur Enregistrer.

Ici, vous pouvez redimensionner votre GIF final. Discord recommande 128 par 128, nous allons donc opter pour cela. Assurez-vous de faire correspondre la plage d'exportation et le taux de rafraîchissement à votre animation : dans ce cas, les images 1 à 24, et 8 FPS.

 

Bonne nouvelle - depuis la version 2.1 de Clip Studio Paint, les GIFs animés peuvent désormais être enregistrés avec la transparence ! Cochez la case Rendre l'arrière-plan transparent en bas pour enregistrer votre GIF avec la transparence.

Remarque : Si votre image contient des dégradés de couleurs, l'enregistrer avec le tramage activé peut la rendre beaucoup plus agréable au détriment d'une taille de fichier plus importante. J'essaie toujours les deux pour voir laquelle je préfère - cependant, pour cette petite animation de dragon, ce n'est pas nécessaire.

 

Cliquez sur le bouton OK lorsque vous êtes prêt à enregistrer votre GIF animé terminé.

Conclusion

Et voilà ! J'espère que vous avez apprécié de suivre ce tutoriel, et j'adorerais voir vos animations. Taguez-moi @MsRedNebula sur Twitter ou Instagram, ou Mastodon et montrez-moi votre travail. Suivez-moi ici sur Clip Studio Tips ou sur ma chaîne YouTube pour plus d'art et de tutoriels CSP !