[color] Hoe ontwerp jij voor een webbrowser?

[johan2009]

Ola!

Ik ben aan het overpeinzen en uit aan het vogelen hoe ik het best mijn Illustrator, Photoshop project kan omzetten voor het web. Het gaat om kleurprofielen dus consistentie versus accuratesse van kleuren en het 'algemene beeldscherm'.

Na het lezen van het artikel van CG Artitst Johan Steen heb ik een duidelijk beeld gekregen hoe ik in Photoshop of illustrator met kleurprofielen moet omgaan.

Mijn Wide-gamut HP scherm hardware gecalibreerd met i2 en kleurprofielen mooi in jpg toevoegen dacht is the way to go... maar niet dus. Er bestaan bewoners op deze aardbol met een computer die niet zijn gecallibreerd en unmanaged browsers draaien. Eigenlijk is dit het overgrote gedeelte van de internettende populatie.

• Na het lezen van artikel over 'color-accuracy versus color-consistency' het gebruik van ICC-kleurprofielen, non color-managed browsers en png kwam ik tot de conclusie zoals de auteur aangeeft om geen kleurprofiel in je jpg bij te sluiten.
• Alleen Safari en Firefox zijn color-managed EN komen kleuren tussen png en jpg niet overeen omdat er in PNG een Gamma correctie zit. Die je trouwens weer het beste met een Image optimizer als PNG Crush of Smush It (in ySlow plugin FireFox) eruit kan halen.
• Dus ik heb voor color-accuracy gekozen omdat ik consistentie in mijn ontwerpen wil.
• Wanneer ik mijn nieuwe project in jpg ZONDER kleurpofiel opsla en vervolgens deze op mij wide-Gamut scherm open krijg ik lasogen. Dit klopt omdat de conversie iets zal zijn in de trent van' geef mij 253/255ste van volledig rood' (zonder kleurcorrectie wegens ontbreken van profiel), dit ziet erin in een wide-Gamut scherm (bijna volledig / 92% van adobeRGB) natuurlijk veel verzadigder uit dan een standaard sRGB-scherm.
• Het gegeven dat er steeds meer wide-gamut schermen op de markt komen en je nog eens te maken heb met kleurweergave van een TN, IPS, PVA of MVA scherm te maken heb. Dan heb ik het nog geen eens over CCFL versus LED-verlichting!

Om een korte vraag toch lang te maken. Hoe zet jij jouw project om voor het web? Hoe zorg jij dat jouw project er goed op jouw hardware gecallibreerd scherm eruit ziet, maar dat tante Margreet het ook nog eens fatsoenlijk op haar Windows 7 Millenium XP Laptop of te wel veredelde typemachine ziet?

Wat naslagwerk over png gamma probleem.

ff in kort wat ik heb geleerd over kleur in Photoshop;
Photoshop klopt altijd qua kleur, is fully colormanaged. Na hardware Callibratie is Photoshop voor bv sRGB, adobeRGB en mooie Gebruik GEEN Soft Profiling aka 'Proof Setup' als uitgangspunt om een project te beginnen. Je kan met profiling bekijken hoe een project uit een printer komt rollen of hoe het op (ander) beeldscherm hoogstwaarschijnlijk eruit komt te zien. Oh ja altijd ff in Photshop 'convert to sRGB (standard non-colorormanaged)' aanvinken in 'Save For Web & Devices' doen.

[Voor 32% gewijzigd door johan2009 op 22-05-2011 22:01]

[Tom]

Het is heel simpel, voor ontwerpen die op beeldschermen getoond worden werk je altijd in sRGB.

Zorg wel dat je eigen scherm gekalibreerd is. Dit profiel is actief binnen je OS en staat los van kleurprofielen in grafische bestanden of Photoshop.

[johan2009]

Tom schreef op zondag 22 mei 2011 @ 21:38:
Het is heel simpel, voor ontwerpen die op beeldschermen getoond worden werk je altijd in sRGB.

