<< Späť

04 -- O písme, Inkscape 3

Ďalšou nedomysliteľnou súčasťou grafického dizajnu je typografia, resp. používanie písma. Texty, či už vo forme bloku alebo nadpisu nachádzame takmer na všetkých grafickách prácach, či už ide o postery, informačné tabule, etikety výrobkov a samozrejme sú hlavným nástrojom na sprostredkovanie informácií v knihách, novinách či na webových stránkach.

Font, rodina fontov

Súbor písmen, interpunkčných znamienok, číslic a špeciálnych znakov, majúcich jednotnú grafickú podobu, nazývame font.

Rodina fontov (angl. typeface, font family) je súbor fontov, ktoré majú spoločné dizajnové črty, avšak líšia sa vo vlastnostiach ako hrúbka, sklon a pod.

Fonty môžeme charakterizovať nasledovnými vlastnosťami:

Jeden typeface môže obsahovať hoc len jediný font (mnoho príkladov nájdeme v tzv. výstavných (display) fontoch), avšak množstvo rodín obsahuje fonty s rôznymi variáciami. Preto predtým, než sa rozhodneme pre nejakú rodinu, je dôležité premyslieť si, na čo všetko ju chceme použiť. Z toho vyplýva, že musíme zodpovedať otázku, aké množstvo fontov v rámci typefacu budeme potrebovať a koľko fontov vybraná rodina ponúka.

Kategorizácia fontov

Hoci enumerácia vlastností fontov mohla pôsobiť ťažkopádne, je dôležité (a prinajmenšom zaujímavé 😊) všímať si, v akom kontexte sa využívajú (napr. nadpisy bývajú zvyčajne tučnejším písmom ako ostatný text). Pre úplnosť si preto uvedieme ďalšie delenie fontov (aj so zreteľom, ako to využiť v praxi) a zodpovieme aj význam niektorých, možno neznámych výrazov v predošlom texte.

Pätky

