Share
Ce que vous allez créerVous voudrez peut-être créer un jeu vidéo rétro ou vous aider à en créer des graphiques. Ensuite, vous aurez besoin d'un sprite: un personnage de pixel art, animé et dans différentes positions.
Ensuite, consultez cette leçon, car nous allons faire un joli petit lapin et lui donner une animation en boucle.
Si vous trouvez que le travail au pixel est trop difficile ou fastidieux, n'hésitez pas à acheter des sprites tout prêts, ainsi que tout autre élément de jeu sur Envato Market..
Avant l'animation, nous allons faire une vue statique du personnage, et avant cela, nous devrons déterminer à quoi il ressemblera..
Ce n'est pas une étape nécessaire si vous voulez suivre ce tutoriel à la lettre, mais cela faisait partie de mon processus: dessiner le personnage.
Je n'ai esquissé que la tête. J'ai essayé quelques options différentes et j'ai choisi ce style.
Pour transformer le lapin en pixels, j'ai commencé à dessiner les yeux directement dans Adobe Photoshop. L'esquisse n'a pas été beaucoup utilisée autrement que pour définir le style.
Si vous n’avez jamais fait de pixel art, vous voudrez créer un Nouveau fichier dans Photoshop et ne pas le rendre très grand, il peut être 400 px par 400 px. Vous voudrez travailler avec beaucoup de zoom (comme 700%) et utiliser le Outil Crayon dessiner un pixel à la fois. Je recommande de garder une deuxième fenêtre du même fichier ouverte à un zoom de 100% ou 200% afin que vous puissiez passer d'une fenêtre à l'autre et que vous puissiez vérifier la progression sans le zoom..
Je ne suivrai pas une taille prédéfinie de sprite, mais je ferai en sorte que le personnage soit aussi petit que possible tout en conservant ses caractéristiques principales. Voilà pourquoi les yeux sont un bon point de départ.
Les yeux seront simplement deux lignes, l'une à côté de l'autre. Chaque oeil est 3 px grand par 1 px de couleur presque noire.
Avec les yeux, vous pouvez procéder avec le nez du lapin et quelques autres détails. C'est bon si les lignes sont simples pour l'instant.
Maintenant, nous pouvons adoucir certaines de ces lignes. De plus, j'ajoute déjà quelques dents devant la bouche, car les lapins ont de grandes dents à l'avant.
Donnons un sourire à la bouche.
Et ajoutons quelques oreilles. En ce moment, ils sont dirigés vers le haut, et cela pourrait marcher aussi pour ce personnage, mais nous allons les plier un peu.
Les oreilles sont aussi fines que possible, avec juste 1px pour l'intérieur et les pixels de contour sur les côtés.
Voici une oreille qui se replie et s'abaisse.
Et l'oreille arrière se plie de la même manière.
Maintenant, pour finir la tête, nous allons donner au lapin une joue relativement grosse..
Et maintenant, nous pouvons dessiner un corps sous la tête. Nous allons rendre notre lapin anthropomorphe, ou avec une forme humaine. Le torse sera fondamentalement comme une forme de goutte.
Nous allons donner au lapin de courtes jambes et de grands pieds. Nous pouvons commencer avec une seule jambe.
La jambe arrière est identique à celle de l’avant, mais légèrement déplacée sur le côté, sinon elle serait complètement bloquée par la jambe avant..
Finalement, j'ai déplacé les jambes d'un pixel vers la gauche parce que je pensais qu'elles semblaient un peu excentrées et j'ai connecté la jambe avant au ventre en supprimant le pixel qui les séparait..
Nous n'aurons qu'un bras visible en position debout. Le bras aura une forme de goutte d'eau.
Il va bloquer une partie du torse.
Nettoyons en enlevant les lignes du torse derrière le bras.
Et maintenant, les contours de base du personnage de lapin sont complets.
Maintenant, nous transformons ces contours en un sprite statique fini.
Choisis une couleur.
Quelle couleur voudriez-vous pour votre lapin? Je suis allé chercher une sorte de couleur beige et je l'ai appliqué, pour le moment, à tous les domaines sauf le nez. Vous pouvez remplir les zones avec le Outil de seau.
Donnons au lapin un joli ventre blanc. Aussi un pixel blanc pour les dents de devant. Le nez aura une petite touche de rose, mais surtout blanc.
Nous donnons de l'ombrage au lapin: une version plus foncée de la couleur principale de la fourrure appliquée aux zones moins éclairées. Cet ombrage peut aider à donner de la texture sur les joues si on l'applique avec un motif.
Nous garderons les membres arrière et les oreilles plus sombres que les membres antérieurs. Ainsi, la jambe arrière ne reçoit que la nouvelle nuance plus foncée et l'oreille arrière reçoit principalement cette nuance, sauf sur le haut tippy.
Étendre l'ombrage au ventre blanc. J'ai ajouté une couleur gris clair avec une teinte légèrement bleue.
Certaines fonctionnalités auront l'air mieux avec moins de contraste, alors j'ai remplacé une partie de la couleur presque noire par un brun foncé sur certains pixels intérieurs, comme la bouche et le cou..
J'ai aussi ajouté plus de détails avec ce brun foncé pour accentuer les joues gonflées.
Et maintenant le personnage, debout, est terminé.
Passons maintenant au lapin. nous allons faire une boucle.
Cette animation peut être réalisée avec n'importe quel nombre d'images, mais comme il s'agit d'un petit caractère, six images suffiront..
Éloignons les membres pour le moment.
Le torse et la tête du lapin ne changeront pas beaucoup en cours d'exécution. Nous allons donc le préparer et le maintenir assez constant pendant que nous travaillons sur toutes les images..
J'ai laissé une ligne de fond comme référence pour la hauteur des jambes ou la position au sol.
Penchez le torse en avant, en sélectionnant simplement la tête et une zone située sous le cou avec le Outil de chapiteau rectangulaire puis en poussant du coude 1 px à droite (ce qui peut être fait avec la flèche droite tandis que le Outil de déplacement c'est actif).
Finalement j'ai avancé la tête 2 px.
Nous n'avons pas correctement fait pivoter le torse pour l'instant, ce qui signifie que nous l'avons un peu allongé, le rendant légèrement plus long. Donc, pour le réajuster, rétrécissons le torse verticalement 1 px et nettoyer les lignes.
Déplaçons aussi le torse 1 px plus près de la ligne du bas, car les jambes seront fléchies pendant la majeure partie de l'animation en cours d'exécution; elles ne doivent donc pas être à la même hauteur.
Pour faire les jambes, il suffit de travailler sur un mouvement de jambe, l’autre bougeant de la même manière..
Le mouvement devra donc ressembler à un pendule: la jambe est pliée presque tout le mouvement, sauf quand elle s’avance (ce qui est la première image ici).
Ce sont donc les six images du mouvement des jambes (n'hésitez pas à vérifier plus de références d'images en cours d'exécution). Notez la position du pied lorsque vous faites cela. Ils sont faits dans une couleur vive pour le contraste.
Nous travaillerons sur les six cadres côte à côte.
Voici les cadres de jambe placés sur le lapin. Faire cela dans un Nouvelle Couche.
Notez que la jambe n'est pas fixée à un point de la taille; quand la jambe remonte, elle sort de l'arrière du lapin et quand elle avance, elle sort de l'avant du lapin, dans une certaine mesure.
Voici un moyen rapide de commencer à transformer nos lignes de guidage dans les dernières étapes. Tout d’abord, remplacez la couleur par la couleur de la fourrure (vous pouvez le faire avec le Outil de seau cochée), et au lieu de tracer les contours autour des jambes, sélectionnez la zone vide autour d’elles avec le Baguette magique et contracter la sélection (Sélectionnez> Modifier> Contrat… ) par 1 px. Puis inverser la sélection (Sélectionnez> Inverse) puis avec le Outil de seau (cochée) cocher la couleur du contour.
Les jambes ne sont pas encore terminées, mais ajoutons maintenant un petit saut au lapin car cela affectera la finition des jambes..
Nous allons ajouter le skip car pendant la course, nous ne pouvons pas nous attendre à ce que le personnage reste toujours au même niveau. Donc, nous allons cogner le lapin 1 px sur la troisième image, lorsque la jambe arrière est la plus étendue, pousse le lapin vers le haut, et nous devons également ajouter le saut sur la sixième image, lorsque la jambe opposée pousse le lapin.
Les cadres avec le skip sont marqués ici avec des lignes de fond violettes. Les autres lignes du bas ont été transformées en lignes noires à 20% pouvant servir d’ombres. Sur un jeu de plate-forme, cette ombre n'est peut-être pas nécessaire, mais pour le moment, l'animation sera meilleure..
Pour finir la jambe, il faut chubbier le pied, connecter la jambe au corps et faire un peu d'ombrage.
En outre, toutes les lignes du bas sont maintenant transformées en ombres.
Maintenant que cette jambe est finie, il suffit de la copier.
Après l'avoir collé, nous devrions déplacer la nouvelle jambe de quelques pixels vers la droite, tout comme les jambes étaient légèrement écartées en position debout..
Pour le moment, cela semble un peu drôle parce que les deux jambes bougent de la même façon, ce qui est réellement utilisable pour ce personnage, car les lapins ont tendance à sauter. Mais nous allons changer cela pour leur donner l'impression que le lapin court.
Pour faire courir les jambes, elles doivent alterner, de sorte que lorsqu'une jambe est étendue à l'avant, la jambe opposée est étendue à l'arrière.
Parce que nous avons six cadres, cela signifie que l’une des jambes va déplacer ses cadres de trois positions d’un côté (puis prend les trois cadres de jambes désincarnés et les déplace vers les cadres de lapin à une jambe).
La nouvelle couche de jambes devrait être derrière la couche de corps de lapin.
Pour terminer la jambe arrière, vous devez simplement l’ombrer plus sombre, si vous voulez que les membres arrière soient plus sombres que l’avant, comme nous l’avions fait en position debout..
Voici comment se présentent les montures. Ne vous inquiétez pas pour faire cette animation pour le moment. Nous finirons les graphiques et animerons la boucle en cours à la fin.
Maintenant il est temps d'ajouter les bras.
Ils bougeront à peu près comme ça. Ils sont courbés tout au long du cycle d'exécution, ne faisant que reculer légèrement dans la première image. Cependant, vous pouvez essayer vos propres variantes à ce mouvement pour obtenir différents styles de fonctionnement.
Placez les bras sur les cadres du corps dans un Nouvelle Couche, et leur donner la bonne couleur et les contours, comme nous l'avons fait avec les jambes.
Et puis donner du volume aux bras.
Et enfin les ombrer pour donner plus de volume.
Puis copiez le bras. Nouvelle Couche, derrière le corps.
Et enfin, ombrez les nouveaux bras et déplacez-les de manière à ce qu'ils se positionnent en face de ceux d'origine..
N'oubliez pas que les bras bougent à l'opposé des jambes, de sorte que lorsque la jambe gauche est à l'avant, le bras gauche doit être à l'arrière.
Voilà à quoi ressemblent les bras.
Ajoutons un peu de mouvement à la tête, car cela peut être clairement statique pour l'instant.
Nous ferons en sorte que les oreilles répondent à la requête du lapin. Ici, sur les cadres où le lapin se soulève légèrement, j'ai fait en sorte que les oreilles pointent vers le bas, comme si l'inertie les retenait pendant que le lapin sautait.
Après les sauts sur les cadres, j'ai fait les oreilles moins pliées et plus ouvertes, pointant vers l'avant.
Et finalement, j'ai aussi fait bouger la fourrure de la joue. Comme les oreilles, un peu plus bas quand le lapin saute et un peu plus haut après le saut.
Et voici à quoi ça ressemble.
Le dernier travail sur les montures que nous allons faire sera sur le torse, d’abord en animant la tache blanche sur le ventre. La poitrine devrait tourner légèrement pendant que le lapin court, ainsi la tache blanche devrait répondre à ce mouvement.
Ainsi, lorsque le bras avant pointe vers l'arrière, la tache blanche doit être plus visible et moins visible lorsque le bras avant est dirigé vers l'avant..
Nous n'avions pas besoin de tirer la queue quand le lapin était debout, mais maintenant qu'il est en train de courir, il semble que la queue devrait apparaître.
Donc, je mets d’abord un carré rouge à l’endroit où je pense que la queue devrait aller. Il va dans un Nouvelle Couche, et pour l'instant, il peut être au-dessus des autres couches.
Maintenant, donnez de la couleur, des ombres et des contours à la queue.
Une touche supplémentaire pour la queue: elle se cache légèrement derrière le corps du lapin car la poitrine du lapin est plus visible.
Pour finir la queue, déplacez le calque vers l'arrière et terminez l'ombrage / nettoyage souhaité.
Et le travail sur les cadres est terminé. Voici à quoi ça ressemble en mouvement - le travail de détail supplémentaire porte ses fruits, n'est-ce pas??
Transformons ces cadres en boucle.
Nous avons six cadres qui vont s’enrouler de manière transparente dans un cycle en cours. Nous devons juste les mettre en mouvement.
Copier les cadres dans un Nouveau fichier.
Vous devrez copier une image à la fois, dans le bon ordre (de gauche à droite). Pour copier tous les calques en même temps, vous devez copier les éléments fusionnés (Édition> Copier fusionné), et n'oubliez pas de ne pas avoir de couleur de fond lors de la copie.
Vous voudrez que les nouvelles dimensions du fichier ne soient que légèrement plus grandes que le lapin.
Lorsque vous les collez, ils doivent s'aligner correctement. la ligne de fond reste la même sur toutes les couches et le nez aussi, sauf pour les deux cadres dans lesquels le lapin saute 1 px.
Vous devriez vous retrouver avec un fichier avec six couches au total; un par image. Pas de fond.
Pour créer une animation dans Photoshop, vous devez ouvrir la fenêtre de la timeline (Fenêtre> Chronologie). Il a un Créer une animation de cadre bouton sauf s'il est défini sur Créer un montage vidéo, auquel cas vous le changez en animation d'image à l'aide du bouton déroulant.
appuyez sur la Créer une animation de cadre bouton, puis appuyez sur le bouton des options de la fenêtre de montage, dans le coin supérieur droit…
… Et sélectionnez Faire des cadres à partir de couches.
Enfin, sélectionnez toutes les images et ajustez leur délai si vous le souhaitez (j’ai choisi un délai de 0,1 seconde) et réglez les options de bouclage sur Pour toujours.
Et vous avez votre boucle de lapin en cours d'exécution!
Vous pouvez maintenant utiliser ce sprite dans des jeux ou exporter le fichier au format GIF..
Félicitations, le lapin court maintenant! Il est prêt à sauver le lapin princesse ou à causer du mal ou quoi que ce soit que vous puissiez lui trouver.
Cela devrait aider à vous donner une idée de ce qu'il faut pour concevoir et animer des sprites. Vous pouvez vous amuser à créer vos propres objets, ou vous mettre au travail et appliquer ces graphiques à un jeu.!
Et si cela était trop fastidieux pour vous, souvenez-vous que vous pouvez trouver des éléments de jeu finis sur Envato Market.!
Accentsconagua