Zorg wel dat je eigen scherm gekalibreerd is. Dit profiel is actief binnen je OS en staat los van kleurprofielen in grafische bestanden of Photoshop.

Heb je m'n openingspost gelezen

[Voutloos]

Die kalibratiehint is wellicht in het algemeen bedoeld.

Verder is het antwoord van Tom heel simpel, puur omdat 9 vd 10 bezoekers toch een (volgens onze maatstaven) slecht scherm hebben en/of de instellingen niet goed hebben. Tegenover elk niet-TN scherm staan wel 10 van die tante greet laptopjes, en dan ben ik nog optimistisch.

[Voor 5% gewijzigd door Voutloos op 22-05-2011 22:34]

[johan2009]

Ja het kan heel simpel dat klopt. Echter ik met m'n perfectionistische trekken kijk op andere schermen hoe de kleuren uit een ontwerp overkomen. Ik dacht "okay ik kan het wiel zelf uitvinden of ik begin een topic hoe andere vormgevers hiermee omgaan."

[TERW_DAN]

Ik vind dat je geen rekening moet gaan houden met instellingen van gebruikers, daar kun je toch niets aan doen. Als ik de kleurtemperatuur van m'n monitor compleet bagger instel dan ziet het er niet uit, maar daar kun jij jouw design niet op aanpassen.
Dat het er dan in jouw ogen bagger uitziet moet je maar op de koop toenemen, je hebt als devver geen invloed op wat een user aan hardware en instellingen heeft.

[kwaakvaak_v2]

johan2009 schreef op maandag 23 mei 2011 @ 10:03:
Ja het kan heel simpel dat klopt. Echter ik met m'n perfectionistische trekken kijk op andere schermen hoe de kleuren uit een ontwerp overkomen. Ik dacht "okay ik kan het wiel zelf uitvinden of ik begin een topic hoe andere vormgevers hiermee omgaan."

Het antwoord op je vraag is eigenlijk ongeveer hetzelfde als wat de persoon hierboven verteld.. Leer er maar mee leven, Tuurlijk is het leuk als je fijne kleurnuances in je ontwerp hebt zitten, maar ga er maar mee leren leven dat 99% van de gebruikers je subtiele kleurtjes niet gaan zien

Als je daar niet mee kunt leren leven, dan zou ik een ander vak gaan zoeken

[Blue-eagle]

Dit is een probleem waar je simpelweg geen controle op kan uitoefenen. Tenzij je jouw doelgroep compleet beheerst en jij degene bent die bepaalt op welke monitoren ze jouw materiaal bekijken. In mijn vakgebied is dit wel het geval (ziekenhuizen - allemaal dezelfde monitoren voor onze software), maar voor het merendeel van designers die voor het web ontwerpen is dit natuurlijk niet zo.

Ik heb in het verleden weleens aan een klant moeten uitleggen waarom de kleuren van zijn website er op een CRT of TFT monitor heel anders uitzagen. Vervolgens mocht ik ook uitleggen waarom het op zijn smartphone er weer anders uitzag.

Je bent te afhankelijk van het type scherm, de kalibratie hiervan, omgevingslicht en zelfs de ogen van je bezoeker. Je kan met geen mogelijkheid rekening houden met alle variabelen.

Als ik al ergens in het bijzonder rekening mee hou, dan is het met de meest voorkomende variant van kleurenblindheid (rood/groen). Voor het web boeit me de echtheid van de kleuren bijzonder weinig aangezien ik daar totaal geen controle over kan uitoefenen.

Voor drukwerk is dat natuurlijk een compleet ander verhaal.

TL;DR: Maak je er niet druk om. Er zijn andere prioriteiten die je eindgebruikers veel belangrijker vinden.

[johan2009]

Nou ja, een vriend van mij, die zo'n 10 jaar vormgever is zei "ja het valt me wel op als ik een jpg open er deze anders uitziet dan in Photoshop maar er heeft nog nooit iemand geklaagd over kleur. En bij print moest ik me wel met kleurprofielen bezig houden." zijn antwoord is in de lijn met die van jullie.

