Comment créer un sprite Pixel Art animé dans Adobe Photoshop

Ce que vous allez créer

Dans ce tutoriel, je vais vous montrer comment créer et animer une image-objet pixel-art à l'aide de quelques outils simples dans Adobe Photoshop. Dans le processus, je couvrirai toutes les règles de base que vous pourrez appliquer à vos futures illustrations au pixel art.. 

Si vous souhaitez trouver un moyen rapide de rechercher des images-objets ou d'autres éléments de jeu pour vos projets, consultez la collection d'images-objets sur Envato Market. Il y a beaucoup de pixel art disponible aussi.

Sprites disponibles sur le marché Envato

Vous pouvez également trouver des concepteurs sur Envato Studio pour concevoir des sprites pour vous, tels que Hendricot, qui concevra tout type de personnage de pixel art pour vous pour seulement 45 $.

1. Préparer la toile et les outils

Étape 1

Sélectionnez le Outil Crayon du Barre d'outils, ce sera votre principal instrument pour ce tutoriel. Sélectionner un Rond dur brosse dans les paramètres de pinceau et appliquez les paramètres indiqués ci-dessous. Votre but est de rendre la ligne absolument nette.

Étape 2

Installer Mode Crayon pour le Outil pour effacer et utilisez les mêmes paramètres de pinceau que ci-dessous.

Étape 3

Allume le Pixel Grid (Afficher> Afficher> Pixel Grid). Si vous ne voyez pas cet élément dans le menu, allez à Préférences> Performance et allumer l'accélération graphique.

Remarque: la grille ne sera visible que sur un canevas récemment créé avec un niveau de zoom. 600% et ci-dessus.

Étape 4

Aller à Préférences> Général (Control-K) et mis en place Interpolation d'image à Voisin le plus proche. Cela garantira que les bords des objets avec lesquels vous travaillez restent toujours nets.

Aller à Préférences> Unités et règles et choisir Les pixels dans le menu déroulant près de Règles pour voir toutes les mesures en pixels.

2. Créer le Sprite

Étape 1

Maintenant que tout est configuré, nous pouvons commencer à créer le sprite. 

Faites un croquis d'un personnage avec une silhouette distincte et essayez de ne pas le surcharger de détails. Il n'est pas important de peindre les couleurs, le contour devrait être suffisant, à condition que vous compreniez à quoi devrait ressembler votre personnage. J'ai préparé un croquis d'un Space Trooper pour ce tutoriel.

Étape 2

presse Contrôle-t Ou utiliser Édition> Transformation libre pour réduire votre personnage à 60px En hauteur. 

La taille de l'objet est indiquée dans le Info panneau. Remarquez le Interpolation réglage, il devrait être le même que nous avons mis en Étape 4. Dans ce cas, ce n’est pas très important, car nous ne faisons que transformer une esquisse en pixel art, mais soyez attentif à cette fonctionnalité à l’avenir lorsque vous travaillerez avec des objets pixelisés..

Étape 3

Zoomer sur l'image par 300-400% pour le rendre plus facile à rendre. Réduisez l'opacité de votre croquis. 

Créer un nouveau calque (Calque> Nouveau> Calque) et dessinez un contour de votre personnage avec le Outil Crayon.

Si votre personnage est symétrique, comme le mien, créez-en une moitié, dupliquez-la et retournez-la horizontalement (Édition> Transformer> Retourner horizontalement).

Règle du rythme: Essayez de scinder des formes complexes en éléments simples. Lorsque les pixels de la ligne forment un "rythme" tel que 1-2-3 et 1-1-2-2-3-3, le contour est beaucoup plus esthétique pour l'œil humain qu'une ligne dessinée au hasard. Cependant, cette règle peut être enfreinte si la forme l'exige.

Deux lignes rythmiques et une ligne tirée au hasard.

Étape 4

Lorsque le contour est prêt, choisissez les couleurs principales et peignez de grandes formes. Faites-le sur un calque séparé sous celui avec le contour.

Étape 5

Lisser la face interne du contour en ajoutant des nuances de couleur.

Continuez à ajouter plus de nuances. Comme vous pouvez le constater, j'ai corrigé des formes et des détails en cours de route.

