Pixel art in vettore senza perdere i bordi netti

Puoi convertire la pixel art in vettore, ma prima decidi se i pixel quadrati devono restare visibili. Per conservare l'aspetto originale, ricostruisci l'immagine come griglia o mosaico di oggetti. Per trasformare lo sprite in un'illustrazione dai contorni morbidi, usa la vettorizzazione dei contorni. Sono risultati diversi, e un ricalco generico non può scegliere quello giusto per te.

Se modifichi uno sprite di gioco in Scratch, il pulsante Convert to Vector cambia la modalità di modifica senza ricalcare il bitmap. Usa i controlli di modificabilità dei costumi Scratch per decidere se conservare i pixel, ridisegnare una parte o importare forme SVG ricalcate; poi confronta il centro del costume sostitutivo con quello originale.

Se il vero obiettivo è soltanto mostrare pixel art nitida su un sito o in un gioco, potresti non aver bisogno di un SVG. Un PNG delle dimensioni corrette con ridimensionamento di tipo nearest-neighbor è spesso più piccolo e più fedele alla fonte; sul web, la proprietà image-rendering offre i comportamenti crisp-edges e pixelated, pensati per conservare i bordi netti.

Tre risultati per tre compiti diversi

Conta meno quale formato sia «migliore» e più il significato dei blocchi. Nella pixel art, i bordi a gradini sono spesso voluti. Smussarli può essere distruttivo quanto sfocare un disegno lineare.

Conservare la griglia e smussare i contorni sono lavori diversi

Percorso 1: conservare esattamente la griglia dei pixel

La conversione vettoriale più letterale trasforma le celle raster in rettangoli vettoriali. Un pixel rosso diventa un quadrato rosso. Una fila di pixel rossi adiacenti può restare composta da quadrati separati oppure essere unita in una forma rettangolare più grande, quando questo non cambia la sagoma.

Prima di iniziare, trova le vere dimensioni della griglia. Uno sprite visualizzato a 800 per 800 pixel può essere nato come griglia di 32 per 32, ingrandita con nearest-neighbor. Devi riprodurre la struttura 32 per 32, non le dimensioni della visualizzazione ingrandita.

Procedimento Object Mosaic di Illustrator

Adobe documenta un metodo integrato per convertire un bitmap incorporato in un mosaico:

1. Inserisci la pixel art originale in Illustrator e incorporala.
2. Seleziona l'immagine e scegli Object > Create Object Mosaic.
3. Imposta il numero di tessere in modo che corrisponda alla griglia originale, se la conosci.
4. Usa tessere quadrate e output a colori.
5. Conserva il raster sorgente finché non hai controllato il mosaico, poi rimuovilo o nascondilo.
6. Confronta sagoma esterna, spazi interni e palette con l'originale ad alto ingrandimento.

La documentazione Adobe di Create Object Mosaic descrive il comando, l'opzione per tessere quadrate, l'impostazione dei colori e la gestione del raster sorgente. Il procedimento per la pixel art è un'applicazione pratica di questo comportamento documentato.

Un mosaico di oggetti può essere strutturalmente fedele e comunque inefficiente. Uno sprite di 64 per 64 ha 4.096 celle prima di qualsiasi unione. Rimuovi le celle completamente trasparenti, unisci dove possibile i rettangoli adiacenti dello stesso colore ed evita di portare oggetti invisibili nell'SVG finale.

Percorso 2: creare un SVG a griglia senza Illustrator

Puoi costruire lo stesso tipo di file con uno script che riconosce i pixel o un convertitore dedicato. Il principio conta più dell'app:

1. Leggi la fonte alle dimensioni native della griglia.
2. Associa ogni pixel non trasparente a un rettangolo vettoriale esatto.
3. Conserva i valori della palette senza antialiasing.
4. Unisci le celle vicine soltanto se la forma risultante produce la stessa griglia visibile.
5. Esporta con un viewBox SVG corrispondente alle dimensioni native della griglia.
6. Prova l'SVG con dimensioni di visualizzazione intere e non intere.

Il progetto open source vectorize-pixelart è un esempio di utilità di conversione specifica per i pixel. Mostra anche un limite generale: griglie grandi o complesse possono produrre SVG pesanti. Tratta prima una vecchia utilità come materiale di ricerca. Controllane codice e stato di manutenzione prima di inserirla in un flusso di produzione.

Se conosci il markup SVG, puoi anche ricostruire manualmente un piccolo sprite con elementi <rect>. È ragionevole per un'icona di 12 per 12. Non è un modo sensato di passare un pomeriggio per una scena dettagliata.

Percorso 3: smussare intenzionalmente le forme

A volte i pixel sono una bozza, non l'identità dell'opera. Potresti voler trasformare il personaggio, il fiore o l'icona in un adesivo pulito, una grafica da stampare o un logo con contorni arrotondati.

