03 -- O farbách a písme, Inkscape 2

Farbu možno opísať, ako vizuálny vnem, ktorým živočíchy rozoznávajú svetlo rôznej vlnovej dĺžky nezávisle od jeho intenzity. Táto schopnosť nám umožňuje odrazené svetlo rozdeliť do rôznych kategórií, ktorým sme (my, jedince človeka) priradili zaužívane pomenovania, ako červená, žltá, modrá a pod. Samozrejme, presnejší fyzikálny opis je omnoho komplikovanejší, nakoľko je potrebné zohľadňať aj fyzikálne vlastnosti materiálov (napr. odrazivosť, index lomu) a charakteristiku farebného vnímania pozorovateľa.

O čosi podrobnejšie sa však budeme zaoberať práve spôsobom opisu farieb a skladaní farieb do systémov, známych aj ako farebné schémy. Tie sú obzvlášť dôležité pri tvorbe ľubovoľnej grafickej prezentácie, nakoľko ich cieľom je charakterizovať, vytýčiť sa a zapôsobiť na pudy pozorovateľa.

Kúsok histórie

Sir Isaac Newton vyvinul teóriu, že každá farba je zmesou červeného, zeleného a modrého svetla. V roku 1666 vyvinul prvé farebné koleso (systém miešania farieb) na základe tejto teórie.

,

O sto rokov neskôr, v roku 1766, Moses Harris zostrojil koleso, ktoré používa ako hlavné farby červenú, žltú a modrú. Využil pritom maliarsky prístup, čiže farby sú tvorené ako zmes pigmentov (predstavte si miešanie temperových farieb).

,

Farebné modely

Spomenuté princípy miešania farieb sa zachovali aj v súčasnosti a tieto farebné modely sa používajú dodnes. Samozrejme, farebné modely možno zostrojovať aj inými spôsobmi. Najpoužívanejšie farebné modely sú teda nasledovné:

RGB model -- ako už bolo spomenuté, ide o princíp miešania svetla červenej (red), zelenej (green) a modrej (blue) farby. Tento model sa využíva vo všetkých displejoch (na počítačoch, mobilných telefónoch či televíziách).

,

CMY(K) model -- tento model je používaný v štandardných tlačiarňach. Ide o jeden z modelov, ktorý na miešanie využíva pigmenty, presnejšie zmes tyrkysovej (cyan), žltej (yellow) a cyklámenovej (magenta) farby. V praxi sa používa aj štvrtý kanál -- K -- čierna (carbon). Hoci čiernu farbu možno dosiahnuť zmiešaním ostatných troch pigmentov, v praxi je to neefektívne (napr. dokumenty s veľkým množstvom textu a farebnými obrázkami), nakoľko by bolo nutné spotrebovať enormné množstvo týchto pigmentov.

RYB model -- ako posledný si uvedieme už spomenutý model miešania červeného, žltého a modrého pigmentu. V praxi sa využíva najmä na dosiahnutie vizuálne príťažlivejších farieb, nakoľko štandardné RGB farby pôsobia príliš výrazne (krikľavo).

Gamut RGB a CMYK

Viditeľné spektrum farieb (t. j. všetky farby, ktoré sme schopní vnímať) je tvorené elektromagnetickým žiarením s vlnovými dĺžkami v rozpätí od ~380nm do ~750nm. Jednotlivé farebné modely nie sú schopné vygenerovať všetky farby viditeľného spektra.

Preto zavádzame pojem gamut, ktorý je definovaný ako oblasť farieb, ktoré vieme dosiahnuť vo farebnom modeli. Na nasledovnom obrázku môžeme vidieť gamuty modelov RGB a CMYK:

Všimnime si, že hoci gamut CMYK zaberá menšiu plochu viditeľného spektra ako gamut RGB, neplatí, že gamut CMYK je podmnožinou gamutu RGB. Prakticky povedané, na tlačiarni dokážeme vytlačiť farbu, ktorú nedokážeme zobraziť na počítači a naopak.

Tento jav spôsobuje to, že pokiaľ reprezentujeme objekt na zariadeniach s rôznymi gamutmi (napr. skenovanie dokumentu -- CMYK -> RGB), dochádza ku konverzii.

ÚLOHA NA ZAMYSLENIE

Skúste si spomenúť, či ste sa pri tlači stretli s javom, že farba na výtlačku nezodpovedala farbe, ktorú ste zobrazili na obrazovke monitora?

Príklad

Jednoduchý príklad, ako nájsť farbu, ktorá spôsobuje tento jav je tyrkysová farba. Prvý trojuholník (RGB cyan) znázorňuje farbu, ktorú sme nastavili na monitore. Druhý trojuholník (CMYK cyan) približne znázorňuje farbu, ktorú by sme získali po tlači.