Étape 6

Créer un nouveau calque pour ajouter la surbrillance. 

Choisir Recouvrir dans le menu déroulant sur le Couche panneau. Appliquez une couleur claire sur les zones que vous souhaitez mettre en évidence. Lisser la forme de la zone en surbrillance en choisissant Filtre> Flou> Flou.

J'ai retourné la moitié peinte horizontalement, ajouté des touches de couleur finale ici et là et fusionné les calques.

Étape 7

Le personnage manque maintenant de contraste. Utilisation Niveaux (Image> Réglages> Niveaux) d’abord, puis changez le ton ou les demi-teintes avec Balance de couleur (Image> Réglages> Balance des couleurs) pour faire des versions plus chaudes et plus froides.

J'ai décidé d'aller avec la troisième version. Passons maintenant au processus d'animation.

Caractère final avec zoom de 400%.

3. Animez votre sprite

Étape 1

Créer une copie du calque (Calque> Nouveau> Calque via copie) et déplacez-le de 1 pixel vers le haut et de 2 pixels en sélectionnant Outil de déplacement (V) et en utilisant les touches fléchées. C'est la phase clé pour l'animation du personnage en cours d'exécution.

Changer le calque d'origine Opacité à 50% pour voir l'image précédente de l'animation. Cela s'appelle «pelure d'oignon».

Étape 2

Maintenant, pliez les jambes et les bras du personnage comme s'il courait.

  • Sélectionnez le bras gauche en utilisant Lasso
  • En utilisant Outil de transformation gratuit (Édition> Transformation libre) et tenue Contrôle déplacez les marqueurs de conteneur pour mener le bras derrière le dos
  • Sélectionnez la tige de la jambe droite et déplacez-la comme sur la première image - nous avons besoin de cette jambe tendue.
  • Sélectionnez la jambe gauche et déplacez-la - cette jambe se penche
  • En utilisant Crayon et Outils de gomme, redessine toutes les coudes du bras droit.

Étape 3

Maintenant, vous devrez redessiner la nouvelle position des jambes et des bras, comme je l’ai expliqué dans Section 2 de ce tutoriel. En effet, la transformation des jambes et des bras déformera les pixels et la forme ne sera plus nette..

Étape 4

Faites la copie de la deuxième couche et retournez-la horizontalement. Et maintenant, vous avez une position de repos et deux phases de fonctionnement. Sélectionnez chaque couche et restaurez sa Opacité à 100%.

Étape 5

Aller à Fenêtre> Chronologie montrer Chronologie panneau et appuyez sur Créer une animation de cadre.

dans le Chronologie panneau, procédez comme suit:

  1. Choisir Retard du cadre temps 0,15 seconde
  2. Cliquer sur Dupliquer les cadres sélectionnés bouton pour ajouter 3 copies supplémentaires
  3. Changer les options de boucle en Pour toujours

Étape 6

Pour choisir le calque approprié pour chaque image d'animation, cliquez sur le bouton Œil icône près du nom de la couche dans le Couche panneau.

  • 1ère image: choisissez la position de ralenti
  • 2ème image: choisissez la deuxième couche
  • 3ème image: choisissez à nouveau la position de repos
  • 4ème image: choisissez la troisième couche

presse Espace bouton pour jouer l'animation.

Animation finale avec zoom 100%.

Étape 7

Maintenant, enregistrez votre résultat. Aller à Fichier> Enregistrer pour le Web et sélectionnez GIF format. Ajuster la taille de l'image à 300% pour une meilleure présentation et presse sauvegarder.

Toutes nos félicitations! Vous avez terminé.

Dans ce tutoriel, je vous ai montré comment dessiner et animer un personnage de pixel art dans Photoshop. Au cours de ce processus, vous avez appris à configurer votre canevas et vos outils, à dessiner votre personnage à l'aide de l'outil Crayon, ainsi qu'à animer votre personnage à l'aide de la fonction Timeline de Photoshop. J'espère que vous avez tiré des leçons de ce didacticiel et que vous pourrez utiliser ces techniques pour créer votre propre pixel art..