#3 Digitální design s aplikací Sketch

Ahoj, pohodlně se usaď, vyhraď si pár minut svého drahoceného času a pozorně čti. Dnes se podíváme na to, jak se kombinují tvary, co to vlastně kombinace tvarů znamená a jakých výsledků můžeme dosáhnout.

Tvary a jejich kombinace

Kombinace tvarů je skutečně mocný nástroj, který nám pomůže vytvořit tvary, které bychom jinak jen těžce a zdlouhavě ručně ladili. Aplikace nám nabízí 4 možnosti kombinace tvarů:

Obrázky nahoře znázorňují, co se stane s objekty pokud je zkombinuješ. Výsledkem kombinací tvarů jsou vždy zeleně vyznačené tvary. Vypadá to logicky a taky to logicky funguje.

Nezapomeň na to, že u operace Subtract je zásadní pořadí objektů. Co se tím myslí? Na příkladu se čtverci to není možná dobře vidět, když si ale vytvoříš kruh a čtverec, tak poznáš co mám namysli.

Vytvoř si nový artboard, nezapomeň ho smysluplně pojmenovat, a vlož si do něj čtverec o rozměrech 10 x 10 a kruh o rozměru 10 x 10.

Ve svém artboardu máš naši ”výhozí” situaci (pravděpodobně jen jiné barvy). Jak jsem řekl, pořadí rozhoduje (tím se myslí pořadí prvků v artboardu), nejvyšší prvek je úplně nahoře a naopak.

Pokud necháš pořadí v artboardu tak, že je nahoře kruh a pod ním čtverec, bude výsledkem operace Subtract druhý obrázek.

Pokud bude v artboardu umístěn čtverec před kruhem, výsledkem bude půlkruh z třetího obrázku.

Dobrá rada pro kombinování tvarů

Na našem cvičném příkladu to nebylo potřeba, ale až budeš dělat něco opravdového (rozsáhlého), tak se ti bude hodit následující rada. Před tím než tvary zkombinuješ (je jedno, kterou operaci si vybereš), doporučuji si oba/všechny tvary zkopírovat bokem. Proč? Je to podle mě dobrý zvyk, který ti pomůže rychleji pracovat.

Dříve taky platilo, že po tom co jsi provedl operaci “Flatten” (o tom, co to je si řekneme za chvíli), už nešlo jít zpět a dostat tak své původní tvary, které jsi kombinoval.

Pokud zkombinuješ tvary a provedeš operaci “Flatten” po čase už možná nebudeš přesně vědět, jak jsi tvar dostal (kombinací jakých tvarů), proto je taky dobré si původní obrazce uchovat (nejlépe v odděleném artboardu).

Sjednocování tvárů — jak na to?

Možná sis už někdy všimal/a, že po sjednocení tvarů ti zůstane mezi objekty tenký průsvitný proužek, jakoby ti prosvítá pozadí. Proč tomu tak je? Stane se to v případě, pokud se sjednocované tvary nepřekrývají. Obrázek ti napoví, co tím myslím.

Pokud se čtverce pouze dotýkají svýmí hranami, tak jak je tomu na obrázku vlevo, dojde k výše popsanému, tedy po sjednocení bude hranice mezi objekty prosvítat. A fakticky tak také nedojde k sjednocení objektů (ani po operaci Flatten). Pokud se objekty překrývají, jak v případě vpravo, vše bude v pořádku a výsledek bude perfektní.

Proč dostávám divné výsledky při sjednocování?

Možná už se ti někdy podařilo to co mě, a Sketch po provedení akce Union zobrazil nestandardní výstupy. Výsledek se spíše podobá operaci Difference. Podívej se na obrázek níže, který ti napoví, o čem mluvím.

Chtěl jsem vytvořit tvar písmene “L” a očekával jsem, že pokud provedu funkci “Union” a sjednotím dva obdélníky, dostanu výsledek jako na obrázku uprostřed. Bohužel byl výsledkem operace obrázek vpravo. Tuto “chybu” jsem objevil, když jsem navrhoval ikony a chtěl jsem sjednotit dva obdélníky o šířce/výšce 1px.

Jedno řešení nabízí Peter Nowell v jeho článku týkající se aplikace Sketch. Vysvětluje, že k tomuto výsledku dojde v případě, že objekty mají jinou orientaci (jdou opačnými směry). Jeho řešení je následovné:

1. sjednocené tvary je potřeba znovu rozdělit — buď přímo v artboardu přesunout jeden z obdélníků mimo sjednocený tvar a nebo jít následující cestou: Layer->Paths->Split.
2. U jednoho z objektů je potřeba změnit směrování: Layer->Paths->Reverse Order.
3. Rozdělené objekty znovu sjednotit a vše by mělo být v pořádku.

V některých situacích mi bohužel jeho řešení nepomohlo a musel jsem přijít se svým vlastním:

1. Po sjednocení tvarů s neobvyklým výsledkem proveď operaci Flatten.
2. Dvakrát klikni na vytvořený objekt a zobraz si tak všechny body vytvořeného vektoru.
3. Vymaž přebytečné body a je hotovo (jako návod ti poslouží obrázek níže).