Jak vytvořit pixelově dokonalou kresbu pomocí Adobe Illustratoru

Tvořit digitální kresby pro použití na webu může být pro začátečníka trochu frustrující, obzvlášť když do díla investuje mnoho času (ať už je to ilustrace nebo ikonka) a nakonec zjistí, že konečný výsledek není zase tak ostrý.

To je něco s čím se musel vypořádat každý, kdo začal používat Adobe Illustrator a důvod, proč jsem se rozhodl vytvořit tento krátký článek s řešením tohoto problému.

1. Vektor vs. Bitmap

Než začneme, chtěl bych trochu objasnit různé standardy o kterých vy, já a každý kdo pracuje jako designer musí vědět.

Existuji dva hlavní typy obrazů, na které člověk narazí když pracuje jako kreativec. Jeden je Vektor and druhý Bitmap.

Vektorový obraz se skládá z jednoho nebo několika objektů tvořených různým počtem kotevních bodů a cest které jsou škálovatelné na jakoukoli úroveň, kterou uživatel požaduje, tento proces proběhne bez jakékoli ztráty kvality.

Na druhou stranu bitmapový obraz se skládá ze série samostatných, pevně daných obrazových bodů zarovnaných do mřížky. Což znamená, že jakmile je obraz pořízen nebo vytvořen v určitém rozlišení, bude ztrácet kvalitu pokud je jakkoliv změněna jeho velikost (zvětšena i zmenšena). Toto nastane když je množství informací obrazových bodů (počet obr.bodů) buď zmenšen nebo zvětšen, jak některé projekty vyžadují různé velikosti pro různé uživatele.

Ačkoli zmenšováni obrazu nebude mít takový dopad na kvalitu, výsledek zvětšení bude ve většině případu rozmazaný a kostičkovaný. Existují programy jako Perfect Resize používající algoritmy pro optimální úroveň jasnosti a detailu obrazu který má být zvětšen. Ale mně to pouze dokazuje důležitost chybějící vlastnosti bitmapy v porovnáni s vektorem: kvalita škálování.

Vektor a bitmapa jsou závislé na použitém médiu. Jak patrně víte, soubor může být zobrazen buď digitálně nebo vytištěn, klíčový je způsob reprodukce obrazu. Zatímco tiskárny jsou závislé na obrazových bodech, digitální obrazovky (PC monitor, obrazovka tabletu a tabletu, atd.) závisí na rozlišení, aby mohly složit a vytvořit jakýkoli obraz, ať už je to bitmap nebo vektor.

To představuje problém ve způsobu jak se vektorové obrazy chovají k mřížce obrazových bodu na které jsou umístěny, tedy rozdíl mezi na pixelově dokonalou a kostrbatou kresbou.

Naštěstí existují řešení která by se podle mého měly stát standardním pravidlem, kterým se budete řídit u každého projektu, ať už jde o obraz na tisk nebo pro web.

2. Porozumění jak funguje Adobe Illustrator

Než začnete něco měnit, musít pochopit to "něco" funguje. Illustrator je software založený na vektorech, využívající matematický algoritmus k vytvoření a zobrazeni cest (ať už ukončených nebo otevřených) které vidíme, použitím kotevních bodů. Tyto kotevní body jsou jednoduché body, pomocí kterých můžete změnit velikost a tvar objektu.

Kotevní body samy o sobě nejsou tak důležité, ale způsob jak je umístíte a objekt který tvoří na plátně (připnutý nebo nepřipnutý) ano. A proto v následujících krocích budu mluvit o všech maličkostech které nám pomůžou vytvořit perfektně ostré umělecké dílo.

3. Úprava nastavení Illustratoru

Standardně má Illustrator několik možností a nastavení, většina z nich jsou předdefinována, takže můžete začít pracovat hned po instalaci na vašem počítači. Pro většinu lidí je toto nastavení dostačující, ale jak se váš workflow bude více zaměřovat na detaily, zjistíte že některá nastavení musíte pozměnit abyste dosáhli takového designu, jakého chcete. V následujících krocích vás provedu základními věcmi, které upravím vždy když mám čerstvě nainstalovanou verzi Illustratoru.

Ještě než začneme, chtěl bych zdůraznit, že toto jsou mé osobní preference, které vznikly stylem "pokus omyl" a za žádných okolností bych je nenazval jako "perfektní"  nebo "správné" spíše "hodící se" pro pixelově perfektní kresbu. Žádná situace nezapadne do stejné šablony, ale často vám toto nabídne spolehlivé řešení k upravě vašeho workflow.

