Salut à tous. Dans ce tutoriel, je vais partager comment j'ai ajouté ces expressions mignonnes et hilarantes à mon petit ami citron. Le petit avertissement, aucun citron n'a été maltraité pendant la réalisation de ce tutoriel, lol 😃 Bien que ma sœur ait soudainement eu envie de limonade après que j'aie enregistré la vidéo. J'utilise une tablette Samsung Galaxy Lite et la version EX de Clip Studio Paint. Je fais pivoter ma tablette pour qu'elle soit orientée en mode portrait. Je trouve que les icônes ont l'air beaucoup plus grandes de cette façon et donneront de belles captures d'écran, surtout si vous consultez ce tutoriel depuis un téléphone.

Storyboard

J'ai esquissé un storyboard où j'ai fait des croquis grossiers des expressions faciales que le citron fera, ainsi que d'autres effets visuels.

Comme on le voit sur les croquis, le citron va :

 

   + Dormir, avec des Z flottant à côté de sa tête.

   + Se réveiller en ouvrant les yeux et en bâillant.

             + Il nous regardera avec un air confus. Un point d'interrogation flotte près de sa tête.

   + Son expression se tournera vers l'agacement puis la colère.

    + Il rougira alors et clignera des yeux

             + Les yeux fermés et toujours souriant, il lèvera fièrement les yeux tandis que des cœurs apparaîtront près de sa tête.

    + Son expression changera alors rapidement en une de préoccupation.

               + Il est choqué, à tel point que ses yeux sortent de sa tête. De petites formes triangulaires apparaissent près de sa tête.

           + Les yeux écarquillés et transpirant, il regardera de gauche à droite, l'air assez effrayé.

   + Il commencera alors à pleurer et à paniquer.

Importation de la vidéo

Ceci est la vidéo que j'ai prise avec ma caméra. Je l'ai ensuite importée sur ma tablette qui contient CSP EX.

 

Mais avant de l'importer, je l'ai un peu accélérée et coupée dans une application de montage vidéo sur ma tablette.

Depuis ma tablette, voici les détails que je connais concernant la vidéo.

 

Elle dure 15 secondes.

Dimensions de 1280 par 720.

Taux de rafraîchissement de 30 ips.

Résolution 720p.

Avec tout cela en tête, il est temps d'ouvrir Clip Studio Paint (qui sera appelé CSP).

 

J'ai créé un nouveau fichier CSP en allant dans le menu Fichier > Nouveau.

J'ai ensuite défini le Type de projet sur Animation, ce qui a fait apparaître des paramètres supplémentaires.

 

J'ai réglé la taille de la toile sur 1280 par 720, ce qui correspond aux dimensions de la vidéo.

J'ai maintenu la Résolution à 72.

J'ai ensuite réglé la Fréquence d'images à 12 ips. Ainsi, pour chaque seconde, 12 images seront lues.

Parce que je sais que la vidéo dure 15 secondes et que la Fréquence d'images est de 12 ips, le nombre total d'images dont j'aurai besoin sera de 180 (15 * 12).

Par conséquent, j'ai défini le Temps de lecture sur 180.

Le fichier CSP est créé avec un calque Papier vierge et un dossier d'animation contenant une seule cellule.

Je dois configurer davantage mon fichier pour l'animation.

Je vais dans le menu Fenêtre > Chronologie. Cela fait apparaître la palette Chronologie ci-dessous.

Dans la palette Calques, je clique sur le calque Papier afin que tout ce que j'importe soit placé au-dessus dans la palette Calques.

Au final, le calque Vidéo sera en dessous du dossier d'animation, ce qui est ce que je veux.

Avant d'importer, je dois également m'assurer que la première image de la palette Chronologie est sélectionnée au préalable, car c'est là que la vidéo commencera à être lue dans la Chronologie.

Pour importer ma vidéo, je vais dans le menu Fichier > Film. Ensuite, je localise ma vidéo et la sélectionne. Elle est importée en tant qu'Objet Fichier.

Je regarde dans la palette Chronologie et je remarque que la vidéo dépasse les 180 images que j'avais calculées. C'est probablement parce que les 15 secondes que j'ai obtenues des détails de la vidéo n'étaient pas précises. C'est en fait 15,83 secondes.

