Sommario

Parte 1: Introduzione

1. Introduzione
2. Cosa si può definire pixel art
3. Da dove iniziare
   3a. Iniziare un progetto

Parte 2: Clusters, Clusters Everywhere

4. Terminologia e tecniche
   4a. Pixel cluster
   4b. Anti-alias
   4c. Dither
   4d. Sub-pixel

Parte 3: Anche i pixel artist nel loro piccolo…

5. Problematiche
   5a. Banding
   5b. Bad Anti-Aliasing
   5c. Linee seghettate (Jagged Lines)

Parte 4: Season Finale

6. Palette di colori
   6a. HSB
   6b. Nascita ed evoluzione
   6c. Palette e progressione colore
   6d. Priorità colore e grigio
7. Conclusioni

ottimo!! semplice e chiaro, seguo il topic, spero e aspetto che continuerai ad arricchire!!
una domanda mi permetto di rivolgertela subito!!
visto che non è fra i tool che hai consigliato, Paint Shop Pro può andare per imparare?
non pretendo nulla di professionale si intende, però mi ci trovo abbastanza bene, solo che è un po’ caro..
permette di fare cose che con Paint di windows non riuscirei mai.. ma costa un’ottantina di euri, secondo te può andar bene?

Questo post è apparso originariamente su Indie Vault

Parte 1: Introduzione

SEZIONI

1. Introduzione
2. Cosa si può definire pixel art
3. Da dove iniziare
   3a. Iniziare un progetto

1. Introduzione

In molte occasioni mi sono ritrovato nell’infelice posizione di spiegare in poche parole cosa sia la pixel art, come la si può ottenere, quali siano le tecniche e le terminologie, ed il perché delle volte preferisca usare la pixel art piuttosto che altre tecniche di illustrazione digitale.

Lì dove non ho avuto spazio o tempo per esprimermi, ho risposto con link ai forum delle community di pixel artist più conosciute (Pixeljoint e Pixelation) per lasciare a loro l’arduo compito di far luce su un argomento così complesso. Come sempre però, le risposte portano ad altre domande e nuove interpretazioni.

Ho deciso quindi di riscrivere delle linee guida per comprendere la pixel art ed apprenderne gli strumenti di base. .Non molto di quello che verrà scritto qui sarà infatti nuovo, e parte della struttura di questo documento si rifarà a quanto scritto già da altri pixel artist come Cure e Helm.

L’obiettivo è quello di far chiarezza su cosa sia la pixel art, quali siano gli strumenti, quali i metodi migliori per iniziare e, se il tempo e la forza mi accompagneranno, quali siano le tecniche avanzate e come si può ottenere una pixel art pulita ed utile sia a livello di design puro che per lo sviluppo di videogiochi.

2. Cosa si può definire pixel art

La definizione secondo cui la pixel art è essenzialmente una branca dell’arte digitale genera la prima perplessità.

Tutta l’arte digitale di per sé ha come risultato finale una composizione di pixel: vien facile pensare quindi che, essendo tutte le immagini visualizzate su una griglia di pixel, qualsiasi prodotto digitale sia pixel art.

Come si può ben intuire questa definizione non è esaustiva né pertinente.

Questa prima empasse viene superata principalmente definendo la pixel art come arte del controllo totale di ogni pixel sull’area di lavoro, rendendo ogni singolo pixel ragione di inizio e fine dell’illustrazione.

Quando utilizziamo un pennello digitale in (ad esempio) Photoshop, attiviamo uno strumento che posiziona i pixel sulla griglia attraverso un algoritmo che definisce una serie di fattori che simulano una vera pennellata (pressione, rotondità, sfumatura, opacità, etc…).

Nel momento in cui utilizziamo questi strumenti il controllo che abbiamo su ogni singolo pixel posizionato sull’area di lavoro viene perso e la nostra capacità di editing e ritocco viene annullata. Stesso ragionamento vale per i gradienti, i filtri, le trasformazioni con interpolazioni non lineari, i glow e simili.

Insomma, tutto ciò che genera pixel dei quali non conosciamo l’origine esatta.

Nella pixel art ogni singolo pixel contribuisce al risultato finale, tanto da cambiare la natura dell’illustrazione in maniera sensibile con lo spostamento o l’estensione di pochi pixel.

“Quindi chiaro… non devo mai usare brush, gradienti, filtri, blending mode e quant’altro… devo disegnare ogni singolo pixel con la matita di Photoshop… vai… ci sono!”

No… aspetta… non è quello che ho detto. La pixel art riguarda il controllo del pixel, NON gli strumenti che usi. Quando si inizia a fare pixel art è sempre bene darsi delle restrizioni perché questo permette di comprendere meglio il comportamento dei pixel, ma nulla la mondo vieta di mischiare tecniche per arrivare al prodotto con cui ci si sente più soddisfatti.

Tutto sta nell’obiettivo che si vuole raggiungere: se si vuol arrivare ad un gioco che sia simile ad un titolo per Amiga per forza di cose si dovranno controllare tutti i pixel in scena, ma se si vuole creare un gioco pixel perfect con influenze provenienti dai design più moderni, ci si può (e ci si deve) affidare a filtri di vario genere.

3. Da dove iniziare

Gli adepti della pixel art devono intraprendere un viaggio in Tibet a piedi e trascorrere 32 anni in uno dei monasteri della pixel art, riconoscibili perché le mura esterne sono colorate con le 4 tonalità di verde del Game Boy, ed affrontare le 16 prove del sacro anti-aliasing.

In alternativa si può installare uno dei seguenti programmi:

Photoshop: meglio noto come il potpourri della grafica digitale. Costoso, ma permette di fare un po’ di tutto, anche se per la pixel art avanzata ed il controllo dei colori potrebbe essere in alcuni casi una piaga.

Per creare pixel art con Photoshop è necessario impostare l’area di lavoro innanzitutto cambiando il pennello (brush) in matita (pencil) e rimuovendo qualsiasi tipo di impostazione applicata sullo strumento (come ad esempio la reattività alla pressione ne caso utilizziate una tavoletta grafica).

