Dans ce tutoriel, je vais vous montrer comment concevoir et créer une animation en boucle d'histoire synchronisée. C'est détaillé et ne prend que 24 images pour être animé. Vous pouvez le réaliser avec les versions Pro et Ex de Clip Studio Paint.

 

 

 

 

Concevoir la boucle

Le concept de l'histoire du pipeline est de faire circuler l'animation d'une boucle à l'autre avec un mouvement synchronisé. Dans ce tutoriel, je vais créer le bar à sushis pour chats. Commençons par esquisser l'image.

Il y aura un tapis roulant qui acheminera le poisson à travers diverses étapes de préparation des sushis. 4 chats travailleront à chaque étape : hacher, trancher avec des lames circulaires, combiner le poisson avec le riz et placer les sushis sur une assiette.

Le mouvement du design sera comme ceci (en 24 images)

Vous pouvez voir que 24 images sont trop peu pour une boucle de l'histoire.

 

Si nous donnons 24 images à chaque chaton, il y aura plus de temps pour des mouvements détaillés.

Mais cet exemple utilise 24*4 = 96 images, ce qui est trop long pour une boucle et n'est pas compatible avec Clip Studio Pro.

 

Les mouvements des chats sont individuels, nous pouvons donc superposer les images clés de chaque animation et créer une boucle de mouvement individuelle comme ceci.

Finalement, c'est parfait pour 24 images clés. On dirait que tous les chats sont occupés par leur travail !

Les boucles d'animation en résumé seront :

1. Le chat coupe le poisson

2. Le chat tranche le poisson avec la machine

3. Le chat fait des sushis (2 sushis par boucle)

4. Le chat dresse l'assiette et les sushis

5. Le tapis roulant tourne en boucle

 

Dessiner le fond et les objets

Commencez par l'arrière-plan. Je l'ai rendu isométrique pour rendre visible l'ensemble du processus du pipeline.

Remarque : J'utilise un motif de tuile provenant de Clipstudio Asset

Redessinez le croquis de la scène, ajusté à l'arrière-plan.

Dessinez ensuite les objets qui apparaîtront sur le tapis de transmission sur des calques séparés

Les objets sont maintenant prêts à être animés plus tard

Créer une boucle d'animation individuelle

Dessinez le chat en plusieurs parties

N'oubliez pas de renommer le calque pour une gestion plus facile

Créez une timeline pour l'animation avec ce réglage.

Fréquence d'images = 8 et Temps de lecture = 24

 

Dans le panneau Timeline, les images clés apparaîtront selon nos réglages

[si vous ne trouvez pas le panneau Timeline, ouvrez-le avec Fenêtre>Timeline]

Convertissez chaque calque en objet Matériau d'image pour faciliter la transformation.

Faites un clic droit sur le calque et sélectionnez Convertir le calque

Changez le type en Calque de matériau d'image et appuyez sur OK

Répétez pour tous les calques, vous obtiendrez alors les calques comme ceci

Ceci est maintenant prêt pour l'animation

 

Pour animer, nous utiliserons la méthode de transformation pour déplacer les parties selon les mouvements du personnage.

 

Sélectionnez le calque, puis cliquez sur l'icône 'activer les images clés pour le calque'

 

Le calque affichera le mot 'transformation' sur le nom du calque

 

Définissez l'image clé pour ajouter 'Interpolation linéaire'

 

Cliquez ensuite sur l'icône pour ajouter une image clé, l'icône d'image clé apparaîtra sur l'image sélectionnée (barre rouge)

Cliquez sur la dernière image et ajoutez une autre image clé

Maintenez ensuite le clic sur l'icône de l'image clé de la dernière image et faites-la glisser jusqu'à l'image 25

(Cela fera en sorte que l'image 24 ne ressemble pas à l'image 1 et rendra le mouvement plus fluide)

 

Pour créer une animation.

Cliquez sur n'importe quelle image clé où vous le souhaitez, puis déplacez l'objet avec l'outil objet

 

La timeline créera automatiquement l'image clé pour vous à ce point

 

 

Vous pouvez voir le mouvement en cliquant sur l'icône de lecture

 

Le résultat

Appliquer à tous les objets

Vous obtiendrez un mouvement simple pour le chat

Déplacez la partie du corps sous l'objet d'arrière-plan pour corriger le chevauchement (créez un dossier pour faciliter l'édition plus tard)

Pour l'action du bras, j'ai réalisé une animation image par image car c'est trop compliqué pour la méthode de transformation

 

Cliquez sur l'icône 'Nouveau dossier d'animation' dans le panneau de la timeline

 

Dans le panneau des calques, vous verrez le dossier d'animation créer un dossier à l'intérieur

Créez le calque pour l'encrage, le croquis et la couleur

Dans le panneau de la Timeline, faites un clic droit sur la timeline du dossier d'animation, et sélectionnez l'image clé 1

Dessinez la première image, puis activez la pelure d'oignon avec l'icône 'Activer la pelure d'oignon'

Créez ensuite une nouvelle celle d'animation

Sur la deuxième celle, il y aura la ligne bleue qui montre la celle précédente, vous pouvez continuer à travailler sur le calque d'esquisse qui sera généré automatiquement dans le dossier '2'

Esquissez sur toutes les images clés pour créer le croquis de l'animation

puis ajoutez les détails dans chaque celle

Remarque : pour l'encrage, je recommande le 'Stylo mono de remplissage' dans le sous-outil marqueur [stylo] car il ne changera pas la taille par la pression, ce qui est bon pour l'animation :)

 