Selon la chronologie, la vidéo s'arrête en fait à l'image 191. Ainsi, les parties de la vidéo qui dépassent les 180 images ne seront pas lues.

 

Pas d'inquiétude, je l'ajuste simplement en allant dans le menu Animation > Chronologie > Modifier les paramètres.

Je règle l'Image de fin de 181 à 191.

J'ajuste également le dossier d'animation dans la chronologie en faisant glisser sa fin jusqu'à l'image 191.

Renommez ce dossier d'animation qui a été créé avec le fichier en Croquis.

 

J'aime aussi attribuer des couleurs à mes calques car cela permet une identification facile dans la palette Calques et dans la palette Chronologie.

Dans ce dossier d'animation Croquis, je crée des cellules sur chaque deuxième image.

 

Pour m'aider, je règle la ligne de division dans la Chronologie de 6 à 2. J'y parviens en allant dans le menu Animation > Chronologie > Modifier les paramètres.

J'ai ensuite modifié la Ligne de division de 6 à 2.

Toujours dans le dossier d'animation Croquis, je clique sur les images de la Chronologie auxquelles je veux ajouter des cellules, puis je clique sur le bouton Nouvelle cellule d'animation.

Une fois terminé, je duplique ce dossier d'animation deux fois et les renomme Line Art et Couleur.

 

Le dossier d'animation Line Art doit être au-dessus du dossier d'animation Couleur.

 

Et bien sûr, j'attribue également une couleur à chacun d'eux.

Le dossier d'animation Line Art est Noir.

Le dossier d'animation Couleur est Rose.

 

Je masque ensuite ces dossiers pour l'instant.

Je crée un nouveau calque Raster dans la palette Calques et j'y dessine le contour du citron.

Je renomme le calque en Contour et lui donne la couleur Verte.

Je réduis ensuite un peu l'opacité de ce calque et le verrouille en cliquant sur l'icône Verrouiller le calque dans la palette Calques.

Dans le dossier d'animation Croquis, j'esquisse les expressions principales du citron sur ses Cellules où elles devraient apparaître dans la Chronologie. Je prends également des notes et esquisse les effets.

Les expressions faciales doivent tenir dans le contour du citron sur le calque Contour.

Oui, même lorsque le citron rétrécit en dézoomant dans la vidéo, je garde les croquis des expressions de la même taille, là où ils s'insèrent dans le contour du citron. Je les réduirai plus tard.

 

 

J'utilise le Stylo-G avec une Taille de pinceau de 5px, un Faible anticrénelage. Pas de sensibilité à la pression.

Si je veux déplacer un dessin d'une cellule à une autre, je sélectionne la cellule d'origine puis je vais dans le menu Calque > Sélection à partir du calque > Créer une sélection.

La sélection étant toujours active, je vais ensuite à la cellule où je veux la déplacer, puis je clique sur le bouton Remplir pour remplir la sélection avec la Couleur active qui est le Noir.

Recliquez sur la première Cellule et cliquez sur l'icône Supprimer en haut pour effacer facilement tout de la Cellule.

Désélectionner.

Cette méthode ne convient que lorsqu'il n'y a qu'une seule couleur présente dans l'image que je veux déplacer.

Pendant ce processus, j'ai dû réduire l'Opacité du calque Vidéo afin de mieux voir les lignes des croquis à droite du Citron.

Une fois les expressions principales en place, j'ajoute les intermédiaires sur le reste des Cellules.

 

La fonction Pelure d'oignon a été utile pour cela.

Pour l'activer, cliquez sur l'icône Activer la pelure d'oignon dans la palette Chronologie, tout en étant toujours dans le dossier d'animation Croquis.

Pour la configurer, je vais dans le menu Animation > Afficher les cellules d'animation > Paramètres de la pelure d'oignon.

Dans la boîte de dialogue Paramètres de la pelure d'oignon, j'ai défini :

 

Le nombre de peaux pour l'image précédente et suivante à 1.

Sélectionner les couleurs pour l'image précédente (Bleu) et suivante (Orange).

Les niveaux d'opacité pour Démarrer à 50 et Pas à 10.

 

 

