Créateur de Pixel Art

Qu'est-ce qu'un créateur de pixel art ?

Un créateur de pixel art est un outil de dessin construit autour d'une grille fixe : au lieu de traits libres, vous placez des pixels un par un, case par case. Cette contrainte fait tout le charme du pixel art : sprites de jeux vidéo, icônes rétro, avatars et illustrations 8 bits se créent en choisissant chaque pixel délibérément.

Cet éditeur offre la panoplie classique d'un éditeur de sprites : crayon, gomme, remplissage et pipette sur des grilles de 8x8 à 64x64, plus une animation image par image avec aperçu en direct. Exportez le résultat en PNG net à n'importe quelle taille, en GIF animé ou en sprite sheet prête pour un moteur de jeu.

Et comme c'est Coddy, votre dessin est aussi du code. Un clic transforme la grille en tableau 2D Python, en extrait canvas JavaScript, en art CSS box-shadow, en SVG ou en CSV à ouvrir dans un tableur : une façon ludique de voir que les images ne sont que des tableaux de couleurs.

Ce que vous apprendrez en faisant du pixel art

• Une image est un tableau 2D : chaque pixel est une entrée avec une valeur de couleur. L'export en code montre votre dessin exactement ainsi, lignes et colonnes de codes hex.
• Les petites palettes rendent mieux. Les sprites classiques utilisent 4 à 32 couleurs ; se limiter force des formes propres et des silhouettes lisibles.
• L'animation, ce ne sont que des images successives. Un clignement ou un cycle de marche, ce sont quelques grilles légèrement différentes jouées en séquence.

Comment faire du pixel art étape par étape

1. 1

   Choisissez la taille de la grille

   Commencez petit : 16x16 ou 32x32. Les petites grilles forcent des formes simples et lisibles ; la plupart des sprites classiques font 16x16 ou 32x32. Vous pourrez changer de taille plus tard sans perdre votre dessin.

2. 2

   Posez la silhouette

   Utilisez le crayon pour les contours et le remplissage pour les grandes zones. Dessinez d'abord la forme générale dans une couleur, puis ajoutez les détails. Le clic droit (ou la gomme) efface un pixel.

3. 3

   Ombrez avec une petite palette

   Choisissez 2 ou 3 tons par matière : une base, un reflet, une ombre. La palette intégrée est ordonnée pour trouver ces dégradés facilement, et la pipette récupère toute couleur déjà posée.

4. 4

   Animez (facultatif)

   Dupliquez l'image, déplacez quelques pixels et lancez la lecture. Deux ou trois images suffisent pour un clignement, un rebond ou une flamme qui vacille.

5. 5

   Exportez

   Téléchargez un PNG jusqu'à l'échelle 32x, un GIF animé ou une sprite sheet avec toutes les images alignées. Ou ouvrez le panneau de code et copiez votre œuvre en Python, JavaScript, CSS, SVG ou CSV.

Référence rapide du pixel art

Tailles de toile et formats d'export courants, et quand les utiliser.

Exemples de pixel art à essayer

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Erreurs courantes en pixel art

• Commencer sur une grille 64x64. Les grandes toiles cachent les formes faibles : apprenez en 16x16, où chaque pixel est une décision.
• Utiliser trop de couleurs. Si votre sprite a 40 couleurs, il n'a pas de style. Choisissez une petite gamme par matière et tenez-vous-y.
• Agrandir les exports avec lissage. Le pixel art doit être agrandi au plus proche voisin (cet outil le fait pour vous), sinon il devient flou.

FAQ du Créateur de Pixel Art