Dans ce tutoriel, je vais vous montrer comment créer une émote de loup à partir d'une image et utiliser l'outil de transformation pour créer diverses expressions et animations fluides. (Également compatible avec les versions Clip studio PRO et EX)

 

regardez la vidéo pour suivre l'étape en action. ;)

Consultez également la section bonus pour enregistrer les animations au format d'animations gif transparent, gratuit avec Gimp

Le tutoriel vidéo

Quelques connaissances de base sur la conception d'un emote

Avant de créer des conceptions pour l'émote, vous devez commencer par définir l'étendue de votre conception et les spécifications de l'émote qui sont

 

1. Quelle est la taille de l'emote que vous devez faire?

2. Quelle est l'expression que vous allez montrer?

3. Quelle est la couleur d'arrière-plan de la plateforme?

 

 

-Taille: la taille de l'émote en limite le détail. Si vous mettez trop de détails sur une petite émote, vous ne pourrez pas voir les détails, comme indiqué ici.

-Expression: l'expression de l'émote de base commence par les yeux et la bouche. L'émotion sera plus complexe si des sourcils et des effets de détail sont ajoutés, ce que vous voyez souvent dans les bandes dessinées / mangas.

-Couleur de fond de la plate-forme: certaines plates-formes de chat social ont différents modes pour les arrière-plans, certaines sont en mode unique, assurez-vous que la conception de votre emote est adaptée à l'arrière-plan de la plate-forme pour laquelle l'émote est utilisée.

Conseils: certaines plates-formes qui permettent aux utilisateurs de personnaliser l'arrière-plan; vous pouvez facilement le réparer en appliquant quelques traits avec l'outil d'effet de bordure.

Lorsque vous pouvez étendre votre emote, vous êtes maintenant prêt pour la conception

Étape 1: concevoir l'émote

J'ai créé une étendue pour mon emote en utilisant les questions sur l'étendue d'émote que j'ai faites.

 

1. Quelle est la taille de l'emote que vous devez faire?

• 50 50, 25 25

2. Quelle est l'expression que vous allez montrer?

-Sad »« heureux »« sueur »« non »

3. Quelle est la couleur d'arrière-plan de la plateforme?

• gris foncé (Discord)

L'emote que je vais faire dans ce tutoriel est de petite taille donc j'ai décidé de ne dessiner que le visage du personnage

Conseils: La recherche d'une référence au loup permet d'obtenir des images claires sur la forme de la tête de l'animal et ses caractéristiques.

définir la forme des yeux de la tête (crâne) + la position du nez et la fourrure

Une fois la forme obtenue, il est facile d'ajouter des détails à l'esquisse. Variez les détails jusqu'à ce que vous en soyez satisfait.

La prochaine étape consiste à y ajouter les émotions. Si vous n'êtes pas habitué à dessiner des expressions, dessinez des emotes simples, puis appliquez-les à la conception.

Les animaux ont également d'autres façons de montrer des expressions, comme la position de l'oreille ou la fourrure. En voici quelques exemples.

Conseils: Si vous ne savez pas comment la créature que vous dessinez peut faire sa propre signature, essayez de rechercher des photos de référence sur Internet

Étape 2: dessiner des pièces emote

Tout d'abord, nous devons concevoir les parties de calque pour faire l'animation avec des transformations de calque. Lors de l'organisation du design ensemble, nous pouvons planifier certaines parties mobiles telles que l'oreille, le nez, les yeux, les joues, etc.

Le visage du loup est symétrique, nous pouvons utiliser l'outil de règle symétrique pour aider au dessin;

Créer un nouveau calque vectoriel pour l'encre

Utilisez ensuite la règle symétrique pour créer la ligne centrale, avec le paramètre «Nombre de lignes» 2 et cochez «Symétrie des lignes»

