Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Bring out your brand - Web Marketing strategies
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a long time marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

You may be interested in

Case study: IED Open Day, building a font by hand... literally

Case study: IED Open Day, building a font by hand... literally

These days graphic design is mainly the result of software tools. Here's a case study where a brand is designed with glue and scissors

Last published

How to design a FAKE B2C brand for a real B2B service

How to design a FAKE B2C brand for a real B2B service

Interesting case study where to advertise B2B services we created a fake B2C product in a guerrilla marketing campaign.

Irritated by your blog performance? Boost it using the cloud!

Are you using the world's fastest hosting? If you have a bad architecture, your blog won't have a great performance. Here is the ultimate solution.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Editor's pick

Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.
newsletter

Stay informed on digital strategies

RSS feed

Spazio colore e calibrazione

Published on 4/27/2011
Spazio colore e calibrazione

Ogni tecnologia di visualizzazione ha dei colori che non riesce a riprodurre e che deve perciò trasporre matematicamente all’interno dell’insieme dei colori riproducibili.
Uno spazio colore di lavoro (GAMUT) è l'insieme di colorazioni gestite matematicamente dall'applicazione interessata o più semplicemente i punti di massimo e minimo rosso, verde e blu:

  • sRGB (ormai affermatosi come standard) è uno spazio colore di lavoro e non deve essere utilizzato come profilo monitor;
  • Adobe RGB 1998 ha invece un gamut più ampio e viene usato se si devono eseguire intensi fotoritocchi e poi stampare in quadricromia (in ambiti tipografici come pubblicazioni ed altro) o presso laboratori fotografici professionali (si noti però che il 99% dei laboratori accetta solo sRGB).

I programmi che supportano la gestione colore (Adobe Photoshop ad esempio) richiedono la calibrazione monitor per collimare il più possibile le variazioni tra lo spazio colore di lavoro e le caratteristiche fisiche del monitor: ciò che vedremo non è dunque l'immagine, ma l'interpretazione dello spazio colore di lavoro attraverso il profilo monitor o profilo colore (risultato della calibrazione).
Il profilo colore si può creare con programmi di taratura visiva (Adobe Gamma ad esempio) o con strumenti di calibrazione (ColorVision Spider 2 ad esempio): il profilo prodotto sarà basato sugli standard ICC/ICM e sarà caricato ad ogni accensione del sistema affinché possa dire alla scheda video quali segnali emettere per poter aver un monitor colorimetricamente perfetto; la colorimetria del monitor sarà comunicata anche a tutti i software che, come Photoshop, sono in grado di interpretarla.
Esistono monitor di fascia elevata (i monitor Eizo ad esempio) dove la calibrazione è hardware, dove cioè il profilo colore viene salvato all'interno della memoria del monitor sotto forma di una LUT (LookUp Table): in questo caso sarà il monitor stesso a gestire i colori e non la scheda grafica del PC (non viene infatti prodotto nessun file ICC/ICM).

Tra i comuni errori da evitare c'è l'assegnazione di uno spazio colore di lavoro uguale al profilo monitor, ciò costringe le variazioni all'interno delle specifiche caratteristiche del display utilizzato.
Il modello colore (CMYK, RGB, Lab, ecc…), da non confondere con lo spazio colore, è invece la metodologia utilizzata per riprodurre i colori su un determinato supporto (metodo additivo, sottrattivo, ecc…): attenzione che il passaggio tra modelli colore differenti, normalmente non è reversibile senza perdite.

Cambio del profilo colore