Rimuovere qualsiasi tipo di funzione di feather (deve essere a 0%) o anti-aliasing sul secchiello (paint bucket) e tutti gli strumenti di selezione (marquee, selection tool, magic wand). Infine modificare le impostazioni (nel menu delle preferenze) e utilizzare solo unità in pixel ed interpolazione che mantengano i contorni rigidi (nearest neighbor).

Inoltre ricordatevi di utilizzare la funzione “nuova finestra” (windows/arrange) per avere sempre a schermo una seconda finestra di preview al 100% di ciò su cui state lavorando.

GraphicsGale: prodotto shareware. È il software ideale per iniziare a produrre pixel art. Facile da capire ed intuitivo. Limitato sotto alcuni punti di vista, ma al costo di circa 20€ si avrà tutto quello che serve per fare pixel art pura.

Promotion: software professionale ideato in particolare per realizzare pixel art per videogiochi. Alcune volte può presentare dei bug, ma tantissime software house di alto livello lo utilizzano per lavorare ed è perfetto sia per l’illustrazione statica sia per le animazioni che per la creazione di tileset e per la gestione delle palette.

(UPDATE) Aseprite: Lo trovate anche su Steam ad un prezzo decisamente ragionevole. Ha tutto ciò che serve per poter fare pixel art ed animazioni in pixel art senza doversi troppo preoccupare di impostazioni o di finire in qualche opzione del software che vi complica la vita. Ottimo quindi per imparare e con un pochino di spigliatezza anche per lavorare su progetti più grandi.

Il workflow è sensibilimente diverso dai normali software di editing grafico, ma Promotion è considerato l’artiglieria pesante della pixel art.

3a. Iniziare un progetto

Per coloro che si avvicinano per la prima volta al mondo della pixel art è necessario seguire tre linee guida fondamentali:

Immagini piccole: partire con canvas piccoli (da 16x16px fino a 32x32px… se vi sentite pronti potete anche azzardare con 64x64px). In uno spazio ristretto capirete il senso di ogni pixel e allenerete l’occhio e la mano a comprendere quali sono gli elementi necessari e quali quelli superflui. Non lasciatevi ingannare: più piccolo non significa che non possiate veicolare dettagli.

Pochi colori: stesso ragionamento delle dimensioni. Con una quantità ristretta di colori capirete il senso cromatico della vostra illustrazione e la strutturazione del design su una palette controllabile (ricordate? la pixel art è controllo) e vi permetterà di mantenere costante il vostro artwork man mano che ci lavorate su.

No filtri: almeno agli inizi (come dicevo prima) non usate filtri, glow, gradienti o altro. Basate la vostra illustrazione su penna, flood fill, maschere e selezioni di colori già presenti sull’area di lavoro. Questo vi permetterà di rispettare facilmente anche la seconda linea guida.

Se rispettate queste tre regolette capirete il senso delle parole “less is more”, che nella pixel art sono verbo.

Infine non ci sono regole sul come effettivamente iniziare un artwork. Alcuni partono dalle linee tracciate a matita, altri abbozzando gruppi di colore, altri semplicemente modellano un blocco di colore solido fino ad ottenere ciò che vogliono aggiungendo dettagli.

Ricordatevi solo di salvare i vostri progetti sempre e solo unicamente in formati png e gif. Trattate il jpg come se fosse il vostro peggior nemico, in quanto in fase di esportazione il formato applica una compressione che modifica i pixel che avete disegnato… e come risultato perderete il tanto amato controllo…

Questo post è apparso originariamente su Indie Vault

Parte 2: Clusters, Clusters Everywhere

SEZIONI

4. Terminologia e tecniche
   4a. Pixel cluster
   4b. Anti-alias
   4c. Dither
   4d. Sub-pixel

4. Terminologia e tecniche

La terminologia e le tecniche riguardanti qualsiasi branca della grafica digitale non possono essere sintetizzate facilmente in una semplice lista, ma proveremo ora a definire quali sono i termini più usati nell’ambito della pixel art e quali è bene conoscere per comprendere le tecniche a cui fanno riferimento.

4a. Pixel cluster

Conoscere il significato di questo termine ci permetterà di comprendere la vera importanza del controllo del pixel. Diamo un’occhiata a questo sprite di Crash ‘n’ the Boys: Street Challenge (NES, 1992).

Nell’immagine ho evidenziato delle aree in verde. Queste aree definiscono i cluster del volto. Un cluster è un insieme di pixel dello stesso colore che delinea un elemento all’interno dell’illustrazione.

Nello sprite del beniamino Crash noterete che un’intera area scura definisce i capelli, una rosa il volto, al bianco è lasciata la funzione di delineare gli occhi, altri due cluster di colore scuro (stesso colore dei capelli) suggeriscono il sopracciglio e l’iride, ed infine un cluster di 4 pixel in linea rappresenta la bocca.

Studiare gli sprite di giochi di vecchia generazione è un ottimo esercizio per comprendere il comportamento dei cluster. In particolare mi sento di consigliare gli sprite per NES, in quanto le limitazioni tecnologiche dell’epoca permettevano l’utilizzo di soli 3 colori più trasparenza su ogni sprite, e con una tale restrizione è più facile enucleare i diversi cluster.

È tutto molto bello e retro… lo so. Ma a che serve?

Capire i cluster è importante perché ogni singolo cluster contribuisce a definire i dettagli dell’immagine anche su piccoli sprite. Ricordate ciò che è stato detto prima in merito al fatto che “ogni singolo pixel contribuisce al risultato finale”?

Prima ho fatto un esempio in cui cambiando una manciata di pixel l’espressione di un gatto paffuto viene completamente modificata. Riproponiamo lo stesso esperimento sullo sprite di Crash, ma questa volta aggiungendo soltanto un pixel.

Com’è possibile notare un singolo pixel in più su un cluster cambia completamente l’effetto finale. Un pixel in più sugli occhi o sulla bocca cambiano sensibilmente l’espressione sul volto del personaggio.

Ma facciamo un piccolo passo avanti con qualcosa di più complesso, e cerchiamo di comprendere cosa succede nel cluster che delinea la parte interna della bocca del golem di Disgaea: Hour of Darkness (PlayStation, 2003).

