Cosa devo fare per quanto riguarda il profilo colore durante la progettazione per il Web?


15

Ho letto questo articolo di Doug Avery in cui spiega come disabilitare la gestione del colore in Adobe Photoshop e l' articolo di follow-up in risposta al tumulto dei commentatori che lo dibattono e supportano sRGB, anche se non sono ancora convinto su quale tecnica io dovrebbe applicarsi nel mio flusso di lavoro personale.
Da quello che ho raccolto durante la lettura dell'articolo (per favore correggimi se sbaglio), il modo corretto di gestirlo sarebbe far sì che Photoshop gestisca i colori come sRGB e faccia uso dei colori di prova quando è necessario Anteprima "fedele" del tuo lavoro.

Al momento ho un intero progetto di sito Web che è stato progettato con profili colore disabilitati. Ho iniziato in questo modo perché mesi fa avevo notato che i colori resi da Photoshop, sebbene riportati correttamente dallo strumento Contagocce di Photoshop , non corrispondevano quando misurati da uno screenshot a quello che stavo vedendo in Google Chrome all'apertura dell'immagine esportata come PNG.
Dopo una rapida ricerca mi sono imbattuto nel post che ho citato in precedenza e ho applicato i suoi suggerimenti alla cieca (senza nemmeno notare il seguito o leggere i problemi con esso). Da allora, non ho avuto problemi: prendo screenshot del mio lavoro in Photoshop e li carico per lo sviluppatore. Riesce a vedere gli stessi colori che vedo e uso quando sviluppo il design, e non devo saltare attraverso i cerchi per vedere cosa sto effettivamente facendo.

Le mie domande:

  • È davvero necessario utilizzare sRGB in un web design (capisco le implicazioni di non usarlo in qualcosa come la fotografia o la stampa) quando aggiunge solo più lavoro costringendoti a usare Proof Colors ? (È così che la vedo, per favore correggimi se sbaglio)

  • Poiché il salvataggio con un profilo ICC porterà alcuni browser ad applicare correttamente il profilo mentre altri lo ignorano, l'articolo dice anche che è probabilmente la migliore idea progettare semplicemente con sRGB e quindi salvare senza il profilo ICC . Questo non vanifica in primo luogo lo scopo di utilizzare il profilo colore? O sto interpretando male ciò che dice l'articolo?


1
Non penso che la risposta di Marc Edwards sia giusta. Se imposti il ​​tuo profilo colore su "monitor", il tuo colore sarà perfetto per una sola persona: tu! sRGB consente a una più ampia gamma di persone di visualizzare in modo più coerente. Leggi questo link Offre le migliori informazioni che ho trovato sulla questione. gballard.net/psd/saveforwebshift.html

Risposte:


5

La mia opinione (a volte controversa): le persone che raccomandano di usare sRGB per l'interfaccia utente e il web design sono pazze. Ecco perché.

Perché la gestione del colore funzioni per la progettazione dello schermo, ci sono tre cose importanti che devono accadere.

  1. L'immagine deve essere creata utilizzando il flusso di lavoro corretto.
  2. L'immagine deve essere salvata con il profilo colore ICC corretto.
  3. L'immagine deve essere visualizzata correttamente, aderendo al profilo dell'immagine e all'ambiente in cui viene visualizzata (browser, sistema operativo, ecc.).

Se non sono disponibili tutti e tre, la gestione del colore non funziona affatto. Avere una o due di queste cose significa che l'intera catena è rotta.

Ed ecco il problema: tutti i PNG e le GIF salvati da Photoshop non possono avere profili ICC, quindi il numero 2 non è possibile nella maggior parte dei casi (i JPEG possono avere profili però). E molti browser non si comportano correttamente, quindi anche il numero 3 è uscito in molti casi.

Se stai visualizzando una foto sul Web, l'opzione migliore è quella di convertire in modo distruttivo in sRGB e incorporare un profilo ICC sRGB e utilizzare solo JPEG. Se stai costruendo elementi dell'interfaccia utente Web, l'opzione migliore è impostare Photoshop in modo da scegliere come target il "dispositivo RGB" (colori nativi senza profilo o gestione del colore).

Il consiglio di Doug Avery è buono. La parte importante del suo post è la griglia che usa per confrontare tutti i risultati. Quello che sta cercando è abbinare HTML, CSS e colori nelle immagini, che è la cosa giusta su cui puntare. Ciò è possibile solo se i valori di colore nelle immagini e i valori di colore utilizzati in HTML / CSS sono trattati allo stesso modo.

Ho scritto molto di più sull'argomento qui:

Gestione del colore e progettazione dell'interfaccia utente

E ho discusso fino alla nausea con un ingegnere Adobe qui:

Salva per Web, Converti in sRGB dovrebbe essere disattivato per impostazione predefinita per PNG e GIF

È davvero necessario utilizzare sRGB in un web design (capisco le implicazioni di non usarlo in qualcosa come la fotografia o la stampa) quando aggiunge solo più lavoro costringendoti a usare Proof Colors? (È così che la vedo, per favore correggimi se sbaglio)

No, non è necessario. In effetti, assumere sRGB aiuta a dimostrare una mancanza di comprensione dell'argomento. Ci sono situazioni in cui dovresti assolutamente usare sRGB, ma fa parte di un flusso di lavoro fotografico completo: devi usare immagini JPEG, usare sRGB e incorporare un profilo sRGB. Non puoi farne parte senza fare tutto e non aspettarti alcun beneficio dalla gestione del colore.

Se stai salvando GIF o PNG da Photoshop, non avrai mai un profilo ICC nelle tue immagini, quindi devi assicurarti che il tuo flusso di lavoro sia impostato per quello e come i browser gestiranno le immagini.

