Jak kalibrovat barvu pro web
Kdy je oranžová spíše červená? Weboví návrháři, dokonce i vybíraví, někdy ignorují barevné posuny mezi monitory.
Jak může webdesigner spravovat barvu, když obrazovky svých uživatelů mohou být libovolné velikosti nebo barvy, nebo by mohly být zobrazeny za jakýchkoli světelných podmínek?
Na rozdíl od stanovení chyb HTML, které ovlivňují prohlížení stránky, je načtení přesné barvy součástí procesu práce s návrháři.
Udržování barev v projektech je možné až po pochopení problémů. Přečtěte si o výzvách a řešeních, abyste získali konzistentní barvu na webu.
Můžete zjistit rozdíl mezi níže uvedenými fotografiemi?
Jeden z obrazů je o něco více modrý než druhý. Tento "barevný posun", nebo celkový odstín určitého odstínu, by mohl neopatrně pozorovat příležitostný pozorovatel. Koneckonců, nepatrná změna odstínu to z tohoto květinářství neznamená, nebo se odráží od detailů rosnatky. Je to kumulativní změna.
V průběhu času obrazy JPEG s nejvyšší kvalitou a 256-ti barevnými ikonami PNG vyčerpávají vzácnou šířku pásma. Složitost ve formátu HTML zvyšuje zatížení prohlížeče při každém načtení stránky. Na rozdíl od těchto problémů, které se přidávají jako návštěvníci procházejí webové stránky, správa barev je problém s procesem návrhu . Snímky vytvořené na nekalibrovaném monitoru se časem stávají nekonzistentními.
Barevný posun by mohl jít jiným jménem: nepozornost.
Kdy můžeme říci, že grafická barva odpovídá dostatečně blízké stránce? V jakém bodě je barva fotografie příliš nepřesná? Jaké detaily nezáleží na projektu jako celku? Každý může mít různé odpovědi, ale nikdo, kdo vážně bere digitální obrázky, může ignorovat kalibraci barev.
Tiskový průmysl se potýkal s získáním přesné barvy po celá desetiletí. Zajištění toho, že přesně stejné barvy se objevují ve všech fázích výroby - včetně různých monitorů, kancelářských tiskáren a lisů na vysoké úrovni - vytvořily vlastní odvětví kalibračních zařízení, softwarových řešení a dokonce ISO standardů.
Webová komunita obecně nemá starosti o tiskové kontroly. Ale možná by to mělo být.
Web měl problémy s barvami, protože to mělo barvu
V devadesátých letech bylo získávání přesné barvy na webu pomocí palety 216 "bezpečné" barvy. Tyto odstíny a odstíny byly (většinou) zaručeny, že se nezmění při zobrazení na monitorech, které nemohou zvládnout víc než 8bitové barvy.
Nahoře je gradient s a bez ditheringu. Dnes může drtivá většina počítačů vykazovat 24bitovou barvu nebo lepší (podle tyto statistiky zobrazení prohlížeče a sledování webů Google Analytics, včetně Webdesigner Depot). To znamená, že každý pixel může ukazovat jeden z milionů barev, takže kalibrace je komplikovaná a kritická.
Web se dlouho spoléhal na hexadecimální kódy, jako je # F35C23, pro definování barev. Tyto šestimístné řetězce mohou s velkou přesností zobrazovat širokou škálu odstínů a hodnot. Obrázek, který má # F35C23 a pozadí CSS ve formátu # F35C23, bude perfektně odpovídat.
Problémem je, že kód definuje kombinaci červené, zelené a modré barvy, ale ne vždy vede k konzistentní barvě. Displej zobrazuje rozdíl.
Bílá je bílá, kromě případů, kdy to není
Mnoho faktorů ovlivňuje přesnost barev při vytváření a úpravách digitálních obrázků. Stejně jako u tisku, barva na webu závisí na prostředí, ve kterém je obraz vytvořen. Na rozdíl od tisku se obrazy na webu mohou měnit pokaždé, když se zobrazují, protože se budou měnit uživatelé monitorů a žádná kontrola tiskem nedokáže zachytit problémy, které se vyskytují.
Ačkoli mnoho moderních webových prohlížečů může zobrazit
Ale ne všechny monitory jsou postaveny stejně, a tak určitý odstín oranžové může být nekonzistentní v různých obrazovkách. Zde jsou některé příčiny změny barvy:
- Mírné změny mezi výrobci a modely představují nepatrné nepřesnosti odstínu a odstínu.
- Mnoho obrazovek (zejména CRT monitorů) mění barvy v průběhu let a dokonce i při zahřátí v průběhu jednoho dne.
- Až donedávna používaly systémy Mac OS X a Windows dvě různé "gammy", což znamenalo, že obrazy na počítačích Mac se objevily jasněji než na počítači. Mac OS X 10.6 (Snow Leopard) používá běžnější gama 2.2 , který je stejný jako Windows a mnoho televizorů a videokamer.
- Lidé procházejí webem z mnoha různých míst a v mnoha různých světelných podmínkách. Účinek světla nad hlavou a množství a barva přirozeného světla ovlivňují vzhled barev na obrazovce.
Rozdílná kalibrace ukazuje, že "bílá" je často předpokládaná barva:
- Původní snímek, natočený pod fluorescenčním osvětlením kamerou typu point-and-shoot.
- Přibližný posun barev na počítači Mac před Snow Leopard.
- Přibližný barevný posun na stárnoucí CRT monitor.
- Blíže k pravé barvě, jak je vidět na přenosném počítači, na kterém byla fotografie zpracována.
Mírně červený monitor může vykazovat jinak dokonalou modrou, mírně fialovou nebo zelenou barvu se žlutým nádechem. Monitory nastavené příliš jasně vyplaví stíny a zvýrazní; příliš tmavé monitory způsobí zablokování stínů a zvýší šanci na barevný posun ve světlech. Pro konstruktéry, kteří pečují o tyto detaily, je kontrola kvality rozhodně výzvou.
PNG Color Shift
Jednoduše řečeno, gamma hodnota mění jas daného obrazu. Navržený pro digitální zobrazení, formát obrázku PNG umožňuje návrhářům přidat gama korekci na každý snímek. Ale bez znalosti světelného výkonu výstupního zařízení (tj. Bez znalosti typu monitoru, na němž se obraz objeví), mají návrháři těžké přidání přesné gama korekce.
Tato charakteristika se stala nejpopulárnějším problémem PNG. Na webu se obraz někdy shoduje s hexadecimálními barvami specifikovanými v CSS a jindy to nebude - ačkoli to bylo vytvořeno se správnou barvou.
Programy jako PNGCrush (Windows) a PNGenie (Mac) může odstranit přebytečné informace ze souborů PNG, včetně nastavení gama, čímž je barva spolehlivější.
Jiné problémy
Zabránění změně barev může vyžadovat změny ve způsobu fungování návrhářů. Špatná kalibrace barev vynikne v průběhu času. Je to jedna z těch detailů návrhu, o kterých se nemluví a neměli bychom si toho všimnout.
Průmyslová řešení
Různá řešení vyžadují značné úsilí při řízení barev a předcházení změnám barev.
The Mezinárodní konsorcium barev (
Profily ICC jsou soubory, které obsahují informace o tom, jak různá zařízení zobrazují barvu. Tiskárny a většina počítačů je vybavena integrovanými profily ICC, protože jejich výrobci přesně vědí, jak fungují. Vlastní profily ICC však mohou určitá zařízení přizpůsobit určitým podmínkám - například pokud je monitor používán pod fluorescenčními světly, na rozdíl od velkého okna.
Kromě odpovídajících barev mezi obrazovkami (a v tisku) Adobe Flash Player 10 podporuje profily ICC , což umožňuje správu barev mezi bleskem a tiskárnami (za předpokladu, že tiskárna koncového uživatele používá profil ICC).
V roce 1996 společnost Hewlett-Packard a společnost Microsoft definovaly standardní červenou, zelenou, modrou (
Tato technická řešení jsou odpovědi od profesionálních organizací v celém odvětví. Ale návrháři mohou také podniknout kroky k tomu, aby svou práci konzistentně udrželi v průběhu času.
Tipy pro přípravu místnosti pro práci s barvami
Jaké světlo používáte právě teď? Pokud to čtete na primárním pracovním prostoru a pokud je pro vás důležitá přesná barva, můžete podniknout kroky ke zlepšení pracovního prostoru právě teď.
- Deset vteřin za půl hodiny
Udělejte rychlou přestávku a podívejte se na 18% šedou kartu . Při pohledu na stejnou kartu za stejných světelných podmínek je dobrý způsob, jak "vynulovat" oči. (Poznámka: puristé doporučují 12% šedé karty. Jsou také v pořádku, pokud používáte stejnou kartu pokaždé. - Deset minut
Přesuňte monitor z přímého světla. Nikdy nechte světelný zdroj přímo zasáhnout obrazovku. - Patnáct minut
Odstraňte z vašeho pohledu barevné doplňky na pracovní plochu (kalendáře, značky, fotografie, složky). Pokud je váš monitor odrazivý, nechovávejte barevné předměty přímo za vámi. - Deset minut denně
Před začátkem práce nechte oči přizpůsobit se prostředí. Dejte oči čas, abyste se přizpůsobili pracovnímu prostoru, zvláště pokud jste právě přišli ze slunečního světla nebo zevnitřního nočního osvětlení. V případě potřeby použijte časovač. - Deset minut týdně
Vyčistěte monitor. Použijte a hadřík bez vláken jemně odstraňte prach a šmouhy otisků prstů nebo se obraťte na pokyny pro čištění v návodu k obsluze. Stejně tak udělejte svým brýlím, pokud je nosíte. - Den nebo tak
Zakryjte okolní okna s hustými obrazovkami nebo závěsy. Primární přínosy přirozeného světla jsou přesnost - je těžké získat přirozenější než sluneční světlo - a dostupnost. Ale přirozené světlo se liší. Změna se mění po celý den, počasí a ročních období. - Víkend
Obklopujte pracovní prostor neutrálně šedou barvou. Malovat stěny a nahradit temný nábytek něčím nevýrazným. V ideálním případě by vaše pracovní plocha měla odrážet jen asi 60% světla, které zasáhlo. GTI Munsell neutrální šedá barva je mezi fotografy populární pro vytvoření neutrálního prostředí. - Víkend nebo čas přepravy
Pokud nemůžete upravit osvětlení kanceláře, zakupte nebo sestavte digestoř aby se zabránilo oslnění a měnícím se podmínkám.
Tipy pro kalibraci monitoru
Účelem kalibrace je odstranění barevných posunů a optimalizace tonálního rozsahu monitoru. Stíny by měly být bohaté, ale přesto zobrazovat detaily. Nejjasnější upozornění by nemělo být příliš teplé ani příliš chladné. Z dlouhodobého hlediska to vede k přesné a konzistentní barvě.
Zde jsou obecné kroky:
- Zahřejte monitor alespoň 30 minut.
- Vyberte gama (5000 - 9500 ° K, gama 1,8-2,2).
- Najděte nejlepší bílé a černé body.
- Zvyšte červenou, zelenou a modrou barvu, abyste zabránili barevným odlitkům.
- Opakujte tento proces měsíčně.
Mnoho programů vás provede tímto procesem. Adobe Gamma je oblíbené rychlé řešení pro kalibraci CRT displejů. Kromě toho, že je snadno použitelný, je zdarma k nákupu Photoshopu nebo Photoshopu Elements. Dalšími řešeními jsou QuickGamma (Windows) a Spyder společnosti Datacolor hardwarový kalibrátor.
Color Me Picky
Přesná konzistentní barva je jednou z těch drobných detailů, které většina lidí - včetně webových designérů - rozhodne ignorovat v souvislosti s analýzami chyb, webových standardů, dezinformací klientů a dobrým termínovým tlakem.
Ale je to také jeden z těch prvků, které přispívají k lepšímu celkovému zážitku. Jakmile si návrháři začnou všimnout odchylek od odstínu a bahnitých stínů, nebude chtít dělat lepší práci, bude to neobvyklé.
Napsaný výhradně pro Webdesigner Depot Ben Gremillion. Ben je na volné noze web designer který řeší komunikační problémy s lepším designem.