Pätka (serif) je krátka čiara, ktorá slúži ako vizuálna opora inej, dlhšej čiary nejakého znaku. Na základe prítomnosti pätiek vo fonte rozlišujeme:

  • pätkové fonty (serif fonts) -- hlavnou výhodou pätiek je schopnosť vytvárať líniu, ktorá vizuálne oddeľuje riadky v rámci odstavca textu. Preto pätkové fonty stretávame najčastejšie vo výtlačkoch, ako sú noviny či knihy, kde je na relatívne malej ploche obsiahnuté veľké množstvo textu.

    Zaujímavosťou je, že pätky sa používali už v starovekom Ríme (kvôli tomu sa v názvoch zvykne vyskytovať prípona "Roman") a pravdepodobne vznikli ako dôsledok tesania nápisov do kameňa, kde pätka slúžila ako zakončenie znaku a mala šírku klina (t. j. pätka = jeden buch klinom).

    Všimnite si spodnú, takmer neprerušenú líniu slova "Minimal" vo fonte Times New Roman: 06
  • bezpätkové fonty (sans-serif/gothic fonts) -- hoci bezpätkové písma si hľadali svoju cestu k popularite veľmi ťažko (prvý výtlačok je z roku 1816), skutočný rozmach začali zažívať až s príchodom moderných počítačov. Dôvodom bolo nízke rozlíšenie obrazoviek, čo spôsobovalo, že pätky neboli (dobre) viditeľné pri malej veľkosti písma. Samozrejme, časom sa ukázalo, že tento typ písma je užitočnejší, nakoľko je flexibilnejší vzhľadom na rôzne variácie (napr. extra tučné písma sú vhodné na plagáty, na ktoré sa často hľadíme z diaľky).
    Okrem širokého využitia pre nadpisy, v súčasnosti sa bezpätkové fonty používajú aj na odstavce textu, avšak najmä na webových stránkach. Tam už nie je obmedzenie plochy, čiže medzi jednotlivými riadkami možno vložiť dostatok bieleho miesta, aby sa dali vizuálne jednoducho rozoznať.
    Font Impact sa kvôli svojej výraznosti udomácnil na rôznych memes: 07
  • Proporcionalita

    Jednotlivé znaky majú svoju prirodzenú šírku, ktorá sa môže od znaku ku znaku líšiť. Takéto fonty nazývame proporčné a patrí sem väčšina dostupných fontov.

    Existujú však fonty, v ktorých má každý znak rovnakú šírku (ako na písacom stroji). Tieto fonty sa označujú pojmom monospace a využívajú sa najmä pri písaní kódu v textových editoroch. Radíme sem písma, ako Courier či Consolas.

    Sledujte šírky znakov "i" a "m" v prípade proporčného písma Century Gotihic a monospace písma Consolas:

    08

    Výstavné fonty

    Ako sme spomínali, existuje skupina fontov, ktoré sú určené primárne pre malé kusy textu (nadpisy, názvy a pod.). Tieto fonty stretávame pod anglickým pojmom display fonts. Zaraďujeme sem rôzne druhy kaligrafie -- podľa typu použitého pera rozlišujeme:

    09

    Hoci tieto skupiny fontov imitujú písané písmo, ktorým sa píšu (písali) rozsiahle texty, napr. listy, knihy, pri digitálnom grafickom dizajne treba s nimi narábať opatrne, nakoľko ich prepoužitie môže pôsobiť rušivo -- často sú dekoratívne až do takej miery, že väčšie množstvo textu je nečitateľné.

    Ďalej sem patria všetky ostatné dekoratívne fonty (napr. font použitý v logu Star Wars). Nie je nezvyčajné, že ako výstavné rozumieme aj extra tučné variácie "klasických" pätkových, či bezpätkových fontov. Niektoré fonty sú vytvorené len pre výstavný účel, napr. Bowlby One:

    10

    Praktické rady k používaniu fontov

    Ak si začneme prezerať frekventované webstránky, môžeme si všimnúť, že väčšina využíva len niekoľko (2, max. 3) typefacov. Bezpečnou voľbou je zvoliť jeden výrazný (display) font pre nadpisy a jeden neutrálny font pre odstavce textu. Taktiež je odporúčané používať fonty v rámci jedného typefacu, čiže experimentovať s váhou, sklonom a pod.

    Taktiež zaujímavým prístupom je použiť font ako obraz, nielen ako text. V posledných rokoch sa dostáva do popredia používanie tzv. hero images, kde výrazný font je priamo súčasťou obrázku, či dokonca, obrázok je tvorený len textom. Výstižným príkladom je úvodná webstránka služby Spotify, kde kontrastný a dominantný text je doplnený decentnými grafickými prvkami (časti kružníc po obvode):

    11

    Ďalšia otázka je, ako sa k zaujímavým fontom dostať. Väčšina fontov, ktoré dostaneme so systémom, resp. textovým/grafickým editorom sú opozerané (napr. Comic Sans, Monotype Corsiva) a navyše ich býva malý počet. Avšak aj v tejto ponuke existujú nadčasové fonty a netreba ich hneď zavrhovať (napr. Arial, Times New Roman).

    Komerčné fonty bývajú veľmi drahé (rádovo 500€ + / typeface) a pre drobných dizajnérov predstavujú obrovské náklady. Našťastie, v roku 2010 začal Google ponúkať službu Google Fonts, ktorá ponúka fonty určené a optimalizované pre zobrazenie na webe. Hlavnou výhodou webfontov je, že sú často vytvorené profesionálnymi dizajnérmi (sú vizuálne nerušivé) a sú voľne dostupné.

    Pri výbere fontov je potrebné dbať na to, aby obsahovali aj znaky s diakritickými znamienkami (napr. š, č, ž), aby sa text v slovenčine zobrazoval správne.

    Inkscape 3

    Text

    Posledným objektom, ktorému sa budeme venovať v rámci práce s Inkscapom je text. Inkscape nám umožňuje vkladať text dvomi spôsobmi -- nadpis (kliknutie na plátno), odstavec (kliknutie + ťahanie na plátno, všimnite si, ako jednoducho vieme meniť veľkosť bloku):

    11

    V režime textu vieme pracovať, ako sme zvyknutí v textových editoroch (napr. MS Word), čiže vieme text označovať, vymazávať, prepisovať. Inkscape nám pohodlne umožňuje meniť typeface, variácie fontov a ich veľkosť:

    Taktiež, vieme určovať rozostupy medzi jednotlivými písmenami, či slovami. Je dôležité vždy označiť časť textu, na ktorú chceme rozostup aplikovať:

    Ďalším užitočným nástrojom je nastavenie rozostupu medzi riadkami v bloku textu:


    ÚLOHA

    1. Skúšajte meniť farby jednotlivých slov, resp. písmen v texte.

    2. Vyskúšajte meniť hodnoty horizontálneho a vertikálneho kerningu 09 pre vybranú časť textu (nie celý text). Ako sa to prejavuje?

    Odpoveď

    Kerning znamená posunutie vybratej časti textu. Môže sa použiť na vytvorenie horného/dolného indexu alebo na rôzne expresívne prvky.


    Text na cestu

    Niekedy nám nemusí stačiť nadpis, ktorý je vodorovný (tok textu nasleduje úsečku). Inkscape nám umožňuje text ohýbať. Potrebujeme nadpis (text) a krivku, na ktorú sa má nadpis "prilepiť":

    Objekt na cestu

    V praxi je veľmi potrebné vedieť pracovať s rôznymi objektami ako cestami. Napríklad, pokiaľ modelujeme nejakú uzavretú oblasť (chceme nastaviť výplň), často začíname napríklad z obdĺžnika, ktorý konvertujeme na cestu (Bézierov splajn). Takto môžeme na cestu meniť jednak obdĺžniky, mnohouholníky a elipsy, ale aj samotný text:

    Presné modelovanie útvarov

    Doteraz sme jednotlivé objekty v Inkscape ukladali "halabala", čo v praxi nie je veľmi užitočné. Práve naopak, potrebujeme, aby jednotlivé objekty mali svoje presné miesto a boli presne umiestnené medzi sebou (napr. štvorec a kružnica s rovnakým stredom). Na tento účel inkscape poskytuje niekoľko nástrojov: vodiace linky, mriežka a prichytávanie.

    Vodiace linky

    Vodiace linky sú pomocné čiary, ktoré nie sú viditeľné v exportovanom obrázku. Na plochu ich dostaneme vytiahnutím z pravítka, podľa toho či potrebujeme vodorovné alebo zvislé. Na vodiace linky vieme aplikovať posunutie a otočenie:

    Mriežka

    Ďalší typ pomocných čiar, ktoré si môžeme vytvoriť je mriežka. Ide v podstate o imitáciu štvorčekového papiera. Z osobnej skúsenosti, najčastejšie používam mriežku, kde jedna bunka má 10x10px a zývraznené čiary sú každých 100px. Spôsob, ako nastaviť túto mriežku je uvedený vo videu:

    Prichytávanie

    Teraz si ukážeme ako v praxi využijeme vodiace linky či mriežky na prácu s objektmi. Jednotlivé objekty (a ich časti) môžeme prichytávať, čo nám zabezpečí presné umiestnenie na plátne.

    Prichytávať môžeme vzhľadom na nasledovné prvky:

    Treba si dávať pozor, aby nebolo zapnutých mnoho režimov prichytávania naraz, nakoľko to môže sťažiť prácu s objektami či uzlami. Správnosť prichytenia je vždy zvýraznená textom na mieste styku.

    ÚLOHA

    Vyskúšajte aj ostatné možnosti prichytávania (napr. vzhľadom na mriežku či okraje strany).

    Poradie objektov

    Keď sa nám plátno začne zapĺňať objektmi, ktoré sa navyše aj prekrývajú, môžeme potrebovať meniť ich poradie, t. j. ktoré objekty sú bližšie k pozorovateľovi a ktoré ďalej.

    Poradie objektov môžeme meniť vybratím možnosti z menu "Object" (v praxi je pohodlnejšie používať uvedené klávesové skratky):

    13

    ÚLOHA

    Umiestnite si na plátno niekoľko objektov rôzneho tvaru a farieb tak, aby sa niektoré z nich prekrývali. Skúšajte uvedeným spôsobom meniť poradie objektov o jeden stupeň (raise/lower) prípadne zaradiť objekt úplne nadol (lower to bottom), resp. úplne nahor (raise to top).

    Sledujte správanie jednotlivých funkcií.

    Množinové operácie

    Ďalším užitočným nástrojom je použitie množinových operácií (napr. vyrezať menší kruh z väčšieho štvorca). Množinové operácie zodpovedajú tým, s ktorými sme sa stretli na kurzoch diskrétnej matematiky (zjednotenie, prienik, rozdiel). V Inkscape ich vykonáme tak, že označíme všetky objekty, na ktorých chceme operáciu vykonať a z ponuky vyberieme požadovanú operáciu. Pri rozdiele je potrebné dbať na poradie objektov (vždy sa odčíta vrchnejší objekt od spodnejšieho). Je vhodné používať množinové operácie vždy len na dvojicu objektov, nakoľko pri väčšom počte označených objektov môžeme dostať neočakávaný výsledok 😊:

    Ako sme videli, existuje operácia rozdelenia, ktorá rozdelí objekt na osobitné objekty. Treba dávať pozor, že pokiaľ vrchnejší objekt nie je podmnožinou spodnejšieho, oreže sa tak, aby táto podmienka bola splnená.

    Vytváranie skupín

    Pokiaľ chceme robiť transformácie s viacerými objektami a nechceme zakaždým označovať všetky potrebné, môžeme ich zhlukovať do skupín. Skupinu vieme vytvoriť, aj rozpustiť. Avšak pokiaľ chceme pridať do skupiny nový objekt, je potrebné pôvodnú skupinu rozpustiť a vytvoriť novú skupinu aj s novým objektom. V opačnom prípade sa nám skupiny začnú do seba vnárať, čo sťažuje modifikáciu jednotlivých objektov v rámci skupiny:

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