Come noterete intorno a questo cluster sono stati evidenziati dei pixel che da soli non definiscono un vero e proprio cluster.

Molto spesso (soprattutto su illustrazioni grandi) i pixel singoli al centro di aree di colore pieno vengono tradotti dall’occhio umano come “rumore”, ma quando sono affiancati ad elementi e ne completano la funzione visiva ne diventano parte. In questo caso questi pixel, nonostante siano di colore diverso, fanno parte del cluster della bocca.

Questi pixel poggiati sulla parte esterna del cluster hanno funzione di ammorbidimento delle forme e di smussamento delle linee. Tale tecnica è conosciuta come buffering o, usando un termine che ad alcuni suonerà più amichevole, anti-alias manuale.

4b. Anti-alias

Molti conosceranno questo termine perché è utilizzato in tutti gli ambiti della grafica digitale. In pochissime parole, l’anti-alias (AA) è una tecnica (o filtro) che permette la riduzione della distorsione dell’immagine, creando superfici e bordi più lineari.

L’anti-aliasing si ottiene semplicemente scalando il colore dell’elemento da smussare con il colore dell’elemento a cui è affiancato o sovrapposto. Questo processo viene automaticamente effettuato dai software di editing digitale e può essere aggiustato attraverso pochi valori e l’attivazione o disattivazione di alcune funzioni.

Nella pixel art l’anti-alias è manuale, ovvero ogni pixel viene piazzato dall’artista in maniera coerente alle sue scelte. Se si vuole lavorare in pixel art è bene che non si lasci questo passaggio alle automazioni dei software in quanto è necessario tenere sotto controllo i colori utilizzati durante il processo di anti-aliasing. Diamo un’occhiata a questo esempio.

Come si può notare in questo esempio, un bordo, anche se lineare ed esente da jagged lines (vedremo in seguito cosa sono), può richiedere in alcuni casi l’intervento dell’AA. Una linea troppo complessa e spigolosa può essere rimodellata utilizzano due colori aggiuntivi che scalano (in questo caso) il nero verso il viola.

L’anti-alias è una tecnica molto particolare e sempre soggetta a studi, in quanto può generare problemi di leggibilità ed appesantire l’illustrazione. Anche in fase di animazione è bene sempre comprendere dove e quando usare questa tecnica, perché l’AA spesso aggiunge colori sui fotogrammi, colori che saranno più difficili da controllare nei fotogrammi successivi.

È bene ricordare che l’AA non è un must. Tutto viene rimandato alle intenzioni dell’artista e alle sue mire stilistiche. Un’illustrazione senza AA non è necessariamente più brutta o meno morbida, ci sono anzi intere scuole di pixel artist che non usano assolutamente l’AA e preferiscono linee dure che scolpiscono blocchi di colori rigidi.

In questo tipo di approccio la conoscenza delle forme (leggi cluster) e del loro accostamento è massima… ma ora ci stiamo allontanando un po’ dal nostro percorso. Cosa c’era dopo? Ah sì, il dithering.

4c. Dither

Sono molte le situazioni in cui è necessario sfumare un colore in un altro. Le soluzioni a questa necessità sono varie, ma una tra le più conosciute è il dither.

Il dither consiste nella creazione di un pattern che mescoli in maniera graduale due tonalità.

Questa tecnica veniva utilizzata in particolar modo nei giochi di vecchia generazione, in quanto la restrizione sulla palette non permetteva spesso di sfumare un colore in un’altro aggiungendone uno intermedio.

Attualmente il dither perde un po’ di senso se utilizzato solo ed unicamente a scopo di gradiente. Un tempo con i monitor CRT ogni pixel era sfocato ed una composizione di pixel come quella del dither al 50% (a scacchiera) risultava in un colore totalmente nuovo, in quanto il cluster non era più riconoscibile a causa della bassa definizione.

I moderni monitor ad alta risoluzione hanno cambiato un po’ le carte in tavola. I pixel sono evidenti ed un dither può risultare particolarmente fastidioso se non lo si usa in maniera pertinente.

Oggigiorno il dither viene impiegato principalmente con due scopi: design (realizzazione di pattern da utilizzare su superfici piane) o aggiunta di trama (texture). Per raggiungere quest’ultimo scopo sono stati ripresi studi del dither che hanno portato all’espansione dell’argomento ed alla ri-sperimentazione di dither non lineari come quelli mostrati di seguito (esempio preso dai forum di Pixelation).

Personalmente non uso molto il dithering in quanto non ne sento la necessità tra i passaggi di colore (preferisco uno stile più piatto, ma pulito). Lo sconsiglio vivamente nelle animazioni, perché gestire i singoli pixel che compongono il dither durante un movimento potrebbe essere molto difficile, se non impossibile: in questo caso cercate una soluzione alternativa, o vagliate se sia davvero necessario l’utilizzo di una sfumatura su quel punto.

Non lasciatevi però ingannare: il dithering può essere complesso da riprodurre ed avere un gusto un po’ troppo retro, ma diventare maestri di quest’arte vi può portare a risultati artistici incredibili. Riuscite a notare l’utilizzo del dither in questo meraviglioso design di Helm?

 4d. Sub-pixel

La griglia su cui vengono piazzati i pixel è la più grande restrizione possibile nel differenziare le forme. Un pixel può giacere soltanto in una casella della griglia e non può occupare allo stesso tempo due caselle dividendosi a metà per ognuna.

Questa constatazione ai più potrà sembrare ovvia o un dogma della grafica digitale. In realtà questa “legge della gravità” dei pixel non era considerata per nulla come un fatto scontato o banale da coloro che cercarono per primi di raggirarla.

Come possiamo fingere che sullo schermo ci siano mezzi pixel? Questa è la domanda che si sono posti i tipografi quando cercarono di estendere le possibilità dei font bitmap (strutturati su una “mappa di bit”) per poter realizzare caratteri più armoniosi, lisci, e che dessero più scelta nel kerning (lo spazio tra le lettere) e la costruzione del font stesso.

