Un editor di pixel art è uno strumento di disegno costruito attorno a una griglia fissa: invece di tratti a mano libera, posizioni i singoli pixel un quadratino alla volta. Questo vincolo è tutto il fascino della pixel art: sprite di videogiochi, icone retrò, avatar e illustrazioni in stile 8-bit nascono scegliendo con cura ogni singolo pixel.
Questo editor ti dà gli strumenti classici di un editor di sprite: matita, gomma, riempimento e contagocce su griglie da 8x8 a 64x64, più l'animazione fotogramma per fotogramma con anteprima dal vivo. Esporta il risultato come PNG nitido a qualsiasi dimensione, come GIF animata o come sprite sheet pronto per un motore di gioco.
Dato che questo è Coddy, il tuo disegno è anche codice. Con un clic la griglia diventa un array 2D in Python, uno snippet canvas in JavaScript, arte CSS con box-shadow, un SVG o un CSV da aprire in un foglio di calcolo: un modo divertente per vedere che le immagini sono davvero solo array di valori di colore.
Cosa impari creando pixel art
Un'immagine è un array 2D: ogni pixel è un elemento con un valore di colore. L'esportazione in codice mostra il tuo disegno esattamente così, righe e colonne di codici esadecimali.
Le palette ridotte rendono meglio. Gli sprite classici usano da 4 a 32 colori; limitarti ti obbliga a forme pulite e sagome leggibili.
L'animazione è fatta solo di fotogrammi. Una camminata o un battito di ciglia sono poche griglie leggermente diverse mostrate in sequenza: l'esportazione GIF le riproduce alla velocità che scegli.
Per ingrandire la pixel art serve l'interpolazione nearest-neighbor. Esporta a 16x o 32x e i quadratini restano nitidissimi; un ridimensionamento sfumato li renderebbe sfocati.
Come creare pixel art passo dopo passo
1
Scegli la dimensione della griglia
Inizia in piccolo: 16x16 o 32x32. Le griglie piccole impongono forme semplici e leggibili, e la maggior parte degli sprite dei giochi classici è 16x16 o 32x32. Puoi cambiare dimensione in seguito senza perdere il disegno.
2
Abbozza la sagoma
Usa la matita per i contorni e il riempimento per le aree grandi. Disegna prima la forma generale con un solo colore, poi aggiungi i dettagli. Il clic destro (o la gomma) cancella un pixel.
3
Ombreggia con una palette ridotta
Scegli 2 o 3 tonalità per materiale: una base, una luce e un'ombra. La palette integrata è ordinata per trovare facilmente queste scale, e il contagocce preleva qualsiasi colore già presente sulla tela.
4
Animala (facoltativo)
Duplica il fotogramma, sposta qualche pixel e premi play. Due o tre fotogrammi bastano per un battito di ciglia, un rimbalzo o una fiamma che tremola.
5
Esporta
Scarica un PNG fino a 32x, una GIF animata o uno sprite sheet con tutti i fotogrammi in fila. Oppure apri il pannello del codice e copia la tua opera come Python, JavaScript, CSS, SVG o CSV.
Riferimento rapido per la pixel art
Dimensioni di tela e formati di esportazione più comuni, e quando usarli.
Scelta
Ideale per
Note
Griglia 16x16
Icone, favicon, sprite minuscoli
La dimensione classica degli sprite: ogni pixel conta
Griglia 32x32
Personaggi di gioco, avatar
Il giusto equilibrio tra dettaglio e fatica
Griglia 64x64
Scene dettagliate, ritratti
Pianifica prima la sagoma: 4.096 pixel si riempiono lentamente
Esportazione PNG
Avatar, sticker, asset
Ingrandisci a 16x o più perché i pixel restino nitidi
Esportazione GIF
Animazioni per chat e web
Usa l'impostazione FPS; trasparenza supportata
Sprite sheet
Motori di gioco
Tutti i fotogrammi affiancati in un unico PNG
Esportazione in codice
Studio, arte generativa
Python, JavaScript, CSS, SVG o CSV
Esempi di pixel art da provare
Il tuo disegno come array 2D in Python
Python
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))
L'esportazione in codice scrive ogni pixel come colore esadecimale in una lista annidata, più uno snippet Pillow che lo ritrasforma in PNG. Questa versione minuscola stampa la forma nel terminale: la prova che un'immagine è solo un array 2D.
L'esportazione CSS trasforma ogni pixel in un offset box-shadow di un unico div, un classico trucco del front-end. Incollalo in qualsiasi pagina e cambia --px per ridimensionare l'intera opera.
L'esportazione CSV mette un codice esadecimale per cella. Aprilo in Google Sheets o Excel, riduci le colonne a quadratini e aggiungi una regola di formattazione condizionale che colora ogni cella in base al suo valore: pixel art istantanea nel foglio di calcolo.
Errori comuni nella pixel art
Iniziare con una griglia 64x64. Le tele grandi nascondono le forme deboli: impara su 16x16, dove ogni pixel è una scelta.
Usare troppi colori. Se il tuo sprite ha 40 colori, non ha uno stile. Scegli una piccola scala per materiale e rispettala.
Ingrandire le esportazioni con lo smoothing attivo. La pixel art va ingrandita con nearest-neighbor (questo strumento lo fa per te), altrimenti diventa un pasticcio sfocato.
Esportare gli sprite su sfondo bianco. Lascia attivo lo sfondo trasparente per tutto ciò che finisce in un gioco o sopra altri contenuti.
Animare con troppi fotogrammi. La sensazione dei giochi classici nasce da 2 a 4 fotogrammi ben scelti, non da 16 quasi identici.
Domande frequenti sull'editor di pixel art
Che cos'è la pixel art?
La pixel art è un'arte digitale in cui l'immagine viene costruita pixel per pixel su una piccola griglia, così ogni quadratino è posizionato con intenzione. È lo stile visivo dei videogiochi classici ed è ancora ovunque: giochi indie, avatar, icone e immagini del profilo dell'era NFT.
Come si crea la pixel art da principianti?
Parti da una griglia 16x16 con 3 o 4 colori. Disegna la sagoma di qualcosa di semplice (un cuore, un fungo, una spada), poi aggiungi una tonalità di luce e una d'ombra. Gli stencil integrati ti danno una forma di partenza da ricolorare e modificare. La pixel art facile punta su forme pulite, non sui dettagli.
Che dimensione deve avere la pixel art?
16x16 e 32x32 sono le dimensioni classiche degli sprite e i punti di partenza migliori; la pixel art 32x32 va bene per la maggior parte dei personaggi di gioco e degli avatar. Usa 64x64 solo quando ti serve un vero dettaglio. Quando esporti, ingrandisci a 16x o 32x così i pixel restano nitidi alla dimensione di visualizzazione.
Come si crea una GIF animata in pixel art?
Aggiungi un secondo fotogramma con il pulsante Duplica, cambia qualche pixel (chiudi un occhio, sposta una fiamma), imposta gli FPS e premi play per l'anteprima. Scarica GIF esporta una GIF animata in loop con trasparenza, pronta per app di chat, Discord o un sito web.
Che cos'è uno sprite sheet?
Uno sprite sheet è un'unica immagine che contiene tutti i fotogrammi di un'animazione affiancati. Motori di gioco come Unity, Godot e Phaser caricano il foglio una volta e riproducono i fotogrammi spostando una finestra di visualizzazione. L'esportazione sprite sheet dispone i tuoi fotogrammi in fila con celle della stessa dimensione.
Posso usarlo come editor di sprite per il mio gioco?
Sì. Disegna ogni fotogramma dell'animazione, guarda l'anteprima del loop al frame rate del tuo gioco ed esporta uno sprite sheet PNG con sfondo trasparente. Le esportazioni SVG e PNG vanno bene anche per icone dell'interfaccia e tileset.
È un'alternativa a Piskel?
Copre lo stesso flusso di lavoro di base di Piskel (disegno su griglia, animazione a fotogrammi, esportazione GIF e sprite sheet), funziona interamente nel browser senza installare nulla e in più aggiunge l'esportazione in codice. Se cerchi un editor di sprite online semplice e aggiornato, è fatto proprio per questo.
Che cos'è la pixel art nei fogli di calcolo?
Un classico trucco da scuola: ridurre le celle di un foglio di calcolo a quadratini e colorarle per formare un'immagine. L'esportazione CSV ti dà un codice esadecimale per cella, così una sola regola di formattazione condizionale in Google Sheets o Excel ricrea il tuo disegno come celle colorate.
Come trasformo la mia pixel art in codice?
Apri il pannello del codice e scegli un formato. Python ti dà una lista 2D più un renderer Pillow, JavaScript la disegna su un canvas, CSS la rende come arte box-shadow su un solo div, SVG produce rettangoli vettoriali nitidi e CSV alimenta i fogli di calcolo. I formati ad array sono un ottimo primo sguardo su come funzionano le immagini nel codice.
Questo editor di pixel art è gratuito?
Sì: gratuito, senza registrazione e senza filigrana. Tutto funziona in locale nel browser: la tua opera viene salvata automaticamente sul tuo dispositivo e non viene mai caricata su un server.