Se vuoi deliberatamente questa interpretazione smussata, PerfectVector è adatto al percorso dei contorni. Carica la versione nearest-neighbor più grande della grafica che possiedi, poi valuta il risultato come una nuova illustrazione:

1. Rimuovi prima l'antialiasing. I pixel morbidi ai margini creano colori extra e piccole forme sui bordi.
2. Controlla la palette. Se la fonte usa otto colori, un ricalco non dovrebbe inventarne decine a causa di compressione o sfocatura.
3. Esamina le diagonali a gradini. Decidi quali devono diventare segmenti dritti e quali curve.
4. Controlla fori e spazi di un pixel. Piccole aperture possono chiudersi quando si semplificano regioni vicine.
5. Controlla il numero di nodi. Lo scopo della smussamento non è sostituire ogni angolo quadrato con diverse curve minuscole.
6. Prova alle dimensioni di destinazione. Una gradevole curva morbida su un poster può cancellare un volto o una mano alle dimensioni di un'icona.

Questo percorso cambia la grafica. Salva il PNG sorgente accanto all'SVG, affinché nessuno scambi l'interpretazione vettoriale per una versione d'archivio esatta.

Problemi di preparazione che peggiorano ogni percorso

La fonte è stata ridimensionata con smussamento. Torna allo sprite nativo oppure ridimensionalo con interpolazione nearest-neighbor. Una volta incorporati nuovi colori miscelati sui bordi, recuperare la griglia originale è più difficile.

Il file è un JPG. La compressione crea blocchi di colore e aloni intorno a ogni bordo netto dei pixel. Usa il PNG originale quando possibile.

Lo sfondo trasparente è diventato bianco opaco. Uno sfondo bianco può diventare migliaia di celle indesiderate o un'unica grande forma ricalcata. Ripristina la trasparenza prima della conversione, poi controlla il risultato su una tela contrastante. La guida agli sfondi SVG trasparenti tratta questa verifica.

La grafica contiene effetti semitrasparenti. Bagliori, ombre e opacità parziale non sono celle di pixel tradizionali. Decidi se conservarli come effetti raster, quantizzarli in colori pieni o riprogettarli per la versione vettoriale.

Serve un vettore per un sito?

Non necessariamente. Se la grafica è uno sprite di gioco o un'icona d'interfaccia, un PNG può restare il master corretto. Usa una risorsa alle dimensioni native, ingrandiscila per multipli interi quando possibile e configura il browser o il motore di rendering per usare interpolazione pixelated o nearest-neighbor.

Una griglia SVG è utile quando la palette va modificata come oggetti, il lavoro va stampato in grande o il sistema di consegna richiede espressamente un vettore. Non rende automaticamente più leggera una piccola risorsa per lo schermo. Un oggetto vettoriale per ogni cella può pesare più di un PNG compatto.

È uno dei casi in cui «l'SVG si ingrandisce all'infinito» è vero ma incompleto. La grafica può scalare all'infinito diventando però costosa da conservare, modificare o renderizzare. La guida PNG e SVG spiega la scelta generale del formato, mentre il significato della vettorizzazione delle immagini chiarisce perché i ricalchi convenzionali privilegiano le forme rispetto alle griglie di pixel.

Verifica finale

Prima di consegnare il file, confrontalo con l'originale alle dimensioni native e a quelle previste per l'output.

• Le dimensioni della griglia corrispondono alla fonte.
• Non sono stati introdotti colori marginali con antialiasing.
• Le celle trasparenti restano trasparenti.
• Le sagome a gradini sono intatte nel percorso di conservazione.
• I bordi smussati sono intenzionali nel percorso dei contorni.
• Spazi di un pixel, occhi, punti luce e fori interni restano leggibili correttamente.
• Le celle ripetute dello stesso colore sono semplificate solo dove l'immagine rimane identica.
• L'SVG non incorpora per sbaglio il raster originale. Altrimenti potrebbe ancora apparire pixelato nonostante l'estensione.

Il procedimento più chiaro dichiara il proprio compromesso. Conserva la griglia quando i pixel sono l'opera. Smussa i contorni quando vuoi una nuova interpretazione vettoriale. Mantieni il PNG quando il vettore non offre un controllo utile.

Fonti

1. Adobe Illustrator — Creare schizzi e mosaici — Comando Object Mosaic, tessere quadrate, output a colori e requisito del raster incorporato.
2. MDN — CSS image-rendering — Rendering di tipo nearest-neighbor per la pixel art sul web.
3. W3C — Specifica PNG, terza edizione — Modello raster senza perdita di PNG e comportamento del canale alfa.
4. W3C — Forme di base SVG — Geometria dei rettangoli usata negli SVG con celle di griglia letterali.
5. W3C — Sistemi di coordinate SVG e viewBox — Associazione di una griglia nativa al viewport SVG.

Se vuoi contorni morbidi invece di una griglia conservata, elabora la grafica con PerfectVector, poi confronta sagoma, spazi di un pixel e piccoli dettagli con il master a pixel prima di usarla.