Apprenez à animer vos œuvres existantes à l'aide d'images clés

J'ai dessiné ce chien comme mascotte pour un jeu vidéo :

Et nous l'avons tellement aimé que nous avons voulu l'utiliser plus en évidence. Nous voulions pouvoir ajouter des animations.J'ai donc passé environ 45 minutes à découper chaque partie destinée à bouger. J'ai enregistré chaque partie du corps sur son propre calque, et sur des zones comme le haut de la tête, le cou et les genoux, j'ai rempli les espaces manquants. Cela ressemblait à ceci :

Ensuite, j'ai remis tous les calques en place, lancé une chronologie, testé les images clés et obtenu cette animation :

Assez sympa, mais pas très utile pour ce que nous faisions. Mais j'ai créé une animation plus compliquée pour qu'il fasse partie de nos notifications d'interface utilisateur.Cette prochaine animation utilise moins de pièces, mais un mouvement plus exagéré et un peu d'échange d'arrière-plan/premier plan. C'est donc un excellent élément à utiliser pour enseigner :

Animer avec des images clés dans Clip Studio Paint

Étape 1 : Configuration

Si vous travaillez sur un personnage que vous avez déjà dessiné, ne vous souciez pas de créer un nouveau fichier d'animation. Vous pouvez utiliser votre toile existante. Sauvegardez votre toile originale... cela servira à apporter des modifications à votre dessin si vous le souhaitez. Ensuite, découpez chaque pièce mobile et placez-la sur un calque. Remplissez les formes manquantes. Simplifiez vos calques, en supprimant tout ce qui n'est pas une partie importante de l'animation.Configuration des dossiers pour une animation plus rapide et simple :Créez un dossier nommé "Chien" (ou "Votre Personnage").Placez-y toutes les pièces de votre personnage.Dans le dossier "Chien", créez un dossier nommé "Tête".Placez-y toutes les pièces connectées à la tête. (Dans mon cas, c'était "Nez", "Chapeau", "Oreilles" et "Tête".)Dans le dossier "Chien", créez un autre dossier nommé "Corps".Placez-y toutes les autres parties du corps.Vos dossiers devraient ressembler à ceci :

Activez la fenêtre Chronologie.Cliquez sur "Nouvelle chronologie".(Si vous utilisez Clip Studio Pro, vous n'avez que 24 images maximum. C'est un excellent nombre pour s'entraîner. Mon animation dure 1 seconde, j'ai donc utilisé la norme industrielle de 24 images par seconde. Si vous voulez une animation de 2 secondes plus saccadée, utilisez 12 images par seconde. Ou 6 ips, pour une animation de 4 secondes très saccadée.)Votre chronologie devrait être automatiquement remplie de tous vos dossiers et calques, et avoir des poignées bleues entourant une section d'animation de 24 images.(La chronologie a également des "Dossiers d'animation". N'utilisez pas les dossiers d'animation pour ce tutoriel. Ils sont excellents et utiles, mais ils ne feront que prêter à confusion ici.)Sélectionnez le dossier "Chien", puis cliquez sur "Activer les images clés sur ce calque" dans la fenêtre de la chronologie :