Per poter risolvere appieno questo problema, se così vogliamo chiamarlo, bisognerà aspettare l’arrivo di schermi con medio-alte risoluzioni, ma nell’attesa di tale tecnologia i graphic designer studiarono un sistema per fingere che sullo schermo ci fosse una griglia di pixel più estesa di quella che in realtà i monitor supportavano.

Tale sistema è chiamato sub-pixeling.

Con il sub-pixeling si simula una frazione dell’unità del pixel aumentando l’opacità del bordo di un cluster, affinché questo si mescoli con il colore sottostante. Tutto questo vi suonerà familiare, ed infatti questo è un principio simile a quello dell’anti-aliasing.

Prendiamo ad esempio questa S (mi rifarò alla tipografia per questo esempio perché è più semplice ai fini esplicativi).

A sinistra abbiamo il nostro carattere originario (un tratto su un disegno se vogliamo). Il nostro obiettivo è espanderne le dimensioni. Per fare questo, quindi, piazziamo dei pixel dello stesso colore del cluster di origine per ampliarlo (esempio nel centro). Tuttavia il risultato finale è eccessivo per i nostri scopi, quindi (esempio sulla destra) ci rifacciamo al sub-pixeling.

Com’è possibile notare il cluster viene reso leggermente più trasparente sui bordi, in modo tale che la griglia suggeritaci dal cluster venga “spezzata” attraverso un’illusione. In parole povere, i pixel grigi diventano all’occhio mezzi pixel neri, dando l’idea che occupino solo per metà la casella della griglia dei pixel.

Il sub-pixeling è incredibilmente difficile da gestire, ma durante le animazioni ci permette di ottenere movimenti più fluidi, grazie alla simulazione di quello che oggigiorno i tecnici video chiamano motion blur. Nell’esempio che vi propongo potete notare il vantaggio del sub-pixeling sulle animazioni: il quadrato in alto procede in maniera meno fluida del quadrato sottostante.

Questo escamotage è particolarmente utile per ridurre l’ammontare di frame nel caso si lavori su un frame-rate ridotto. C’è chi potrebbe obiettare che oggigiorno gli sviluppatori di videogiochi fanno a gara a chi ha il frame-rate più alto (ambiguità scansata per un pelo) e che la moderna tecnologia ci permette di gestire un grande ammontare di fotogrammi al secondo.

Questo è vero, ma immaginate un animatore che debba animare (ad esempio) 10 personaggi che eseguono 10 azioni ciascuno della durata (ottimistica) di 1 secondo l’una: con un frame-rate di 30fps significa che l’animatore dovrà disegnare 3000 fotogrammi.

Tutto ciò non fa una piega se il progetto è a lungo termine, ma su progetti rapidi questo significa che il progetto non verrà mai ultimato. Quei 3000 frame possono essere ridotti ad un ventesimo se ci si rifà a tecniche di sub-pixeling.

Per farvi comprendere ancor meglio quali vantaggi il sub-pixeling può portare alle vostre animazioni, date un’occhiata a questo sprite di The Fry Bat e fate molta attenzione al sub-pixeling all’interno del cappello e sulla bocca.

Sconsiglio tuttavia ai principianti dell’animazione in pixel art di buttarsi testa e piedi da subito nel sub-pixeling. Essere innanzitutto consci dei cluster in fase di animazione è ben più importante che ottenere animazioni fluide.

Ancor più che nelle illustrazioni statiche, nelle immagini in movimento ogni pixel ha una funzione importante. Non dimenticatelo mai.

Questo post è apparso originariamente su Indie Vault

Parte 3: Anche i pixel artist nel loro piccolo…

SEZIONI

5. Problematiche
   5a. Banding
   5b. Bad Anti-Aliasing
   5c. Linee seghettate (Jagged Lines)

5. Problematiche

Finora abbiamo compreso un po’ quali sono le tecniche principali per plasmare la griglia di pixel mantenendone il controllo. Questo però non basta per avere un’illustrazione pulita. È bene conoscere quali siano le difficoltà che si possono incontrare nel percorso illustrativo, con quali di queste si dovrà imparare a convivere e con quali cercare soluzioni alternative per rendere la nostra illustrazione più lineare.

Non ci si deve spaventare se si ripetono più volte nel corso della propria carriera gli errori che sto per elencare. Molti dei pixel artist di alto livello continuano a fare gli stessi errori che facevano quando hanno iniziato: l’abilità che hanno sviluppato nel tempo sta nel saper decidere quali degli errori ricorrenti siano passabili o aggirabili e quali richiedano lo studio di soluzioni alternative.

Quindi non fissatevi su un piccolo gruppo di pixel che non vi convincono, ma guardate il vostro lavoro per la sua interezza e comprendetene i pregi ed i difetti. Un giusto bilancio tra questi due elementi vi porterà ad un’illustrazione pulita ed apprezzabile.

Un’ultima nota importante: la maggior parte degli errori che saranno presi in esame hanno come principale difetto quello di evidenziare la griglia di pixel, esaltando certi cluster e soffocandone altri che magari sono più importanti.

Questo però NON significa che inserendo questi errori in un’illustrazione si avrà qualcosa di più “pixelloso” o “retro”. Non è una questione di stile: questi errori possono rovinare il design in senso assoluto. Se siete per uno stile più duro e netto non significa che dobbiate rimpinguare il vostro progetto con tutti gli errori esalta-griglia possibili. Anzi, proprio nei casi in cui vorrete affidarvi a stili rigidi sarà ancor più importante fare attenzione a dove mettere i pixel! AAAARGH!

5a. Banding

Sembrerà strano sentirlo dire, ma probabilmente il 90% delle illustrazioni in pixel art al mondo presenta problemi di banding.

Il banding si ottiene allineando due gruppi di pixel alle stesse coordinate spaziali, ottenendo così linee nette che esaltano la griglia su cui i pixel sono posizionati.

“Aspetta un attimo! Quindi il banding si ottiene semplicemente piazzando i pixel!”

Esatto, piccolo Timmy. È questo il motivo per il quale generare il banding è così semplice. Non è un errore derivato da molteplici passaggi o diversi utilizzi di tecniche sulla stessa illustrazione, ma semplicemente dovuto al cattivo allineamento dei pixel.