Krok 1

Než upravíme jednotky, podíváme se a porovnáme standardní nastavení Illustratoru s upravenými (pixely) abychom viděli, kde je rozdíl.

Bod

Z typografické perspektivy je bod (b) nejmenší jednotkou používanou pro měření velikosti fontu, odražení a řadkování před odstavcem.

Pixel

Podle Wikipedie, z pohledu digitálního zobrazování je pixel (px) "nejmenší jednotka digitální rastrové grafiky". Protože monitory a další zařízení jsou určena k zobrazování obrazů, můžeme definovat pixel jako základní měrnou jednotku na určení rozlišení zařízení a velikost elementů které jsou zobrazeny.

Čili tu máme dvě jednotky, ale jak se liší? Mnoho článků popisuje, že obě jednotky jsou si rovny (1 b = 1 px) ale pouze na 72 ppi displeji kde 1 b = 1/72 palce. Což znamená, že pokud máte zařízení s vyšším ppi, poměr mezi těmito dvěmi se změní. Pokud se na to podíváte z pohledu CSS, na W3 Org se píše že 0.75 b = 1px.

Apple na to napsal celý článek ve své iOS Developer Library, kde se pokouší vysvětlit, proč používání bodů místo pixelů pomáhá zobrazování obrazů na zařízení s nižším a vyšším rozlišením.

"Například na zařízení s vyšším rozlišením, čára která je jeden bod široká může ve skutečnosti skončit jako čára která je dva pixely široká" Výsledkem je, že pokud nakreslíte stejný obsah na dvě podobná zařízení, kde jedno má vyšší rozlišení, obsah bude na obou stejně velký"

Co ale zapomněli zmínit je, že v této době je značné množství výrobců, kteří mají obrazovky s různou hustotou, čili celý tento příklad je trochu mimo.

Teď si asi říkáte, který si máte vybrat? Já se obvykle přikláním k pixelům. Proč? Řekněme že to je otázka osobního přesvědčení a proto, že moji hlavní tvorbou jsou ilustrační kresby. A nikdy jsem neslyšel si lidi stěžovat, že na jejich iPhonu je nějaká čára tlustší než na jejich PC.

A také pixely nejsou závislé na ppi a pro zařízení s vyšším rozlišením můžete nastavit úroveň ppi při tvorbě nového dokumentu. Plus vzhledem k velkému rozsahu rozlišení napříč různými zařízeními, věřím tomu že na zařízení od Apple se 1 b může rovnat 2 px, ale na zařízení od jiných výrobců se hodnoty mohou lišit v závislosti na použití displejů s vyšší hustotou.

Rozhodnutí je na vás. Pokud zjistíte, že pixely jsou pro vás to pravé, tak zamiřte do sekce Jednotky v menu Předvolby (Upravit > Předvolby > Jednotky) a nastavte hodnoty Všeobecné a Tah na Pixely. Protože typ je založen na bodech, doporučuji ponechat na přednastavené hodnotě a změna na pixely nevede k lepší ostrostí nebo čirosti textu.

Krok 2

Po nastavení jednotek, je čas doladit nastavení mřížky. O tom co je mřížka nebudu moc mluvit, protože o tom mám jiný článek, který vysvětluje vše, co o nich potřebujete vědět. Co vám ale povím je, že pokud chcete vytvořit ostrou a přesnou kresbu, musíte se soustředit na vytvoření super přesné mřížky a pracovat na ní ve spolupráci s módem Náhled obrazových bodů (o kterém si povíme více za pár minut).

Změnu nastavení provedete v Úpravy > Předvolby > Vodítka a Mřížky kde naleznete dvě nastavení které musíte zohlednit: Čáry mřížky po a Dělení. Používám hodnotu 1 již nějakou dobu pro obě nastavení a zjistil jsem, že to skvěle zapadá do mého procesu tvorby a nezáleží na jakém projektu pracuji. Ano, budete muset být více pozorní, ale sakra, jestli jste jako já, pokusíte se zaměřit na detail jak jen to půjde.

Krok 3

Pro všechny z nás, kteří rádi mačkají šipky. Má Illustrator skvělou vychytávku, kde můžete objekty posouvat s vyšší přesností pomocí směrových šipek. A právě proto, že chceme aby bylo vše na pixel přesně, musíme změnit nastavení tak, aby každé zmačknutí klávesy posunulo objekt o přesně jeden pixel v daném směru.