Miešanie farieb

Farebné schémy

Model HSL(A)

V časti o farebných modeloch sme sa bavili len o ich odtieňoch (červená, ružová, zelená a pod.). Avšak, pre úplnosť treba brať do úvahy aj intenzitu jednotlivých farebných kanálov (napr. pre dosiahnutie čiernej farby musia mať všetky kanály RGB nulovú intenzitu, podobne pre bielu farbu všetky RGB kanály musia mať maximálnu intenzitu). Intenzitu jednotlivých kanálov udávame (kvôli diskrétnosti) v rozpätí hodnôt 0 až 255, prípadne aj ako desatinné hodnoty v rozmedzí 0.0 až 1.0 (avšak pri zobrazení dochádza k prepočtu na celočíselnú hodnotu od 0 do 255).

Jednoduchým výpočtom ľahko dospejeme k záveru, že takmer všetky súčasné zariadenia s farebnými displejmi dokážu zobraziť 16 777 216 farieb.

Iný, pre tvorbu obrazu na počítači prakticky najpoužívanejší, spôsob tvorenia farieb je prostredníctvom:

• odtieňa (hue) -- kategória farieb, ktoré sa nám (vnemovo) zdajú rovnaké (modrá, zelená, žltá),
• sýtosti (saturation) -- vyšednutosť (pri nízkej sýtosti), resp. krikľavosť (pri vysokej sýtosti) farby (napr. šedočervená, sýtooranžová a pod.),
• svetlosť (lightness) -- porovnanie farby vo vzťahu so svetlosťou ekvivalentného odtieňa šedej (napr. tmavotyrkysová, svetloakvamarínová).

V praxi sa v grafických editoroch stretávame primárne s týmto modelom, nakoľko zodpovedá prirodzenej predstave človeka o tom, ako miešať farby. Najčastejšie sa stretneme s HSL miešačom farieb, ktorý je reprezentovaný tromi farebnými slajdermi:

Taktiež, nebýva výnimkou, že ku kanálom HSL je priradený aj kanál A (alpha), ktorý reprezentuje priesvitnosť farby (t. j. akou intenzitou prekrýva farby, všetky farby pod sebou).

Späť k farebným schémam

Jedno z pravidiel pre dobrý grafický dizajn podľa Timothy Samara: Design Elements, a Graphic Style Manual hovorí, že farby vyberáme so zámerom. Je dôležité si uvedomiť, ako farby kombinovať a aký to bude mať vplyv na pozorovateľa. Farby totiž nesú svoj psycholigický a emočný význam a taktiež ovplyvňujú vizuálnu hierarchiu či spôsob, akým ľudia rozoznávajú nesúrodé položky (nazývame to farebné kódovanie (color coding)).

Pri vytváraní farebnej schémy sa netreba spoliehať na zaužívané farebné kombinácie (napr. niektoré slovenské banky sa stále nevymanili z "modrého" klišé pre finančné služby).

"Nevyberajte farby, ktoré sa od Vás očakávajú, ale tie, ktoré sú správne pre váš projekt!"

Napriek tomu, že pri vytváraní farebnej schémy sa odporúča individuálny prístup, v praxi môžeme sledovať "vzorce", akými sú jednotlivé farebné schémy zostrojené. Uvedieme si päť najčastejších farebných schém, ktoré sú definované vzájomnou pozíciou farieb na farebnom kolese:

Farebné schémy zvolené pomocou týchto "vzorcov" nám zabezpečujú logické kombinácie farieb, ktoré nám zaručia estetický dojem a vzhľad.

ÚLOHA NA ZAMYSLENIE

Aké farebné schémy využívajú nasledujúce logá firiem?

Odpoveď

Logo IKEA je príkladom komplementárnej schémy (t. j. žltá farba leží oproti modrej v rámci farebného kolesa). V skutočnosti je táto farebná kombinácia referenciou na farby švédskej vlajky (domovskej krajiny firmy), čiže komplementárnosť farebnej schémy možno aplikovať priamo na ňu.

Britská ropná spoločnosť BP využíva vo svojom logu analogickú farebnú schému -- svetlozelená (hlavná farba), žltá + tmavozelená (farby, ktoré v kolese obklopujú svetlozelenú farbu).

Psychológia farieb

Každá farba v nás vyvoláva určitý typ asociácie a pocitu, ktorý je daný jednak kultúrne, etnicky či dokonca živočíšne (napr. červená -- farba krvi). Tieto asociácie možno zohľadniť aj pri tvorbe farebnej schémy. Najčastejšie pocity vyvolané farbami sú nasledovné:

