Barevnost loga – pohled typografa

24. července 2002

•

V užším smyslu je typografie je vnímána jako nauka o vzhledu písma a pravidlech sazby. Z širšího pohledu nelze typografii porozumět bez znalosti, jak působí písmo vůči celku, tj. k formátu zobrazovací plochy a ke grafickým prvkům, které jsou do ní umístěny. Asi jako když máte ciferník s odporně deformovanými čísly osazený do jinak krásných hodinek. Dnes si povíme něco o problematice barev u loga.

Nerespektování stylové čistoty a harmonie v jedné části se negativně odráží na celkovém vzhledu. Tímto způsobem bychom měli pohlížet na práci v oblasti webdesignu.

Jestliže začínáte tvořit web, měli byste mít konkrétní představu o obsahu stránek. Nemůžete začít vytvářet stránky bez informací o jejich obsahu, o způsobu navigace a dalších specifik odpovídajících potřebám daného webu.

Návrh by neměl zapomínat na to, že každá stránka bude mít určitý obsah. Když vytváříte šablonu stránek, zkoušejte ji graficky vyladit i s předpokládaným obsahem. Nasimulujte si nejrůznější možné varianty s textem, obrázky, seznamy, tabulkami apod. Zkuste si setřídit jednotlivé informace podle následujících bodů.

Jaký tvar a barevnost bude mít logo firmy nebo jiný symbol záhlaví stránek? Většinou bývá určujícím elementem pro design stránek.
Musíte znát přibližnou strukturu webu a způsob navigace na stránkách. Bude tvořit základ pro návrh kompozice stránek a její obsahové skladby.
Skladba obsahu stránek, tj. umístění jednotlivých částí stránky, poměr množství fotografií, tabulek a dalšího obrazového materiálu k množství textu. U tabulek a jiných „popisných“ grafických objektů jejich předpokládaná šířka potřebná pro čitelné zobrazení textu.
Předpokládáte-li, že budou stránky obsahovat obrazový materiál, u kterých bude převažovat určitá barva (např. u fotografií potápěčského či golfového klubu), podřiďte vzhled stránek této barevnosti.

Tato osnova nám poslouží také jako zdroj námětů pro několik následujících dílů. Tedy hned první článek z této řady je zaměřený na použití loga. Prvním bodem je využití barevnosti loga.

Logo – problematika barev

Dobrá čitelnost firemní značky (loga) v šíři současných možností použití pro různá média je závislá na její tvarové jednoduchosti a míře možné modifikace jejího vzhledu. Obsah této části se zaměřuje na úskalí při zpracování barevně závazného materiálu, jakou firemní značka bezpochyby je, pro prostředí internetu.

Firemní značka by měla být navržena minimálně ve třech barevných variantách. Kromě základní varianty by měla být navržena v černobílé (fax, černobílý tisk) a v obrácené (inverzní) barevnosti pro případ, kdy by mělo pozadí určenou (či předepsanou) barvu podobnou barvě kresby loga. V případě, že logo plní funkci ochranné známky, je zpravidla k dispozici propracovaný grafický manuál pro použití loga, a to v tištěné a v elektronické podobě. V každém případě byste měli obdržet od zadavatele alespoň samotný soubor s firemní značkou.

Otázkou je, jaký je vlastně ideální formát pro přenos veškerých dat spojených s logem. U bitmapových formátu (PNG, GIF apod.) dochází při zvětšování ke ztrátě ostrosti a při zmenšování ke ztrátě kresby. U vektorových formátů (EPS, PDF, AI, CDR apod.) je závislost na konkrétní verzi formátu a softwaru. Bohužel pro korektní práci s profily potřebujete právě ten nejnovější software jako například Adobe Illustrator 10. Záměrně říkám nejnovější, protože se správa barev – Color Management System (CMS) v rámci každé aplikace stále vyvíjí. Zcela určitě dojdete k rozdílným výsledkům v barevnosti při použití různých verzí stejného programu, natož pak mezi konkurenčními programy.