(Ce que nous avons fait, c'est convertir chaque partie du chien en une cellule d'image clé. Si vous devez corriger un dessin maintenant, vous devez revenir à ce dossier de chien et cliquer à nouveau sur l'icône "activer les images clés". Lorsque les images clés sont activées, les pinceaux artistiques ne fonctionnent pas.)Avec les images clés activées, vous travaillerez exclusivement avec l'outil Objet :

Nous sommes maintenant prêts à animer !

Étape 2 : Mettre en mouvement

Avec la première image sélectionnée dans la chronologie, sélectionnez votre dossier "Tête".Cliquez sur l'icône "Ajouter une image clé" en haut de la fenêtre de la chronologie. Un losange apparaît dans la chronologie, et des poignées bleues apparaissent autour de votre toile.Faites glisser le centre de rotation du centre de la toile jusqu'au point où la tête rencontre le cou. (C'est le petit signe +. Si vous ne le voyez pas, assurez-vous d'utiliser l'outil "Objet".)Testez la rotation en déplaçant votre curseur juste à l'extérieur de la bordure bleue, où il se transforme en icône de "rotation". Cliquez et faites glisser. Si la tête hoche naturellement, c'est bon.(Si la tête tourne, mais que les oreilles et le chapeau restent immobiles, vous avez sélectionné le calque de dessin "Tête".)Faites pivoter la tête vers le bas.Cliquez sur la chronologie vers l'image 6.Faites pivoter la tête vers le haut. Une image clé est automatiquement créée chaque fois que vous apportez une modification.Appuyez sur le bouton "Lecture" dans la chronologie pour tester.Cliquez sur la chronologie vers l'image 12.Faites pivoter la tête légèrement vers le bas.Cliquez sur la chronologie vers l'image 16. Faites pivoter la tête légèrement vers le haut.Cliquez sur la chronologie vers l'image 20. Ramenez la tête à sa position naturelle.Appuyez sur le bouton "Lecture" pour tester.Passez au chapeau et répétez toutes ces étapes.Passez aux oreilles et au nez. Faites pivoter, testez, avancez.

Nous aurons besoin d'un nouveau bras pour le chien, un bras qui puisse reposer naturellement sur le panneau. Dessinez-le, soit sur une toile différente, soit sur cette toile après avoir désactivé les images clés. Nous aurons également besoin d'une manche de chemise dessinée au bon angle :

Vous pourriez dessiner ces deux éléments ensemble sur un seul calque, mais je voulais obtenir un petit indice de mouvement supplémentaire de la manche.J'ai supprimé l'autre bras, celui où la main était cachée dans la poche, et l'ai remplacé par celui-ci. J'ai gardé la manche de chemise précédente, ce qui me laissait avec 2 images de manche de chemise. Ce serait une occasion parfaite pour un dossier d'animation, mais à la place, je vais vous montrer comment faire des échanges de dessins simples sans eux.Animez l'épaule du chien qui monte, pour montrer qu'il commence à lever le bras.Sur l'image où l'épaule est la plus haute, faites glisser la poignée en haut de cette seule piste d'animation de droite à gauche. (Pour moi, c'est l'image #5. Cela fait que tout ce calque n'apparaît que jusqu'à l'image #5, puis il disparaît.)

Sur la piste d'animation avec la nouvelle manche de chemise, faites glisser la poignée opposée de manière à ce que la nouvelle manche de chemise apparaisse lorsque l'ancienne disparaît.

Étape 3 : Déplacer de l'arrière-plan vers le premier plan

Nous avons gardé notre panneau de notification visible tout ce temps, juste pour avoir une référence de taille pratique. Déplacez maintenant ce calque en haut des fenêtres de calques. Cela devrait couvrir une partie du chien.Créez et déplacez des images clés sur le dossier "Chien", pour le faire apparaître au-dessus du panneau comme un objet complet.Dupliquez le calque du panneau de notification.Déplacez la copie du calque du panneau vers le bas, de sorte qu'il soit juste en dessous des calques de bras et de manche.Déplacez la poignée sur la piste d'animation comme vous l'avez fait avec la manche de chemise, de sorte que la copie du panneau n'apparaisse que lorsque le bras est levé au-dessus et que le dossier "Chien" a cessé de bouger.Faites la même chose avec le panneau original, pour le faire disparaître lorsque la copie apparaît.Déplacez la copie du panneau exactement au même endroit que le panneau original. Voici comment mes calques ont fini par être :

Pour l'image finale qui apparaît derrière la tête du chien, créez des images clés comme vous l'avez fait, puis :Prenez la poignée la plus à gauche et utilisez-la pour redimensionner le calque jusqu'à ce qu'il soit invisible. (Si l'image rétrécit au lieu de s'aplatir, cliquez sur le + à côté de "Transformation" sous les propriétés de l'outil Objet, puis décochez "Conserver le rapport d'aspect".)Avancez dans la chronologie et redimensionnez-le pour qu'il retrouve son apparence normale.Ajoutez quelques images clés supplémentaires pour rendre le mouvement vif et lui donner du rebond.

Effets spéciaux bonus !

J'aime beaucoup certains des effets que l'on peut obtenir avec les propriétés de calque et les calques d'écrêtage. Étant donné que la plupart de nos pièces sont déjà dans des dossiers, elles sont faciles à appliquer.Pour obtenir une bordure nette de style Art nouveau, j'ai ajouté un dossier et y ai placé le calque du panneau et le dossier "Chien". J'ai ensuite activé l'effet de bordure sous les propriétés du calque :

Conseils bonus sur les animations de marche utilisant des images clés !

Les cycles de marche peuvent être assez difficiles. Voici quelques conseils :Copiez votre première image clé à la dernière position de votre cycle. Faites cela sur chaque calque.Animez d'abord les pieds.Les épaules tournent à l'opposé des hanches. Ainsi, le bras droit avance avec la jambe gauche, le bras gauche avance avec la jambe droite.Codez par couleur vos calques de premier plan et d'arrière-plan afin de les retrouver rapidement.

Et voici l'intégralité de l'espace de travail en action. Mettez-le en plein écran pour avoir un bon aperçu des calques et du placement des images clés :

Je ne sais pas pour vous, mais pour moi, voir des personnages prendre vie est passionnant. J'espère que ce tutoriel vous aidera à surmonter les mêmes obstacles qui m'ont tant causé de problèmes lorsque j'apprenais. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires... pendant que je créais cela, je n'arrêtais pas de penser à toutes les différentes choses qui pourraient mal tourner et causer de la confusion, mais je ne voulais pas m'écarter du sujet pour les aborder.