Napriek tomu, interpretácie jednotlivých farieb môžu byť rôzne v jednotlivých kultúrach. Napríklad:

• červená – vo veľkej časti Afriky znamená smútok, smrť; vo Francúzsku mužnosť; v Ázii šťastie alebo svadbu
• žltá – v Egypte symbolizuje smútok, v Japonsku odvahu
• modrá – vo väčšine sveta farba pre chlapcov, avšak v Číne hlavne pre malé dievčatá
• fialová – v Latinskej Amerike a Thajsku symbolizuje smrť

Ako voliť farebnú schému?

Vo farebnom kolese nie sú obsiahnuté všetky možnosti, aké farby dosiahnuť a ktoré vybrať do farebnej schémy. V rámci farieb nevyberáme len odtieň, ale aj sýtosť a svetlosť farieb, ktoré hrajú rovnako dôležitú úlohu pri vytváraní dojmu.

Takisto je potrebné nezabúdať aj na odtiene šedej. Pravdupovediac, v posledných rokoch biela a čierna farba sa stali dominantnými v dizajne, ktorý sa opiera o minimalizmus a plochosť (flat design). Prirodzene, aj tento trend sa "okukal" a v súčasnosti pozorujeme viac výraznejších, farebnejších a na grafické prvky bohatých dizajnov. Použitie bielej a čiernej farby však opäť začína hrať kľúčovú úlohu (najmä keď ich berieme ako farby pozadia), nakoľko súčasný trend umožňuje (na webstránkach, aplikáciách) prepínanie medzi svetlým a tmavým režimom.

Netreba sa báť vsadiť na svoj dojem, avšak treba sa vyhýbať priveľkému množstvu dominantných farieb (zvyčajne dve, tri stačia).

