Questo post è apparso originariamente su Indie Vault
Parte 4: Season Finale
SEZIONI
- Palette di colori
6a. HSB
6b. Nascita ed evoluzione
6c. Palette e progressione colore
6d. Priorità colore e grigio
- 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...