Diamo un’occhiata a degli esempi che mostrano i quattro casi più comuni in cui si verifica il banding.

Fat Pixel

Sotto forma di punto singolo (fat pixel), linea (fat line) o gradiente (staircase banding, il peggiore dei casi possibili).

Non è tra le forme di banding più sgradevoli, però, soprattutto sotto forma di linee, rischia di generare dei tagli nell’illustrazione, dando l’idea che una superficie sia composta di più sezioni (come due tasselli di un puzzle) non omogenee o appartenenti allo stesso piano visivo.

Una soluzione per il fat pixel è quella di estendere o restringere i cluster di pixel che si affiancano “pericolosamente” ad un cluster con le stesse coordinate spaziali. Nell’esempio che segue propongo una soluzione alquanto semplice per risolvere tale problema.

Banding indiretto (Skip-One Banding)

Per generare il banding non è sempre necessario che i pixel siano affiancati. Molto spesso il banding può risultare anche quando una linea di pixel ad alto contrasto si interpone tra due gruppi di pixel allineati. Questo succede essenzialmente perché l’occhio umano tende a colmare gli spazi negativi di piccole dimensioni o non al centro dell’attenzione.

Lo skip-one banding o banding indiretto (questo il nome di questa tipologia di banding) è tuttavia facilmente risolvibile. La modifica di anche un solo pixel di uno dei cluster che generano il banding può eliminare l’allineamento e quindi migliorare la leggibilità dell’immagine.

Hugging

Abbracciarsi è una cosa tenera e carina, ma quando cluster di pixel “abbracciano” un altro cluster il banding è inevitabile.

L’hugging (abbraccio) si verifica in particolar modo quando l’outline di una forma si allinea alla forma stessa. Questo è un errore abbastanza comune tra i novizi della pixel art, in quanto è facile pensare che per creare contrasto tra un elemento dell’illustrazione e lo sfondo basti circondare il suddetto elemento con un outline con luminosità inferiore a quella dell’elemento stesso.

È uno sbaglio del tutto comprensibile e tracciare una outline non è sbagliato, ma se si intende procedere in quella direzione potrebbe portare a risultati più soddisfacenti (e che non generino banding) l’approccio con outline ad alto contrasto (nero solido o giù di lì) o lo stesso utilizzo dell’anti-aliasing.

AA Banding

Se rileggiamo quanto abbiamo già scritto nella parte 2, l’anti-aliasing può essere incluso in un cluster anche non essendo composto dello stesso colore del cluster di appartenenza. Questo ci lascia intuire come anche l’anti-aliasing (essendo di suo una parte del cluster) possa generare banding.

Il banding derivato da AA è in senso lato associabile ad un altro problema comune nella pixel art, ovvero un uso eccessivo di AA, e scopriremo nella sezione successiva come poterlo risolvere. Arriva in 3… 2… 1…

5b. Bad Anti-Aliasing

Se volessimo dare un sottotitolo a questa sezione probabilmente sarebbe “in medio stat virtus”.

Uno degli errori più ricorrenti quando si utilizza l’anti-aliasing è quello di esagerare, in particolar modo nei casi in cui si cerca di ammorbidire linee i cui gradini di pixel sono molto lunghi. O si utilizza troppo anti-aliasing, oppure troppo poco.

Quando l’AA è troppo poco non riscontreremo alcun tipo di risultato ed avremo aggiunto solo colori in più alla nostra palette che non ci saranno utili in alcun modo, ma che anzi non faranno che aumentare il senso di seghettatura delle linee.

Quando invece l’AA è troppo, avremo come risultato un alone che si estende dalla forma principale, come un bagliore per nulla affascinante, che rende i bordi sbavati, come se fossero stati ritoccati con qualche bizzarro filtro totalmente alieno alla pixel art.

Non esiste una vera e propria regola per essere nel giusto punto intermedio, ma in generale è buona norma non utilizzare più di 3 passaggi di AA per “gradino” di pixel. Seguendo questa regola possiamo migliorare gli esempi precedenti in questa maniera

Un’altra buona direttiva da seguire riguarda la lunghezza di ogni passaggio di AA. Non è infatti consigliabile utilizzare un AA i cui livelli si restringano man mano che si allontanano dal cluster che cercano di sfumare.

Al contrario, è preferibile utilizzare una formula direttamente proporzionale: più ci si allontana dal cluster, più l’AA deve allungarsi. Ovviamente anche questa direttiva deve essere vagliata in base alle situazioni, e per esperienza personale non mi sono mai ritrovato a lavorare con un l’anti-alias che supera i 5 pixel di lunghezza.

Tuttavia questo tipo di consigli deve essere adattato sempre alle proprie esigenze.

5c. Linee seghettate (Jagged Lines)

Quando si tracciano delle linee in pixel art si ottengono risultati approssimativi e non sempre puliti (specialmente se ci affidiamo ai tratti gestuali richiesti dalle tavolette grafiche). In questi casi è sempre bene rivalutare le linee tracciate ed identificare i punti in cui si creano linee seghettate (jagged lines o, per coloro a cui piacciono i nomignoli, jaggies).

Le jagged lines sono uno dei principali motivi per cui è bene lavorare con finestre multiple, in quanto errori di questo tipo sono più facilmente identificabili quando si ha una finestra di controllo con l’illustrazione in scala 1:1. Basti guardare il seguente esempio per comprendere meglio questo concetto.

Nelle finestrelle sono presentate le versioni in scala 1:1 delle corrispettive illustrazioni e, come si può notare, nella versione dell’illustrazione in cui non è stata applicata alcun tipo di correzione (a sinistra), le jagged lines creano un effetto frastagliato che inficia la linearità della curva.

Anche nel caso delle jagged lines non esistono vere e proprie regole di correzione. In linea di massima si può dire che sui tratti dritti ogni gradino di pixel sulla linea deve essere dello stesso numero di pixel. Lì dove non sarà possibile mantenere i gradini di pixel uniformi (poiché la suddetta linea è posizionata ad una particolare angolazione), bisognerà strutturare la linee in base ad una sequenza ordinata.