Toto nastavení může být nalezeno v Úpravy > Předvolby > Všeobecné > Krok kláves.

Toto nastavení je super nápomocné vždy, když chceme posouvat objekt rychle a přesně na krátké vzdálenosti.

4. Postup

Do teď jsem mluvil o nastaveních, které můžete udělat, aby byl Illustrator přesnější. Ale příklad obvykle naučí více než pouhý popis funkce. Proto vám ukáži postup, kterým obvykle procházím, když vytvářím něco pro použití na webu.

Krok 1

Vše začíná naším dokumentem. Pokud věnujeme pozornost některým jeho základním nastavením, vytvoříme perfektní základ pro naše dílo, na kterém můžeme začít tvořit.

Stisknutím Ctrl-N (nebo Soubor > Nový) a podíváme se na některá nastavení, počínaje Profilem.

Protože se obvykle soustředíme na tvorbu pixel perfektních věcí pro web, Profil by měl být nastaven na Web. Tím Illustrator automaticky nastaví Jednotky na Pixel a Režim barvy na RGB (Red Green Blue).

Pokud se podíváte blíže na Velikost našeho dokument, zjistíte že Šířka a Výška mají celé hodnoty (960 x 560 px) a ne desetinné (960,5 x 560,38). Ale proč? Když vytvoříte Plátno, které má Šířku 960,5 px, na pravé straně bude část, která nezabírá celou plochu pixelu mimo mřížku. Místo toho zakryje téměř polovinu povrchu.

Toto nechceme, protože po Illustratoru požadujeme zarovnání nových objektu do Pixelové mřížky. Tato funkce je velice důležitá, protože říká každému nově vytvořenému objektu, aby se umístil na správnou pozici do mřížky pixelů a vše bylo ostré.

Například, máme obdélník 960 x 560 px a chceme ho zarovnat na střed našeho Plátna s desetinnou velikostí. To je ale nemožné, protože pravá a spodní strana nezakryjí celou plochu pixelů nachazejících se pod ním.

Někteří z vás si mohou myslet, že toto nastavení by mělo být použito pro obsah na web, ale já si myslím že může být hodnotné při použití pro tisk, protože budete pracovat a umisťovat kotevní body podle přesného systému, místo mrskaní kotevních bodů všude možně.

Rychlý tip: V případě že omylem spustíte projekt, který je založen na desetinných hodnotách šířky nebo výšky, můžete situaci zachránit použitím Kreslící plátno (Shift-O) a změnou hodnot na celá čísla. Ale pokuste se mít velikost v pořádku hned od začátku, předejdete tím problémům později.

Krok 2

Po ujištění, že dokument je správně nastaven, začnu obvykle pracovat na jednotlivých prvcích a dávám pozor, že každý má nastavené celé hodnoty šířky a výšky.

Jak jsem demonstroval v předchozím kroku, pravidlo zakrýtí celého povrchu platí i zde. Pokud chci vytvořit ostře vypadající tvar, například čtverec, potřebuji fixní hodnoty (např. 200 x 200 px) takže každá strana zakrývá přesně stejný počet pixelů plátna. Tím mohu vytvořit tvar, který může být přiblížen na jakákoli procenta a stále být křišťálově čistý a ostrý.

Kdyby můj čtverec měl rozměry 200,4 x 199,9 px, Illustrator by začal používat vyhlazovací efekt na pravou a spodní stranu, protože by nezakrýval celý pixel a můj prvek by vypadal rozmazaně a nepřesně.

Naštěstí pro nás, dobří lidé u Adobe nabízejí způsob jak napravit tyto problémy, přidáním funkce Zarovnat podle mřížky obrazových bodů, která se nachází v záložce Transformace. Pokud jste špatně nastavili velikost objektu a povolili Zarovnat k funkci, automaticky se změní Šířka a Výška čtverce na 200 px, protože to nejbližší celá hodnota identifikována softwarem.

Rychlý tip: pokud toto nastavení není vidět, je to tím, že ho musíte aktivovat kliknutím na dolu směřující šipku v panelu Transformace a výběrem Zobrazit volby.

Krok 3

Toto jsou zdaleka ty nejlepší vlastnosti jaké Illustrator nabízí, když dojde na tvorbu pixelově perfektního designu. I přesto, že obě funkce jsou si podobné, existuje pár klíčových rozdílu mezi nimi.

Přitahovat na mřížku

