Introduction au Pixel Art pour les jeux

Le Pixel Art est vraiment populaire dans les jeux de nos jours, et ce, pour d’excellentes raisons :

  • Apparence : le Pixel Art a l’air génial ! Il y a quelque chose à dire sur le fait de tirer le meilleur parti de chaque pixel ;
  • Nostalgie. Le pixel art fait ressurgir un grand sentiment de nostalgie pour les joueurs qui ont grandi en jouant à la Nintendo, à la Super Nintendo ou à la Genesis ;
  • Facilité d’apprentissage. Le pixel art est l’un des types d’art numérique les plus faciles à apprendre, surtout si vous êtes plus du type programmeur qu’artiste.

Alors, vous voulez vous essayer au pixel art facile ? Suivez-moi et je vous montrerai comment faire un personnage de jeu simple, mais cool que vous pouvez utiliser ou modifier dans vos propres jeux ! Pour suivre ce tutoriel, vous aurez besoin d’Adobe Photoshop. Si vous n’avez pas Photoshop, vous pouvez télécharger une version d’essai gratuite sur le site d’Adobe. Lisez la suite pour commencer à pousser des pixels !

 

Démarrer 

 

Avant de commencer à créer votre premier actif en pixel art, vous devez savoir que le pixel art n’est pas facilement redimensionnable. Si vous essayez de le réduire, cela ne ressemblera plus à grand-chose. Si vous essayez de le mettre à l’échelle, il peut avoir l’air correct tant que vous utilisez un multiple de deux, mais il sera bien sûr plus pixellisé. Pour éviter ce problème, vous devriez d’abord réfléchir à la taille exacte que vous voulez donner à votre :

  • personnage ;
  • ennemi ;
  • élément de jeu ;

avant de commencer. Cela devrait être basé sur la taille de l’écran de l’appareil que vous ciblez et sur la taille que vous voulez donner aux « pixels ». Par exemple, disons que vous voulez que le jeu ait une taille double sur un iPhone 3GS (« Je veux vraiment donner un aspect rétro et pixelisé à mon jeu ! »), dont la résolution est de 480×320 pixels. Alors votre résolution de travail sera la moitié de cette taille, soit 240×160 pixels. Ouvrez un nouveau canevas sur Photoshop (Fichier > ; Nouveau…) et définissez cette même taille pour pouvoir la regarder et choisir la taille de votre personnage.

 

Faire votre premier personnage

 

Le pixel art est bien connu, sous sa meilleure forme, pour ses graphismes nets et faciles à lire. Vous pouvez en effet :

  • identifier le visage du personnage ;
  • ses yeux ;
  • ses cheveux ;
  • les parties de son corps ;

avec seulement quelques pixels. Cependant, le développer est beaucoup plus compliquée ! Plus votre personnage est petit, plus il est difficile de tout faire tenir. Pour rendre les choses plus pratiques, choisissez ce qui sera la plus petite chose lisible sur le personnage. Je choisis toujours les yeux, car ils sont magiquement l’un des meilleurs moyens de donner vie à un personnage. 

 

L’outil crayon

Dans Photoshop, choisissez l’outil Crayon. Si vous ne le trouvez pas, appuyez simplement sur l’outil Pinceau et maintenez-le enfoncé, puis faites défiler jusqu’à l’outil Crayon (ce devrait être le deuxième). Vous aurez juste besoin de le redimensionner à la taille de pinceau 1 (vous pouvez cliquer sur la barre d’options de l’outil et changer sa taille ou simplement maintenir la touche ‘[‘]).

 

L’outil efface 

Vous aurez éventuellement besoin de l’Outil Efface aussi, alors cliquez dessus ou alors appuyez sur ‘E’ et changez les paramètres pour « Mode : Crayon » pour qu’il ne fasse pas d’anti-alias comme un pinceau. Commencez alors à pixelliser ! Dessinez deux sourcils et un œil sur l’image.

 

C’est parti …

Vous pourriez déjà commencer par le trait (en dessinant comme vous le feriez normalement, en faisant les lignes et en façonnant le personnage), mais une façon plus pratique de le faire est d’abord de faire sa silhouette. Vous n’avez pas besoin d’être parfait à ce stade, essayez simplement de prendre les tailles des choses :

  • tête ;
  • corps ;
  • bras ;
  • jambes ;

et la pose initiale du personnage. Une fois que vous avez terminé la silhouette, il est temps de commencer le linéaire. Maintenant, vous devez faire plus attention au placement des pixels, donc ne vous embêtez pas à faire les vêtements, les armures ou tout autre détail pour le moment. Si vous en avez besoin, vous pouvez ajouter un nouveau calque pour ne jamais perdre votre silhouette originale. 

 

L’outil ligne

Si vous estimez que l’outil crayon est un peu trop lent pour dessiner, vous pouvez toujours utiliser l’outil Ligne pour rendre les choses rapides. Pensez simplement à fixer certains pixels, car il n’est pas aussi exact que le crayon. Vous devrez cependant le configurer, comme indiqué ci-dessous :

  • choisissez l’outil Ligne en appuyant et en maintenant l’outil Rectangle, et faites défiler vers le bas jusqu’à Ligne ;
  • allez dans la barre de paramètres de l’outil et sélectionnez la troisième icône ( » Remplir les pixels « ) ;
  • changez le Poids à 1 (si ce n’est pas déjà le cas) ;
  • décochez  » Anti-alias  » (votre ennemi juré !). 

 

Application de la couleur et de l’ombrage

 

Maintenant, vous êtes prêt à commencer à le colorier. Ne vous embêtez pas à choisir les bonnes couleurs maintenant, il est très facile de les changer plus tard, assurez-vous simplement que tout a sa propre couleur. Pour l’instant, vous pouvez utiliser les couleurs par défaut de l’onglet Swatch (Window > ; Swatches). Allez-y et colorez votre héros, mais n’hésitez pas à être créatif et à utiliser vos propres couleurs ! Un bon contraste de couleurs permet une meilleure lisibilité de votre actif ! N’oubliez jamais : économisez autant de pixels que possible !

 

L’outil saint bucket tool

Ne perdez pas de temps en plaçant soigneusement chaque pixel de couleur. Pour accélérer les choses, tracez les lignes pour chaque couleur et utilisez l’outil Paint bucket tool pour remplir les espaces. Vous devrez également configurer cet outil :

  • sélectionnez-le dans la barre d’outils (ou appuyez simplement sur ‘G’) ;
  • modifiez la Tolérance à 0 ;
  • décochez l’anti-alias.

Petite astuce : si vous devez un jour utiliser l’outil Baguette magique (un outil très utile qui sélectionne tous les pixels de la même couleur), appliquez les mêmes paramètres que le seau de peinture, pas de tolérance ni d’anti-alias.