Apprenez à animer votre illustration existante à l'aide d'images clés

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

Et nous l'aimions suffisamment pour que nous voulions l'utiliser plus en évidence. Nous voulions pouvoir ajouter de l'animation.

 

J'ai donc passé environ 45 minutes et découpé chaque partie qui était destinée à bouger. J'ai enregistré chaque partie du corps dans son propre calque et sur des zones comme le haut de la tête, le cou et les genoux, j'ai comblé les lacunes manquantes. Cela ressemblait à ceci:

Ensuite, j'ai fait glisser tous les calques en place, déclenché une chronologie, testé les images clés et terminé avec cette animation:

Assez bien, mais pas très utile pour ce que nous faisions. Mais j'ai fait une animation plus compliquée pour l'intégrer à nos notifications UI.

 

Cette prochaine animation utilise moins de pièces, mais un mouvement plus exagéré et un peu de permutation entre le premier plan et l'arrière-plan. C'est donc un excellent élément à utiliser pour enseigner:

Animation 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 inquiétez pas de la création d'un nouveau fichier d'animation. Vous pouvez utiliser votre canevas existant. Sauvegardez votre toile d'origine ... ce sera pour apporter des modifications à votre dessin si vous le souhaitez. Ensuite, faites le travail de découpe de chaque pièce en mouvement et de lui donner une couche. 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 simple et rapide:

 

Créez un dossier nommé "Chien" (ou "Votre personnage").

Mettez-y chaque morceau de votre personnage.

Dans le dossier «Chien», créez un dossier nommé «Tête».

Mettez-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».

Mettez-y toutes les parties du corps restantes.

Vos dossiers doivent ressembler à ceci:

Activez la fenêtre Chronologie.

Cliquez sur "Nouvelle chronologie".

(Si vous utilisez Clip Studio Pro, vous n'obtenez que 24 images au maximum. C'est un grand nombre pour s'entraîner. Mon animation dure 1 seconde, j'ai donc utilisé la norme de l'industrie 24 images par seconde. Si vous voulez un plus saccadé, 2 -second animation, faites 12 images par seconde. Ou 6 ips, pour une animation vraiment saccadée de 4 secondes.)

 

Votre chronologie doit ê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 contient également des "Dossiers d'animation". N'utilisez pas de dossiers d'animation pour ce didacticiel. Ils sont excellents et utiles, mais ils ne seront que déroutants 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 apporter une correction de dessin à une pièce maintenant, vous devez retourner dans ce dossier de chien et cliquer à nouveau sur l'icône "Activer les images clés". Avec les images clés activé, 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: le faire bouger

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 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 du canevas jusqu'au point où la tête rencontre le cou. (Il s'agit du 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». Cliquer et faire glisser. Si la tête hoche naturellement la tête, c'est bien.

 

(Si la tête tourne, mais que les oreilles et le chapeau restent stationnaires, vous avez sélectionné le calque de dessin "Tête".)

 

Faites pivoter la tête vers le bas.

 

Cliquez dans 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 effectuez une modification.

 

Appuyez sur le bouton "Play" dans la chronologie pour tester.

 

Cliquez dans la chronologie vers l'image 12.

 

Faites pivoter la tête dans une position légèrement vers le bas.

 

Cliquez dans la chronologie vers l'image 16. Faites pivoter légèrement la tête vers le haut.

 

Cliquez dans la chronologie vers l'image 20. Faites pivoter la tête vers sa position naturelle.

 

Appuyez sur le bouton "Play" pour tester.

 

Passez au chapeau et recommencez toutes ces étapes.

 

Déplacez-vous vers les oreilles et le nez. Faites pivoter, testez, avancez.

 

 

Nous aurons besoin d'un nouveau bras pour le chien, qui peut reposer naturellement sur le panneau. Dessinez-le, soit dans un autre canevas, soit dans ce canevas après avoir désactivé les images clés. Nous aurons également besoin d'une chemise dessinée à l'angle correct:

Vous pouvez dessiner ces deux éléments ensemble sur 1 couche, mais je voulais obtenir un petit soupçon 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, me laissant avec 2 images de manches de chemise. Ce serait une opportunité parfaite pour un dossier d'animation, mais à la place, je vais vous montrer comment faire de simples échanges de dessins sans eux.

 

Animez l'épaule du chien en montant, pour montrer qu'il commence à lever le bras.

 

Sur l'image où l'épaule est la plus haute, faites glisser la poignée au-dessus de cette seule piste d'animation de droite à gauche. (Pour moi, c'est l'image n ° 5. Cela fait apparaître ce calque entier uniquement jusqu'à l'image n ° 5, quand il disparaît.)

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

Étape 3: Passer de l'arrière-plan au premier plan

Nous avons gardé notre panneau de notification visible tout ce temps, juste pour avoir une référence de bonne taille à portée de main. Déplacez maintenant ce calque en haut des fenêtres des calques. Cela devrait couvrir une partie du chien.

 

Créez et déplacez des images clés dans le dossier "Chien", pour qu'il apparaisse au-dessus du signe comme un objet complet.

 

Dupliquez la couche de signe de notification.

 

Déplacez la copie de la couche de signe vers le bas, de sorte qu'elle soit juste en dessous des couches 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 de signe n'apparaisse que lorsque le bras est levé au-dessus et que le dossier "Chien" a cessé de bouger.

 

Faites la même chose pour le signe original, pour le faire disparaître au fur et à mesure que la copie apparaît.

 

Déplacez la copie du signe dans le même espace que le signe original. Voici comment mes couches se sont terminées:

Pour la dernière image qui apparaît derrière la tête du chien, créez des images clés comme vous l'avez fait, puis:

 

Saisissez 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 "Transformer" sous les propriétés de l'outil objet, puis décochez "Conserver les proportions".

 

Avancez dans la chronologie et redimensionnez-la à son apparence normale.

 

Ajoutez quelques images clés supplémentaires pour rendre le mouvement vivant et lui donner un peu de rebond.

Bonus d'effets spéciaux!

J'aime beaucoup certains des effets que vous pouvez obtenir avec les propriétés des calques et les calques de découpage. La plupart de nos pièces étant déjà dans des dossiers, elles sont faciles à appliquer.

 

Pour obtenir une bordure propre et de style art nouveau, j'ai ajouté un dossier et y ai déposé le calque de signe et le dossier "Dog". Ensuite, j'ai activé l'effet de bordure sous les propriétés du calque:

Astuces 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 couche.

 

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.

 

Colorez vos calques de premier plan et d'arrière-plan afin de les retrouver rapidement.

Et voici tout l'espace de travail en action. Faites-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 causé tant de problèmes lorsque j'apprenais. Si vous avez des questions, posez-les dans les commentaires ... pendant que je créais cela, je pensais à toutes les différentes choses qui pourraient mal tourner et causer de la confusion, mais je ne voulais pas me laisser distraire en les abordant.