Colori non corrispondenti tra PS CS4 e Browsers

[ewebalex]

Salve a tutti,

da qualche giorno mi sono accorto di un problema che, credo, non si era mai verificato prima. Mi spiego subito: io realizzo una grafica per un sito web in photoshop

Salve a tutti,

da un po di tempo ho riscontrato un problema non indifferente con Photoshop: io tutto tranquillo mi faccio la mia grafica (con profilo sRGB, proof color disattivato, su monitor calibrato a 2.2 - 6500k), la presento al cliente, etc.

Poi, arrivato a trasformarla in xhtml, inizio a spezzettarla e mi accorgo del problema: in "Salva per il Web" i colori appaiono totalmente sballati (salvando senza conversioni o profili incorporati visto che già ho lavorato su sRGB) e così poi anche nei browser (sempre sullo stesso schermo e mac). Non solo, andando a inserire nei css i soliti codici esadecimali per i colori dei font usati nella grafica fatta in photoshop anche lì i colori vengono sballati.

Facendo varie prove mi sono inoltre accorto di una strana faccenda: se io imposto come profilo colore del monitor direttamente il profilo sRGB, la differenza tra ps e browsers non sussiste (aggiungo una foto per far capire meglio)

Se invece imposto come profilo colore il mio, creato con calibratore Spyder2Pro con gamma 2.2 e temperatura 6500K, ecco che salta fuori la differenza tra ps e browsers (aggiungo un'altra foto)

Eppure il profilo colore dovrebbe andare ad agire su tutto ciò che il monitor visualizza o no?

Inserisco anche 2 immagini delle impostazioni colore di PS e del profilo utilizzato dal file di prova:

Da cosa può dipendere? E soprattutto come devo configurare tutto l'ambaradam per esser tranquillo che tutti gli altri che visualizzeranno i miei siti vedano i colori nel modo giusto (con piccole variazioni dovute a monitor e piattaforma, ovviamente...)?

Grazie, Alessio.

[Francesco Catalano]

se vuoi approfondire la questione il guru del settore è Boscarol

http://www.boscarol.com/

prova a modificare il primo pannello di PS impostando "converti nel profilo di lavoro"

poi quando salvi converti in sRGB

[ewebalex]

Ciao Francesco,

avevo già provato a fare come mi hai consigliato tu, ma purtroppo il risultato è sempre il solito: in photoshop vedo dei colori, nei browser altri. Anche perchè la conversione è inutile (in teoria...) visto che già il file su cui lavoro in photoshop utilizza il profilo sRGB. O sbaglio?

Grazie.

[dmask]

io ho lo stesso problema con gimp e con osx.

su gimp vedo i colori in un modo, con anteprima, quicklook li vedo piu accesi... su web però li vedo come sono con gimp... :S

il tutto cambia però a seconda del profilo colore che ho sul monitor

se lasco LCD Colori che c'è di default sul macbook (late 2007) vedo un poi colori piu galli

se metto sRGB i colori prendono una tonalità piu azzurra

ho anche un monitor esterno ed a parità di profilo colore sui monitor, vedo i colori diversi...

certo non come il tuo blu che diventa viola però O_o

[Francesco Catalano]

non sono un esperto e ci ho capito anche poco quando ho provato a farmelo spiegare

comunque la cosa che dovete tener sempre presente è che spessissimo le differenze di colore a monitor sono legate a come i software gestiscono i profili colore, SE LI GESTISCONO, e per esempio lo stesso firefox nelle precedenti versioni non gestiva i profili colore (non ricordo se in tutte le versioni 3.0 o solo nella 3,5b li gestisce)

monitor differenti con stesso profilo (profili di fabbrica non quelli generati dall'utente) possono rendere colori diversi, tranne se sono profilati con una sonda esterna che gestisce il doppio monitor

comunque una llieve differenza di visualizzazione fra un monitor e l'altro è normale, due monitor non daranno mai lo stessissimo risultato

Ewebalex usa una sonda e quindi in effetti quello che vede a monitor è condizionato da quella e per questo motivo nota maggiormente le differenze, io un problema simile lo avevo su win con la sonda in versione base che evidentemente non si interfacciava bene con la scheda video (mi dava dei risultati assurdi e non c'era modo di farla funzionare) ma poi ho risolto aggiornando il firmware alla versione PRO (uso una Pantone HUEY che ora è diventata una HUEY PRO)

comunque

Se invece imposto come profilo colore il mio, creato con calibratore Spyder2Pro con gamma 2.2 e temperatura 6500K, ecco che salta fuori la differenza tra ps e browsers (aggiungo un'altra foto)

mi hanno spiegato che non va fatta questa operazione, ovvero in PS non devi caricare il profilo dello spider, quello lo carica il sistema operativo, tu devi usare sRGB e salvare incorporando questo profilo nelle immagini ...... quindi prova a lasciare in PS come profilo sRGB e vedi se tutto funziona come deve

per Gimp controlla di avere la versione più recente perchè se non sbaglio prima della 2.6 non aveva la gestione dei profili colore

[dmask]

si ovvio ho la 2.6 ma il problema è proprio il macbook o osx in se che scacchia coi profili... come dicevo se metto il monitor del mac con gestione sRGB del monitor e tutto vira sul blu\azzurro.

ok che non è un monitor professionale, ma fa proprio schifo

non me ne ero mai accorto prima perchè non avevo qualcosa col quale compararlo ma ora che ho un acer esterno me ne accorgo bene

ma vabbè per ora rimane li tanto il monitor che uso come "principale" è l'esterno, il macbook ha su solo le finestre di chat

[ZioRiP]

hai provato a non salvare per il web?

Tanto immagino che siano jpg, giusto?

Prova a salvare in jpg facendo salva con nome e prova a vedere se noti delle differenze.

[Francesco Catalano]

comunque per chi lavora con la grafica no solo per il web credo sia meglio lavorare nello spazio di colore RGB e e non sRGB perchè il primo è più ampio e permette una maggiore quantita di livelli di colore

per gli sviluppatori web non dovrebbe esserci differenza visto che i monitor non rappresentano tutti i colori di quello spazio

[ewebalex]

Intanto vi saluto e ringrazio per il supporto!

Per quanto ne posso sapere io, è vero che vari software diversi possono avere gestione diversa dei profili incorporati, ma parlando di un profilo base come l'sRGB dovrebbe essere più o meno uniforme, perlomeno tra i vari browsers (non considerando ovviamente le differenze fisiche e di calibratura da pc a pc e da monitor a monitor). Infatti una cosa del genere non mi era mai successa prima, nonostante faccio questo lavoro ormai da più di 3 anni.

Per quanto rigurada il discorso dei monitor, è verissimo: io lavoro su due monitor e per questo ho acquistato una Spider2Pro per poterli calibrare in modo che risultino più uguali possibili, ovviamente però ogni monitor ha il suo profilo. Ma il mio problema sorge sul solito monitor: quegli screenshot che ho postato sono fatti con photoshop e safari messi accanto che visualizzano la solita immagine sul solito monitor.

Per ultimo, forse mi sono espresso male io, ma i profili sRGB e il mio (fatto dalla Spyder2Pro), li carico solo e soltanto come profilo di visualizzazione del monitor. La differenza tra i due screenshot infatti dimostra la solita foto in photoshop fatta con profilo sRGB visualizzata sul solito monitor, prima con impostato il profilo mio (al monitor) e poi con impostato il profilo sRGB (sempre al monitor). Ho provato a impostare pure il profilo Monitor LCD (profilo originale apple del mio macbook pro 17'') ma anche con quello i colori sono diversi. L'unico modo per avere i colori uguali sembra essere quello di impostare il profilo sRGB al monitor che non ha senso, per come la vedo io, perchè è un profilo generico non perfetto per la resa cromatica specifica del mio monitor.

Quello che non capisco è proprio perchè mettendo altri profili al monitor questi non abbiano effetto su tutti i software ma soltanto su alcuni, cosa che fino a poco tempo fa succedeva e adesso stranamente non succede più. (forse dal passaggio da CS3 a CS4 ???)

Per quanto riguarda me io ho sempre optato per sRGB piuttosto che RGB in quanto (fino ad ora.....) è stato sempre il profilo più uniforme tra i vari browsers. Ovvio che in grafica di altro genere occorrono altri profili.

Non essendo in ufficio fino a domani non posso provare a fare salva con nome come suggerito da ZioRip, ma credo (sempre per il modesto parere) che questo procedimento non sia molto corretto, in quanto salvando per il web viene anche fatta un ottimizzazione e compressione apposita. E comunque di solito lavoro più con png che jpeg.

[Sergio P.]

Non ho il tempo di leggere tutto quello che hai scritto, ma ti posso dire una cosa: è assolutamente normale che i colori di photoshop e quelli che visualizzi nel browser siano diversi.

Quando lavori su un progetto web devi lavorare con un profilo sRGB. Nel momento dell'esportazione con il save for web non ti porti dietro il profilo (anche perchè il 99% dei browser non sa nemmeno cosa sia). Facendo così però, nel momento della visualizzazione delle immagini nel browser, quelle immagini non risentiranno del profilo sRGB come succedeva in Photoshop ma risentiranno del profilo del tuo monitor e quindi verranno visualizzate in modo diverso. E' facile capire quindi perchè se tu imposti l'sRGB come profilo del tuo monitor la corrispondenza invece sia perfetta.

Non c'è modo di risolvere questo problema, perchè non è un problema e non è da risolvere. Quando sviluppi per il web devi pensare ad una utenza "globale" che utilizza windows, con monitor che hanno come profilo l'sRGB e che hanno gamma 2.2. Tu, usando Mac non fai parte di quella tipologia di utente e quindi vedrai i colori leggermente diversi.

In futuro, quando veramente tutti i browser interpreteranno correttamente i profili colore, riusciremo ad avere una corrispondenza più precisa in questo senso. Ma per ora dobbiamo accontentarci.

Ciao

Sergio

[ewebalex]

Allora, stamani in ufficio ho fatto ulteriori prove:

- lavorando in PS sempre su un file con profilo sRGB, se imposto come profilo per il proof color il profilo del mio monitor calibrato e provo a fare salva per il web vedo, tra photoshop e i browsers i soliti colori, anche se totalmente sballati da come li avevo scelti;

- se provo, sempre lavorando su un file con profilo sRGB, con proof color disattivato, a fare salva con nome invece di salva per il web, allora sembrerebbe tutto magicamente OK; (quindi grazie ZioRIP per la dritta...)

Quello che mi chiedo è: qual'è a questo punto la strada più corretta? Perchè mai la funzione salva per il web mi sballa i colori e salva con nome no? In quale modo posso essere tranquillo che i colori che visualizzo io siano più o meno gli stessi che visualizzeranno gli altri e non colori totalmente sballati? ma soprattutto: perchè questa cosa non mi era mai successa prima d'ora??? boh, ci sto perdendo la testa.....

[ewebalex]

@Sergio P.

Ti ringrazio, ciò che mi hai detto più o meno già lo sapevo, e per questo ho sempre lavorato in photoshop utilizzando il profilo sRGB non curandomi di eventuali piccole variazioni di colore sul browser. Ma da una settimana ad ora (senza cambiamenti significativi come ricalibrazione del monitor, aggiornamenti software o simili) queste variazioni di colore sono diventate nette come puoi vedere dalle immagini che ho postato all'inizio.

Inoltre non capisco perchè salvando con salva per il web sia in png che in jpeg i colori vengano sballati, salvando con salva con nome in jpeg i colori vengano sballati ma se salvo in png con salva con nome i colori sembrano essere giusti e corrispondenti tra browser e photoshop.

E poi rimane sempre la solita domanda: perchè prima non lo faceva? boh...

E comunque davanti a queste alternative, qual'è la strada migliore per ottenere dei colori, diciamo, "globalmente giusti"..?

Grazie...

EDIT:

La domanda fondamentale in fondo è questa: quando scelgo i colori per i miei siti, li devo scegliere basandomi su quello che vedo in photoshop o altro? e il proof color va attivato?

[dmask]

ma il salva per web non porta la tavolozza a 256?

[ewebalex]

no, almeno che non salvi in gif o similari...almeno credo...

[dmask]

non saprei, prova a dare un occhio, a me sembrava una cosa del genere, toglieva un po di colore "inutile" per non appesantire la foto.

non uso photoshop da eoni quindi non mi ricordo

[Sergio P.]

ma il salva per web non porta la tavolozza a 256?

Diri proprio di no, a meno che non sia tu a volerlo.

[Sergio P.]

La domanda fondamentale in fondo è questa: quando scelgo i colori per i miei siti, li devo scegliere basandomi su quello che vedo in photoshop o altro? e il proof color va attivato?

Ovviamente devi basarti su Photoshop lavorando in ambiente sRGB.

Pr quanto riguarda il resto, se hai capito quello che volevo dirti prima, non saprei. Sicuramente la strada non è quella di salvare normalmente al posto del salva per il web.

Hai provato ad aprire dei progetti vecchi e a risalvare per il web per vedere se si comportano correttamente o meno?

Perchè se anche i progetti vecchi sballano allora c'è qualche problema di software, ma se invece i pregetti vecchi non sballano allora forse stai usando dei colori che risentono particolarmente delle differenza di profilazione tra il tuo monitor e l'sRGB.

Se posti i .PSD possiamo fare delle prove con i nostri Mac.

Ciao

S.

[dmask]

Diri proprio di no, a meno che non sia tu a volerlo.

ah ok, come detto sono secoli che non lavoro con phshp, gimp per me

[ewebalex]

no no, di quello sono sicuro, perchè ho sempre usato la funzione salva per il web e non mi aveva mai dato problemi. Ora non so perchè da una settimana mi da questo problema, così, dal niente...boh.

l'unica soluzione, comunque, sembrerebbe quella di fare salva con nome. ma la mia domanda è: se io lavoro con profilo sRGB in photoshop (e con il mio profilo calibrato al monitor) e poi faccio salva con nome, poi, sugli altri computer i colori dovrebbero essere all'incirca i soliti (tranne differenze di piattaforma e monitor vari) come è sempre stato fin'ora e non che il blu mi diventa viola...giusto?

[MassimoFly]

Ciao ewebalex già una diritta te l'ha data Zio Rip

Per quanto sappia il browser Safari è l'unico che legge i profili colore. Poi ci sono dei plug in per FireFox Mozilla.

Safari legge il profilo del tuo monitor in utility Color Sync è lo stesso profilo che salvi con photoshop ?

La differenza quando apri una immagine da software e Mac o PC e anche uguali piattaforme si ha diverse si percepisce sempre differenze anche se usi lo stesso profilo niente è assoluto…

Fai la prova del nove salva una immagine jpg (Una con profilo e un'altra senza profilo) poi aprila sia con photoshop che con Safari.

Vedrai sicuramente delle differenze per il browser SAFARI legge il tuo profilo colore del monitor.

Fammi sapere

[Francesco Catalano]

Per quanto sappia il browser Safari è l'unico che legge i profili colore. Poi ci sono dei plug in per FireFox Mozilla.

firefox ha la gestione del colore ma nella 3.0 era disabilitata

http://neuro74.wordpress.com/2008/06/19/firefox-3-abilitare-gestione-colori/

http://www.pseudotecnico.org/blog/2008/09/12/firefox-31-e-la-gestione-del-colore/

[Sergio P.]

firefox ha la gestione del colore ma nella 3.0 era disabilitata

Io sapevo che era disbilitata per motivi di stabilità dell'applicazione. Non è ancora pienamente funzionante.

In ogni caso, visto che lui salva i file con il salva per il web senza includere il profilo (come ci ha detto) la questione "browser che legge i profili" mi sembra non possa essere alla base dei suoi problemi.

[ewebalex]

Dopo un'infinità di prove su vari pc e mac, tanto ammattimento, ma soprattutto grazie ai vostri consigli e suggerimenti sono arrivato a questa conclusione:

il problema si è sempre verificato in modo lievissimo facendo sì che io non ci facessi caso per quanto piccola era la differenza. la combinazione di colori del sito a cui sto lavorando, evidentemente, rientra in quel particolare range che si nota di più e da qui è nato tutto il problema che in realtà non c'è.

tutto ciò però mi ha portato a scoprire che photoshop sembra, di base, bypassare il profilo dello schermo. cosa che invece non succede se attivo il proof color con il mio profilo calibrato.

Mi spiego meglio: se io sto lavorando su un'immagine con profilo sRGB con proof color disattivato, i colori che vedo non sono quelli reali ma vengono modificati dal mio monitor specifico.

Attivando il proof color, photoshop applica il mio profilo sopra al profilo sRGB, così io visualizzo i colori reali (visto che il monitor in questo modo è calibrato dalla sonda) che poi corrispondono ai giusti codici all'interno del profilo sRGB.

Questo mi permette di avere una scelta di colori il più "globale" possibile.

Sono arrivato a questa conclusione dopo svariati tentativi e confronti tra pc e mac con monitor calibrati e non. Ho notato che non attivando il proof color i colori vengono sballati di molto ovunque, mentre, attivando il proof color i colori sono molto più uniformi tra le varie piattaforme e monitor.

Quindi mi chiedo: ho sempre avuto i monitor calibrati ma in pratica non li ho mai utilizzati??? Mah...nella vita non si finisce mai di imparare...

...grazie a tutti quanti!!!

[dmask]

il proof color come si abilita?

[ewebalex]

dal menu visualizza di photoshop puoi prima scegliere il profilo da usare per il proof color e poi con MELA+Y puoi attivare/disattivare il proof color quando vuoi. Però ha senso solo su un monitor calibrato, credo...

[Francesco Catalano]

ora non ho PS ma credo sia la stessa funzione che si usa per provare i profili di stampa

[Black Cat]

scusate io ho lo stesso problema eppure non ho capito molto da questa discussione.

Ho provato comunque a modificare nel pannello Visualizza i profili colore eppure qualsiasi profilo scelga mi mostra in anteprima un risultato sempre più scuro rispetto a quello che viene fuori da "salva per web".

ho scelto per ora il profilo Apple RGB (che dovrebbe essere quello corretto per il mio macbook pro) però l'anteprima è sempre diversa.

Ad ogni modo non ho trovato il modo di disattivare i profili colore. Io ho il CMD al posto della mela ma anche facendo quella combinazione, fa altre azioni (e non disattiva i profili colore).

Io ho un progetto web che ora devo concludere e non posso presentarlo "sbiadito". Qualcuno sa come posso risolvere?

[Sergio P.]

scusate io ho lo stesso problema eppure non ho capito molto da questa discussione.

Ho provato comunque a modificare nel pannello Visualizza i profili colore eppure qualsiasi profilo scelga mi mostra in anteprima un risultato sempre più scuro rispetto a quello che viene fuori da "salva per web".

ho scelto per ora il profilo Apple RGB (che dovrebbe essere quello corretto per il mio macbook pro) però l'anteprima è sempre diversa.

Ad ogni modo non ho trovato il modo di disattivare i profili colore. Io ho il CMD al posto della mela ma anche facendo quella combinazione, fa altre azioni (e non disattiva i profili colore).

Io ho un progetto web che ora devo concludere e non posso presentarlo "sbiadito". Qualcuno sa come posso risolvere?

Se si lavora per il web, disattivare la gestione del colore (selezionando il profilo del proprio monitor al posto di un'altro profilo) o usare un profilo diverso dall'sRGB, è la cosa più sbagliata che si possa fare. I proof color non influiscono direttamente sull'immagine, servono solo per anteprima in photoshop, per avere un maggiore controllo sull'immagine.

Lavora con sRGB e vai tranquillo.

[Black Cat]

Se si lavora per il web, disattivare la gestione del colore (selezionando il profilo del proprio monitor al posto di un'altro profilo) o usare un profilo diverso dall'sRGB, è la cosa più sbagliata che si possa fare. I proof color non influiscono direttamente sull'immagine, servono solo per anteprima in photoshop, per avere un maggiore controllo sull'immagine.

Lavora con sRGB e vai tranquillo.

e come lavoro in sRGB? Io lavoro semprei in RGB

[Sergio P.]

e come lavoro in sRGB? Io lavoro semprei in RGB

in sRGB nel senso del PROFILO. Non devi usare l'Apple RGB, ma l'sRGB.