Salut ! C'est Mana

 

Dans ce sujet, nous allons parler des bases du cycle de marche en utilisant les images clés sur Clip Studio Paint.

 

Nous allons utiliser une seule image ici et nous l'animerons avec des images clés. Ce processus est réalisable sur les versions Pro, Debut et Ex de CSP. Le fichier .CLIP est également disponible à la fin de l'article afin que vous puissiez suivre ou l'animer vous-même.

 

Le processus vidéo est ici :

 

Le son est devenu chaotique (mon son est toujours chaotique mais cette fois, il l'est devenu vraiment), mais j'espère que c'est compréhensible.

 

Je vais essayer de rendre cet article identique à la vidéo afin que vous puissiez suivre avec cette version écrite également.

 

Ce GIF ci-dessous est de 310x600 ; le fichier original est de 1700x3286 (plus de 10 Mo)

Animation sur Clip Studio

Juste une petite note sur l'animation dans Clip Studio.

 

• CLIP STUDIO PAINT PRO

• Ne peut animer qu'avec un temps de lecture maximum de 24. (3 secondes si vous êtes à 8 FPS)

• CLIP STUDIO PAINT EX

• Peut animer avec un temps de lecture illimité.

 

CE TUTORIEL EST RÉALISABLE AVEC LA VERSION PRO !

 

QU'EST-CE QUE L'ANIMATION PAR IMAGES CLÉS

L'animation par images clés est une méthode d'animation dans laquelle vous animez le graphique lui-même – ce qui signifie que vous ne dessinez pas image par image.

 

Les images clés (Keyframes) viennent des mots ; Clé (Key) signifie mouvement, Images (Frames) qui est l'image/prise de vue par seconde. Une image est la mesure du temps en animation.

 

Et donc la description la plus précise de cela est « Nous déplaçons (animons) 'quelque chose' à un moment donné »

 

Encore une fois, veuillez noter ; NOUS DÉPLAÇONS QUELQUE CHOSE

Nous ne dessinons pas image par image, nous n'avons même pas besoin de redessiner les intervalles – nous déplaçons l'objet lui-même.

 

Préparation

Si vous voulez animer une seule image, nous devons découper ce dessin en plusieurs parties ; cela prendra un certain temps mais gardez à l'esprit que les résultats en vaudront la peine.

 

J'utiliserai ce dessin que j'ai fait ; elle s'appelle Monica.

 

J'utilise l'outil [Zone de sélection] > Sous-outil [Lasso]

Vous pouvez utiliser l'outil de sélection que vous voulez.

 

La façon dont je le découpe est de sélectionner d'abord la partie où il n'y a pas de collision, par exemple le BRAS.

 

En utilisant l'outil Lasso ; sélectionnez toute la zone du BRAS ; c'est le bras lui-même, l'avant-bras jusqu'à la main. Une fois sélectionné, appuyez sur CTRL + X pour Couper et la zone sélectionnée sera maintenant sur un autre calque.

 

Maintenant, nous devons peindre le trou qui a été laissé ; utilisez la méthode de coloration que vous souhaitez. Je commence toujours par le G-Pen > puis les pinceaux de fusion (aérographe).

 

Continuez à découper jusqu'à ce que vous ayez toutes les parties dont vous avez besoin.

 

Toutes les parties que j'ai découpées étaient :

 

 

• Nous avons une Main ; qui est l'Avant-bras et la Main elle-même.

 

• Le Bras ; qui est l'épaule et le bras lui-même.

 

• Les Cheveux du dos ; comme son nom l'indique, ce sont les cheveux arrière.

 

• Le Corps ; ou c'est comme la zone qui n'a pas d'animation, c'est la frange, la tête, le cou et le haut du torse.

 

• Nous avons aussi la Jupe ; comme la jupe elle-même.

 

• Nous avons un PIED ; pas les PIEDS. Nous en avons besoin pour la rotation de la cheville.

 

• Nous avons cette Jambe inférieure ; qui est du genou à la cheville.

 

• Jambe supérieure ; qui est censée être la cuisse mais comme l'animation n'exige pas que cette zone soit visible, nous n'avons pas besoin de dessiner toute la jambe supérieure.

Parentage

Le parentage est le processus par lequel nous connectons plusieurs calques (enfants) à un seul calque (parent) et lorsque nous déplaçons le parent, les enfants le suivent.

 

Clip Studio Paint n'a pas de fonction de parentage directe, mais nous pouvons regrouper les calques dans un dossier et ce dossier agira comme le parent.

 

Nous utiliserons un dossier normal, et non un dossier d'animation.

 

• Pour commencer, sélectionnez la MAIN et le BRAS > Clic droit > Créer un dossier et insérer un calque > renommez-le en BRAS

• Ensuite, cliquez sur le CORPS > jusqu'à EyeClose > Clic droit > Créer un dossier et insérer un calque > renommez-le en HAUT

• Ensuite, choisissons le PIED et la JAMBE INFÉRIEURE > Clic droit > Créer un dossier et insérer un calque > renommez-le en JAMBE_INFÉRIEURE

•Puis cliquez sur JAMBE_INFÉRIEURE et JAMBE_SUPÉRIEURE > Clic droit > Créer un dossier et insérer un calque > renommez-le en JAMBE

*Pourquoi avons-nous séparé la jambe inférieure de la jambe supérieure -- parce que nous allons animer le GENOU, il doit se plier et le PIED doit suivre cette zone de la jambe.

 

Le dossier JAMBE est toute la jambe.

La JAMBE INFÉRIEURE est du genou vers le bas.

 

• Ensuite, cliquez sur chaque dossier et calque (sauf le BG) > Clic droit > Créer un dossier et insérer un calque > renommez-le en GLOBAL_Monica

 

CHRONOLOGIE

Nous allons commencer à animer cela maintenant.

Allez dans Fenêtre > Chronologie

 

Dans la barre d'outils de la Chronologie ; sélectionnez Créer une nouvelle chronologie

 

Nom de la chronologie : Monica_Walk

Fréquence d'images : 15

Numéro d'image, commence à 1

 

Temps de lecture : 17

 

Interpolation d'image, c'est une préférence personnelle, mais je préfère le plus proche voisin pour que l'image soit nette, vous pouvez choisir l'interpolation que vous voulez.

 

Cliquez sur Ok une fois terminé.

 

Avant toute chose, modifiez vos paramètres de lecture pour qu'ils correspondent aux miens, afin d'obtenir les mêmes résultats.

 

Allez dans ANIMATION > Paramètres de lecture > Assurez-vous de cocher les options suivantes :

• Lire en temps réel

• Lecture en boucle

• Rendre avant de commencer la lecture

• Préférer la qualité

 

AJOUTER DES IMAGES CLÉS

N'UTILISEZ PAS L'OPTION "AJOUTER UNE IMAGE CLÉ" DANS LE PANNEAU CHRONOLOGIE.

 

Je ne le recommande pas. Si vous l'utilisez, vous ajouterez des images clés sur des zones qui n'ont pas besoin d'animation.

 

Exemple : vous n'avez besoin que de modifier l'échelle, mais si vous cliquez sur ce bouton, vous ajouterez également des images clés pour la position et la rotation.

Veuillez utiliser la boîte de transformation sous l'outil [Opération] > Sous-outil [Objet].

 

Placez une image clé à l'aide de la boîte située près de la Transformation.

 

-- Malheureusement, sur CSP, si vous utilisez cela, cela ajoutera également des images clés sur la zone que vous n'avez pas cliquée ou animée. Pour des raisons d'organisation, cliquez à nouveau sur les cases pour supprimer les images clés dont vous n'avez pas besoin.

MÉTHODE PRÉFÉRÉE POUR AJOUTER DES IMAGES CLÉS

 

• Choisissez le calque que vous souhaitez animer dans votre panneau Chronologie

 

• Cliquez sur l'icône +

 

• Cliquez sur l'icône > pour développer les options de transformation

 

• Cliquez sur la transformation que vous souhaitez et ajoutez la valeur à l'aide du panneau de transformation de votre outil [Opération] -- Sous-outil [Objet]

Animation | CORPS PRINCIPAL

Deux choses que j'ai oublié de mentionner :

 

PREMIÈREMENT, vous changerez souvent les points d'ancrage ici, si vous ne le souhaitez pas, vous pouvez convertir vos calques en matériau d'image.

 

DEUXIÈMEMENT ; j'ai oublié de lier quelque chose. Dans le dossier GLOBAL ; prenez tous les calques du personnage, et Clic droit > Créer un dossier et insérer un calque > Appelons-le CORPS PRINCIPAL.

 

*mon Global est mal orthographié, désolé !

 

 

Commençons l'animation ici dans le dossier CORPS PRINCIPAL > Activez les images clés sur ce calque.

Assurez-vous d'être sur Opération > Sous-outil Objet.

 

Modifiez le point d'ancrage du DOSSIER CORPS PRINCIPAL et placez-le sur le torse.

 

*Passez votre souris au centre de la sélection ; votre pointeur changera. Cliquez et faites glisser le point d'ancrage à l'emplacement souhaité.

 

LORSQUE VOUS MODIFIEZ UN POINT D'ANCRAGE, UNE IMAGE CLÉ SERA AUTOMATIQUEMENT CRÉÉE.

-------------- Vous pouvez la supprimer. Puisqu'il n'y a pas d'animation à l'intérieur de cette image clé.

ASTUCE : Lorsque vous créez une animation ; COMMENCEZ TOUJOURS PAR LE PLUS GRAND MOUVEMENT.

 

Le plus grand mouvement lorsque vous réalisez un cycle de marche n'est pas celui des jambes, c'est celui de tout le corps. Le corps monte et descend lorsque vous faites des pas.

Nous allons donc animer le corps de haut en bas en utilisant la transformation de POSITION.

 

Ok. Nous allons donc suivre une référence d'animation.

 

C'est la même référence d'animation que j'utilise pour mes animations 3D et que je modifie un peu.

 

Commençons ici. Encore une fois, nous allons animer la transformation de POSITION.

Assurez-vous que le dossier CORPS PRINCIPAL est sélectionné :

 

● Image 5, c'est notre REPOS, la position de hauteur normale. Il suffit d'y placer une image clé.

 

● Image 3 – le corps descend beaucoup, donc allons à Position Y ; 1480

 

● Image 1 – est inférieure à l'Image 3 donc nous allons à Position Y ; 1450

 

● Image 7 – le corps monte donc Position Y est, disons 1390

 

● Image 9 est la même que la première image.

Alors allez à la première image clé > Clic droit > Copier

Retournez à l'Image 9 > Clic droit > Coller.

 

● Ok, alors copions simplement les 2ème à 5ème images clés > Clic droit > COPIER > Allons à l'Image 11 > Clic droit > Coller

 

Quand nous jouons cela :

 

Le corps monte et descend

Animation | JAMBE

Commençons l'animation de la Jambe.

Allons dans le dossier JAMBE.

 

Puisque le dossier CORPS PRINCIPAL est déjà activé pour les images clés, les dossiers et le contenu à l'intérieur sont également déjà activés, alors choisissons simplement notre outil [Opération] ; Sous-outil [Objet].

 

Modifiez le point d'ancrage du dossier JAMBE.

 

Cachez la jupe, afin que nous puissions placer le point d'ancrage du dossier JAMBE en haut de la Jambe.

 

Maintenant, allons au dossier JAMBE_INFÉRIEURE ; changeons ce nom en GENOU.

Cachons le calque Jupe et Jambe_supérieure > Plaçons le point d'ancrage du GENOU en son centre supérieur.

Passons au PIED. Placez le point d'ancrage sur l'ombrage central de la chaussette, afin que lorsque nous le ferons pivoter, nous n'obtenions pas d'espaces noirs.

----------------------------------------- 

Passons maintenant au GENOU

 

Insérons d'abord une image clé en utilisant le dossier JAMBE comme référence d'image clé ; nous utiliserons l'ANGLE DE ROTATION ici.

 

• Donc, Première image, il n'y a pas de mouvement mais nous devons quand même insérer une image clé pour que cela maintienne cette position. Image clé sur Angle de rotation.

 

• Cinquième image, pas de mouvement, insérons à nouveau une image clé sur Rotation pour que la pose tienne.

 

• Neuvième, pas de mouvement, mais insérons une image clé à 2.6, juste pour ajouter un peu de flexion..

 

• 13, il y a un mouvement, mais insérons d'abord une image clé à la fin.

 

• Mouvement final, insérons une image clé sur rotation ; 0.0 > Faites glisser l'image clé jusqu'à la toute fin de la chronologie pour boucler.

 

• Retournons à 13, que se passe-t-il à la 13ème image ? la jambe se plie.

Nous devons donc faire pivoter ce Genou d'environ 95 degrés.

 

Et si nous jouons cela :

 

Animation | PIEDS

L'animation semble toujours rigide.

Alors animons maintenant les PIEDS pour ajouter des détails.

 

Encore une fois, nous allons insérer des images clés pour l'ANGLE DE ROTATION.

 

Et nous allons insérer des images clés pour les PIEDS en utilisant la même formation d'images clés que les deux précédentes.

 

• Première image clé > tordez ceci vers le haut, -4 semble correct.

• Deuxième image clé – C'est plat sur le sol, donc c'est bon. Laissez simplement l'image clé de repos originale.

 

• Troisième image clé – tordons un peu ceci pour que la pointe de la chaussure pointe vers le sol.

20 degrés semble correct.

 

• Quatrième image clé – ou image 13, les pieds pointent vers le sol, nous devons donc faire pivoter ceci – 20 semble correct aussi.

 

• Dernière image clé, copions simplement la première image clé et collons-la ici.

 

Quand nous jouons ceci :

 

Cela semble correct, mais ça paraît étrange car nous ne voyons qu'une seule jambe, alors faisons l'autre jambe.

Animation | DUPLICATION DE JAMBE

• Cliquez sur le dossier JAMBE > Clic droit > Dupliquer le calque

• Maintenant, cliquez sur la Jambe dupliquée > Faites-la glisser sous le dossier JAMBE > renommez le duplicata en JAMBE_ARRIÈRE

 

 

 

• Développons le contenu du dossier dupliqué et sélectionnons les deux premières images clés du dossier JAMBE_ARRIÈRE > Supprimer l'image clé

 

• Maintenant, sélectionnez toutes les images clés restantes et faites-les glisser au début de la chronologie.

 

Ajoutons maintenant les autres images clés.

Cachez le premier dossier JAMBE car cela va devenir confus.

 

• Donc, à la 13ème image de la JAMBE_ARRIÈRE. La jambe est au repos à la 13ème image, donc mettez tout à 0.0

 

• Et sur la dernière image clé, copiez simplement la première image clé. Assurez-vous de faire glisser l'image clé COLLÉE à la fin de la chronologie pour obtenir une boucle.

 

Maintenant, affichons le premier dossier JAMBE.

 

Jouons ceci

 

Animation | ESPACEMENT DES JAMBES

Si vous trouvez que les jambes sont trop proches l'une de l'autre, nous pourrions leur donner un peu d'espace.

 

Allons au premier dossier JAMBE ; encore une fois DOSSIER.

 

• Première image ; Image clé POSITION

• 9ème image ; Image clé POSITION

• Dernière image ; Image clé POSITION

 

La première et la dernière image clé POSITION [Axe X] seront 900.

L'image clé POSITION [Axe X] du milieu sera 800.

 

Faites de même avec la JAMBE_ARRIÈRE mais

La première et la dernière image clé POSITION [Axe X] sont 800 ;

Tandis que l'image clé POSITION [Axe X] du milieu est 900.

 

Animation | BRAS

Ok, animons maintenant quelques détails supplémentaires ou les accessoires.

 

Commençons par le bras, placez le point d'ancrage du BRAS sur l'épaule. Faites-le pivoter pour vérifier.

 

La Main ; c'est de la main au coude ; changez le point d'ancrage au coude.

----------------------------------------------------------- 

Ok, maintenant nous commençons ici sur le dossier BRAS ; insérez une image clé pour l'ANGLE DE ROTATION ;

Ajoutez une image clé sur la 1ère image, la 9ème et la dernière image.

 

• Première image clé, tirons-la en arrière, pour obtenir 20.

• Image clé du milieu ; allons à -20

• Pour la dernière image clé, copiez la première > Clic droit > Coller > Faites-la glisser sur la dernière image clé pour qu'elle la remplace.

 

Jouons ceci,

Cela semble correct. Alors animons maintenant la main ou la zone du coude.

 

Encore une fois, nous insérons des images clés sur les mouvements clés.

Donc, Angle de rotation sur la 1ère image, la 9ème et la dernière image.

 

• Donc sur la première image clé ; plions un peu le bras – 14 semble correct.

• Deuxième image clé - -20 semble bien.

• Pour la dernière image clé, copiez la première > Allez à la fin de la chronologie > Clic droit > Coller > Cliquez et faites glisser jusqu'à la fin de la chronologie.

 

Et si nous jouons ceci, cela semble bien ~!

Ajoutons un autre bras.

 

• Donc encore une fois, comme avant > Clic droit sur le dossier BRAS > Dupliquer le calque

 

• Faites glisser ce dossier dupliqué sous la JUPE > renommez-le en BRAS_ARRIÈRE

• Ok, sélectionnez les PREMIÈRES images clés du DOSSIER BRAS_ARRIÈRE ; à la fois sur le dossier et sur le calque lui-même > Supprimez-les.

 

• Maintenant, déplacez les images clés restantes au début de la chronologie et copiez la première image clé actuelle à la fin de la chronologie > N'oubliez pas de faire glisser la dernière image clé à la fin de la chronologie.

 

Quand nous jouons cela :

 

 

Animation | Cheveux du dos

Ok, qu'est-ce que nous pouvons animer d'autre. Passons aux Cheveux du dos.

Changez le point d'ancrage, mettez-le sur le dessus de la tête.

 

 

• Les images 5 et 13 sont des positions de REPOS, nous insérons donc une image clé pour l'Angle de rotation tel quel, et animons tous les autres Mouvements Clés.

 

Nous n'avons pas besoin de faire quelque chose de complexe,

 

• animez simplement la Première image clé ; sur l'Angle de rotation, disons 2 degrés.

 

Alors Copiez et Collez la première image clé à la 9ème et dernière image.

 

*Animation | Jupe | Haut du corps

Ces prochaines parties sont facultatives, vous pouvez les animer si vous le souhaitez.

 

Nous pouvons également animer la JUPE,

 

Placez le point d'ancrage ici en haut de la jupe elle-même ;

--------------------------------------------------- 

Animons également le Haut du corps ; encore une fois, c'est FACULTATIF

Nous animerons ceci de la même manière que nous l'avons fait avec les CHEVEUX DU DOS ; en gros deux images clés et juste copiées-collées à chaque fois.

 

Changez le point d'ancrage au même endroit que nous l'avons fait pour la jupe.

 

 

Nous allons à nouveau insérer une image clé pour l'Angle de rotation.

 

• Première image – première clé – changez la valeur à 0.8

• 5ème image – deuxième clé – changez la valeur à -0.4

 

• Maintenant, sélectionnez les deux images clés > Clic droit > Copier > Allez à l'image 9 > Clic droit > Coller

 

• Il nous manque donc une clé à la fin > Allez à la première image clé > Clic droit > Copier > Allez à la dernière image > Clic droit > Coller > Cliquez et faites glisser jusqu'à la fin de la chronologie pour obtenir une boucle.

 

Maintenant, quand nous jouons ceci, ça va rendre un peu.

 

Exportation | Séquence d'images

D'accord, nous avons terminé, maintenant exportons ceci.

Cachez les arrière-plans.

 

Allez dans Fichier > exporter l'animation >

 

Ma méthode d'exportation préférée est la Séquence d'images.

La Séquence d'images rendra l'animation image par image afin que vous puissiez la composer vous-même. Vous pouvez la transformer en GIF ou en fichier vidéo si vous le souhaitez.

 

-------------------------------------------------------- 

Je préfère la Séquence d'images parce que j'ai les fichiers bruts et je peux en faire ce que je veux.

Par exemple, ce fichier exporté a été utilisé dans mon tutoriel vidéo ; j'ai utilisé Premiere Pro pour cela.

 

et je l'ai transformé en GIF avec transparence ; j'ai utilisé Adobe Photoshop pour créer un GIF.

Fichier .CLIP - TÉLÉCHARGEMENT + Réflexions finales

Vous pouvez obtenir le fichier .CLIP de ceci afin de pouvoir l'essayer vous-même.

Encore une fois, il s'agit juste de l'animation de base. N'hésitez pas à exagérer davantage les mouvements si vous le souhaitez. Prolongez le temps, ou essayez simplement le projet vous-même.

Ignorez également l'aperçu de la fin de la vidéo. J'étais censé faire deux vidéos, mais je suis tombé malade et certains fichiers ont été corrompus.

 

Je publierai toujours cet aperçu un jour, j'essaie toujours de récupérer les fichiers bruts pour cela.

 

Quoi qu'il en soit, j'espère que cela vous a été utile !

Salut ! ;u; )///