Best paradoxaal waar je het meest van weet het eruit gaat zien wordt de meeste energie in kleur-accuratesse gestopt; print.

Waarom ik dit alles ben gaan posten, en misschien had ik dat als eerst moeten doen, mijn portfolio-website gebruikt veel roze. Nu ben ik aan het solliciteren en krijg van bedrijf een keer oa terug "wooowww das wel gewaagd!" Week later op solli gesprek en m'n werk getoond op hun pc. IE8 dus geen color-management en ik kan je zeggen het was vel roze. Tja op mijn wide-gamut HP met Jpeg + ICC geeft een aardig verzadigd maar het kan goed in mijn ogen, al verschillen smaken natuurlijk. Nu op dat scherm had ik m'n zonnebril nodig --> saturation en brightness to the max leek het wel.


Ik denk dat m'n conslusie is; Ik ga een ander vak zoeken!

Okay meer als wat ik toepaste was al goed: gecalibreerd scherm met sRGB als color-space voor Web en geen ICC meer embedden, want dat gaat ten koste van consistentie. Thanx you all

[kwaakvaak_v2]

Mwoah... zegt denk ik eerder iets over dat bedrijf Maar hoe minder kleur flauwekul je embed, hoe beter het er in de praktijk uitziet.

Oud collega designer paar bedrijven geleden had er zelfs gewoon een windows bakje voor staan op de afdeling. Voor de jpg's naar de klant gingen werden ze eerst even op die oude tiepmiep bak tegen het licht gehouden en waar nodig beetje bijgesteld.

[Luuk1983]

De truuk is volgens mij om juist op van die 'brakke goedkope schermen' te ontwerpen die 80% van de bevolking heeft. En het is zeer belangrijk om contrasten hoog genoeg te houden. Subtiele kleurverschillen ga je namelijk op veel schermen niet zien. Dan kan het er nog zo mooi uitzien op een gecalibreerd scherm, maar op een simpel TN paneeltje valt alles ineens weg.

[Blue-eagle]

johan2009 schreef op dinsdag 24 mei 2011 @ 00:14:
Nou ja, een vriend van mij, die zo'n 10 jaar vormgever is zei "ja het valt me wel op als ik een jpg open er deze anders uitziet dan in Photoshop maar er heeft nog nooit iemand geklaagd over kleur. En bij print moest ik me wel met kleurprofielen bezig houden." zijn antwoord is in de lijn met die van jullie.

Ik zit zelf ook al tien jaar in dit wereldje. 7 Jaar webdesign/ontwikkeling, 3 jaar webapp-design. Tussendoor een handjevol drukwerk opdrachten. Wat Luuk1983 ook zegt is waar: Je kan voor afbeeldingen die op het web gebruikt gaan worden het beste een monitor gebruiken welke je doelgroep ook heeft: een goedkoop 22 inch flatscreen TFT model. Test er in ieder geval je designs op. Gebruik de fabrieksinstellingen, want de meeste mensen prutsen er toch nooit mee.

Best paradoxaal waar je het meest van weet het eruit gaat zien wordt de meeste energie in kleur-accuratesse gestopt; print.

Waarom ik dit alles ben gaan posten, en misschien had ik dat als eerst moeten doen, mijn portfolio-website gebruikt veel roze. Nu ben ik aan het solliciteren en krijg van bedrijf een keer oa terug "wooowww das wel gewaagd!" Week later op solli gesprek en m'n werk getoond op hun pc. IE8 dus geen color-management en ik kan je zeggen het was vel roze. Tja op mijn wide-gamut HP met Jpeg + ICC geeft een aardig verzadigd maar het kan goed in mijn ogen, al verschillen smaken natuurlijk. Nu op dat scherm had ik m'n zonnebril nodig --> saturation en brightness to the max leek het wel.

Hmm. Tja, diegene die er naar keek was vast al wel gewend dat alle sites er wat brighter uit zien. Dus zijn hele ervaring op het web is al totaal anders dan die van jou. Als hij op nu.nl kijkt ziet hij vast ook fel blauw, waar wij gewoon een rustige(re) kleur zien.

