Salut tout le monde !Je suis Link, un animateur et illustrateur de @linkurysLinkurys (@linkurys) • Photos et vidéos InstagramC'est ma première fois que je partage des astuces d'animation en ligne, alors si l'un de mes conseils semble peu clair ou déroutant, n'hésitez pas à demander ! Vous pouvez laisser un commentaire ou m'envoyer un DM.Dans ce tutoriel, je vais vous montrer 3 façons d'animer rapidement et facilement vos émoticônes. Chaque méthode a ses propres défis, mais ne vous inquiétez pas ! Je vous guiderai à travers chaque étape, du début à la fin, en utilisant Clip Studio Paint Ex !😁
Que Allons-Nous Faire ?
Quand vous pensez à créer des émoticônes animées, vous pourriez croire que c'est difficile, compliqué et que cela demande beaucoup de travail. Je pensais la même chose avant de commencer à animer. Mais croyez-le ou non, ces trois points ci-dessus sont essentiellement tout ce qu'il y a à faire ! Eh bien, bien sûr, ce n'est pas si simple, mais c'est plus facile que vous ne le pensez ! Surtout lorsque nous utilisons Clip Studio Paint qui nous offre de nombreuses fonctionnalités 😎
3 façons d'animer vos émoticônes !
Comme je l'ai mentionné plus tôt, je vais vous présenter 3 façons de créer vos propres émoticônes animées, qui sont :1. Animation d'images statiquesL'essence de cette technique est simple, il s'agit essentiellement de déplacer votre image/dessin pour obtenir le mouvement souhaité.(C'est la méthode la plus populaire que les gens utilisent pour créer leurs émoticônes animées et vous avez probablement déjà vu ce type d'émoticône plusieurs fois, n'est-ce pas ?)2. Animation par partiesIci, vous allez séparer les parties de vos émoticônes et les déplacer individuellement, en utilisant la même technique que la première méthode.(Similaire à la 1ère méthode, mais avec plus de composants à animer.)3. Animation image par imageAnimez en dessinant chaque mouvement image par image !Cette technique demande plus d'effort et peut être quelque peu difficile pour les débutants. Cependant, avec une pratique constante, vous vous retrouverez à devenir plus rapide et plus compétent dans la création de ces animations !(La plus difficile mais très amusante ! :D)
Préparer votre espace de travail et votre matériel
1. Préparez le dessin de vos émoticônes que vous souhaitez animer
Assurez-vous que c'est visible !Lorsque nous parlons d'émoticônes animées, elles sont souvent utilisées pour les chats de diffusion en direct, comme sur Twitch ou des plateformes similaires. Puisqu'elles peuvent apparaître petites, il est important de s'assurer qu'elles sont faciles à voir. N'ajoutez pas trop de petits détails qui pourraient se perdre. Restez simple !
2. Configurer votre espace de travail Clip Studio Paint
Avant de plonger dans le tutoriel d'animation, configurons les choses !1. Ouvrez votre Clip Studio Paint2. Cliquez sur Fichier > Nouveau…
3. Sélectionnez Animation sur le projet4. Définissez la taille de votre toile/cadre sur 1000x1000 px et la résolution sur 150(Vous pouvez choisir une taille différente, mais assurez-vous qu'elle maintient une échelle 1:1)5. Réglez votre fréquence d'images sur 24 FPS6. Cliquez sur OK
Si vous n'avez pas le Panneau Chronologie, vous pouvez le faire apparaître en allant dans Fenêtre > ChronologieAttendez, qu'est-ce qu'une Chronologie, demandez-vous ? Eh bien, c'est essentiellement la colonne vertébrale de tout projet d'animation. Sur la chronologie, vous disposez les séquences, définissez le rythme et organisez vos images d'animation. C'est là que toutes les pièces individuelles s'assemblent, vous permettant de visualiser et de contrôler le flux de votre animation du début à la fin. Pensez-y comme au tableau de bord du réalisateur où chaque mouvement, chaque transition et chaque moment est tracé.
Ceci est facultatif, mais vous pouvez masquer l'aperçu de votre dossier d'animation pour gagner de l'espace en allant dans l'Icône Hamburger (3 lignes) à côté de la Chronologie, puis Taille des miniatures > Aucune.
Hourra ! Vous avez terminé la configuration de votre espace de travail Clip Studio Paint ! ✨
Animer et déplacer vos éléments
Si vous lisez ceci, cela signifie que vous êtes prêt à animer vos émoticônes, n'est-ce pas !? (Ou peut-être avez-vous simplement sauté à cette partie 😏). Quoi qu'il en soit, commençons par la méthode la plus simple et la plus facile : l'Animation d'image statique !
1ère astuce : Animation d'image statique
Dans l'image ci-dessus, vous verrez trois façons de déplacer et de modifier votre image statique. Vous pouvez la déplacer, la faire pivoter, l'agrandir ou la réduire, ou mélanger ces méthodes pour différents effets. Il y a tellement de possibilités que vous pouvez réaliser en utilisant simplement ces astuces, votre créativité est la seule limite !
Animation d'image statique : Niveau 1 (Basique)
1. Préparer votre image/dessin statique
Pour le niveau 1, créons ces émoticônes déçues en utilisant seulement 2 images :-Votre dessin de personnage-Image d'arrière-plan
2. Créer un dossier d'animation
Avant d'importer vos dessins dans Clip Studio Paint :1. Créez un nouveau dossier d'animation. Cela vous aidera à séparer votre dessin de personnage et votre image d'arrière-plan en différentes couches.2. Renommez le dossier d'animation comme vous le souhaitez. Par exemple, j'utilise « Personnage » pour la couche supérieure et « Arrière-plan » pour la couche inférieure."
3. Importer vos images/dessins
Dans Clip Studio Paint pour l'animation, vous ne pouvez pas simplement glisser-déposer des images directement sur votre toile pour les importer. C'est parce que les calques d'animation dans CSP sont principalement conçus pour les pinceaux et autres outils, et non pour les importations directes d'images. Pensez-y de cette façon : ils ne sont pas faits pour les matériaux bruts d'image.Pour importer vos fichiers image avec succès, assurez-vous de les glisser-déposer dans la zone de la palette de calques, précisément sous le dossier d'animation.
Le fichier image sera inséré en tant que Calque vectoriel nommé « Dino 1 ».(« Dino 1 » est le nom de mes fichiers image)
« Mais les images n'apparaissent pas sur la toile :( » Dites-vous ?Eh bien, c'est parce que vous devez d'abord assigner votre calque vectoriel d'image à votre dossier animé !Vous pouvez le faire en cliquant sur Assigner le calque à la trame > Sélectionner votre calque d'image > OK
La taille de l'image importée peut être plus grande ou plus petite que la taille de votre toile. Pour ajuster l'image à la toile sans en altérer les proportions, appuyez et maintenez la touche Shift tout en faisant glisser le coin de l'image
C'est tout ! Vous avez terminé d'importer l'image de votre personnage !✨Maintenant, vous pouvez faire la même chose pour importer et assigner votre arrière-plan avec l'autre dossier d'animation !
4. Animez votre dessin !
Pour commencer à animer votre dessin, vous devez d'abord activer la fonction d'image clé en faisant :1. Sélectionnez le dossier d'animation « Arrière-plan »2. Activez l'image clé pour le calque que vous choisissez
Lorsque l'image clé est activée, ajoutez une image clé sur la première image
Maintenant, copiez cette image clé que vous avez ajoutée et collez-la à la fin de la durée de votre animation, qui est de 2 secondes. Vous pouvez le faire facilement en appuyant sur ALT+Glisser-déposer l'image clé.
Maintenant vous avez 2 images clés !
Tout d'abord, sélectionnez l'image clé initiale. Ensuite, cliquez sur Mode d'opération >Objet. Ce paramètre vous permettra de commencer à ajuster votre arrière-plan à partir de cette première image clé.
Après cela, déplacez l'image d'arrière-plan vers le haut/en dehors de la toile.
ET C'EST TOUT !Vous avez créé votre 1ère émoticône animée ! 🥳
Si vous trouvez l'animation d'arrière-plan trop lente, n'hésitez pas à l'ajuster à votre guise. Personnellement, j'ajoute plus d'images clés près de l'image initiale pour ajuster la vitesse.
Voici le résultat !
Et voici un autre résultat utilisant les 3 techniques de base d'animation statique (rotation, échelle et position) avec la même procédure exacte ! Pouvez-vous me dire où et quand je les utilise toutes ? 👀
NIVEAU SUPÉRIEUR ! FÉLICITATIONS ! ✨Vous avez terminé l'Animation statique Niveau 1. Maintenant, vous êtes prêt pour le Niveau 2 !
Animation d'image statique : Niveau 2 (Avancé)
Bienvenue au Niveau 2 !À présent, je suppose que vous maîtrisez les bases de l'animation d'image statique. Alors, nous allons sauter les étapes de base et plonger directement dans le processus d'animation, d'accord !?
1. Matériel d'émoticônes du niveau 2
Utiliser deux images différentes peut sembler simple, surtout avec les possibilités infinies qu'offre la combinaison de techniques d'animation statique de base. Mais pour ce niveau, pourquoi ne pas augmenter la mise ? Créons un gif animé en utilisant une seule image ! 😈
2. Nouveau fichier ou nouvelle chronologie ?
Vous avez deux options pour cette partie : soit créer un nouveau fichier/canevas comme nous l'avons fait, soit simplement créer une nouvelle chronologie avec le même format qu'auparavant, mais avec des ajustements mineurs. Curieux de créer une nouvelle chronologie ? Laissez-moi vous dire !
Voici comment créer une nouvelle chronologie :1. Sur le panneau Chronologie, cliquez sur le bouton Nouvelle chronologie.2. Un écran contextuel apparaîtra. Puisque nous utilisons le même format d'animation, il n'est pas nécessaire d'ajuster les paramètres. Renommez simplement la chronologie en 'Niveau 2' ou peut-être souhaitez-vous modifier votre temps de lecture pour une durée plus courte/plus longue.3. Cliquez sur OK
Votre nouvelle chronologie est prête ! ✨Cependant, si vous regardez le panneau des calques, vous remarquerez que les images de dessin que vous avez importées précédemment sont toujours là. C'est parce que la création d'une nouvelle chronologie signifie que vous travaillez dans le même fichier qu'auparavant. Cela n'affectera cependant pas votre progression sur la nouvelle chronologie !Ne les supprimez pas ! ⛔Si vous les supprimez, vous supprimerez les fichiers importés de la chronologie précédente. Et oui, cela signifie que l'animation que vous travailliez dans l'autre chronologie disparaîtra. Il est donc préférable de les laisser intacts.
Mais si cela vous dérange, voici une solution rapide1. Sélectionnez tous les calques2. Regroupez ces calques sélectionnés en appuyant sur CTRL G3. Étiquetez-le comme « Chronologie 1 ».4. Minimisez simplement le dossier pour garder votre espace de travail propre.5. Et voilà ! Votre espace de travail a maintenant un aspect frais et organisé avec une nouvelle chronologie prête à l'emploi ✨
3. Animer votre dessin !
Votre nouvelle chronologie est maintenant configurée, commençons l'animation !Voici un bref rappel des éléments à préparer :1. Créez un nouveau dossier d'animation2. Importez votre image/dessin3. Assignez votre image importée aux calques d'animation4. Ajustez l'échelle de votre image
Ajouter un dossier de caméra 2D :1. Cliquez sur le bouton burger2. Nouveau calque d'animation3. Dossier de caméra 2D
Maintenant que votre dossier de caméra 2D est configuré, déplacez votre calque de dessin à l'intérieur. Il suffit de glisser-déposer le calque à l'intérieur du dossier de caméra 2D. Cela active l'effet de caméra sur vos images/dessins.
Remarque avant d'animer l'effet de caméra 2D1. Assurez-vous d'avoir sélectionné le dossier ou le calque de la caméra.2. Le cadre carré que vous voyez sur la toile représente la zone qui sera capturée par l'effet de caméra. Essentiellement, tout ce qui se trouve à l'intérieur de ce carré sera la sortie.3. Lorsque vous commencez à ajuster le cadre de l'effet de caméra, une image clé sera automatiquement ajoutée à votre chronologie. Si vous passez à une autre durée d'image, puis ajustez votre cadre de caméra, il s'adaptera en conséquence.4. Pour voir le résultat de votre effet de caméra, cliquez et ouvrez le menu du bouton Burger sur la chronologie > Paramètres de lecture > Rendu de la caméra 2D.
Animer l'effet de caméra 2D
Créez un effet de caméra rapide et vibrant, en déplaçant votre cadre d'effet de caméra vers une position aléatoire toutes les 2-3 images.
Le résultat attendu devrait ressembler à ceci
Effet de zoom d'animation1. Choisissez le calque d'animation de votre dessin qui se trouve dans le dossier de la caméra.2. Activez l'option d'image clé.3. Ajoutez une image clé au début et à la fin de l'animation.
4. Sur l'image clé finale, agrandissez et zoomez votre calque de dessin/image pour obtenir un effet de zoom (assurez-vous de le faire avec les outils d'opération > objet, sinon vous ne pourrez pas déplacer l'image).
Le résultat attendu serait comme ceci !Bien que vous puissiez le considérer comme terminé à ce stade, pourquoi ne pas ajouter un peu plus de peps ? Améliorons ce sourire pour le rendre encore plus menaçant. HAHA 😈
Ajouter un filtre1. Sélectionnez votre calque de dessin2. Désactivez temporairement la fonction d'image clé(Ne vous inquiétez pas, lorsque vous la réactiverez, l'image clé restera la même)
3. pixellisez votre image en faisant Clic droit sur le calque > PixelliserLa pixellisation convertit votre calque vectoriel en format Bitmap, ce qui vous permet ensuite d'appliquer des filtres à votre image.
4. Ouvrez Filtre > Flou > Flou radial(Remarque : Il existe de nombreux autres filtres que vous pouvez explorer en dehors de celui-ci !)
5. Ajustez l'intensité, la direction sur Les deux directions et le mode sur Lisse, puis OK
6. Une fois terminé, vous pouvez réactiver la fonction d'image clé pour votre calque de dessinET VOICI LE SOURIRE MENAÇANT ! 😈😈😈
NIVEAU SUPÉRIEUR ! FÉLICITATIONS ! ✨Vous avez terminé l'Animation statique Niveau 2. Maintenant, vous êtes prêt pour l'Animation par parties !
2ème astuce : Animation par parties
Le concept derrière l'animation par parties est similaire à l'animation d'images statiques, où vous déplacez, mettez à l'échelle ou faites pivoter votre dessin. Ce qui la rend différente, c'est que vous devez séparer chaque partie de votre personnage que vous souhaitez déplacer individuellement. Comme illustré dans l'image ci-dessus, mon personnage a quatre parties, chacune pouvant être animée séparément, ce qui vous offre plus de possibilités et même des poses dynamiques pour vos émoticônes !
Séparer les parties du personnage
Dans cette section d'astuces, je souhaite animer mon personnage en train de siroter une tasse de café.Pour ce faire, je vais décomposer le personnage en cinq parties, à savoir :1. Corps,2. Œil,3. Sourcil,4. Lèvres5. La tasse de caféJuste un petit rappel les gars, vous n'êtes pas obligés d'imiter mes poses ou mes designs. N'hésitez pas à utiliser vos propres personnages, poses et éléments connexes. Laissez votre créativité s'exprimer !
Configuration du dossier d'animation et importation d'images
Configurez votre dossier d'animationCréez des dossiers d'animation en fonction du nombre de parties distinctes de votre personnage. Puisque mon personnage est divisé en cinq parties, je vais créer cinq dossiers d'animation distincts.Assurez-vous de bien organiser les dossiers. Vous ne voudriez pas qu'une image qui devrait être au premier plan soit chevauchée par d'autres parties, n'est-ce pas ?
Importez et assignez votre dessin aux calques de chaque dossier d'animation
1. Importez votre image/dessin dans chaque dossier d'animation que vous avez créé2. Assignez votre dessin importé au dossier d'animation respectif, comme nous l'avons fait avec l'Animation d'image statique : Cliquez sur 'Assigner le calque à la trame', sélectionnez votre calque d'image, et puis cliquez sur 'OK'. Répétez cette opération pour chaque partie3. Placez ces parties à leurs positions initiales pour la condition de départ ou la 1ère image
Animer les parties du personnage
Avant de plonger dans l'animation, il est crucial de planifier le mouvement souhaité. Basé sur l'image ci-dessus, pour réaliser l'action de siroter pour notre personnage, nous devons identifier quelles parties nous allons déplacer et quelles parties resteront stationnaires.Si nous observons l'image, voici ce que nous pouvons apprendre :1. Les sourcils se déplacent vers le bas.2. Les yeux restent immobiles.3. La bouche est masquée pendant que le personnage sirote le café.Maintenant que nous avons notre condition de mouvement souhaitée, commençons l'animation !1. La première chose que nous voulons faire est d'activer la fonction d'image clé sur chaque dossier/calque d'animation afin de pouvoir y placer l'image clé et l'animer2. Ajoutez une image clé sur la première image et sur la dernière image
3. Modifiez toutes les images clés finales pour représenter le mouvement final. Pour mon personnage, c'est le moment où le personnage sirote.Le résultat attendu devrait ressembler à ceci !
Nous pourrions techniquement en rester là, mais pourquoi ne pas ajouter une touche d'originalité pour le rendre encore meilleur ? Pimentons les choses ! 😎1. Ajoutez un effet de caméra 2D en faisant Clic droit sur le dossier d'animation > Nouveau calque d'animation > Dossier de caméra 2D
2. Insérez tous les dossiers d'animation des parties du personnage dans le dossier de la caméra.
Animer l'effet de caméra 2D1. Fermez votre dossier de caméra pour masquer les autres calques. Cela rend votre chronologie plus facile à voir.2. Ajoutez des images clés sur la première et la dernière image.
3. Réduisez l'échelle du cadre de l'effet de caméra pour obtenir l'effet de zoom avant.
Le résultat attendu devrait ressembler à ceci !
Vous trouvez ça un peu piquant, n'est-ce pas ? Mais ce n'est pas assez piquant, ajoutons plus d'épices ! 😤4. Ajoutez un arrière-plan en créant un nouveau dossier d'animation sous le dossier de la caméra.5. Sélectionnez le calque d'arrière-plan > Nouveau calque d'animation
6. Ajoutez une figure/forme noire sur le calque d'arrière-plan.
7. Activez les images clés sur le calque d'arrière-plan.8. Ajoutez des images clés sur la première et la dernière image du calque.
9. Sélectionnez la première image clé et réduisez son opacité à 0.Le résultat attendu devrait ressembler à ceci !
Ça a déjà l'air encore mieux, vous ne trouvez pas ?! Mais j'ai une dernière touche à ajouter !1. Créez un nouveau dossier d'animation en haut du dossier de la caméra et nommez-le Premier plan.2. Créez un nouveau calque d'animation. Ajoutez une forme noire 1/4 sur la toile, couvrant une partie de vos dessins de personnages. Dupliquez le dossier d'animation de premier plan et déplacez le duplicata en bas de la toile. Vous avez donc maintenant 2 calques de premier plan différents au-dessus du calque de la caméra.
3. Activez l'image clé sur les deux calques.4. Ajoutez une nouvelle image clé sur la première et la dernière image sur les deux calques.
5. Sélectionnez le premier plan noir supérieur, puis la première image clé, décalez la forme noire de manière à ce qu'elle soit positionnée en dehors du haut de la toile.6. Sélectionnez le premier plan noir inférieur, puis la première image clé, décalez la forme noire de manière à ce qu'elle soit positionnée en dehors du bas de la toile.La première image ressemblerait à ceci
Voici le résultat !!! ✨
Et voici un autre résultat que j'ai réalisé en utilisant toutes les techniques d'animation que nous avons abordées jusqu'à présent ! Pouvez-vous me dire quoi et où je les utilise toutes ? 👀
NIVEAU SUPÉRIEUR ! FÉLICITATIONS ! ✨Vous avez réussi à terminer l'Animation par parties et l'Animation d'image statique !Rien qu'en arrivant jusqu'ici, vous avez prouvé que vous avez un potentiel incroyable en matière d'animation d'émoticônes ! Je suis fier de vous ! 🥹💖
3ème astuce : Animation image par image
Introduction
Avant de nous plonger dans notre voyage d'animation image par image, il est important de passer en revue quelques termes et concepts fondamentaux. Cela garantira que nous avons tous une compréhension claire et que nous sommes sur la même longueur d'onde à mesure que nous avançons !
Qu'est-ce que l'animation image par image ?
Comparée aux techniques précédentes où nous décalions principalement les arrière-plans et les parties du personnage pour montrer le mouvement, l'animation image par image nous fait illustrer chaque action de notre personnage en détail.Jetez un coup d'œil à l'image ci-dessus.Vous remarquerez le personnage sautant d'un point à un autre.Chaque phase de ce saut est représentée par une image unique, capturant chaque nuance du mouvement. C'est l'essence du dessin de chaque mouvement étape par étape !
Image
Une seule image dans une séquence d'images. Tout comme une seule photo dans un album.
Images Par Seconde (FPS)
Combien d'images (ou de photos) sont affichées en une seule seconde. Par exemple, si vous avez 24 FPS sur votre animation, cela signifie qu'il y a 24 images par seconde pour que l'action apparaisse fluide.
Image clé et intervalles
Images clés, Ce sont les images principales ou les « points clés » de votre animation. Elles définissent les points de début et de fin de toute transition fluide. En utilisant l'exemple d'une balle lancée, montré dans l'image ci-dessus, les images clés seraient le début du lancer, le point le plus haut et l'atterrissage.
L'intervallage (Inbetweening), C'est le processus de dessin des images qui existent entre les images clés pour rendre le mouvement fluide. Pour notre balle, ce sont les images qui montrent la montée et la descente entre ces trois points principaux.Plus d'intervallage signifie plus d'images et une animation plus fluide !
Émoticônes animées image par image
Même si la création d'émoticônes image par image prend plus de temps, cela en vaut la peine pour les émoticônes animées. Elles n'ont pas besoin d'être aussi détaillées ou longues que les animations classiques. Tant qu'elles expriment l'émotion, elles remplissent leur rôle !Entrer dans chaque détail de la technique image par image prendrait beaucoup de temps. Il y a beaucoup à couvrir, comme les 12 principes d'animation et comment créer une bonne scène. Cela rendrait cet article très long et pourrait être excessif. Nous aborderons ces autres détails plus tard dans un autre article.😉Pour l'instant, concentrons-nous simplement sur la création de ces émoticônes animées avec la technique image par image !
Ce que nous allons faire
Avant de nous plonger dans le processus de création d'émoticônes image par image, voici ce que nous allons faire ! (Je pense)1. Configuration de l'espace de travailPréparer notre toile d'animation.2. Esquisse et synchronisationPlanifier notre animation à travers des croquis et définir le bon timing.3. TraitTransformer ces croquis en lignes propres.4. Colorisation et renduAjouter des couleurs et lui donner un aspect soigné.5. Touche finaleUmm… nous verrons cela plus tard hehe 😋
1. Configuration de l'espace de travail
Configuration de la toile d'animation
Si vous avez suivi les étapes de nos astuces précédentes, vous savez que nous utilisons le même espace de travail pour cette technique. Cependant, si vous avez sauté directement à cette section ou avez besoin d'un rappel, laissez-moi vous faire un bref récapitulatif !1. Ouvrez votre Clip Studio Paint, puis ouvrez Fichier > Nouveau2. Sélectionnez Animation dans l'onglet Projet et configurez le préréglage d'animation comme ceci :
3. Cliquez sur OK4. Si votre Chronologie n'apparaît pas, ouvrez Fenêtre > Chronologie
Configuration du calque d'animation
Lorsque vous créez un nouveau canevas, un calque d'animation est automatiquement ajouté et nommé pour vous. Il est judicieux de renommer ce calque pour qu'il reflète son objectif. Par exemple, si vous esquissez votre animation sur ce calque, vous pourriez le renommer « Calque d'esquisse ».Cela vous donnera un énorme avantage dans la gestion de votre chronologie d'animation !Et voilà ! Votre espace de travail est prêt pour l'animation image par image !
Configuration du dossier de calques
L'utilisation de dossiers de calques est cruciale en animation image par image. Ils vous permettent d'empiler plusieurs calques dans un seul calque ou une seule image d'animation, ce qui maintient les choses organisées et efficaces.Voici comment le configurer !1. Sélectionnez votre calque d'animation2. Créez un nouveau dossier de calques dans la palette/le panneau des calques3. Créez un nouveau calque de trame et placez-le à l'intérieur du dossier de calques4. Assignez les calques du dossier de calques à votre image d'animationRemarque : Lorsque vous avez assigné les calques du dossier de calques à vos images d'animation, ils dupliqueront automatiquement le nombre de calques de trame dans ce dossier. Ainsi, si l'image 1 a un dossier de calques avec 2 calques de trame, lorsque vous ajoutez une nouvelle image comme l'image 2, elle aura également 2 calques de trame, reproduisant l'image 1.
Activer la pelure d'oignon
Cet outil vous permettra de voir et de référencer les images précédentes et suivantes pour des transitions plus fluides. C'est comme superposer des pelures d'oignon translucides, fournissant une image « fantôme » des images adjacentes pour guider le travail de l'animateur.Vous pouvez l'activer simplement en appuyant sur le bouton pelure d'oignon sur la palette de la chronologie.
2. Esquisse et synchronisation
EsquisseÉgalement connue sous le nom d'« animation brute », il s'agit de dessiner les mouvements de base des personnages ou des objets. Ces dessins simples montrent les actions principales sans détails. Ils nous aident à nous familiariser avec le mouvement et à le planifier.
SynchronisationLa synchronisation en animation concerne le nombre d'images utilisées pour chaque mouvement afin qu'il semble naturel. Cela aide à montrer des choses comme la vitesse ou le poids de quelque chose.Si vous avez suivi mes astuces d'animation d'images statiques et par parties, vous l'avez déjà fait en ajustant l'image clé !
Étape 0 : Concept d'émoticône
Avant de commencer à dessiner, réfléchissez à l'émoticône que vous voulez créer. Demandez-vous :1. Quel sentiment ou expression voulez-vous montrer ?2. Comment va-t-il bouger ? Comment va-t-il commencer et finir ?Dans mon cas, je vais vous faire une émoticône rapide et simple à comprendre, qui est :1. Je veux que mon personnage fasse un clin d'œil2. Il passera d'un sourire 🙂 à un clin d'œil 😉.
Comprendre clairement votre objectif améliorera à la fois la qualité et la vitesse de votre animation. Il est important de savoir ce que vous visez !
Étape 1 : Créer un calque d'animation et un calque
1. Créez un nouveau dossier/calque d'animation2. Renommez le calque d'animation en « Esquisse »3. Ajoutez de nouveaux calques/images d'animationRemarque :1. Effectuez cette étape chaque fois que vous souhaitez dessiner de nouvelles images pour votre animation2. Vous pouvez également utiliser un dossier de calques si vous le souhaitez
Étape 2 : Esquisse !
Puisque nous sommes dans la phase d'esquisse, n'hésitez pas à expérimenter sur votre toile et à explorer différentes idées ! Peut-être trouverez-vous une meilleure pose pour votre personnage ou quoi que ce soit d'autre 😎Remarque : J'utilise généralement le G-Pen pour l'esquisse, le dessin au trait et la colorisation. Mais choisissez l'outil avec lequel vous êtes le plus à l'aise !
Bref croquis
Pour chaque changement d'expression ou de pose du personnage, l'ajout d'une pose principale supplémentaire ou d'une autre image clé aide à faire la transition du personnage plus en douceur. Dans mon cas d'animation, je vais ajouter 1 image clé de plus entre le sourire et le clin d'œil du personnage 😗Voici un croquis rapide et une cartographie temporelle de l'animation :
comme vous pouvez le voir sur l'image ci-dessus, j'ai maintenant 3 images clés qui sont :1. Sourire - Pose de départ2. Tête levée - Pose de transition K1 à K33. Clin d'œil - Pose de finPlus tard, nous ajouterons des images intermédiaires (IB) pour un mouvement plus fluide de notre personnage lors du changement d'images clés !
Esquisser l'image clé
Commençons à esquisser notre image clé principale en suivant ces 2 étapes simples :1. Dessinez la pose de départ de votre personnage sur la première image (image 1)2. Dessinez la pose de transition de votre personnage sur l'image du milieu (image 12)3. Dessinez la pose de fin de votre personnage sur la dernière image (image 24)
Remarque : C'est facultatif, mais vous pouvez renommer chacune de vos images (dans mon cas, c'est K1, K2, K3) pour une chronologie plus organisée. Eh bien, c'est à vous de voir !
Le résultat attendu devrait ressembler à ceci :
Ça a l'air bien, n'est-ce pas ? 😉
Esquisser les intervalles
Maintenant, ajoutons quelques images intermédiaires pour rendre la transition entre les images clés fluide en faisant :1. Créez et dessinez des images intermédiaires pour K1 et K2 au milieu d'elles (image 6) avec la technique d'anticipation pour créer l'élan du personnage avant de faire la pose suivante.2. Créez et dessinez des images intermédiaires pour K2 et K3 au milieu d'elles (image 18) avec la technique d'étirement et d'écrasement (Squash) pour créer l'impact du personnage lorsqu'il fait le clin d'œil après avoir levé la tête.
Le résultat attendu serait comme ceci :
Comme vous pouvez le voir, l'animation brute que nous faisons semble encore trop saccadée pour être considérée comme terminée. Pour résoudre ce problème, nous devons ajouter davantage d'images intermédiaires, entre les images intermédiaires que nous avons déjà créées ! (Vous avez compris ?) 😇
Ajouter des intervalles supplémentaires !
Ces images intermédiaires supplémentaires diffèrent des précédentes, qui utilisaient des techniques d'anticipation et d'écrasement. Pour ces images, nous allons simplement dessiner des lignes qui passent en douceur de l'image clé à l'image intermédiaire originale.
1. Créez et dessinez des images intermédiaires supplémentaires au milieu de chaque image clé et de l'image intermédiaire originale. Étiquetons chaque image intermédiaire supplémentaire par « e ».
Voici le résultat attendu !
Vitesse actuelle
Ralenti
Voici ce qui se passe sur chaque image 👀
Le nombre total d'images que nous avons dessinées est de 9 images, soit :1. 3 images clés / poses principales2. 2 images intermédiaires3. 4 images intermédiaires supplémentairesSi l'animation brute vous semble un peu étrange, c'est parce que nous n'avons pas encore ajusté la synchronisation. L'objectif de cette étape d'esquisse est de bien comprendre comment dessiner les images clés et les images intermédiaires ! Alors, ne vous inquiétez plus car nous allons passer à la partie de la synchronisation !😎Remarque : La partie d'esquisse ne représente pas le meilleur mouvement de votre personnage, nous pourrions vouloir supprimer certaines images inutiles ou ajouter une nouvelle image lorsque nous ajusterons la synchronisation !
Étape 3 : Synchronisation !
Ajuster la synchronisation est la partie la plus difficile quand il s'agit d'animer des choses, même pour moi ! Cela demande beaucoup de pratique pour connaître et ressentir la meilleure synchronisation pour votre animation, car chaque mouvement différent ou chaque pose différente nécessite également une synchronisation différente !Vous ne pouvez pas reproduire cette étape exactement (à moins que vous n'utilisiez mon personnage spécifique comme référence). Au lieu de cela, faites confiance à votre instinct et ajustez la synchronisation en fonction de votre propre vision. Modifiez le mouvement du personnage jusqu'à ce qu'il vous semble juste !Voici quelques conseils que vous pouvez suivre pour vous aider à obtenir la bonne synchronisation pour vos émoticônes :1. Déterminez la vitesse des mouvements de votre personnage.-Si le mouvement va de lent à rapide, placez les images plus rapprochées.-Si le mouvement va de rapide à lent, espacez un peu plus les images.2. Modifiez, supprimez ou même ajoutez une nouvelle image si le mouvement de votre personnage ne vous semble pas correct.Parce que je réalise ce tutoriel en même temps que je fais l'animation et le dessin. J'ai quelques images inutiles qui doivent être supprimées et quelques images à ajouter.Remarque : Avoir trop ou trop peu d'images peut avoir un impact négatif sur la fluidité et la clarté de votre animation.
Voici ma chronologie avec la synchronisation ajustée et la modification de certaines images
Voici une illustration des images que j'ai supprimées et ajoutées
1. Comme vous pouvez le voir sur l'image ci-dessus, j'ai supprimé 3 images inutiles, qui sont :1. e22. e33. e4J'ai supprimé cette image car elle perturbait le flux naturel du mouvement de mon personnage. Il est crucial de revoir attentivement chaque image de votre animation pour identifier et éliminer celles qui pourraient causer des incohérences ou rendre le mouvement peu naturel.2. J'ai ajouté les images K22 et K33 à la chronologie !Mais pourquoi ressemblent-elles aux images K2 et K3 ? C'est parce que j'ai simplement dupliqué ces images pour créer un effet de chevauchement et de rebond en étirant le dessin dupliqué comme ceci :Sélectionnez une image que vous souhaitez étirer > CTRL Maj T pour entrer en mode de transformation libre > Sélectionnez le nœud supérieur et étirez-le légèrement vers le haut
Effet de chevauchement
Sur l'image ci-dessus, vous pouvez voir comment l'image provoque le chevauchement du personnage pendant le mouvement de « tête levée ». Cela exagère le mouvement, le rendant plus dramatique !
Effet de rebond
Après le geste de « tête levée », vous remarquerez qu'à mesure que mon personnage baisse rapidement la tête, un effet de rebond est créé lorsqu'il fait un clin d'œil. Cela ajoute du dynamisme à l'animation !
Et voici le résultat final !
Avant
(Mouvement maladroit 💀)
Après
(Enfin un vrai mouvement 😎)
Étape 4 : Reposez-vous et admirez votre animation brute ✨
Vous avez officiellement terminé l'étape d'esquisse et de synchronisation ! Bien joué ! ✨Bien sûr, ce n'est pas encore fini ! Nous devons le rendre plus joli en ajoutant un trait doux et de jolies couleurs pour en faire des émoticônes appropriées !Pourquoi ne prendriez-vous pas le temps d'admirer et de revoir votre animation d'esquisse terminée ?Comme je l'ai fait juste maintenant 🥹🥹🥹
3. Trait
Maintenant que nous avons atteint le mouvement désiré pendant la phase d'esquisse et de synchronisation, il est temps d'affiner notre animation avec des lignes douces et précises !
Étape 1 : Configuration du calque d'animation
1. Réduisez l'opacité du calque d'animation d'esquisse à 30.2. Créez un nouveau calque d'animation au-dessus du calque d'esquisse et renommez-le en Trait.3. Créez un nouveau dossier de calques sur le calque d'animation de trait.4. Assignez les calques du dossier de calques à l'image d'animation.
Maintenant que vous avez configuré votre calque d'animation pour le trait, passons à l'étape suivante !
Étape 2 : Réalisation du trait
Après avoir configuré le calque d'animation, dessinons notre trait dessus !Voici quelques conseils qui pourraient vous aider pendant le processus :Outils :1. Sélectionnez vos outils de stylo ou de pinceau préférés qui correspondent à vos styles de dessin (ceux que vous utilisez toujours dans vos dessins). Dans mon cas, j'utilise le G-Pen.3. Assurez-vous d'avoir une taille de stylo ou de pinceau constante !4. Activer le stabilisateur sur votre stylo vous aidera considérablement lors du tracé de votre ligne.5. Ajoutez plus de calques de trame à votre dossier de calques, afin de pouvoir dessiner les parties de votre personnage séparément.6. Utilisez les outils de transformation pour modifier la position, la forme de votre dessin, etc.Conseils :1. Utilisez des traits longs et continus pour un aspect plus lisse et plus confiant plutôt que des traits courts et saccadés.2. Faites des pauses, dézoomez périodiquement pour voir l'image globale et assurez-vous que tout est proportionné et cohérent.3. SOYEZ PATIENT, si une ligne ne semble pas correcte, n'hésitez pas à l'annuler et à réessayer. Visez la meilleure qualité, même si cela prend plusieurs essais.4. Nettoyez toutes les lignes qui se chevauchent ou les imperfections une fois que vous avez terminé pour donner un aspect soigné à votre animation.5. N'hésitez pas à personnaliser les poses des personnages et à ajouter des images à l'animation.6. Visualisez la progression de votre trait en activant et désactivant la visibilité du calque d'esquisse.Et c'est tout pour les conseils de trait que je peux vous donner pour l'instantBonne chance et amusez-vous à faire le trait ! 😘
Voici la version au trait de mon personnage !
Étape 3 : Reposez-vous et admirez votre version au trait de votre animation ✨
Vous avez officiellement terminé le trait ! Fantastique ! ✨Excellent travail d'être arrivé aussi loin dans notre voyage d'émoticônes animées ! L'esquisse, l'ajustement de la synchronisation et la perfection du trait peuvent être les aspects les plus difficiles de l'animation. Maintenant que ces étapes sont derrière nous, nous pouvons nous plonger dans la partie amusante : la colorisation ! Donnons vie à ces dessins !🤩Mais avant cela, pourquoi ne prendriez-vous pas le temps d'admirer et de revoir votre animation d'esquisse terminée ?Comme je l'ai fait juste maintenant (encore)🥹🥹🥹
4. Colorisation et Rendu
La façon dont nous colorons et rendons nos dessins en animation dépend de la complexité du dessin lui-même. Cependant, puisque nous animons des émoticônes qui ont un design simple et seulement quelques images à colorier, cette partie devrait être la plus agréable et la plus facile !
Étape 1 : Configuration du calque d'animation
1. Créez un nouveau calque d'animation sous le calque de trait et renommez-le en Couleur.2. Créez un nouveau dossier de calques sur le calque d'animation de couleur.3. Assignez les calques du dossier de calques à l'image d'animation.
Maintenant que vous avez configuré votre calque d'animation pour la couleur, passons à l'étape suivante !
Étape 2 : Couleur de base
Dans cette partie de l'étape de colorisation, nous utiliserons l'Outil de remplissage pour la couleur de base de notre animation ! Il y a 2 façons de faire la couleur de base :
1ère façon : Utiliser l'outil de remplissage1. Assurez-vous d'avoir sélectionné votre calque de couleur et votre image.2. Sélectionnez l'Outil de remplissage dans la barre d'outils.3. Dans les paramètres de l'outil de remplissage, choisissez « Référencer d'autres calques ».Cela vous permet d'utiliser l'outil de remplissage en fonction des limites d'un autre calque actif.4. Sélectionnez votre couleur préférée.5. Utilisez l'outil de remplissage pour colorer votre toile.6. Terminé !
2ème façon : Utiliser l'outil Lasso1. Assurez-vous d'avoir sélectionné votre calque de couleur et votre image.2. Sélectionnez Zone de sélection dans la barre d'outils.3. Choisissez Lasso.4. Sélectionnez votre couleur préférée.5. Utilisez l'outil Lasso pour dessiner et sélectionner la zone spécifique de votre toile que vous souhaitez remplir de couleur.6. Une fenêtre contextuelle apparaîtra, puis sélectionnez l'icône du pot de peinture (ou l'icône de remplissage)
Et c'est ainsi que l'on met la couleur de base sur votre animation ! Tout ce que vous avez à faire maintenant est de répéter le même processus pour chaque image que vous créez !
Voici mon personnage avec la couleur de base !
Nous pouvons voir notre personnage clairement une fois cette étape terminée !
Passons à la suivante !
Étape 3 : Rendu
L'étape de rendu comprend l'ajout de couleurs secondaires, d'ombres et de reflets. Voici les choses que vous devez faire :
Ligne d'ombre
L'esquisse des lignes d'ombre pour chaque image clé assure un ombrage cohérent et précis pendant le processus de rendu. Cela signifie que ce sera la bordure lorsque vous appliquerez la couleur à votre calque de rendu. Voici comment faire :1. Créez un nouveau calque d'animation au-dessus du trait de votre personnage et nommez-le Ligne d'ombre.2. Dessinez la ligne d'ombre de votre personnage sur chaque image (utilisez une couleur contrastée pour une meilleure visualisation).Remarque : Vous pouvez également appliquer cela à d'autres éléments, comme les reflets de votre personnage.
Voici cette ligne d'ombre lorsqu'elle est implémentée sur mon personnage ✨
Parce que mon personnage est une limace, je dois rendre la ligne d'ombre assez différente des autres designs de personnages ! (Comme si l'ombre était à l'intérieur de son corps)
Rendu
Maintenant, nous pouvons commencer notre processus de rendu, en suivant ces étapes :1. Créez un nouveau calque d'animation sous le calque de la ligne d'ombre et nommez-le Rendu.2. Ajoutez un nouveau dossier de calques et assignez-le à l'image du calque de rendu.
3. Sélectionnez le calque de rendu, puis colorez la zone d'ombre avec l'outil de remplissage.(Assurez-vous que l'option de l'outil de remplissage est « Référencer d'autres calques »).4. Faites-le pour chaque image.5. Si vous avez terminé d'utiliser la ligne d'ombre, vous pouvez désactiver le bouton de visibilité ou la supprimer si nécessaire.
Voilà ! Voici le résultat final de notre animation !
Nous pouvons dire que c'est terminé maintenant ! Mais comme je l'ai mentionné plus tôt sur la première page de l'animation image par image, nous allons ajouter quelques touches finales ! 😎
5. Touche finale
La touche finale peut varier ; vous pouvez améliorer votre animation en ajoutant des effets spéciaux, un arrière-plan ou tout autre élément que vous pensez qui rehaussera votre pièce animée !
Voici ma touche finale de mes émoticônes animées avec un effet scintillant ! ✨
NIVEAU MAX ATTEINT ! FÉLICITATIONS ! ✨Vous avez maîtrisé l'art de l'animation image par image pour créer des émoticônes animées ! Avec cette réalisation à votre actif, vous êtes maintenant prêt à vous lancer dans de nouveaux voyages créatifs et à affiner davantage vos compétences. Le monde de l'animation attend avec impatience votre prochain chef-d'œuvre ! 🚀
Exporter vos émoticônes animées
Après avoir voyagé avec moi à travers les différentes étapes de création d'émoticônes animées, vous avez acquis plus que de simples compétences. En guise de souvenir, prenez les émoticônes animées que nous avons créées ensemble ! Après tout, c'est un témoignage de votre travail acharné et de votre dévouement. Profitez-en ! 🌟
Comment réclamer votre émoticône animée :
1. Ajustez le cadre de début et de fin de votre animation préférée.
2. Ouvrez Fichier > Exporter > Animation > GIF animé…3. Sélectionnez le dossier de destination où vous souhaitez stocker vos émoticônes animées.
Une fenêtre contextuelle apparaîtra, vous permettant de modifier les paramètres d'exportation :1. Largeur et hauteur, la taille en pixels de vos émoticônes animées.2. Plage d'exportation, la durée d'image que vous souhaitez exporter.3. Fréquence d'images, réglée au maximum (24FPS).4. L'exportation avec tramage ou fond transparent est à votre discrétion.5. OK
Hourra ! Vous avez réclamé vos émoticônes animées ! ✨
Épingle de maîtrise de l'animation
Maintenant que vous avez votre souvenir pour avoir fait le dur travail d'animation avec moi, pourquoi n'iriez-vous pas chercher certains de vos titres ici ? Lequel obtenez-vous ? 👀
Clôture
Mon parcours de partage de mes expériences avec les émoticônes animées est arrivé à son terme. Ce fut un plaisir de vous guider à travers ce processus, et j'espère sincèrement que vous l'avez trouvé instructif. 🥺💖Alors que vous vous lancez dans vos propres aventures d'animation, n'oubliez jamais de rester curieux, de pratiquer fréquemment et, surtout, d'apprécier le processus ! Je vous souhaite la meilleure des chances dans toutes vos entreprises créatives.
À la prochaine ! ✨✨✨
Les utilisateurs qui ont aimé cette publication
Commentaire