Formati, colori… risposte!

Qualche settimana fa un mio cliente mi ha chiesto se il suo logo era adatto a essere usato su uno schermo gigante in una palestra. Il responsabile della palestra gli aveva dato un elenco di caratteristiche che per il mio cliente erano un mistero: gli ho spiegato brevemente il senso e ho preparato il documento.
Sono episodi che capitano spesso e magari è capitato anche te e per questo motivo oggi parliamo di formati e colori delle immagini digitali che usiamo tutti i giorni: capirli meglio aiuta a ottenere risultati migliori.
Abbiamo già parlato di come scegliere i colori per la tua immagine coordinata, ma una volta scelti, come puoi usarli con i vari strumenti di cui hai bisogno? Come si ottiene sempre lo stesso colore?
Per esempio, le formule di colore della stampa digitale o della serigrafia sono diverse da quelle che si usano in una presentazione o sul web: per capire meglio cosa fare, cominciamo dividendo i colori in 2 gruppi, colori luce e colori pigmento

I colori luce – Sintesi additiva

I colori luce nascono da 3 colori base: Rosso, Verde, Blu (Red, Green e Blue), che sommati sotto forma di raggi di luce producono luce bianca. Se questi sono assenti il colore finale è il nero. In pratica, luce e buio.
Colori luce

RGB

Red, Green, BlueIl più usato fra i modelli di colore esistenti, è il risultato delle combinazioni dei 3 colori Rosso, Verde e Blu, con valori che partono dallo 0 al 255 ciascuno, per un totale di 16.777.216 colori possibili. È da qui che ricaviamo la prima formula di cui parleremo.
Facciamo un esempio e scegliamo un colore: arancione!
R: 254 G: 80 B:0
Arancione formula RGB
Avere i colori del tuo logo “tradotti” in uno o più colori RGB può permetterti di usarli in sicurezza in pubblicazioni finali molto diverse: uno schermo, una TV, un cellulare, una animazione o un video, una presentazione, un sito web, una app.
Conserva e consulta sempre i valori RGB che ti interessano e li avrai sempre sotto controllo. Tieni anche presente che ogni schermo usa profili di colore diverso e il colore potrà risultare sempre un po’ diverso su ciascuno di essi, ma sarà comunque sempre coerente con l’originale. Esistono anche alcuni programmi che offrono schemi di colore di soli 216 colori safe for web o wysiwyg, cioè sicuri per l’uso in tutti i browser esistenti e da tenere presenti per i progetti web.Formula colore HEX safe web per il nostro arancione.

Si può usare l’RGB nei formati JPEG, PNG, GIF, i più utili e utilizzati per i progetti per lo schermo o per il web.
L’RGB invece non funziona per la stampa, bisogna sempre convertirlo e più avanti spiegherò come farlo.

HEX code

Partendo dei valori RGB possiamo capire come nascono i colori HEX Code (esadecimale), usati principalmente per i progetti web.
Questo sistema codifica i colori usando 16 caratteri (10 numeri e 6 lettere) 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F dove la F è pari a 15 e lo zero pari a 0. Le formule del codice HEX sono formate da 6 cifre: le prime 2 cifre sono i valori di R (Red/rosso), le 2 cifre successive sono i valori di G (Green/verde), le ultime 2 cifre sono il valore di B (Blue/blu). La formula viene preceduta da un simbolo “#”:
Come si crea la formula HEX?
Ecco il nostro arancione:
#FF6600
Lo stesso arancione con formula HEX
Puoi usare il sistema HEX in formati come per esempio JPEG, PNG, GIF, i più utili per i progetti per lo schermo o per il web.

Indexed Color

Questo modello di colore è usato un po’ meno, di solito per immagini con superfici dai colori solidi (proprio come i loghi), per evitare di avere documenti molto pesanti oppure con texture o moire pattern indesiderate che a volte appaiono in alcuni documenti rgb.
Le palette index usano colori solo fino a un massimo di 256 scelti dai 16.777.216 colori RGB. In sostanza: più colori ci sono nella palette, più pesante è il documento, meno colori invece danno vita a un documento più leggero ottimo per grafici un po’ piatti ma non raccomandabile per le immagini coordinate o per le foto.
2 colori in palette index possono essere giusti per un grafico in linea (line art) invece si può arrivare fino a 256 colori con una foto di buona qualità sapendo ottimizzare le immagini.
Tavola colori "index" Tavola colori "index"
Puoi usare questo modello di colore con i formati GIF (anche quelli animati) e PNG, nel caso il tuo progetto sia un progetto per lo schermo.
Negli ultimi anni questo modello è stato sostituito con l’uso frequente di index color salvato in formato PNG, utile per la qualità delle immagini e l’alta compressione.