De beleving is dan wel totaal anders natuurlijk, maar niet echt iets waar je veel aan kan doen. Het ergste vind ik altijd problemen met contrast. Subtiele verschillen in grijstinten die niet goed overkomen zijn zo frustrerend soms.

Wat nog erger is, vind ik, is een design moeten presenteren op een (oude) beamer. Die beamers van 5 jaar oud zegmaar. Kleurechtheid is ver te zoeken. Contrast is waardeloos. Verzadiging is weg. Er blijft niks over van je details.

En toch kwijlen de klanten op het design

Ik denk dat m'n conslusie is; Ik ga een ander vak zoeken!

Nee joh. Gewoon accepteren dat je er geen controle op kan uitoefenen. Zorg er voor dat jouw zaken altijd goed in orde zijn. Presenteer je werk op een goede monitor of op full-color mat dik papier, plak het op een kartonnetje met een standaard erachter, afwerken met wat spray..

En test het op consumenten monitoren. Schaf een simpele Samsung monitor aan. Pleur er desnoods een CRT naast voor de echte oldtimers. Zorg ervoor dat je designs het daar goed op doen, en er is niks aan de hand.

Okay meer als wat ik toepaste was al goed: gecalibreerd scherm met sRGB als color-space voor Web en geen ICC meer embedden, want dat gaat ten koste van consistentie. Thanx you all

Succes.

[Tom]

johan2009 schreef op zondag 22 mei 2011 @ 22:01:
[...]


Heb je m'n openingspost gelezen

Jawel hoor, ik was wat kortaf.
Er zijn twee soorten kleurprofielen: een profiel voor je beeldscherm en kleurprofielen in grafische bestanden (sRGB, AdobeRGB, ProPhoto etc.).
Je scherm kalibreren moet je altijd doen. Dan weet je zeker dat de kleuren op je scherm kloppen.
Kleurprofielen in grafische bestanden gebruik je voor print (drukwerk, foto's). Op het web maar bijv. ook voor DVD's (alles wat op het scherm gebruikt moet worden) gebruik je sRGB. Dat is ook voorgeschreven door het W3C.

Over de discussie hierboven:
Op een slecht scherm ontwerpen vind ik een slecht idee. Zorg dat je zelf een goed scherm hebt en kalibreer dat. Je weet zeker dat jij kleine gradients en andere subtiele kleurverschillen ziet, dat de kleuren bij jou kloppen en je geen last hebt van een slechte kijkhoek. Ik bespaar nooit op m'n beeldscherm. Dat anderen het anders zien kun je helaas niet voorkomen.

Overigens kies ik nooit voor wide-gamut schermen.

[RoyK]

Johan, Colour-management doe je niet voor je website bezoekers. Colour-management doe je voor jezelf. Zeker als je grafisch drukwerk af moet leveren. Dan is het ineens wel belangrijk dat 100% magenta op je scherm ook de 100% magenta is als het gedrukt of gescanned wordt. Nu is dat in praktijk niet mogelijk om op 100% te komen omdat ieder apparaat een afwijking heeft. Maar zo dicht mogelijk bij elkaar komen is een hele uitdaging. Sterker nog, het is een beroep. Er zijn mensen die dit voor hun werk doen, jouw werkplek voorzien van colour-management.

Wat anderen al aangeven moet je wel realistisch blijven. Het grote gros werkt niet met een afgestelde monitor. Om nog niet eens te praten over persoonlijke smaak. Wat jij mooi rood vind, vind een ander misschien minder mooi. Verspil daar dus geen tijd aan want je gooit deze energie letterlijk weg.

Steek deze energie in een goed ontwerp, compositie, navigatie en uiteraard leesbaarheid. Want dat houd een bezoeker op je site, niet de kleurtjes.

BTW, wel erg interessant heh, kleuren en kleur profielen etc. Ik heb me prima vermaakt op school met het vak colour-management.