Vhodnější mohou být vektorové formáty za předpokladu, že jejich obsahem jsou obrysy popsané v křivkách a informace o barevném prostoru.

Pokud by grafický manuál řešil použití loga na internetu, měl by mít na výběr loga několika velikostí a měl by být nejspíš ve formátu PNG. PNG umí vše, co GIF. Navíc disponuje ukládáním RGB dat v 8 nebo 16 bitech/kanál. Stejný počet bitů je využit na průhlednost. Podrobnější informace o použití PNG se dozvíte v následujícím díle.

Na výslednou barevnost zobrazení na monitoru se podílí různou měrou tyto skutečnosti:

Barvy pro prostředí internetu jsou omezeny šířkou barevného prostoru sRGB, který má odlišně široké rozpětí barev (gamut), než standardně definovaná barevnost v grafickém manuálu, který zpravidla vychází ze vzorníku tiskových barev Pantone.
Každý uživatel internetu může mít v systému rozdílné nastavení barevnosti od té vaší. Systémová paleta zobrazovaných barev je také závislá na možnostech grafické karty. S nastavením systému uživatele na 256 barev je potřeba počítat i dnes, ale patří mezi méně časté. Mezi běžná nastavení můžeme počítat barevnost v High Color (65 tisíc barev) nebo v True Color (16 miliónů barev).
Asi největší mírou se na zobrazení podílí samotný monitor. Správa zobrazení barev na úrovni systému umožňuje pokročilejší nastavení použitím profilu monitoru v závislosti na nastavení grafické karty. Pro správné zobrazení je důležitá možnost uložení do profilu monitoru informaci o nastavení grafické karty. Speciální kalibrační programy jsou navíc schopny upravit grafickou kartu na optimální hodnoty.
Dalším rizikem jsou změny barevnosti při rozrastrování tenkých čar. U log to mohou být například kontury, které nejen změní barvu, ale i světlost (vždy podle pozadí).
Konečně i Cascading Style Sheets (CSS) může mít vliv na použití ICC profilu v barevném prostoru aplikace/zařízení

Prostor sRGB neboli použití profilů

Barevný prostor sRGB, ve Windows pojmenován jako „sRGB Color Space Profile.icm“, je menší od jiných RGB prostorů [Adobe RGB (1998), Wide Gamut RGB]. Je standardem v oblastech, kde výsledkem je zobrazení na obrazovce monitoru (např. internet, CD prezentace a obecně elektronické publikování). Je navržen tak, aby na monitorech nižší třídy a monitorech nenakalibrovaných byly barvy vždy navzájem rozlišitelné.

Než se pustíme dále, musíme si upřesnit použití ICC profilů. Pro naprosto totožné popisy formátu *.icc nebo *.icm používám název ICC profily, jež je zkratkou společnosti International Color Consortium zabývající se vývojem a standardizací práce s obrazovými daty při jejich přenosu mezi zařízeními. Měli bychom rozlišovat ICC profily na tři základní skupiny:

založené na CIEXYZ,
založené na RGB,
založené na CMY (včetně CMYK)

Podmínkou použití ICC profilů je znalost, pro jaké účely byly vytvořeny. Spočívá v míře jejich závislosti na výstupním zařízení a dalších charakteristik výstupního procesu. Naproti tomu je potřeba nezávislý barevný prostor, který se používá pro převody mezi dvěma odlišnými barevnými prostory. Jeho gamut (barevný rozsah) musí být tak široký, aby do něho bylo možno zapsat ostatní profily jako podmnožinu.

Prostor Lab, patřící do první skupiny, je prostorem nezávislým na výstupním zařízení a vhodným pro transformace mezi nejrůznějšími barevnými prostory RGB a CMY, tj. druhé a třetí skupiny. Je definován jako ICC profil s gamutem obsahující zmiňované prostory obou skupin. V systému Windows naleznete například „CIELabD50.icm“, kde D50 popisuje teplotu bílého bodu. Převádět je tedy možné díky konkrétně popsaným prostorům Lab, RGB a CMYK uloženým do souborů *.icc a *.icm.