Pre pomoc farebných schém existujú aj automatické nástroje (color schemes editors), ktoré uľahčujú tvorbu farebných schém. Taktiež, v praxi existujú spoločnosti, ktoré sa zaoberajú tvorbou farieb (t. j. ako zobrazovať odtieň na rôznych materiáloch, farebné schémy a pod.). Ako ukážku si môžeme pozrieť odporúčané farebné kombinácie pre farbu roka 2020 classic blue od spoločnosti Pantone (ďalšie kombinácie a zdroj nájdete tu.:

V predošlej lekcii sme si ukázali ako vkladať základné útvary. Pri vložení útvaru sa jeho výplň nastavila na východiskovú farbu a pravdepodobne mnohí z vás ste prišli na to, ako jednoducho zmeniť výplň objektu kliknutím na niektorú farbu z palety.

Výplň objektu vieme hocikedy meniť vybratím objektu nasledovne:

Ako vidíme, nastavená farba (a aj ťah) sú vždy zobrazené v stavovom riadku. Po kliknutí na náhľad farby v stavovom riadku sa nám zobrazí okno, kde môžeme meniť farbu výplne (Fill), ťahu (Stroke paint) a štýl ťahu (Stroke style). Taktiež, máme možnosť si vybrať v akom farebnom modeli farbu miešame (ako sme spomínali už skôr, budeme používať primárne HSLA model). Hodnoty jednotlivých kanálov meníme buď posúvaním príslušného slajdra, alebo prepísaním hodnoty v príslušnom textboxe.

Štýl ťahu

Každému objektu vieme nastaviť hrúbku ťahu (Width), čiarkovanie (Dashes) a spôsob zaoblenia rohov (Join):

Predtým než sa pozrieme na ďalšie nastavenia farieb, je potrebné vysvetliť si prácu s lomenými čiarami a krivkami. Jedná sa o ďalší typ objektu (podobne ako obdĺžnik či elipsa) a možno ho považovať za jeden z najsilnejších nástrojov vektorovej grafiky.

Lomenú čiaru zadávame klikaním do plochy, pričom 1 klik = 1 vrchol lomenej čiary a každé dva za sebou idúce vrcholy sú spojené úsečkou. Máme možnosť vytvoriť neuzavretú (1. časť videa, po poslednom vrchole stlačíme "ENTER") a uzavretú lomenú čiaru (2. časť videa, posledný vrchol spojíme s prvým (zvýrazní sa prvý vrchol na červeno)):

Asi najdôležitejším objektom sú Bézierove splajny. Predtým, než sa pustíme do ich modelovanie, je dôležité si povedať pár slov z teórie:

• Beziérov splajn je tvorený z čiastkových kriviek, ktoré nazývame segmenty.
• Každý segment Bézierovho splajnu je uniformovaná kubická Bézierova krivka.
• Kubická Bézierova je určená štyrmi riadiacimi vrcholmi. Platí vlastnosť, že krivka interpoluje (prechádza) prvým (P0) a posledným (P3) riadiacim vrcholom. Ďalej platí, že prvá dvojica riadiacich vrcholov P0,P1 určuje dotyčnicu v bode P0 a posledná dvojica bodov P2, P3 určuje dotyčnicu v poslednom bode P3.
• Segmenty sú navzájom prepojené tak, aby platili požadované vlastnosti spojitosti splajnu (ukážeme si len prakticky v časti editovanie kriviek).
• Podrobná charakteristika, definícia a implementácia Bézierových kriviek je predstavená na predmete Reprezentácie geometrických objektov a ďalej je rozvinutá počas magisterského štúdia v programe Počítačová grafika a geometria.

V Inkscape zadávame Bézierove splajny podobne ako lomené čiary. Vždy v prvom kroku kliknutím do plochy zadáme začiatočný (koncový) bod segmentu a ťahaním stlačeného tlačidla určíme dotykové vektory v tomto bode segmentu. (Ne)uzavretosť výslednej krivky určíme rovnako ako v prípade lomenej čiary:

Editovanie kriviek

V praxi potrebujeme editovať krivky dodatočne. Navyše, modelovanie oblúkov v praxi často prebieha tak, že začneme s útvarom, ktorý je poskladaný z úsečiek (t. j. mnohouhlník / lomená čiara) a následne "premieňame" jednotlivé úsečky na Bézierove krivky. V nasledujúcom videu si ukážeme tento postup pre lomenú čiaru:

Dôležité je odsledovať si, že vybraný segment modelujeme ako krivku. To vidíme podľa toho, že sa nám zobrazujú aj dotykové vektory (a ich koncové body).

Pridávanie, odoberanie uzlov

Pri editovaní cesty sa nám často stáva, že potrebujeme nejaký uzol (začiatočný/koncový bod segmentu) pridať alebo odobrať:

Všimnime si, že pri odobraní uzla sa nám "zostávajúci" segment správa automaticky ako oblúk. Pokiaľ ho chceme zmeniť na úsečku, musíme to urobiť manuálne.

Editovanie uzlov

Inkscape nám umožňuje pracovať s tromi (ak nerátame štvrtý automatický) typmi uzlov. Každému uzlu vo vnútri krivky prislúchajú práve dva dotykové vektory (keďže segmenty sa stretávajú v tomto uzle). Hladkosť cesty v uzle nám určuje vzhľad krivky ako môžeme vidieť na nasledovnom videu:

Poďme si avšak podrobnejšie opísať čo jednotlivé typy uzlov znamenajú:

• symetrický uzol -- geometricky sa jedná o C1-spojitosť. Voľne to možno interpretovať tak, že v okolí uzla prejdeme po krivke hladko (nikde nie je hrboľ) konštantnou rýchlosťou. Dotykové vektory v tomto uzle sú navzájom opačné (t. j. majú opačný smer a rovnakú dĺžku),
• hladký uzol -- geometricky sa jedná o G1-spojitosť. Voľne to možno interpretovať tak, že v okolí uzla prejdeme po krivke hladko (nikde nie je hrboľ) avšak nie konštantnou rýchlosťou. Dotykové vektory v tomto uzle majú opačný smer avšak nie nutne rovnakú dĺžku (t. j. symetrický uzol je špeciálny prípad hladkého),
• rohový uzol -- geometricky sa jedná o C0/G0-spojitosť. Voľne to možno interpretovať tak, že v okolí uzla narazíme po ceste na hrboľ, ktorý je práve náš uzol. Dotykové vektory v tomto uzle majú rôzne smery aj veľkosti.

Editovanie uzlov a segmentov týmto spôsobom nám dáva plnú kontrolu nad tvarom objektu a veľmi jednoducho vieme dosiahnuť požadovaný výsledok.

Späť k farbám -- gradientné výplne

Redizajn sociálnej siete Instagram v roku 2016 opäť dostal navýslnie dovtedy zaznávané farebné gradienty. Lineárne a radiálne gradienty nám umožňuje vytvárať aj Inkscape:

Dôležité je vždy prepnúť sa do editovacieho módu gradientu, pokiaľ chceme upraviť. V ňom vidíme, že jednotlivé farebné zastávky ovládame rovnakým spôsobom ako uzly v cestách. Presnejšie, vieme pridávať a odoberať farby v gradientnej výplni, vieme meniť ich pozíciu a takisto, zmenou pozície koncových zastávok vieme meniť sklon gradientu.