Riassumiamo: Se il tuo colore scelto è un colore luce (RGB, HEX o Index) allora sei pronto per i progetti per lo schermo (animazione-video, presentazioni, app, web, ecc.) e devi solo scegliere il formato più comodo da usare (PNG, JPEG, GIF, ecc.).
La risoluzione giusta va dai 72 dpi per i progetti web a una più alta a seconda del progetto, per esempio nei video: in questo secondo caso il consiglio è di parlarne con un professionista.

Siamo appena a metà strada, ora andiamo a conoscere gli altri modelli di colore.

I colori pigmento – Sintesi sottrattiva

I colori pigmento si comportano esattamente al contrario di quello che succede con i colori luce: se li metti insieme producono il nero, se sono assenti il risultato è il bianco.
Colori pigmento
Siamo sicuramente più abituati a questi colori perché li sperimentiamo fin da piccoli, basta pensare ai pigmenti colorati che mescolandoli producono altri colori. Questi colori possono essere prodotti a partire da 5 colori di base che usiamo per creare molti altri, per esempio per dipingere un quadro, con pintura ad olio o magari tempere o acquarello: giallo, magenta, ciano, nero e bianco, colori base che cambiano da tecnica a tecnica o a seconda dello scopo che ha l’opera d’arte o il progetto.
Per la stampa il discorso non cambia, esistono i colori base che mescolati producono altri colori. Ci sono molte tecniche per la stampa come la serigrafia, la stampa digitale e la diffusissima offset che lavora con inchiostri un po’ trasparenti.

CMYK o Quadricromia

CMYK quadricromia per la stampa
La quadricromia è uno dei modelli di colori più usati, soprattutto da chi ha necessità di stampare. I colori della quadricromia sono espressi dalla formula CMYK: ciano (C), magenta (M), giallo (Y) e nero (K). Queste formule sono formate dalla percentuale (da 0 a 100) del colore applicato alla superficie di stampa: la densità del colore si regola attraverso di una trama di punti e tramite la vicinanza fra i puntini, mentre la percentuale del colore si regola con la dimensione di ogni punto (più grande è il punto, più percentuale di colore si applica e viceversa).
La tecnica di stampa che più usa questo modello di colore è l’offset che consiste nella sovrapposizione di inchiostri base trasparente per produrre molti colori: utilizzato praticamente per tutte le riviste e le pubblicità, è un sistema versatile, che garantisce risultati di buona qualità e che consente di abbattere i costi quando si stampa in grandi quantità.
Ecco il nostro arancione:
C:0 M:69 Y:100 K:0
Arancione in formula CMYK
Nell’ultimo decennio si è fatta strada anche una stampa a 7 colori, dove ai 4 colori di base si aggiungono Arancione e Verde per avere una gamma di colori più ampia e stampare foto in altissima qualità con colori ogni volta più vicini alla realtà. Chi ancora non si accontenta di questa qualità può arrivare al CMYK + 3 aggiungendo anche il Viola. Questi progetti ovviamente comportano un lavoro molto importante di pre-stampa per la separazione dei 7 colori (un vero lavoro da esperti), e di conseguenza costi decisamente più alti.
Stampa a 7 colori CMYK + Verde, Arancione e Viola
Oltre alle stampe in offset tradizionale c’è la stampa digitale, che ha una minore qualità ma un prezzo più vantaggioso se le stampe sono poche. La stampa digitale usa il formato di colore CMYK ma non segue la tecnica di inchiostri trasparenti e in pratica funziona come una stampante casalinga di alta qualità.

Quando il tuo logo o le tue immagini digitali dovranno essere stampati in offset, serigrafia o anche in digitale a colore è molto probabile che il documento debba essere in CMYK: ricordati sempre di avere la risoluzione adatta per la stampa, a 300 dpi alla dimensione finale di stampa. I pixel non devono essere visibili: significa che non devi forzare l’immagine ingrandendone una piccola, pena risultati disastrosi. I formati raccomandabili per la stampa con queste caratteristiche sono TIFF, EPS o PDF.

Pantone® (Matching System)

