Comment utiliser l'outil Éditeur de pixel art
- Choisissez une taille de canevas (16×16 et 32×32 sont de bons points de départ) ou ouvrez un fichier PNG, GIF ou .piskel.
- Choisissez une palette comme PICO-8 ou Endesga 32 et dessinez au crayon (B). Le clic droit peint avec la couleur secondaire, transparente par défaut.
- Ajoutez des calques pour le trait, la couleur et l'ombrage. Ajoutez des frames pour l'animation et activez la pelure d'oignon (K) pour voir la frame précédente et la suivante.
- Appuyez sur Entrée pour lire l'animation, réglez les FPS et vérifiez le petit aperçu en 1×, 2× ou en mosaïque.
- Ouvrez Exporter et téléchargez un PNG, une sprite sheet avec JSON, un GIF animé, un SVG, un ZIP des frames ou un fichier .piskel.
Ce que vous obtenez
- PNG de la frame courante, de 1× à 16×
- Sprite sheet PNG avec une liste des frames en JSON (nombre de colonnes au choix)
- GIF animé aux FPS du document, transparence conservée
- ZIP de PNG numérotés, un par frame
- SVG avec un tracé par couleur
- Fichier .piskel à rouvrir ici ou dans Piskel
Conseils tirés de nos propres jeux
- Laissez le mode pixel-perfect activé (P) pour tracer des contours de 1 px. Il supprime les pixels doublés dans les angles que laissent les tracés à main levée.
- Shift-clic au crayon trace une ligne droite depuis votre dernier point. Maintenez Shift en traçant une ligne pour la caler sur des pas de 45°, ou un rectangle/une ellipse pour obtenir un carré/un cercle.
- L'outil d'ombrage (U) fait passer un pixel à la couleur plus claire ou plus foncée suivante de votre palette : vous ombrez sans sortir de la palette. Le clic droit assombrit.
- Sélectionnez une zone (S, ou W pour une seule couleur) avant de dessiner pour garder vos traits à l'intérieur, ou avant de déplacer pour ne décaler que ces pixels.
- Activez le miroir X pour les personnages et les sprites de face, puis cassez la symétrie à la main à la fin pour que le sprite ne paraisse pas tamponné.
- Utilisez un calque « croquis » masqué à faible opacité sous votre trait, puis supprimez-le avant l'export.
- Votre travail est enregistré automatiquement dans ce navigateur. Il n'est synchronisé nulle part : exportez un fichier .piskel si vous voulez une sauvegarde.
- Collez une image avec Ctrl+V pour l'ajouter comme nouveau calque, pratique pour décalquer une référence.
Cas d'usage
- Dessiner personnages, objets et tiles pour une game jam sans rien installer
- Nettoyer pixel par pixel des sprites générés par IA avant de les importer dans un moteur
- Animer des cycles idle, marche et attaque et exporter une planche pour Godot, Unity ou GameMaker
- Créer de petits GIF animés et des emotes
- Modifier des projets Piskel sur une machine où Piskel n'est pas installé
FAQ
Cet éditeur de pixel art est-il gratuit ?
Oui. Toutes les fonctions de dessin, d'animation, d'import et d'export sont gratuites, sans filigrane. L'éditeur tourne entièrement dans votre navigateur.
Où mon dessin est-il enregistré ?
Dans le stockage local de votre navigateur, sur cet appareil uniquement. Il survit à un rechargement de la page, mais pas à l'effacement des données du site ni à un changement de navigateur. Exportez un .piskel ou un PNG pour en garder une copie.
Puis-je ouvrir des fichiers Piskel ?
Oui. Ouvrez un fichier .piskel : ses calques, ses frames et ses FPS sont repris. Vous pouvez aussi réexporter en .piskel.
Quelle est la taille maximale du canevas ?
512×512 pixels. Le pixel art fait en général de 16 à 128 pixels de côté, et cette limite garde le dessin fluide sur téléphone et sur les vieux portables.
Comment créer une sprite sheet pour mon moteur de jeu ?
Dessinez chaque frame de l'animation dans la timeline, puis choisissez Exporter → Sprite sheet. Réglez le nombre de colonnes et l'échelle. Vous obtenez un PNG et un fichier JSON avec la position et la durée de chaque frame.
Est-ce que ça marche sur téléphone ou tablette ?
Oui. Dessinez d'un doigt, et pincez ou utilisez deux doigts pour zoomer et vous déplacer. Une souris et un clavier restent plus rapides pour le travail de détail, grâce aux raccourcis.
Puis-je importer un GIF ou une sprite sheet ?
Oui. Un GIF s'ouvre avec une frame par image du GIF. Quand vous ouvrez un PNG qui ressemble à une planche, l'éditeur propose de le découper en frames selon la grille détectée.