Si j'ai besoin de plus de peaux ou de quoi que ce soit d'autre, je peux toujours revenir en arrière et le modifier à nouveau.

Chaque fois que j'ai besoin de la fonction Pelure d'oignon, je l'active et la désactive quand je n'en ai pas besoin. C'est assez facile, je clique juste sur un bouton.

Dessin au trait

Il est maintenant temps de faire le Dessin au trait, ce qui consiste simplement à redessiner ce que j'ai dans le dossier d'animation Croquis, mais de manière plus nette.

 

Je réduis l'Opacité du dossier d'animation Croquis et le Verrouille.

Je clique sur le dossier d'animation Dessin au trait et le démasque. Il contient déjà toutes ses Cellules, donc tout ce que j'ai à faire maintenant est de dessiner dessus.

Avec la couleur Noire sélectionnée, j'utilise le Stylo-G et la Courbe continue pour dessiner le dessin au trait.

Je règle la Taille du pinceau à 4px et l'Anticrénelage à Faible.

 

 

Je réalise des dessins plus nets des expressions faciales, des effets, des larmes et des cœurs.

Les sourcils sont plus épais que les autres lignes tracées avec une Taille de pinceau de 4px, j'ai donc tracé toutes les autres lignes puis je suis revenu en arrière et j'ai dessiné les sourcils avec une Taille de pinceau plus grande.

Couleur

Pour l'étape de la coloration, je masque d'abord le dossier d'animation Croquis car il n'est plus nécessaire.

Je démasque le dossier d'animation Couleur car je vais y remplir le dessin au trait.

Sélectionnez l'outil Remplir et sélectionnez le sous-outil Référencer d'autres calques.

 

Dans la palette Propriété de l'outil, sous Référencer plusieurs, sélectionnez l'option Calque de référence.

Dans la palette Calque, cliquez sur le dossier d'animation Dessin au trait, puis définissez-le comme Calque de référence en cliquant sur l'icône en forme de phare.

 

Je verrouille également le calque en cliquant sur l'icône de cadenas pour éviter de colorier accidentellement dessus.

Dans le dossier d'animation Couleur, je remplis les couleurs en me basant sur les dessins du dossier d'animation Dessin au trait ci-dessus.

 

 

Désactivez le dossier d'animation Dessin au trait comme calque de référence en cliquant à nouveau sur l'icône en forme de phare.

Ajustement pour le Zoom arrière et le Flou

Maintenant que tout est colorié, il est temps de les ajuster afin qu'ils zoome et flouent lorsque la vidéo originale le fait aussi.

 

Pour ce faire, je peux simplement utiliser les fonctions de flou et de transformation dans CSP, mais il y a un problème… Je dois flouter ou transformer le contenu des cellules d'animation Dessin au trait et Couleur ensemble en même temps.

 

Par conséquent, je devrais fusionner les deux dossiers d'animation avant de pouvoir effectuer les modifications restantes. Malheureusement, CSP EX n'a pas de fonction officielle pour cela, je devrais donc le faire manuellement.

Bien que je sois sûr qu'il existe plusieurs façons de le faire dans CSP, certaines méthodes étant plus idéales que d'autres, j'ai choisi cette méthode car elle est très intuitive et je n'ai besoin de le faire que pour 27 cellules.

 

À savoir, les cellules numéros 68 à 95 où le zoom arrière et le flou se produisent. Cela représente un total de 27 cellules. Cela commence de l'image 135 à l'image 190, mais par deux.

 

Pour cette méthode, je crée un nouveau calque en haut de la palette Calque uniquement pour m'aider dans ce processus.

Je vais dans le dossier d'animation Dessin au trait.

 

Ensuite, je fais glisser le calque (Cellule) 68 du dossier d'animation LineArt et le place à l'extérieur, au-dessus du calque vide dans la palette Calque.

Ensuite, je fais également glisser le calque (Cellule) 68 du dossier d'animation Couleur et le place au-dessus du calque vide, MAIS en dessous de l'autre Calque 68.

Je clique sur le calque supérieur qui provient du dossier d'animation Dessin au trait, puis je clique sur l'icône « Fusionner avec le calque inférieur » en haut de la palette Calque.