Il cambio del profilo colore di un'immagine è cosa che si rende necessaria quando si deve visualizzare l'immagine su un dispositivo differente e si vuole verificare la corrispondenza dei colori (ad esempio se si deve stampare una foto). Per fare ciò dunque, oltre al suddetto profilo di calibrazione del monitor, bisogna averne uno della periferica di output. Il sistema di gestione del colore usa questo profilo per applicare correttamente i colori di un documento ai colori della gamma dello spazio cromatico della una periferica di output. Nel caso della stampa, il profilo di output deve inoltre tenere conto di specifiche condizioni di stampa, quali il tipo di carta e di inchiostro: ad esempio, la gamma di colori visualizzata su un foglio di carta lucida è diversa da quella visualizzata su un foglio di carta opaca.
Dopo la conversione sarà possibile apportare altre eventuali modifiche per "recuperare" eventuali colori che si fossero persi o addirittura cambiati. Ad esempio le fotografie in bianco e nero, post-prodotte nello spazio sRGB, una volta convertite in quadricromia potrebbero acquisire delle dominanti (per ovviare al problema, desaturare nuovamente l'immagine dopo la conversione in CMYK). Attenzione però che in quadricromia il comando di desaturazione crea un’immagine rosata a causa di un problema fisico degli inchiostri: a parità di copertura di ciano, magenta e giallo, il ciano risulta deficitario ed emergono gli altri due. Per questo motivo il grigio neutro in CMYK si ottiene in modo diverso a seconda degli inchiostri utilizzati. Giusto per dare un'idea, un buon grigio neutro si può ottenere con 50% C, 41% M, 41% Y.: in Photoshop aprire la finestra dei Livelli e fare una semplice correzione di gamma spostando il valore del ciano da 1.0 a 0,85 e quello del magenta e del giallo a 1,15.

Browser Internet

La maggior parte dei programmi di navigazione Internet sono in grado di utilizzare l'eventuale profilo colore incorporato nell'immagine (in alcuni casi l'opzione va attivata), convertendo il colore al profilo del monitor (attenzione che i browser non applicano nessun profilo ai colori codificati nel codice CSS, dunque potrebbero risultare delle disparità se un'immagine ha come sfondo lo stesso colore dell'area HTML in cui viene collocata).
Se l'immagine visualizzata sul browser è differente da quella visualizzata ad esempio con Photoshop, le cause possono essere le seguenti:

  1. L’immagine non è stata convertita in sRGB e non ha un profilo incorporato (per esempio è in Adobe RGB senza profilo).
    Se l’immagine non incorpora il profilo, alcuni browser (per esempio Firefox) assumono sRGB e fanno la compensazione monitor mentre altri (per esempio Safari) non fanno la compensazione monitor. In entrambi i casi i colori sono sbagliati.
  2. L’immagine è stata convertita in sRGB ma non ha il profilo sRGB incorporato (cioè è sRGB senza profilo).
    In questo caso alcuni browser (per esempio Firefox) assumono sRGB e fanno la compensazione monitor e dunque i colori sono corretti. Altri browser (per esempio Safari) non fanno la compensazione monitor e dunque i colori sono sbagliati se il monitor non ha il gamut di sRGB e sono corretti se il monitor ha gamut sRGB.
  3. Il browser non fa la compensazione monitor.
  4. Il monitor sul quale è aperto il browser non ha un profilo assegnato dal sistema operativo (può succedere solo su Windows).
  5. Il sito che ospita la foto elimina il profilo (e probabilmente anche altri metadati) dalla foto stessa.
    Questo è il caso di molti forum, blog e anche di Facebook. In questo caso non c’è rimedio.

E' importante dunque convertire sempre le immagini per il web in sRGB.
Si noti che le funzioni di esportazione per il web dei programmi Adobe, incorporano il browser predefinito per visualizzare l'anteprima.

Monitor Wide-Gamut

I monitor wide-gamut (che lavorano dunque nello spazio Adobe RGB) meritano una spiegazione a parte, succede spesso infatti, con browser che non hanno una completa gestione del colore, che le immagini sRGB risultino ipersature: questo capita quando le immagini sRGB vengano interpretate come Adobe RGB. Analizziamo i casi Internet Explorer e Firefox.

  • Internet Explorer 8: ignora i profili incorporati nelle immagini, che risultano dunque ipersature (vengono interpretate come RGB puro).
  • Internet Explorer 9: legge i profili incorporati, ma converte tutto nello spazio sRGB, senza poi mappare il risultato nel profilo del monitor, dunque le immagini risultano ipersature.
  • Firefox 3.5: legge e interpreta correttamente i profili incorporati di versione 2.
  • Firefox 4: legge e interpreta correttamente i profili incorporati di versione 2 e 4. Attenzione però che le immagini senza profilo incorporato, su un monitor wide-gamut vengono invece interpretate come Adobe RGB e dunque risultano ipersature.

Senza farsi venire il mal di testa per comprendere tutte le implicazioni di un monitor wide-gamut, basta tenere in mente le seguenti due regole:

  1. Se si utilizzano monitor wide-gamut usare solo programmi che sono sia in grado di leggere correttamente i profili incorporati nelle immagini, ma anche poi di convertirli nel profilo del monitor.
  2. Includere il profilo nelle immagini dà maggiori possibilità che altre persone (anche con monitor da comuni mortali) riescano a vederle correttamente (anche Safari ad esempio interpreta correttamente i profili).

You are the reader number 2,659.

Comments

comments powered by Disqus
Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Painting with the light

Next article

Venice - The libertine carnival

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed
Blog

Scroll to top