Grafický manuál je závazným podkladem pro použití firemní značky a máte-li se řídit podle stanovených hodnot, například v RGB, musí být také stanoveno, pro který barevný prostor hodnoty platí. K zobrazení barev v Lab, RGB, CMYK a dalších prostorech potřebujete tedy ICC profil, bez něhož nejste schopni zinterpretovat žádnou barvu včetně bílé a černé. U obrazových dat bez profilu se použije barevný prostor výstupního zařízení/aplikace.

Ideálním případem je manuál popisující barvy v nezávislém prostoru CIE Lab. Ale barevnost je běžně definována v Pantone barvách, u nichž lze zjistit jen přibližný ekvivalent hodnot pro CMYK nebo RGB prostory! Vždy je důležité provést převod přímo do cílového prostoru zařízení/aplikace. Čím je složitější převod, např. Pantone – CMYK Euroscale Coated – sRGB, tím více se zkreslují původní hodnoty. Zde bych si dovolil malou poznámku, že vlastně vše závisí na modulu převodu (Color Enginu), který je právě při převodu z Pantone barev nepřesný více, než bychom od firem jako je Adobe, Kodak nebo Microsoft, mohli očekávat.

Systémová paleta

Barevnost zobrazení závisí na nastavení počtu barev v systému. Web pamatující na uživatele s omezenou paletou 256 barev používá bezpečné barvy. Těchto barev je ve skutečnosti méně – jen 216 barev. Bezpečné barvy jsou bezpečnými především proto, že u nich v prohlížeči neproběhne dithering. Dithering se projevuje rozkladem barevné plochy na jiné barvy, když systém nastavený na 256 barev nemůže zobrazit všechny barvy najednou. V žádném případě vám bezpečné barvy nezaručí barevnou věrnost. O podstatně „věrnější“ reprodukování barvy by se měl kromě zkalibrovaného monitoru postarat profil vložený do souboru a CMS v systému podporován aplikacemi, tedy i prohlížečem (s podporou správy barev na webu se počítá až v CSS-3, viz pátý bod).

Všimněte si, že při ukládání 8-bitového GIFFu nebo PNGéčka je v nabídce mezi paletami barev také volba Mac OS (gamma 1,8) a Windows (gamma 2,2). Při jejich srovnávání uvidíte podstatné rozdíly v jasu barev.

Znamená to, že ve Windows mohou být barvy zářivější než v systému Mac OS. Gamma korekce se používá ke korekci jasové složky barev ve středních tónech a tím dochází k vizuální změně barevnosti. Gamma korekce může být odlišná u každého zařízení reprodukující obraz. Vynásobením hodnot gamma korekce všech zúčastněných zařízení dostaneme výslednou gammu, jejíž ideální hodnota je okolo 2,2.

Zjednodušeně řečeno musíte počítat s tím, že se barevnost mezi Windows a Mac OS může posunout, když dojde k zobrazování obrázku bez profilu. ICC profily přenášejí informaci o použité gamma korekci v obrázku. Obrázky s profilem sRGB se budou zobrazovat podobně na obou platformách, protože v Mac OS dojde při nesouladu výsledné gammy ke korekci barev. Barevnost v prostoru sRGB je definována v gammě 2,2.

Z pohledu webdesignéra by mohla být volba barvy loga jednoznačnou záležitostí. Bezpečné barvy by zaručovaly v tomto směru jistotu zobrazení v prohlížeči bez použití ditheringu. Z pohledu tvůrce Corporate Identity se berou v potaz všechny technologie, kde by mohlo být logo použito. Bohužel se ve skutečnosti setkáte s jednostrannou volbou pro barevnost definovanou jen pro tisk a to přímými barvami (Pantone, RAL apod.).

