<< Späť

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

V tejto "myšlienkovej" časti lekcie rozvinieme problematiku grafického dizajnu a budeme sa zaoberať prvkami, ktoré grafický dizajn špecifikujú -- farba a písmo.

Farba

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

koleso

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.

,
koleso

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é:

model

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).

,
model

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.

model

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:

gamut

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 model

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

Jednotlivé základné (primárne) farby možno v rámci modelu miešať. Farby, ktoré vzniknú zmiešaním dvoch primárnych farieb sa nazývajú sekundárne. Tabuľky sekundárnych farieb pre jednotlivé modely sú uvedené na nasledovných obrázkoch (všimnite si vzťah medzi RGB a CMYK sekudárnymi farbami a zároveň si uvedomme problematiku z predošlej úlohy na zamyslenie):
model

model

model

KONTROLNÁ OTÁZKA

Prečo výsledkom zmiešania modrej a červenej farby v modeloch RGB a RYB sú dve rozdielne farby?

Odpoveď

Stačí si len uvedomiť, že v modeli RGB výsledná sekundárna farba vznikne zmiešaním dvoch svetiel, pričom pri modeli RYB ide o zmiešanie dvoch pigmentov.


Podobným spôsobom získame aj terciárne farbe, ktoré vzniknú zmiešaním dvoch sekundárnych farieb. Primárne, sekundárne a terciárne môžeme sumárne reprezentovať prostredníctvom farebných kolies (dôkladne identifikujte, ktoré farby sú na jednotlivých kolesách primárne, sekundárne a ktoré terciárne):
kolesa

Farebné schémy

Jedným z dôvodov, prečo sme sa dostali k pojmu farebné koleso, je jeho využitie pri tvorbe farebných schém, t. j. pri rozhodovaní, akú škálu farieb použijeme v našej grafickej práci. V tejto chvíli sem ale patrí malé intermezzo vo forme ďalšieho farebného modelu:

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:

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:

slajder

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:

slajder

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?

slajder slajder
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é:

farby

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

Ako voliť farebnú schému?

model

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.:

model

Inkscape 2

Výplň a ťah

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:

model

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.

ÚLOHA

Presvedčte sa, že rovnakým spôsobom meníme aj farbu ťahu. Aké nastavenie treba vybrať, ak nechceme aby objekt nemal výplň, resp. ťah?

Odpoveď

Stačí vybrať krížik "x" v prvom riadku okna.

Štýl ťahu

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

model

Lomené čiary a krivky

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)):

model

ÚLOHA

Čo sa stane, ak nastavíme farbu výplne pre neuzavretú lomenú čiaru?

Odpoveď

Vyplní sa príslušný uzavretý mnohouholník (t. j. spojí sa posledný vrchol s plným a takto definovaná oblasť sa vyplní).

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:

model

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:

model

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:

model

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).

ÚLOHA

Vyskúšajte modifikovať obdĺžnik tak, aby ste jeho strany vedeli modelovať ako Bézierove krivky.

Postup

1. Vložte na plochu obdĺžnik.

2. Prejdite do režimu editovania ciest (kriviek).

3. V možnostiach režimu stlačte tlačidlo konverzie objektu na cestu (Convert selected object to path).

4. Zo strany obdĺžnika urobíte oblúk tak, že jeho ľubovoľný vnútorný bod "vytiahnete" von (ako je na konci predošlého videa).

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ť:

model

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:

model

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

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:

model

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.

file_upload Úlohy na prácu v rámci lekcie.