Poiché il salvataggio con un profilo ICC porterà alcuni browser ad applicare correttamente il profilo mentre altri lo ignorano, l'articolo dice anche che è probabilmente la migliore idea progettare semplicemente con sRGB e quindi salvare senza il profilo ICC. Questo non vanifica in primo luogo lo scopo di utilizzare il profilo colore? O sto interpretando male ciò che dice l'articolo?

Tieni presente che:

  • Le GIF non possono avere profili ICC.
  • I PNG salvati da Photoshop non possono avere profili ICC.
  • I PNG possono avere profili, ma è raro che vengano salvati con loro.
  • I file JPEG possono avere profili.
  • Il rendering del browser delle immagini con profili differisce tra i browser.
  • I colori in HTML e CSS sono spesso considerati dispositivi RGB o sRGB, e non hai alcun controllo su questo.

4
Ho 6 computer a casa e due monitor calibrati al lavoro. Un monitor calibrato non ha una gamma decente, quindi anche con la calibrazione non è affidabile. Tutti e sei a casa sono disponibili a magazzino e mostrano tutti i colori in modo diverso. Questa è una lezione sull'uso del mondo reale. Ecco come ho imparato a smettere di preoccuparmi e di amarlo.
horatio,

3
Si. L'obiettivo è la coerenza all'interno della pagina per gli elementi dell'interfaccia utente, piuttosto che la coerenza tra diversi display (che è impossibile nella maggior parte dei casi).
Marc Edwards,

3

I profili sono sicuramente necessari per lo sviluppo / progettazione su Mac.

Se lavoro sulle mie immagini in Photoshop come Adobe RGB o ProPhoto RGB (i 2 profili utilizzati da una buona fotocamera), i colori cambiano MOLTO quando il PSD viene salvato per il Web e visualizzato su un PC Windows.

Per un utente Mac, è necessario utilizzare il profilo sRGB nei file WORKING per mantenere i colori su tutte le piattaforme.

Il file finale pubblicato (salva per il web) non ha profilo, ma l'utilizzo di sRGB durante la sua creazione è necessario su Mac - almeno lo è sul nostro se vuoi che i colori siano simili su Mac e Windows.


2

Vorrei confermare le dichiarazioni di questi paragrafi:

Da quello che ho raccolto durante la lettura dell'articolo (per favore correggimi se sbaglio), il modo corretto di gestirlo sarebbe far sì che Photoshop gestisca i colori come sRGB e faccia uso dei colori di prova quando è necessario Anteprima "fedele" del tuo lavoro.

e

Poiché il salvataggio con un profilo ICC porterà alcuni browser ad applicare correttamente il profilo mentre altri lo ignorano, l'articolo dice anche che è probabilmente la migliore idea progettare semplicemente con sRGB e quindi salvare senza il profilo ICC. Questo non vanifica in primo luogo lo scopo di utilizzare il profilo colore? O sto interpretando male ciò che dice l'articolo?

Distinguo tra l'ambiente di produzione (noto e autocontrollato) e il dispositivo di output e organizzo il flusso di lavoro in base a ciò che è meglio per le foto. Lasciatemi spiegare:

Quando apro le foto dalla mia fotocamera digitale ho la possibilità di aprirle con il profilo sRGB contenuto. Se li apro senza il profilo perderei informazioni importanti (i colori sembrano diversi). Quindi mantengo anche il profilo per ulteriori elaborazioni. Con il profilo contenuto Photoshop può adattare i colori al profilo del mio monitor, ai profili a cui accedo per i colori di prova, al profilo della mia stampante e a tutti i profili con cui il mio collega sta lavorando.

Se si utilizzano foto nei file di progettazione, è necessario creare l'area di disegno vuota con un profilo allegato. E se consegni il file di progettazione e non la grafica finale a uno sviluppatore è bene avere ancora il profilo allegato ...

Salvo i file finali senza profilo e sembrano come previsti. Perchè è così? Penso che la grafica senza profilo venga interpretata come se avesse un profilo sRGB associato (forse qualcuno conosce un riferimento per questo).

E indovinerei anche che quando fai uno screenshot il tuo sistema converte i colori dal tuo profilo monitor a sRGB (o hai un monitor molto buono vicino allo spazio colore sRGB).


1

La risposta alla tua prima domanda: se non usi sRGB nel flusso di lavoro, tutte le immagini utilizzate da altri spazi colore alla fine non avranno colori precisi o addirittura ritagliati sul web. La maggior parte delle immagini senza profilo importate o utilizzate andrà bene perché sono già nel giusto spazio colore (ad es. Lo spazio standard nella fotocamera).

2a domanda, sì, lo scopo è stato annullato perché l'uso dei profili colore non è ancora implementato sul web in modo da poterli utilizzare. I browser si aspettano sRGB, quindi non è necessario collegarli, questo aumenta solo la dimensione del file. Poiché molti browser non comprendono i profili, non è una buona idea offrire immagini con profilo, ad esempio Adobe RGB 1998, poiché i colori verranno ritagliati.


"I browser si aspettano 'sRGB" - una specie di. C'è un comportamento misto tra i browser. La maggior parte esegue il rendering di immagini senza tag come dispositivo RGB (nessuna conversione). Safari 6 su OS X presuppone (erroneamente) che le immagini senza tag siano sRGB e convertite.
Marc Edwards,

0

Aggiornamento per Adobe Photoshop CC (2017):

  1. Lascia il tuo spazio di lavoro predefinito (North American General Purpose 2)

  2. Non cambiare nient'altro

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.