Zohlednění volby barev pro další technologie je důležité například při použití samolepících fólií. Paleta barev je u fólií velmi omezená a navíc by měla být zajištěna odpovídající barevnost alespoň pro tři nejpoužívanější druhy: matnou, lesklou a translucentní. Jak vidíte, správná volba barvy bude vždy problematická.

S velmi zajímavým článkem jsem se setkal až při dopisování tohoto dílu. Jeho výsledky a použití v praxi bych nechal na vaší úvaze. Popisuje, že pouhým přenastavením v systému na High Color dochází k posunu barevnosti také u části bezpečných barev. Při nastaveních na 256 barev a True Color jsou bezpečné barvy reprodukovány stejně. Článek mimo jiné odkazuje na novou paletu 22 bezpečných barev.

Vliv monitoru na zobrazení barev

Monitor má na zobrazení barev asi největší podíl. Při zobrazování loga je každá barva převáděna do prostoru barev monitoru. Pro monitor se vytváří profil podle konkrétních světelných podmínek v daném prostředí. Kdyby měly všechny monitory shodné vlastnosti a byly by umístěny do místnosti o stejných světelných parametrech, postačoval by jeden univerzální profil a v něm by se zpracovávala barevná data určená pro zobrazení na obrazovce monitoru. Není tomu tak, a proto vznikl daleko složitější mechanismus pro správu barev (CMS), který zabezpečuje kontrolu nad zachováním barevnosti. Díky tomu byl vytvořen zmíněný barevný prostor sRGB jako univerzální profil pro zobrazení v prohlížeči, z kterého se barevná informace přepočítává do profilu vašeho monitoru. Musíte kromě profilu monitoru disponovat systémem, který podporuje CMS.

Změny velikosti loga pro použití na internet

Musíte se spokojit s tím, že tenké čáry změní svou barevnost rozrastrováním do barvy podkladu. Pro lidské oko je i menší změna ve světlosti barvy výrazněji vnímána, než podobná změna v barevném odstínu. Při velkém světlostním kontrastu kresby a podkladu tak dochází k výrazným změnám. Je třeba si uvědomit, že rozrastrováním sice dochází k faktickým změnám v barevnosti, ale zároveň neméně významnou roli hraje optické působení odlišně velkých ploch stejné barvy. Dvě různě velké plochy se stejnou barvou se budou jevit jako jinak barevné. A na tom mají zásluhu jen naše oči.

U firemní značky se s tímto jevem musí počítat. Čím je komplikovanější jejich tvar, tím je větší nutnost mít bohatější manuál s verzemi značek pro dané použití. Verze pro zobrazování v malých velikostech (internet apod.) by měla být oproštena od všech detailů proti případnému rozpadnutí kresby.

Vliv CSS na zobrazení barev

Do CSS-1 byla navržena vlastnost rendering-intent, u níž syntaxe popisuje, v jak se má zachovat při nesouladu barevných prostorů jednotlivých obrázků a výstupního zařízení/aplikace. Nakonec je obsažena až v CSS-3. Nicméně použitelnost jejich hodnot si ukážeme v dalších dílech.

Syntax

Hodnoty: auto | saturation | perceptual | relative-colorimetric | absolute-colorimetric | inherit
Výchozí hodnota: auto
Lze použít: ve všech prvcích
Dědičnost: ano
Procenta: nelze
Procenta: nelze

Příklad:

BODY { color-profile: sRGB; rendering-intent: saturation } IMG.logo { color-profile: auto; rendering-intent: relative } IMG.foto { color-profile: auto; rendering-intent: perceptual } #foto001 { color-profile: auto; rendering-intent: A } <IMG ID=foto001 SRC="http://interval.cz/layout.foto001.png"> <IMG CLASS="logo" SRC="http://interval.cz/layout.foto002.gif">