Sulle curve il discorso è leggermente diverso, in quanto non è possibile enucleare una formula universale. In linea di massima se si vuole tracciare una curva uniforme, è consigliato tracciare gradini di pixel che si allunghino (o accorcino, dipende dal punto di vista) in maniera esponenziale.

Volendo, si può quasi dire che esistano formulette matematiche per definire certe curve: ad esempio si può partire dall’alto con una linea di 4 pixel, poi la si concatena con una da 3, poi un gradino da 2 pixel seguiti da due gradini da un singolo pixel ciascuno; per ripiegare la curva in senso contrario basterà riavvolgere tale sequenza di numeri (1-1-2-3-4). Si otterrà così un quarto di cerchio (facile intuire come chiuderlo!)

Ovviamente anche seguendo questa regola si possono riscontrare casi in cui la curva richiederà che la sequenza omogenea di gradini di pixel sia interrotta. Bisognerà quindi considerare il possibile utilizzo di anti-alias o di subpixeling o, in situazioni estreme, di una linea interrotta, in cui la curva viene spezzata a beneficio della linearità dell’illustrazione.

Si consiglia di considerare bene la propria decisione in merito, in quanto scegliere una tecnica non adatta allo stile illustrativo definito per il resto del progetto potrebbe risultare in un pugno in un occhio.

Questo post è apparso originariamente su Indie Vault

Parte 4: Season Finale

SEZIONI

6. Palette di colori
   6a. HSB
   6b. Nascita ed evoluzione
   6c. Palette e progressione colore
   6d. Priorità colore e grigio
7. Conclusioni

6. Palette di colori

Se il capitolo 5 vi ha un po’ depresso è ora di dare un po’ di colore alle nostre giornate da pixel artist. Letteralmente.

Questa sezione cercherà infatti di suggerire la metodologia migliore per costruire una tavolozza di colori che sia ordinata, pulita, controllabile e facilmente scomponibile. Se siete già artisti digitali probabilmente non troverete nulla di nuovo nei seguenti paragrafi, ma per amor di coerenza con il percorso che stiamo seguendo è bene recuperare certe nozioni ed applicarle al modus operandi tipico del pixel artist.

Dai, togliamoci il sassolino dalla scarpa ed iniziamo con le nozioni più noiose.

6a. HSB

Come tutti sappiamo, i colori in un ambiente digitale utilizzano dei modelli di colore di riferimento per poter essere schematizzati e visualizzati.

Tra i modelli di colore più riconosciuti troviamo il modello additivo RGB (Red Green Blue), che si basa sulla sovrapposizione dei tre colori rosso, verde e blu per generarne di secondari. La luminosità e l’intensità di un colore vengono stabiliti da quanto ognuno dei singoli colori sia presente (o assente) nella sovrapposizione. L’assenza totale dei tre colori primari dell’RGB (valore 0) avrà come risultato il nero, mentre la presenza di tutti quanti allo stesso tempo (valore 255) produrrà il bianco.

Riducendo in spiccioli questo concetto, si può immaginare questa mescolanza come proveniente da delle lampadine colorate: più la luce delle lampadine è intensa, più la suddetta luce diventerà bianca. Se invece spegniamo le lampadine avremo il buio, e quindi il nero.

L’RGB tuttavia è un modello di colore abbastanza complesso e poco intuitivo per l’illustrazione digitale, e soprattutto per la pixel art. Nella pixel art uno degli elementi più importanti in assoluto è il cosiddetto “valore” che altro non è che la luminosità del colore.

Controllare la luminosità del rosso, del verde e del blu in un modello colore RGB è semplice poiché basta escludere i singoli canali, ma la cosa si fa più complessa quando bisogna gestire la luminosità di colori derivati dalla mescolanza additiva dei tre colori.

Per poterci semplificare la vita in ambiente digitale (non parleremo adesso della stampa e del CMYK perché l’epistassi è dietro l’angolo) ci avvarremo di un modello colore figlio dell’RGB, identificato dalla sigla HSB (Hue Saturation Brightness, Tonalità Saturazione Luminosità).

Come possiamo notare già dal nome, l’HSB utilizza tre valori molto diversi dall’RGB, ed interpreta la luminosità come elemento indipendente… e tutto ciò è molto bello!!! Il vantaggio dell’HSB rispetto all’RGB sta nella rapidità di formulazione di un colore e del suo successivo aggiustamento.

La tonalità definisce l’identità del colore stesso, la saturazione la sua vividezza, ed infine la luminosità la sua presenza o meno. Non abbiamo bisogno di altro per poter illustrare rapidamente e senza intoppi.

6b. Nascita ed evoluzione

Ok ok ok… Queste cose le sappiamo già ed utilizziamo già gli slider HSB in Photoshop. Ma da dove si parte? Non esiste un metodo universale per la realizzazione di una palette in pixel art. Tuttavia sappiamo bene che, per la natura di questo medium, il numero di pixel (e di colori) presenti in scena saranno limitati e facilmente controllabili. Questa condizione è terreno fertile per estendere le nostre abilità di gestione dei pixel sul valore che questi hanno sulla scena.

Come si diceva in precedenza il valore di un colore indica la sua luminosità, e di conseguenza la sua presenza sulla scena. Nella pixel art il valore (leggi ancora una volta “luminosità”) è importante poiché in base alla luminosità dei vari pixel se ne può definire il contrasto. Ed il contrasto è definizione delle forme col giusto peso, e la definizione delle forme col giusto peso significa un risultato più vicino al design che si ha in testa. TUTTO TORNA!

Come si diceva poc’anzi non esiste un metodo universale per la creazione di una palette, ma possiamo definirne uno noi utilizzando ciò che anche gli altri artisti hanno dedotto dalle loro conoscenze del colore. In base a quanto detto finora la cosa più importante di tutte è il valore (o luminosità… non lo ripeterò più, giuro!), perciò perché non partire proprio da quello?

Non è un metodo tra i più comuni, ma è decisamente tra quelli che rendono più facile le cose man mano che la palette si evolve.

Si parte da un’illustrazione in scala di grigio in cui aggiustiamo solo il valore di ogni singolo colore. Una volta che siamo contenti del contrasto presentato dai singoli elementi della palette, possiamo aggiustare sfumature intermedie ed i valori generali.

