Les pubs vous déplaisent ? Aller Sans pub Auj. 

Canvas d'art en pixels & export en CSS

CouleurPromoteurImage

ANNONCE · Supprimer ?

SAISIR

Processus automatique

Paramètres du canevas

Taille du réseau

Changer la taille du réseau efface le canevas.

Palette

Préréglage

Couleur actuelle

Options d'exportation

Taille du pixel (px)

Taille de chaque pixel dans la sortie PNG/SVG/CSS.

Format

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Canevas d'art en pixels & exportation CSS

Canvas d'art en pixels & export en CSS

Créez des sprites en style 8 bits précis directement dans votre navigateur et exportez-les sous forme d'art en CSS box-shadow, SVG échelonnée, PNG raster ou JSON portable. Le canevas s'étend de 8×8 à 64×64, dispose de palettes classiques (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) et vous offre des outils de peinture, de suppression, de remplissage et d'eyedropper avec une fonction d'annulation et de rétablissement illimitée.

Comment utiliser

Choisissez une taille de réseau allant de 8×8 à 64×64. Des tailles plus grandes permettent plus de détails mais ralentissent le rythme de peinture.
Choisissez une palette prédéfinie ou insérez une couleur hexadécimale dans le sélecteur de couleur.
Cliquez sur le bouton peinture, éraser, remplissage ou eyedropper dans la barre d'outils du canevas — ou appuyez sur P, E, F, I.
Cliquez et glissez sur le canevas pour peindre. Utilisez Ctrl+Z et Ctrl+Y pour annuler et rétablir.
Choisissez un format d'exportation (CSS box-shadow, SVG, PNG data URI ou JSON), définissez la taille du pixel, puis copiez le code ou téléchargez le fichier.

Caractéristiques

Six tailles de réseau – 8×8, 16×16, 24×24, 32×32, 48×48 et 64×64 pour tout, des icônes minuscules à des feuilles de sprites complètes.
Sept palettes prédéfinies – NES (54 couleurs), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16 et une échelle de gris.
Quatre outils de dessin – peinture, éraser, remplissage (remplissage de surface) et eyedropper avec des raccourcis clavier.
Dessin fluide par glissement – L'interpolation de ligne de Bresenham maintient les traitements continus même sur des écrans petits.
Annulation et rétablissement illimités – Historique de 60 étapes avec les raccourcis clavier Ctrl+Z et Ctrl+Y.
Quatre formats d'exportation – CSS box-shadow, SVG, URI PNG et données JSON, chacun avec une prévisualisation en temps réel.
Support de toucher – Fonctionne sur les tablettes et les téléphones avec des événements natifs de toucher et de pointeur.
Céllules transparentes – Les pixels vides restent transparents dans tous les formats d'exportation, sans être peints en blanc.

 FAQ

Qu'est-ce qu'un pixel en imagerie numérique ?

Un pixel (abréviation de picture element) est l'unité la plus petite adressable d'une image raster. Chaque pixel stocke des informations de couleur — généralement des valeurs de canaux rouge, vert et bleu allant de 0 à 255 — et ensemble, un réseau de pixels forme une image complète.
Comment le CSS box-shadow rend-il l'art en pixels ?

Le CSS box-shadow accepte plusieurs déclarations d'ombre, chacune avec un décalage en x, en y, un rayon de flou, un rayon d'extension et une couleur. En définissant le flou et l'extension à zéro et en positionnant chaque ombre sur un réseau, on peut dessiner des rectangles colorés individuels à partir d'un seul élément de 1x1 — produisant ainsi une image en pixels pure CSS sans données raster.
Qu'est-ce qu'une palette de couleurs limitée et pourquoi est-elle utilisée ?

Une palette limitée restreint une œuvre à un petit ensemble fixe de couleurs, souvent en accord avec les contraintes matérielles des consoles anciennes telles que l'NES, le Game Boy ou le Commodore 64. Travailler dans une palette crée une cohérence visuelle, évoque une époque identifiable et oblige à des choix de couleurs intentionnels plutôt que hasardeux.
Qu'est-ce que l'algorithme de remplissage ?

L'algorithme de remplissage est un algorithme de graphisme qui commence à une cellule cible et s'étend vers chaque cellule voisine ayant la même couleur, en remplaçant chaque cellule par une nouvelle couleur. La plupart des outils de remplissage utilisent un remplissage à quatre directions (haut, bas, gauche, droite) implémenté avec une pile ou une file pour éviter une récursion profonde.
Pourquoi les arts en pixels raster et vectoriels sont-ils différents ?

L'art en pixels raster est stocké sous forme d'un réseau de cellules colorées (PNG, URI). L'art en pixels vectoriels représente chaque cellule sous forme de forme mathématique (SVG ou CSS box-shadow) qui s'agrandit sans perte de netteté. L'exportation vectorielle est idéale pour les interfaces web où le rendu de formes : crispEdges préserve l'apparence en blocs à tout niveau de zoom.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?