(maintenez la touche Maj enfoncée pour l'aligner sur la ligne verticale)

 

Dessinez l’encre avec l’outil préféré, ici j’utilise mon nouvel outil d’encre préféré: ‘Courbe de Bézier’

(si vous ne trouvez pas encore l'outil, mettez à jour votre Clip studio vers la dernière version;))

Créez un nouveau calque vectoriel pour d'autres parties, si la règle symétrique est manquante lors du changement de calque, réglez-la sur "Afficher dans tout le calque" (le menu est sur le panneau des calques)

Dessinez seulement la moitié de l'image, sauf le visage et le nez.

Colorez-le séparément avec de la couleur unie. J'utilise le paramètre d'outil de Clip Studio Asset:

Sur le calque d'encre, définissez-le en tant que calque de référence, puis définissez la propriété de l'outil pour «référencer plusieurs» sur le calque de référence

Faites glisser le couvercle sur l'encre (ne doit avoir aucun espace d'encre)

Utilisez le mode transparent de verrouillage pour peindre sur les formes.

Mettez la couche d'encre et la couleur dans un dossier et répétez l'étape pour toutes les pièces

Astuce: si la pièce n'est pas de forme fermée, peignez pour combler l'écart avant d'utiliser l'outil de remplissage.

Assurez-vous de nommer tous les dossiers, puis convertissez le dossier en objets fichier en cliquant avec le bouton droit sur le calque> Objet fichier et Convertir le calque en objet fichier.

 

"Objet fichier" facilitera à l'avenir la modification des pièces.

 

La partie du nez sera une technique différente, créez 2 cercles pour se chevaucher pour la faire ressembler à de l'encre.

Cette technique est utile pour créer une dimension en mouvement que vous pourrez voir à l'étape suivante.

Copiez le calque d'objet et utilisez l'outil objet pour le retourner, répétez pour toutes les parties

[Important !! ] Renommez tous les calques pour éviter toute confusion lors de l'animation

Lors de la sélection du calque objet avec l'outil objet, vous pouvez ouvrir le fichier des pièces

Modifiez les pièces et enregistrez, la modification apparaîtra partout où l'objet apparaît.

Maintenant, votre image est prête pour l'animation.

Étape 3: préparer le fichier

Préparez l'espace de travail pour votre emote, retour à notre conception depuis le début, nous allons faire des emotes pour Discord qui a un fond gris foncé

[Citation sur Wikipedia]

Discord est une application VoIP gratuite et une plateforme de distribution numérique propriétaires conçues pour les communautés de jeux vidéo.

Imprimez l'écran de l'application et collez-le sur la toile, puis choisissez la couleur et appliquez sur la couche de papier

Regroupez les pièces que nous avons faites dans un dossier, sélectionnez-le et appuyez sur la touche CTRL + C puis CTRL + V sur le nouveau canevas

Maintenez CTRL et cliquez sur l'icône du dossier pour faire la sélection, puis allez dans le menu Edition> Recadrer

Ensuite, avec le menu Edition> Modifier la taille du canevas, définissez la dimension de manière égale au carré.

 

ajouter également un peu plus de pixels pour la zone d'animation

Le fichier est maintenant prêt. Enregistrez-le comme modèle pour l'animation ultérieurement.

Étape 4: animer l'émote

Démarrez l'animation, créez une nouvelle chronologie.

(si vous n'avez pas de panneau de montage, allez dans le menu Fenêtre> Montage)

Si vous avez Clip Studio EX, vous pouvez créer un temps de lecture supérieur à 24 images, mais ne vous inquiétez pas si vous avez la version Pro, pour l’emote, 24 images suffisent!

 

Définissez la fréquence d'images de la chronologie à 8 ou plus. L'animation ne sera pas aussi fluide si elle est inférieure à 8 images.

Dessinez l'animatique d'abord,

Animatic est la façon dont vous tracez à quoi ressemblera l'animation à un moment donné

pour rendre animatique, nous utiliserons l'animation classique image par image.

 

Créer un dossier d'animation

Sélectionnez l'image que vous souhaitez et "créez une nouvelle cellule d'animation"

Créez 2 cel, cel 1 pour l'émotion principale et cel 2 pour l'état avant d'atteindre l'émotion.

mettez également cel 2 à la fin, faites un clic droit sur le cadre et sélectionnez cel 2

pour dessiner l'animatique, il suffit de cliquer sur le cadre et de dessiner

Nous utiliserons cet animatique que nous avons fait pour la position de référence pour le mouvement des pièces.

Assurez-vous que l'animatique est la couche supérieure. Verrouillez le calque pour éviter les erreurs de clic

Pour faire des yeux clignotants, nous devons utiliser la technique image par image. Nous le dessinons donc dans le dossier d'animation

assurez-vous que le cadre est le même pour animatique

pour les autres parties qui bougent (pas de changement comme les yeux), sélectionnez-le avec "Outil objet" et "Activer les images clés sur ce calque"

Ajoutez ensuite l'image clé à l'image 1

Il existe également des options pour les images clés, pour une manipulation facile, je recommande celle linéaire. Mais si vous vous habituez aux outils graphiques d'animation, vous pouvez également utiliser celui lisse.

Créez également l'image clé pour la dernière image, en la créant simplement, elle copiera simplement la position de la première image.

Cliquez sur le losange vert et faites-le glisser jusqu'à la fin de la chronologie pour créer l'image finale.

Nous faisons cela pour en faire une animation en boucle.

Remarque: consultez mon ancien tutoriel pour l'animation de boucle:

 

Si les pièces bougent ensemble, animez-les ensemble en même temps.

sélectionnez l'image à la position du cel 1 de l'animatique puis utilisez l'outil objet pour ajuster la position de l'image, l'image clé sera créée automatiquement sur la timeline.

Copiez le diamant et placez-le là où cel 1 des extrémités animatiques

 

Faites un clic droit sur le losange vert sur la timeline puis sélectionnez copier.

Faites un clic droit sur l'image clé où se termine le cel 1 et sélectionnez coller

cela retardera l'émission d'émotions sur l'emote

Vous commencerez à voir quelques mouvements lisses sur les sourcils ^ ^

Répétez l'étape pour les autres parties également, utilisez la couche animatique comme référence

Remarque: J'ai également ajouté des images clés supplémentaires pour plus de mouvements, tels que les oreilles et également appliquer des images clés de calque pour transformer la position des yeux

Résultat final:

Étape 4: animer l'émote à un niveau plus avancé

Il s'agit d'un exemple plus avancé de la méthode de transformation dans Clip Studio à l'aide de l'outil objet.

 

Par défaut, lorsque vous activez l'image clé pour l'animation, le mode de réglage de l'image sera par défaut au mode échelle, ce qui n'est pas aussi flexible pour les animations.

 

Mais si vous définissez le mode de transformation, puis déplacez un nœud et activez l'image clé, vous obtiendrez le mode de transformation gratuit qui vous permet de déplacer les nœuds librement

 

(l'actif sakura appartient à Clip studio)

utilisez le mode de transformation gratuit pour ajuster notre objet avant d'activer l'image clé du calque. alors vous pouvez ajuster votre image clé en mode de transformation libre

Répéter la même étape de création de la chronologie que celle que nous avons faite dans la partie précédente du didacticiel avec la méthode de transformation gratuite vous donnera des regards plus avancés sur le résultat.

Vous pouvez également appliquer un effet transparent avec l'image clé du calque.

Sur la couche chronologie, cliquez sur l'icône [+]

 

Cliquez sur l'opacité et vous pouvez ajouter une image clé pour contrôler l'opacité du calque à n'importe quelle image

Bonus: enregistrez l'émote transparente avec The Gimp

Il y a encore des fonctions manquantes lors de l'exportation des animations gif a avec un fond transparent. le résultat contiendra le fond blanc qui dérange en tant qu'émote.

Une bonne solution consiste à l'exporter au format apng (format d'animation png) et à le convertir si vous souhaitez un format d'animation gif

 

Cependant, j'ai ma propre solution pour exporter les emotes d'arrière-plan transparent avec le logiciel open source fiable et gratuit: The Gimp

vous pouvez le télécharger depuis son site officiel:

 

 

Tout d'abord, exportez la séquence d'images depuis Clip studio, allez dans le menu: Fichier> Exporter l'animation> Séquence d'images

Remarque: n'oubliez pas de masquer le calque papier pour rendre l'arrière-plan transparent.

 

Dans le paramètre, sélectionnez le dossier et la taille préférée [Important !!]

Vous obtiendrez une séquence d'images pour votre emote à la taille préférée.

 

(Je travaille toujours avec une grande taille de fichier pour diverses utilisations à l'avenir et j'utilise l'option d'exportation pour diverses spécifications d'exportation)

Maintenant du côté de Gimp:

 

ouvrez The Gimp, allez dans Fichier> Ouvrir en tant que calques

Accédez au dossier pour la séquence d'images, sélectionnez tout, puis ouvrez-le

Les fichiers seront organisés en couches.

Ensuite, exportez-le vers gif, fichier> exporter sous

Définissez le nom du fichier, sélectionnez le type de fichier «gif» et exportez

Vous obtiendrez un menu contextuel, cochez la case «en tant qu’animation» et définissez l’élimination des images sur une image par couche.

 

Le délai entre les images est de 1000 / fréquence d'images du gif que vous avez créé

 

exemple: framerate = 10 fps; il y aura un délai de 1000/10 = 100 millisecondes entre chaque trame

j'espère que vous vous amusez créer vos propres emotes <3

Terminé!!