Una volta definiti i valori e la loro progressione cambiamo tonalità e saturazione di ogni singolo elemento della palette per arrivare alla colorazione finale. Possiamo aggiungere in corso d’opera altri colori, o modificare i valori dei colori precedentemente definiti, tuttavia in entrambi i casi bisogna ricordare che ogni valore modificato o aggiunto nella palette non deve mai essere minore di quello del colore precedente o superiore a quello del colore successivo. Non avere una scala di valori omogenea produrrà errori di contrasto e leggibilità.

Un altro metodo molto usato per dar luce alla palette è quello di partire da due/tre colori di base (uno a massima luminosità ed uno a minima, ed opzionalmente uno intermedio) e, man mano che si definiscono i dettagli, aggiungere colori alla palette tenendo sempre in mente le regole sui valori.

Questo metodo è stranamente molto utilizzato dai principianti, nonostante preveda una certa consapevolezza dell’uso dei valori ed un certo intuito per il posizionamento delle tonalità sulla scala. Tuttavia nulla vi vieta di provarlo sin da subito, o di trovare un mix con il metodo precedentemente illustrato.

6c. Palette e progressione colore

L’organizzazione è tutto nella realizzazione di una palette coerente e funzionale. Quando si struttura una palette bisogna (almeno agli inizi) fare un piccolo sforzo e rimodellarla in base ad ogni cambiamento che può avvenire durante la lavorazione dell’illustrazione. Questo procedimento deve essere applicato soprattutto quando abbiamo più di una scala di colori (Color Ramp) nella stessa palette.

Prendiamo ad esempio una semplice palette di 4 colori con i valori in scala. A metà illustrazione decidiamo che dobbiamo creare un nuovo gruppo di colori perché vogliamo aggiungere un nuovo elemento di design o un nuovo dettaglio. Quindi aggiungiamo altri 4 colori. Tuttavia questi colori non sono indipendenti ed a sé stanti, in quanto anche loro sono formati da una scala di valori ed hanno una valore massimo ed uno minimo, proprio come i 4 con cui si è dato inizio all’illustrazione.

Con questa nozione in mente sappiamo bene che potremo utilizzare quei valori estremi come punti in comune ed impiegare quella base per aggiungere altri colori tenendo d’occhio il valore del colore di partenza.

Uno degli errori più classici nella realizzazione di una palette è quello di ignorare totalmente i valori ed il concept cromatico, riducendo la palette a semplici scalette accostate l’una all’altra. Non vi parlerò dell’inutilità a livello di design di questo tipo di pratica, ma vi basti dare un’occhiata a cosa significhi esplorare i valori in palette organizzate in questa maniera.

Distinguere le varie scale di colori e riorganizzarle in una palette ordinata è importantissimo per raggiungere uno scopo: capire le connessioni dei colori per definire quali tra questi siano ridondanti, quali riutilizzabili e quali accostabili per creare il contrasto desiderato.

Questo tipo di atteggiamento assume maggior rilevanza quando decidiamo di effettuare una variazione di tonalità (Hue Shifting). Normalmente una scala di colori la si definisce con un’unica tonalità variata nella sua evoluzione soltanto nella luminosità. Lo hue shifting consiste nella variazione della tonalità durante l’evoluzione della scala colore: per poterla ottenere basta definire una scala di luminosità, applicare un colore al valore più basso, e variarlo gradualmente man mano che ci si avvicina al valore più alto.

Questa operazione può essere effettuata anche modificando luminosità e saturazione, ma per amor di semplicità qui sotto verrà presentato un esempio in cui solo la tonalità varia.

6d. Priorità colore e grigio

Un’ultima piccola nota sull’argomento delle palette va spesa su una nozione molto importante: ogni colore varia in base ai colori a cui è affiancato.

Nella pixel art gli stacchi tra i colori sono netti, ed un accostamento di un colore con un altro può rendere più o meno evidente la griglia dei pixel o un particolare cluster (vi consiglio di rileggere quanto detto sul dithering, sui cluster, e sul banding in generale). In questo caso ciò che si otterrebbe è che taluni elementi inficerebbero la leggibilità del prodotto finito.

Tra le varie vie che si possono intraprendere nella creazione di una palette si possono identificare tre errori molto comuni.

Il primo di questi è la scarsa luminosità dell’illustrazione. In genere la scarsa illuminazione è dovuta ad una scarsa distribuzione dei valori lungo la palette. Questa scarsa luminosità genera come effetto aggiuntivo il basso contrasto e la conseguente difficoltà di lettura. La soluzione a questo problema è molto semplice: basta aumentare il divario dei valori tra i singoli colori della palette.

Altro errore molto comune è quello di usare colori troppo saturi. Per l’occhio umano e per una mano inesperta con i software di grafica è molto semplice riconoscere i singoli colori alla loro massima saturazione, ovvero quando i colori letteralmente gridano il loro nome.

Presi individualmente, i colori con alta saturazione si possono usare, ma accostati ad altri colori ad alta saturazione rischiano di diventare troppo pesanti alla lettura. Bisogna quindi mantenersi sempre su un giusto livello di saturazione e, per scoprire quale livello di saturazione del colore sia il più adatto, studiate il materiale ed il tipo di luce che state per inserire nella vostra scena.

Infine l’errore più comune, subdolo e difficile da evitare, riguarda la priorità dei colori. In una scala di colori ogni elemento della palette procede per l’appunto su una scala in sequenza. Talune volte nella costruzione della palette vengono inseriti dei colori che ad una prima occhiata sembrano funzionare, ma che in un secondo momento creano contrasti poco piacevoli alla vista.

Nel primo caso dell’esempio sottostante l’ombreggiatura (visibile sul vestito ed in particolar modo sulla manica) presenta un valore logicamente coerente con il blu chiaro, ma che entra in contrasto con il viola desaturato usato come colore più scuro. Nel secondo caso quella stessa ombreggiatura è stata sostituita (a scopo esplicativo) con un complementare del blu: l’effetto è un contrasto che brucia l’occhio, decisamente non coerente e pulito. L’ultimo caso presenta la scala cromatica corretta, con l’ombreggiatura alla giusta tonalità e saturazione.