Probabilmente è questo il termine più usato o che hai sentito più volte quando si parla della tua immagine coordinata. È il colore più puro, punto di riferimento per la conversione nelle altre formule sia per lo schermo, sia per la stampa.
Pantone® Matching System è un sistema univoco di codifica dei colori per stampare in tutta sicurezza un colore che sarà sempre uguale ovunque stamperai e in tutte le stampe che farai. I codici Pantone assegnano una miscela di inchiostri a ogni colore, garantendo lo stesso colore sempre e ovunque. Negli anni, Pantone® ha sviluppato moltissimi cataloghi diversi e anche un software per ogni necessità: per la stampa di colori diretti su carta patinata lucida o per carte opache, sia cataloghi metallizzati, pastello e anche neon, per tradurre la formula CMYKCMYK +Verde Arancione e Viola, per altri metodi di stampa come per i tessili (TPX), home & interiors e perfino per i trucchi come Sephora (guarda qui!). Non mancano nemmeno i cataloghi per il web e il suo RGB.
Se il tuo logotipo ha già i suoi codici Pantone® assegnati, ricordati di tenerli sempre a portata mano, ti potrebbe capitare di averne bisogno.
In questo caso il nostro arancione sarebbe diventato più o meno un:
Orange 021C (Pantone® Solid Coated)
Il nostro arancione in Pantone®
In teoria lo stesso codice Pantone® dovrebbe avere una traduzione coerente su ogni tipo di catalogo (tecnica, mezzo, ecc.) ma il consiglio migliore è sempre fare prove di tutto, sia per il web che per la stampa.
Se stampi un Pantone® diretto, saranno colori solidi e quindi gli inchiostri vengono stampati già pronti direttamente sulla carta, allora, ogni codice Pantone® contenuto nel tuo documento verrà stampato come un colore e conterà come un inchiostro usato per la stampa: prova a creare questo documento con questi Pantone® usandolo in tutti gli elementi del tuo design (testo, schemi, grafiche, ecc.) e limitati a 3 colori. Con 4 colori infatti conviene stampare in quadricromia e se il tuo budget è ridotto puoi provare a convertire i tuoi Pantone® a CMYK.
Personalmente, se il progetto lo permette preferisco stampare i colori diretti con stampa serigrafica per la sua qualità artigianale e la vitalità del colore, anche se purtroppo è diventato un metodo di stampa molto costoso.

1 colori diretto (anche 2, 3 e 4)

I documenti per la stampa del bianco e nero, devono essere creati con un solo colore (grayscale o bitmap) come sempre per la stampa a 300 dpi: i formati più indicati sono Tiff, eps, pdf o bmp. Se sei già più esperta, puoi giocare con Photoshop® e modificare i documenti in modo monotone, duotone, tritone e quadtone, con risultati molto interessanti.
Giocando con i toni

Riassumiamo: Se devi stampare in bianco e nero usa CMYK o CMYK + 3, così come Pantone® diretto. Salva i documenti come TIFF, EPS, PDF (o BMP solo in certi casi, come in bianco e nero). Ricordati sempre della risoluzione 300 dpi. Indica se i colori usati sono Pantone®, altrimenti indica la quadricromia. E ricorda: queste immagini digitali, sistemate con questi formati, risoluzione e colori non vanno bene per il web.

Consiglio: se riesci fai una chiacchierata con lo stampatore prima di cominciare, invia i documenti e assicurati che tutto sia a posto e chiaro prima di stampare, che i tuoi documenti siano coerenti con il preventivo che hai (quantità di colori da stampare, dimensioni, carta, metodo di stampa, ecc.). I servizi di stampa online hanno sempre un telefono o una chat e di solito sono molto disponibili a rispondere alle domande, inoltre hanno un sovrapprezzo accessibile per la revisione dei documenti che conviene sempre acquistare.

I convertitori

Se sei intraprendente e molto decisa, ti svelo qualche segreto per la conversione dei colori che preservi il più possibile i colori della tua immagine coordinata: consulta uno dei siti seguenti, inserendolo nel campo apposito il colore di base e avrai i risultati.
Tieni sempre presente che sono semplici convertitori online, per i colori per la stampa fai qualche prova o controlla direttamente il tuo catalogo Pantone® prima di stampare:
Produce risultati anche di codici Pantone®:
http://rgb.to/
Per il web, molto pratico:
http://www.colorexplorer.com/colorpicker.aspx
Per trovare un colore facilmente se hai solo un’idea:
http://www.pantone.com/color-finder
In ogni caso, conviene sempre chiedere il parere di un esperto perché non tutte le regole valgono per tutti i casi.
E tu, ti sei trovata in questa situazione qualche volta? Come hai risolto fino a oggi questo problema?

Glossario

PNG: Portable Network Graphics
JPEG: Join Photograph Expert Group
EPS: Encapsulated PostScript
GIF: Graphics Interchange Format
PDF: Portable Document Format

Nydia Cuevas

Sono una graphic designer, mi piacciono le texture; posso perfino fermarmi a fotografare quelle sui tombini stradali. Sono particolarmente attratta dai caratteri tipografici, mi piace vederli, crearli e impaginarli. Amo i vecchi metodi di stampa, la carta e l’odore dell’inchiostro, i torchi, la serigrafia e letterpress.

Sito | Facebook | Twitter | Instagram | LinkedIn

1 thought on “Formati, colori… risposte!”

Leave a Comment