Une fois fusionné, je le fais glisser de nouveau à sa position, mais dans le dossier d'animation Couleur. Par conséquent, il n'y a plus de calque 68 dans le dossier d'animation Dessin au trait.

Je fais cela pour tous les autres Calques/Cellules jusqu'au dernier, au Calque/Cellule 95. Une fois terminé, le dossier d'animation Dessin au trait ne devrait plus contenir de Calques/Cellules des numéros 68 à 95. Cela va de l'image 135 à l'image 190.

 

Une fois terminé, je peux supprimer ce calque aléatoire que j'ai créé en haut.

Maintenant que les cellules sont fusionnées les unes aux autres dans le dossier d'animation Couleur, je peux commencer à les ajuster pour le Zoom et le Flou.

 

Cliquez sur le calque Contour, puis allez dans le menu Calque > Sélection à partir du calque > Créer une sélection.

 

 

Je masque ensuite le calque Contour afin de ne pas me confondre.

Ensuite, la sélection étant toujours active, je vais aux Cellules fusionnées dans le dossier d'animation Couleur et je remplis le contour du Citron en cliquant sur l'icône Remplir sous la sélection. Faites cela pour toutes les Cellules fusionnées.

 

 

Une fois terminé, j'appuie sur l'icône Désélectionner pour annuler la sélection.

Avec le contour du citron sur les Cellules, je vais dans le menu Édition > Transformer > Mettre à l'échelle pour réduire les dessins sur la Cellule jusqu'à ce que le contour du citron sur celle-ci corresponde à l'image réduite du citron sur la vidéo ci-dessous.

Je fais cela pour toutes les Cellules où le Citron rétrécit. Une fois terminé, je reviens en arrière et j'efface le contour du Citron des Cellules.

Après cela, je floute ceux qui apparaissent là où le citron dans la vidéo commence à devenir flou.

Je le fais en allant dans le menu Filtre > Flou > Flou gaussien.

 

 

Ensuite, je parcours toute l'animation et j'efface les parties des dessins qui se chevauchent avec la main.

Zs de sommeil

La dernière chose à ajouter sont les Zs de sommeil. C'est très facile à ajouter avec l'utilisation des images clés.

 

Tout d'abord, j'ai créé un nouveau calque Raster et l'ai nommé Zs. Sa position dans la palette Calque n'a pas d'importance.

 

Sur ce calque, je dessine une grande lettre Z.

Toujours sur ce calque, je vais dans la palette Chronologie et je clique sur l'icône Activer l'image clé sur ce calque.

Ensuite, je clique sur la première image dans la Chronologie et j'ajoute une image clé ici en cliquant sur l'icône Ajouter une image clé.

Je clique sur l'Image clé, puis sur l'Outil Opération > Outil Objet.

 

Je réduis ensuite le Z et le déplace plus près du Citron.

 

 

Je vais ensuite dans la palette Propriété de l'outil et je réduis l'Opacité du calque.

J'ai ensuite créé une autre image clé entre les images 10 et 11. Je l'ajuste de la même manière que la première. Je l'agrandis et la fais glisser hors de la toile où elle devrait se déplacer. J'ai cependant maintenu l'Opacité du calque à 100.

 

 

Je duplique ce calque deux fois et les fais glisser à différentes positions dans la Chronologie. Cela permet à deux Zs supplémentaires d'apparaître, mais plus tard que le premier.

Exporter

Maintenant que j'ai terminé, je dois l'exporter.

 

Pour ce faire, je vais dans le menu Fichier > Exporter l'animation > Film (ou GIF animé).

N'oubliez pas de régler la Fréquence d'images à 12.

 

 

Voici un GIF du résultat final.

Ceci est la fin du tutoriel, merci de l'avoir lu. Je sais que ce tutoriel n'est pas parfait, mais j'espère qu'il vous donnera quelques idées si jamais quelqu'un veut essayer quelque chose comme ça, à bientôt.

Et tant que vous y êtes, n'hésitez pas à consulter ma bande dessinée sur Webtoons. Elle est actuellement en pause mais j'essaie actuellement de régler certaines choses avant de la reprendre. Elle s'appelle Acid Tears. Merci ❤️.