Kleurprofielen bij het ontwerpen van websites

, # Webdesign

Bij Netlash streven we ernaar om websites van zeer hoge kwaliteit af te leveren. Om die visie te ondersteunen kalibreren onze designers al jaren hun schermen. Het kalibreren maakt een kleurprofiel aan dat eventuele afwijkingen qua kleurconsistentie en kleurnauwkeurigheid in onze schermen bijstuurt. Zo geven onze schermen alle kleuren altijd op uniforme en zo nauwkeurig mogelijke wijze weer.

Wat wij echter niet willen (en dit is eigen aan webbouwers) is dat onze finale afbeeldingen kleurprofielen bevatten. Op het web gaan kleurprofielen namelijk botsen met html kleurwaardes. Bovendien ondersteunen niet alle browsers kleurprofielen en leest geen enkele browser ICC profielen in de code van een webpagina.

Het ontwerpen mét kleurprofielen op je scherm, maar zonder kleurprofielen op je document brengt echter specifieke problemen met zich mee. Je verwacht namelijk dat je kleurprofiel overal op je scherm toegepast is. Wanneer je echter de standaard Photoshop Color Settings gebruikt is dit niet het geval.

De standaard Photoshop Color Settings voor webgebruik (Europe Web/Internet) omzeilt jouw kleurprofiel en zal binnen je Photoshopvenster een ander profiel gebruiken. Hierdoor zullen er zich kleurverschillen voordoen. Gelukkig kan je het makkelijk vermijden.

Zet je Color Settings op "Monitor Color"

Hierdoor zal Photoshop hetzelfde profiel als je monitor gebruiken. Het gevolg is dat je Photoshop venster alle kleuren juist zal weergeven.

Kijk na of Assign Profile op "Don't Color Manage This Document" staat

Hierdoor ga je na of de afbeelding zelf geen kleurprofiel heeft.

Kijk na of Proof Colors af staat

Met deze instelling kan Photoshop een ander profiel doen nabootsen. Om te ontwerpen voor het web is het echter nutteloos.

Opslaan via Safe for Web & Devices

Zorg dat "Embed Color Profile" en "Convert to sRGB" uit staan.

Klaar!

Je bent helemaal klaar om het weblandschap mee vorm te geven.

Deze post is geschreven om een alternatief te bieden aan de oplossing van Viget waar men vooral met de "Proof Colors" instelling werkt.

Meer weten? Advies nodig?

Kom gerust langs voor een kop koffie en een goed gesprek. Wijs geeft strategisch advies, en helpt bij het uitwerken en verbeteren van all things digital.

Gerelateerde artikels

 

Al 18 reacties

Laat hier een reactie achter of contacteer ons via e-mail


schreef

Safari & Firefox kunnen wel overweg met kleurenprofielen (althans op mac). Tot en met CS4 eveneens het profiel uit het bestand gehaald door "Don't Color Manage This Document". Sinds de komst van CS5 lijkt dit niet meer nodig te zijn. Afbeeldingen met profielen worden correct weergegeven op zowel browsers die dit ondersteunen alsook op bv. oudere explorers. Maakt het ons leven opnieuw iets gemakkelijker :-)


schreef

@Groovix

Er zijn browsers die met kleurprofielen in afbeeldingen overweg kunnen. Het probleem is echter dat een afbeelding mét een kleurprofiel een afwijking kan hebben tegenover een css kleurwaarde binnen een ontwerp.


schreef