Jak jméno napovídá, toto nastavení se přímo týká Mřížky kterou jste nastavili. Tato funkce může být aktivována ze Zobrazení > Přitahovat na mřížku (Shift-Control-") a vlastně říká každému objektu z Plátna, aby se připnul svoje hrany k nejbližšímu průsečíku mřížky.

Přitahovat do bodu

Funkce Přitahovat do bodu se chová trochu rozdílně, přitahuje objekty k Mřížce obrazových bodů, která nemůže být upravena. Tato funkce je skryta dokud nezapnete Náhled obrazových bodů (Alt-Control-Y) kdy se změní z Přitahovat na mřížku na Přitahovat do bodu.

Ačkoli rozdílné, je možné nastavit chování Přitahovat na mřížku stejně jako Přitahovat do bodu pokud nastavíte Čáry mřížky po 1 px a Dělení 1, což vlastně znamená vytvoření nejmenší možné mřížky, což je to samé jako Mřížka obrazových bodů.

Krok 4

V kombinaci s Přitahovat do bodu, je tento náhled vaším největším pomocníkem při tvorbě pixelově přesné kresby. Dovoluje vám přiblížit obraz na úroveň pixelu a vidět která část vaší kresby potřebuje upravit. Používám to stále a velmi mi to pomohlo. Jak jsem již zmiňoval, nástroj se aktivuje v Zobrazení > Náhled obrazových bodů nebo použitím zkratky Alt-Control-Y.

Krok 5

Jakmile je výtvor hotov, věnujte trochu času ověření, že všechny kotevní body jsou správně přitaženy k Mřížce obrazových bodů. Pokud narazíte na kotevní bod který odskakuje, jednoduše ho chyťte pomocí Nástroj pro přímý výběr (A), vyberte příslušný kotevní bod a umisťte ho na nejbližší průsečík mřížky.

Možná si myslíte že nastavení Zarovnat podle mřížky obrazových bodů se postará o tento typ problémů, ale moje zkušenost je, že to občas zklame a když na to dojde, spoléhám se na Nástroj pro přímý výběr (A).

Krok 6

Beziérova táhla jsou důležitou součástí jakéhokoli vektorového programu co existuje, jelikož dovolují uživateli upravit tvar a orientaci jakékoli cesty (buď dokončené nebo otevřené). Problémem mnoha začátečníků je, že když s nimi zacházejí, tahají je obvykle všude možně a tím téměř vždy vytvoří tvar který vypadá kostrbatě.

Tajemství je vždy držet Shift a taháme buď vertikálně, horizontálně nebo pod úhlem 45°. Takže jsou vždy zarovnána podle linky v mřížce.

Pokud cesta kterou tvoříte má plochou stranu, zkuste táhnout táhlo tak, aby padlo přesně na horní část této strany bez toho aniž by ji křížila.

5. Jak se vypořádat se změnou velikosti

Při tvorbě pixelově perfektní kresby, změna velikosti může být skutečně bolestivá. Pokud vyberete objekt a přetáhnete jednu hranu do strany, zvětší se nebo zmenší, ovšem v průběhu to také rozdělí objekt na části.

Řešením by bylo použití Změna velikosti (right click > Transformace > Změna velikosti > Rovnoměrně) a použít -50% odečet na zmenšení o polovinu původní velikosti.

Proto je nejlepší plánovat dopředu, abyste věděli jakou přesnou velikost budete potřebovat.

Rychlý tip: I s touto metodou budete mít problémy, speciálně když budete mít velkou skupinu prvků se zaoblenými rohy a zakřivené cesty. Pokud se to stane, budete muset zrušit skupiny a upravit jednotlivé prvky samostatně.

6. Jak se vypořádat s otočením

Pokud máte obdélník, otočit ho je velmi jednoduché, jelikož ho můžete přichytit pomocí kotevních bodů k nejbližší lince mřížky. Ale co zakřivené cesty a s tvary se zaoblenými rohy?

To je pravděpodobně ta nejotravnější část, při tvorbě pixelově perfektní kresby. Jelikož ve většině případů je téměř nemožné připojit kotevní body zpět na mřížku obrazových bodů, což rozhodně ovlivní celkový tvar objektu. Obvykle, když mám obdélník se zaoblenými rohy, který potřebuje otočit, otočím ho a prostě ho tak nechám.

A je to!

Pokud budete postupovat podle těchto tipů, neměli byste mít problém při tvorbě nádherně ostrých kreseb připravené pro jakékoli zařízení.