vous pouvez également ajuster la transformation et rendre le mouvement plus satisfaisant avec plus d'images clés (il suffit de garder le début et la fin identiques)

Le mouvement est plus naturel maintenant

 

créez ensuite un autre chat en suivant ces étapes. voici le résultat

Créer une boucle d'animation synchronisée

L'animation n'est pas encore synchronisée. L'animation du tapis roulant doit être ajoutée pour terminer cette pièce

Le tapis roulant peut être séparé en 5 parties.

1 - Le poisson tombe de la boîte

2 - Les filets sont tranchés en sashimi

3 - Les sushis déplacés

4 et 5 - Les sushis prêts à servir sortent

 

Pour faciliter la gestion, nous devons vérifier l'image clé où elle peut se synchroniser avec la boucle d'animation à laquelle elle est liée.

 

Par exemple, le poisson est dans la main du premier chat à l'image clé 1, il sera donc prêt pour que le chat le tire à l'image clé 24

 

Commence par le poisson qui tombe de la pente

Le poisson tombe en 3 étapes

Commencez la synchronisation [avec le chat qui coupe le poisson] à l'image clé 1, nous plaçons donc le poisson à la position avant qu'il ne soit dans la main du chat à l'image 1

 

Limitez le cadre d'affichage à la timeline en définissant la première image d'affichage

 

Créez l'animation de transformation pour le poisson et déplacez la position du poisson à la première image clé

Le résultat sera comme ceci

Le poisson apparaît à l'image clé 18. Maintenant, réalisez l'animation de la chute du poisson qui se terminera à l'image clé 17

Conseil : vous pouvez faire tomber le poisson naturellement en utilisant la transformation de maillage pour ajuster la forme du poisson

[Édition > Transformation > Transformation de maillage]

 

Ensuite, réalisez l'animation de transformation avec la même étape

 

Maintenant, le poisson tombera continuellement, faites de même avec les autres étapes

Pour éviter les chevauchements, copiez une partie de l'arrière-plan et placez-la sur l'objet

La timeline finale ressemblera à ceci

Pour le mouvement d'un objet répété, vous pouvez le placer ensemble et le déplacer en une seule fois

Ce sera un peu compliqué de créer l'image clé pour le mouvement de prise d'un sashimi à l'autre (car le chat prend 2 sashimis par boucle, chaque boucle prend 12 images)

 

Vous devez créer un mouvement qui prend 12 images

Le résultat sera une non-synchronisation et des clignotements.

 

Pour le synchroniser, vous devez en faire une boucle complète, essayez de garder le mouvement en boucles de 2, 4, 6, 8, 12 images car cela peut créer une boucle parfaite en 24 images.

 

ici c'est 12 images, ce qui peut répéter la boucle 2 fois pour remplir les 24 images

 

Dupliquez le calque et déplacez la timeline vers l'avant

(maintenez l'en-tête de la timeline pour la déplacer librement)

Vous pouvez également copier toute la barre et la coller sur l'image clé suivante

c'est toute la technique pour créer une boucle simple

voici le résultat du reste

 

Ajouter les détails du mouvement au tapis roulant

Dessinez les lignes pour créer le tapis roulant (1 ligne par 1 calque)

toutes les 24 images, une paire de sushis sera créée, puis nous créons le mouvement de décalage de la bande pour une durée de 24 images

Alors, créez une transformation et déplacez l'objet à la dernière image clé pour chevaucher la ligne suivante (faites de même avec toutes les lignes)

 

vous pouvez voir que certains objets de la scène ne peuvent pas se déplacer avec le tapis, nous pouvons le corriger en appliquant une autre surface plus tard pour masquer le mouvement étrange.

Pour que la bande se fonde mieux avec l'arrière-plan, déplacez le dossier des barres au-dessus du calque de couleur du tapis roulant, puis masquez le calque avec 'Masquer sur le calque inférieur'

Vous pouvez ajuster la transparence pour un meilleur rendu

Touche finale

détectez les erreurs de mouvement que nous avons faites et corrigez-les ou ajoutez des détails si vous le souhaitez.

par exemple, j'ai ajouté plus de lignes sur le processus plus lent pour le rendre plus synchronisé, et une planche à découper.

 

et maintenant le travail est terminé !!

Note additionnelle 1 : Les bases de l'animation en boucle

si vous êtes nouveau dans l'animation en boucle, j'espère que cela vous aidera :)

L'animation en boucle est amusante, essayez-en une simple pour mieux comprendre les plus complexes.

Note additionnelle 2 : Guide de dessin isométrique

J'ai réfléchi un moment à la façon de dessiner en vue isométrique sans utiliser de grille. et j'ai trouvé une façon amusante de créer votre propre guide de dessin isométrique.

le résumé

J'espère que mon tutoriel vous aidera à avoir des idées sur la conception et la création de votre propre animation en boucle. Bonne journée :)