Ik snap jullie logica, maar zou toch proefdrukken via "Proof colors" willen aanraden. Door kleurbeheer uit te schakelen is er op verschillende vlakken totaal geen consistentie meer. (Eigenlijk heeft het dan zelfs maar weinig zin dat jullie jullie schermen kalibreren, maar da's een andere discussie.)

Wat doen jullie met foto's die je van klanten krijgt om op een website te plaatsen? Als die van een fotograaf komen, zal er wel een kleurprofiel aan vast hangen. Door het profiel te verwijderen, kan Photoshop helemaal niet meer weten hoe het de kleuren van die foto moet weergeven. Photoshop doet dus maar "een gok". En die gok kan er nu en dan eens ferm naast zitten.

Een voorbeeldje: ik vermoed dat jullie met jullie huidige Photoshopinstellingen ("verwijder kleurprofiel") dit beeldje wellicht met een rode achtergrond gaan zien in Photoshop: http://dl.dropbox.com/u/122309/kleurtje-1.jpg

Nochtans moet het een groene achtergrond zijn (check maar eens in Safari dat wél kleurprofielen interpreteert).

Het is natuurlijk een extreem voorbeeld, maar het toont wel aan dat jullie foto's kunnen opslaan en op het web publiceren met andere kleuren en tonen dan wat de fotograaf voor ogen heeft.

(Wellicht dubbelchecken jullie natuurlijk alles heel goed met de fotograaf, maar ik wilde toch even reageren omdat ik dit helemaal niet de aan te raden instellingen op vlak van kleurbeheer in Photoshop vind! Door ze op een enge manier toe te passen lijken ze wel te werken, maar ze gaan voorbij aan de bedoelingen van kleurbeheer en kunnen voor heel wat mensen problemen veroorzaken.)


schreef

@Thomas

Heel goede vraag!

Eerst en vooral wil ik duidelijk maken dat we kleurprofielen enkel uitzetten voor grafische beelden die integraal deel uitmaken van het ontwerp van de pagina (en die dus naadloos moeten aansluiten bij css kleurwaardes).

Voor foto's en beelden in de inhoud zijn we voorstander van kleurprofielen (bijvoorbeeld Flickr).

Wanneer we echter beelden mét profiel willen gebruiken binnen een ontwerp gebruiken wij de "Convert document colors to the working space". In jouw voorbeeld zal er dan een groene banner op de site te zien zijn.

Handig voorbeeld die afbeelding.


schreef

Interessant! Maar was 'convert to sRGB' niet net bedoeld om verschillen overheen verschillende platformen/devices te minimaliseren? Wat is precies het voordeel tov de Proof Colors (Monitor) + sRGB werkwijze?


schreef

Het voordeel tegenover de Proof Colors werkwijze is dat je effectief in Monitor RGB aan het werken bent. Photoshop zal je bij elk bestand met een kleurprofiel vragen wat hier mee moet gebeuren.

Proof Colors is zoals ik het ervaar een beetje een "preview" van een profiel. Dit kan soms conflicten geven.


schreef

@Willem: "Convert to sRGB" betekent dat je de kleurruimte van je foto's naar sRGB omzet. Dat is een engere kleurruimte dan bijvoorbeeld Adobe RGB of ProPhoto RGB.

Je doet dat inderdaad best omdat de meeste schermen niet alle kleuren uit de Adobe RGB of ProPhoto RGB kleurruimte kunnen weergeven. Het heeft dus geen zin zo'n grote kleurruimte te gebruiken als niemand die kleuren toch kan zien.

Enkele printers kunnen die kleuren wél weergeven, dus als je werkt voor die printers is de Adobe RGB wellicht interessanter. Je beeld kan dan meer kleuren en tonen bevatten wat een rijkere foto kan opleveren.

Ik zou toch heel erg de "Proof Colors" werkwijze durven aanraden (ten nadele van wat hierboven staat). Je kan het vergelijken als kijken naar je foto's met een bril op: de bril filtert de kleuren weg die de meeste sitegebruikers niet kunnen zien. Het toont je dus bij benadering hoe de meeste mensen je site zullen zien.


schreef

Duidelijke, praktische tips. In de bookmarks.

Voor wat betreft Proof Colors ben ik het eens met wat Thomas hierboven schrijft.


schreef


schreef

De link van Xavier toont voor mij duidelijk aan waarom de Proof Colors methode ook afwijkingen kan geven.

Je zal met Proof Colors altijd de juiste monitor weergave hebben, maar je afbeelding kan een profiel hebben dat roet in het eten gooit.


schreef

Huh, net niet! :)

Johan Doumont

Johan Doumont
schreef

Ik raad jullie aan een serieuze studie te doen van kleurbeheer, want de hoeveelheid nonsens die hier per vierkante centimeter gedebiteerd wordt ben ik zelden tegengekomen. Ik hoop dat de kleuren die jullie gebruiken op jullie sites nog ergens op lijken, want de gevolgde methode is vragen om rampen.

Vriendelijke groeten,

Johan Doumont


schreef

@Johan: Kan je ons vertellen wat er niet klopt? Hoe kan het beter?

Johan Doumont

Johan Doumont
schreef

Het gebrek aan kennis van kleurbeheer dat ik hier constateer kan alleen verholpen worden met een goede cursus over het onderwerp. Dat kun je niet in een paar regels oplossen.

Het eerste dat je moet beseffen is dat er een verschil is tussen een kleurprofiel en een kleurruimte. Die halen jullie al door elkaar. Vervolgens moet je zien uit te vissen hoe een kleurruimte werkt met de pixels in een afbeelding. En tenslotte moet je uitvissen welke functie 'Proof colors' heeft. Dat is helemaal niet wat jullie ermee doen.


schreef

@Johan

Zoals ik in het begin van mijn post aanhaal is dit geen post over kleurbeheer maar specifiek een post over kleurbeheer voor webdesigners. Iemand die deze post vanuit een andere grafische achtergrond bekijkt zal merken dat we in zekere zin kleurbeheer misbruiken. Binnen ons proces is dit echter noodzakelijk.

Je mag altijd aanpassingen of bevindingen mailen of posten, dan pas ik de beginpost aan.


schreef

Zeer goede tips!

Ben er zelf erg mee aan het stoeien geweest toen ik net begon met websites bouwen.


schreef

Hoe worden schermen eigenlijk gekalibreerd? Ik was bezig met een afbeelding aan het maken voor op de website, maar op een mac zie je een kleurverschil tussen de afbeeldingen en de achtergrond afbeelding waarvoor deze via css zal geplaatst worden. Misschien dat dit verdwijnt als ik mijn scherm kan kalibreren, zodat ik dezelfde kleuren gebruik in de afbeelding op de voorgrond.


schreef

Ik heb vaak zitten ruzie maken met de kleuren. Nu tegenwoordig gaat het makkelijker. Dit omdat ik en ander programma gebruik voor kleur profielen.

Gr

Martina

Plaats een nieuwe reactie