È importante ricordare quindi che le connessioni tra i colori all’interno di una palette vanno analizzate, provate, ed infine sostituite se non funzionali. Non lasciate i colori sbagliati dove sono, e soprattutto non create spazi inutili in una palette.

I colori ridondanti vanno eliminati: nel momento in cui scoprite dei colori ridondanti nella vostra palette, probabilmente non ve ne siete ancora accorti, ma avete già un colore che è possibile utilizzare come sostituto. Come ad esempio i grigi, che stanno alle palette come il tofu alla cucina cinese. Così come il tofu per consistenza rimpiazza un alimento, i grigi possono rimpiazzare i colori mancanti in una palette… e così come il tofu assorbe i sapori come una spugna, così il grigio accostato ad un cluster più grande ne assorbe a livello percettivo la tonalità.

Diamo un’occhiata all’illustrazione sottostante ed alla sua palette. Come si può notare il grigio riesce a far da ponte tra due scale di colori nella stessa palette, ed all’interno dell’illustrazione assume un ruolo tonale. I colori utilizzati al centro del cluster lilla, nonostante sembrino di una tonalità vicina al lilla, non hanno alcun tipo di saturazione o tonalità. Sono grigi, ed a livello percettivo assorbono il colore a cui sono accostati.

In realtà il grigio è particolare poiché, non essendo influenzato da fattori tonali o di saturazione, semplicemente si lascia riempire dalle tonalità vicine. In realtà però tutti i colori modificano la loro identità percettiva in base all’ambiente in cui sono posizionati.

Per comprendere meglio queste nozioni è cosa buona e giusta studiare le palette di colori di vecchi dispositivi e magari iniziare ad illustrare utilizzando proprio quelle. Ci sono palette a 4 colori (Game Boy e CGA), a 16 (Commodore 64, ZX Spectrum), a 27 (Amstrad CPC), a 64 (Sega Master System) che non aspettano altro che essere rivisitate.

Ognuna di queste ha punti deboli e di forza: imparate a sfruttarli ed un giorno sarà più semplice anche per voi strutturare la vostra personale palette.

7. Conclusioni

Ci sarebbe davvero tantissimo altro da dire, ma come inizio direi che ciò che è stato scritto è più che sufficiente per capire come girano gli ingranaggi di base della pixel art.

I consigli a termine di questo percorso rimangono sempre gli stessi: mantenete almeno inizialmente un profilo basso ed utilizzate documenti piccoli, con pochi colori e forme semplici. Less is more. Studiate la pixel art altrui e degli illustratori professionisti, ma soprattutto analizzate gli sprite dei videogiochi alla ricerca di nuove informazioni metodologiche utili (sono facilmente ritrovabili su internet).

Ma soprattutto e sopra ogni cosa: non crogiolatevi nelle poche nozioni che imparerete all’inizio e non impigritevi, ma cercate sempre di forzarvi al di fuori della vostra safe zone e sperimentate, provate ed imparate.

Detto questo, mi è venuta voglia di cibo cinese. Buon appetito a tutti…

?????????????

NN81 sto “convertendo” i post originali nel formato usato qui su Flarum, ci metterò un po’ e nel frattempo i post potrebbero apparire “rotti”, ma tutto regolare 😃

ah ok, comunque aspetto un consiglio sull’uso di Paint Shop Pro come tool per fare Pxart e un po’ di tutto

NN81 Sfortunatamente non ho mai utilizzato Paint Shop Pro. So che c’è gente che lo usa per la pixel art ma non ho mai conosciuto di persona nessuno di loro. Alla fine per quello che vedrai negli altri capitoli di questa introduzione, qualsiasi programma va bene perché non faccio riferimento a nessun workflow specifico ma solo a quello generale, quindi puoi usare il software che vuoi 😉

Misbug ok lo prendo come un “può andare”!! ma volevo giusto avere un riscontro ecco, non per altro perchè conosco ed saltuariamente uso (che parolone XD) questo tool dal ’95 e sono abituato di brutto mi spiacerebbe dover passare ad altro, avevo provato anche Gymp più volte mi è sempre sembrato molto ricco e dal gran potenziale ma non mi ci sono mai trovato con l’interfaccia… c’ ho provato credetemi ma proprio non mi andava..

NN81 Tranquillo ognuno inizia con gli strumenti che conosce meglio. Poi ovviamente con il tempo se l’interesse per un particolare medium cresce, cresce anche l’interesse per quelli che sono strumenti più rapidi. Alla fine ognuno è libero di costruire il proprio workflow per come si sente più a suo agio, per lo scopo di questa introduzione ho proposto i software più classici.

ottima anche la seconda parte!! mi ha colpito molto soprattutto quella piccola animazione col subpixeling!! è incredibile quanto più fluida appaia a confronto di quella “normale”!! a me servirebbe molto dovendo lavorare ad animazioni con pochissimi frames..

ho trovato un tool BELLISSIMO per cominciare e fare pratica!!! semplice, veloce essenziale e completo al tempo stesso!! GRATUITO
qua lo linko per chi fosse interessato
http://www.piskelapp.com/
verso fine pagina c’è il link per il download della versione “desk” offline (perchè quella standard si usa online), peso 70MB circa, una semplice cartella da piazzare dove volete e lanciare l’eseguibile al suo interno.

NN81 ho trovato un tool BELLISSIMO per cominciare e fare pratica!!! semplice, veloce essenziale e completo al tempo stesso!! GRATUITO

Di open source ce ne sono vari altri, ad esempio Aseprite o GrafX2.

so che è mooolto vecchio come post. ma una domanda preme nella mia testa…. come hai fatto a scalare le immagini senza perdere qualità? sto provando in tutti i modi ma bleahhh grazie

E’ molto semplice, basta usare Nearest-neighbor (Vicino più prossimo) quando scali un immagine stando attenti alla risoluzione, quindi bisogna scalare sempre raddoppiando la grandezza dei pixel in modo omogeneo:
Ad esempio se hai una immagine 30×30 poi scalarla a x2 (60×60), x3 (90×90), x4…ecc…