Vanadis aime créer des choses et a de l’expérience en tant qu’artiste et animateur dans les industries du jeu et de la publicité.
Le pixel art est une forme d’art basée sur le style de pixel qui a été développé pour les premiers jeux vidéo. Les premières consoles de jeu présentaient des limitations de sortie (par exemple, une faible résolution et un affichage couleur), et ces limitations ont conduit à une nouvelle technique de création d’images. Aujourd’hui, ce look rétro est incroyablement populaire et de nombreux artistes le reproduisent. Malgré les progrès technologiques qui rendent ces anciennes techniques redondantes, les jeux sont encore actuellement publiés en utilisant le style pixel art.
Cet article décrit comment créer votre propre pixel sprite, avec un guide étape par étape et quelques trucs et astuces utiles.
Première étape : planifier votre image
La première étape consiste à décider quel type de personnage vous voulez créer et à quel point vous voulez qu’il soit stylé ou réaliste. Il peut s’agir d’un dessin animé très simple ou d’un personnage réaliste plus complexe. Par souci d’exemple, j’ai choisi quelque chose au milieu.
Ne vous souciez pas encore des pixels, ils viennent plus tard. Dessinez simplement votre personnage comme vous le feriez normalement.
J’ai commencé par un simple croquis, puis j’ai travaillé à partir de là en ajoutant de la couleur et en nettoyant les lignes dans Adobe Photoshop. J’ai commencé à travailler dans une taille de fichier raisonnablement grande (environ 1000 pixels de haut), mais travaillez simplement à l’échelle que vous trouvez la plus confortable – plus grande que la taille finale de votre sprite est la meilleure.
Vous n’avez pas besoin d’utiliser Photoshop pour créer votre sprite pixel. Il existe un certain nombre de programmes gratuits disponibles avec les outils nécessaires, tels que Peinture MS et Coup de vent graphique. Si vous créez votre propre image à partir de zéro plutôt que de travailler sur une image existante, Photoshop est la solution.
Lorsque je crée une image à partir de zéro, je trouve très utile de travailler sur différents calques : un calque pour le dessin au trait, un calque pour les couleurs locales, des calques pour la lumière et l’ombre et des calques supplémentaires pour les détails. Utilisez autant de couches que vous le souhaitez, mais n’en faites pas trop car elles peuvent être difficiles à suivre ! En ce qui concerne l’étape des pixels, il est préférable de fusionner tous les calques ensemble (à l’exception de l’arrière-plan).
croquis, lignes et couleur de base du sprite
Deuxième étape : redimensionner
Une fois que l’image de votre personnage est terminée et que vous êtes satisfait de son apparence générale, il est temps de la pixelliser !
Tout d’abord, il faudra probablement redimensionner. Le pixel art est généralement très petit. Parfois, un sprite peut être aussi petit que 20×20 pixels, en particulier ceux conçus pour les appareils portables.
Bien sûr, plus il est petit, plus le style doit être simple et exagéré. Parce que l’image que j’utilise est relativement complexe, il doit s’agir d’un grand sprite, je l’ai donc redimensionné à 275 pixels de haut (ou 300 pixels avec l’arrière-plan). Beaucoup plus grand que cela et il commence à perdre la sensation de pixel sprite.
anti-aliasing du redimensionnement
Troisième étape : l’anticrénelage
L’un des problèmes du redimensionnement est l’anticrénelage. Vous pouvez modifier certaines options pour éviter cela, telles que ‘voisin le plus proche (préserver les bords durs)’ dans le menu déroulant de la fenêtre de taille d’image, mais je trouve que cela détruit les détails. En plus c’est de la triche ! Le meilleur pixel art est fait à la main, dans le style old school.
Ainsi, l’image redimensionnée semble très douce et ne ressemble pas encore du tout à du pixel art. La première étape de la pixellisation consiste à nettoyer les bords de l’image et à supprimer l’anticrénelage. Cela signifie que tous les pixels de bord dont l’opacité est inférieure à 100 % doivent être effacés ou redessinés avec une opacité de 100 %, à l’aide de l’outil crayon ou de la gomme à crayon.
Faites défiler pour continuer
Sélection de l’outil crayon dans Photoshop pour appliquer et effacer des pixels.
Quelques formules de base pour créer des formes de pixels.
Pour faciliter ce processus, je change généralement l’arrière-plan en un bleu vif ou une couleur qui ne se trouve nulle part sur l’image. Cela rend les bords plus faciles à voir (c’est pourquoi il est important de séparer l’arrière-plan !).
Selon le style que vous recherchez, vous voudrez peut-être ajouter un contour fort autour du sprite. J’ai choisi de ne pas le faire pour cette image, mais il existe plusieurs formules pour créer des courbes et des contours de pixels lisses. Une autre technique souvent utilisée consiste à ajouter un contour blanc autour de l’image entière. Je crois que c’était à l’origine destiné à faire ressortir le sprite de l’arrière-plan du jeu, et c’est une question de préférence stylistique.
Une fois que vous avez nettoyé les bords, l’image commence à prendre forme et à paraître plus prononcée avec ce pixel art net. Mais il reste encore du chemin à parcourir car l’ombrage à l’intérieur a besoin de travail.
Quatrième étape : Ombrage
Il est maintenant temps de faire de l’ombrage de pixels. Les dégradés lisses ne sont pas autorisés ! L’image que j’ai utilisée en contient beaucoup, et un million de couleurs en plus ! Le pixel art a tendance à avoir l’air plus authentique et rétro avec moins de couleurs, mais il est également beaucoup plus difficile d’ombrer de manière réaliste avec moins de couleurs.
Il existe deux méthodes principales pour surmonter cette limitation : l’ombrage des cellules et le tramage.
L’ombrage des cellules utilise des couleurs plates et un ton moyen entre deux nuances pour lisser la transition entre elles. C’est idéal pour obtenir un look stylisé propre, mais il peut bientôt commencer à utiliser beaucoup de couleurs.
techniques d’ombrage
Pour un style plus rétro, il y a le tramage. Le tramage aide à mélanger deux couleurs en utilisant un motif qui trompe l’œil à distance. Si vous avez une palette de couleurs très limitée, vous pouvez utiliser la théorie des couleurs de base pour « mélanger » de nouvelles couleurs de cette façon ; par exemple en mélangeant du bleu et du jaune pour obtenir une teinte verte. Le tramage ajoute également de la texture et un style distinct qui rappelle l’ère 8 bits.
Pour mon image, j’ai choisi d’utiliser principalement le tramage. Vous pouvez vous déchaîner avec. Il existe quelques formules de base à suivre en utilisant un motif en damier qui s’amincit sur les bords, mais à peu près tout se passe tant qu’il est à motifs. Si vous essayez d’utiliser l’aérographe pour des pixels aléatoires, cela ne fonctionnera pas aussi bien. Suivre un modèle est la meilleure méthode même s’il change pour suivre la forme de la structure qu’il représente.
Cliquez pour voir à 100 % et voir le véritable effet de pixel !
Le lutin fini
Et tu as fini!
Le sprite pirate que j’ai créé utilise de nombreuses couleurs, ce qui lui donne un aspect plus réaliste que les tout premiers sprites. Si vous préférez un look plus rétro, limitez les couleurs et réduisez comme je l’ai fait avec le Spartan.
Bonne chance et amusez-vous à créer des sprites !
Trucs et astuces
- N’essayez jamais de créer un sprite pixel à partir de zéro. Il est préférable de travailler à partir d’une image réduite comme point de départ.
- Utilisez un arrière-plan aux couleurs vives qui contraste avec votre sprite pour nettoyer les bords et éliminer les pixels parasites.
- Gardez à l’esprit que plus le sprite est petit, plus la conception doit être simple. Les petits sprites sont les meilleurs dans le style Chibi (comme le Spartan en haut de la page).
- L’ombrage ou le tramage des cellules, ou une combinaison fonctionne. Pas de dégradés !
- Photoshop a une fonction d’enregistrement ‘enregistrer pour le Web et les appareils‘ où vous pouvez basculer la quantité et le type de couleurs utilisées dans votre image. Tricher un peu, mais un raccourci pratique pour commencer.
- Pour obtenir une version agrandie de votre pixel art : effectuez un zoom avant sur la taille souhaitée, appuyez sur l’écran d’impression et collez-le dans un nouveau fichier. Voila, vous avez une image pixel agrandie pour ce look rétro authentique !
Cet article est exact et fidèle au meilleur de la connaissance de l’auteur. Le contenu est uniquement à des fins d’information ou de divertissement et ne remplace pas un conseil personnel ou un conseil professionnel en matière commerciale, financière, juridique ou technique.
© 2011 Vanadis
Dale Anderson de la haute mer le 15 septembre 2020 :
Eh bien, c’était intéressant, merci pour le partage.
André du représentant Boston MA le 13 juillet 2014 :
Excellent hub sur la façon de créer un sprite!
~thranax~
Vanadis (auteur) de Barcelone le 04 mai 2013 :
StompStompStomp- L’image de la fille pirate est affichée à la taille réelle de l’écran. (Assurez-vous de cliquer sur l’image pour voir le sprite à 100 %, Hubpages réduit certaines images pour s’adapter à l’article afin que les pixels ne s’affichent pas correctement). Le Spartan en haut a été créé en « gonflant » le sprite d’origine à cette taille de pixel exagérée. Pour faire la même chose pour votre image, suivez simplement les instructions du dernier conseil sous « trucs et astuces ». Certes, ce conseil arrive probablement un peu tard 🙂
Telle : Bien sûr, assomme-toi !
Telle le 31 mai 2012 :
Salut! J’espère que je peux utiliser ce lineart pour pratiquer ma coloration, je ne volerai pas votre travail et ne le mettrai pas sur un site Web quelque part. S’il y aurait des problèmes, s’il vous plaît contactez-moi!
http://telles.se
SoucheStubStub le 24 mai 2012 :
Je ne vois pas beaucoup de traits pixélisés sur la fille pirate… De plus, j’ai besoin de faire un personnage chibi avec un physique TRÈS pixellisé, comme le Spartan. Comment je fais ça?
Vanadis (auteur) de Barcelone le 05 août 2011 :
Merci Silence® ! Cela a pris environ 2 jours. Difficile à dire exactement car j’ai produit ce sprite avec beaucoup d’autres travaux simultanément.
Silencieux le 03 août 2011 :
vraiment sympa et cool, combien de temps vous a-t-il fallu pour faire de la fille pirate un exemple dans ce tuto ? :O