Hodnoty pro rendering-intent vám mohou být známé z nastavení správy barev SW aplikací. Pro pochopení jejich popisu potřebujete mít základní znalosti o ICC profilech (viz předchozí část).

saturation: Přepočítává každou barevnou hodnotu do cílového prostoru. Přepočtem umocňuje sytost barev, přičemž barevný odstín zůstává nezměněný.
perceptual (fotografická): Provádí přepočet každé barvy dovnitř cílového prostoru, přičemž mezní hodnoty na hranici gamutu nebo v jeho blízkosti cílového prostoru zpravidla zůstávají nevyužity. Záměr perceptuální metody přepočtu je udržet relativní vzdálenosti mezi barvami v barevném prostoru. Díky zmíněnému zachování barevných poměrů má rozpínavost barevnosti obrazu své pevné hranice. Řada systémů používá tuto metodu defaultně, nejvhodnější je pro skenované fotografie.
absolute-colorimetric: Absolutní kolorimetrická – ponechává barvy zobrazitelné v cílovém prostoru nezměněny, ostatní barvy jsou převedeny na okrajové hodnoty cílového prostoru směrem do středu k nejbližšímu sousedu v sRGB. U absolutního převodu gamutu se bílá původního prostoru zachová. Pak ovšem nemusí být v cílovém prostoru bílá (resp. nejbělejší barvou cílového prostoru).
relative-colorimetric: Relativní kolorimetrická – ponechává barvy zobrazitelné v cílovém prostoru nezměněny, ale ostatní barvy jsou převedeny na hodnoty k nejbližšímu sousedu se stejnou světlostí v cílovém prostoru s tím, že je upravena sytost. U relativního převodu gamutu se namapuje bílá (resp. nejbělejší barva v gamutu) původního prostoru na bílou cílového prostoru.

V praxi platí, že pokud nemůžete použít přímo cílového prostoru, tak pracujete v pracovním prostoru, který je nejvíce podobný cílovému prostoru. V ideálním případě v takovém pracovním prostoru, aby obsahoval všechny barevné hodnoty toho cílového. Při značně rozdílných barevných prostorech (RGB-CMYK) se často volí kompromis mezi nadbytečně velkým gamutem a nežádoucímu ořezání hodnot, které by byly mimo gamut.

Pokud byste z nějakého důvodu potřebovali převádět barevnou informaci z prostoru s menším gamutem do prostoru s větším gamutem, tak při hodnotách absolute-colorimetric a relative-colorimetric by měly zůstat všechny barvy vzhledově(!) nezměněny. Při hodnotách perceptual se přiměřeně zvětší i prostor a při saturation dosáhnete nepřirozeného a nevyváženého zvětšení prostoru.

Pokud byste rádi viděli nějaké obrazové příklady, slibuji, že se k tomuto tématu budu v příštích dílech vracet a nebudou u nich chybět praktické ukázky.

Související články:

Barva v předtiskové přípravě (2) – teoretický popis barvy – článek s popisem základních barevných prostorů od pana Hrbáčka
Photoshop 5.0 – profily a RGB barevné prostory – článek s popisem RGB prostorů od Kamila Třešňáka
Mýtus bezpečných barev pro Internet – článek pokoušející se o zavedení nové palety bezpečných barev
ICC profil monitoru – článek o tvorbě profilu monitoru
Typografické minimum – základní pojmy – článek ze série o typografii

Použitá literatura:

International Color Consortium – sRGB – informace o prostoru barev sRGB
A Standard Default Color Space for the Internet – sRGB – popis sRGB; kopie stránek ICC uvedených výše
Appendix D: Gamma correction – informace o gamma korekci, jakou používají ostatní platformy, a o vlivu na výslednou gammu
Color Profiles for CSS3 – informace o nových vlastnostech v CSS3 (po zavedení podpory vlastností pro převod a přiřazení profilu v prohlížečích budeme cílovou barevnost specifikovat v CSS)
International Color Consortium – Profiles – informace o profilech a převodech mezi nimi