Advertisement
  1. Web Design
  2. Gravit Designer
Webdesign

Začíname s Gravit Designer

by
Difficulty:BeginnerLength:LongLanguages:

Slovak (Slovenčina) translation by Ryan (you can also view the original English article)

Gravit Designer je, podľa mňa, ďalší veľký editor vektorovej grafiky. Je používateľsky priateľský, profesionálny a naozaj multiplatformový, pretože funguje v prehliadači, na Linuxe, Macu, ChromeOS a Windowse, taktiež sa pripravuje podpora pre iPady a Androidy. Je pod aktívnym vývojom a nové funkcie sú pridávané každý deň pod rýchlym tempom.

A navyše je úplne zadarmo, bez reklám alebo iných spôsobov zpeňaženia. Podľa slov Alexa z Gravitu, ktorého sme sa opýtali, či program ostane zadarmo:

“Áno, on určite zostane zadarmo a nebude zmrzačený nejakým blbým freemium modelom alebo niečím podobným. Možno pridáme nejakú ďalšiu funkcionalitu pre tímy, ktorá bude platená, (pretože musíme platiť za servery) ale Designer ostane zadarmo, pretože chceme, aby všetci mali prístup k voľnému, profesionálnemu nástroju.”

V tomto návode sa pozrieme na niektoré vlastnosti programu Gravit Designer, ktoré ho robia nádejným. Nepôjdeme do toho do hĺbky a nepozrieme sa na každú vlastnosť zblízka, skôr sa pozrieme na rýchly prehľad, aby ste si predstavili, čo sa nachádza v tomto programe. Začnime!

Inštalácia a prvé spustenie

Keď chcete použiť jednu z verzií pre počítače, choďte na designer.io/#download a stiahnite si inštalačný súbor pre váš systém. (Všimnite si, že je tam problém s rozbalovacími políčkami, takže tí, čo používajú Linux by mali použiť verziu pre prehliadače).

Pre tých, ktorí uprednostňujú verziu pre prehliadače–ktorá má výhodu v tom, že je stále najnovšia–otvorte designer.gravit.io.

Už zo začiatku vidíme uvítaciu obrazovku, ktorá nám dáva možnosť nastaviť si preferovanú šírku a výšku nášho dokumentu. Avšak tieto políčka môžeme nechať prázdne a naše plátno bude nekonečné, čo je skvelá vlasnosť vtedy, keď neviete, v akej veľkosti budete vytvárať návrh.

Na prvej obrazovke vidíme ponuku asi päťdesiat predurčených sád dimenzií, z ktorej si môžeme vybrať z 19 určenú pre tlač, 8 pre návrh/ stránky, 15 pre sociálne média, 6 pre telefóny a hodinky a 7 pre tablety.

Keď si zaregistrujete účet Gravit Cloud, získate prístup k ďalším už vytvoreným šablónam kliknutím na kartu New from Template, ktorá je na ľavej strane obrazovky.

Niekoľko dopredu vytvorených šablón pre sociálne média

Tu nájdete 50 šablón pripravených k použitiu, 36 snímok pre prezentácie, 18 plagátov, 24 šablón na príspevky na Facebook, 23 grafík na blog, 26 plagátov vo formáte A4 a 20 pohľadníc. Môžete ich použiť ako sú, alebo tvoriť na ich základe. Kolekcia bola spustená iba pred pár týždňami, počet šablón bude rásť.

Rýchly prehľad rozhrania

Našťastie je rozhranie programu Gravit Designer celkom intuitívne, takže by ste sa nemali straiť, aj keby ste boli slepý. Pozrime sa na niekoľko kľúčových komponentov.

Prvá vec, ktorú by ste mali vedieť, že rozhranie nemusí byť fialové. Keď máte radi fialovú, môžete ho ponechať také, aké je, ale keď chcete viac monochromatické rozhranie, choďte na hlavné menu, ktoré je na ľavom hornom rohu, vyberte Edit > Settings a vyberte si buď “Dark Theme” alebo “Light Theme”.

Rozhranie je podobné s rozhraním programu Sketch. Na vrchnej strane máme nástroje, ktoré by ste našli v každej vektorovej aplikácii, ako je pohyb plátna a ovládanie priťahovania, tvorba textu a cesty a nástroje výberu, otáčanie a obrátenie tvaru, viac-tvarové operácie, ovládanie poradia a skratky pre export a prezentáciu. Vedzte, že je možné otvoriť viacero dokumentov, ktoré budú dostupné pomocou kariet na hornom pravom rohu.

Gravit menu options

Na ľavej strane máme tri karty: Layers, LibrariesTutorials. Karta Tutorials (ktorá bude od verzie 3.2 posunutá do sekcie Help dostupná v menu) je skvelým pomocníkom, hlavne keď začínate s Gravitom. Karta Libraries vám ponúka kolekciu položiek, ktoré viete potiahnuť do plátna–tie sú rozdielne od šablón. Karta Layers je karta, ktorú budete mať otvorenú vo väčšine času, pretože zobrazuje zoznam všetkých vašich stránok, (viac neskôr) a, to najdôležitejšie, vaše vrstvy.

Na pravej strane vidíte ovládanie, kde sa ovládače zobrazujú podľa kontextu vybraného objektu. Keď nie je vybratý žiaden objekt, zobrazia sa nastavenia dokumentu.

Stránky; podobné ako kresliace plátna

Stránky v programe Gravit Designer je niečo, ako hybrid medzi stránkami a kresliacimi plátnami, ktoré môžete nájsť v iných aplikáciách. Každá stránka je ako samostatný dokument s vlastnými rozmermi, spadávkami, okrajmi a nastaveniami farby plátna. Začínate iba s jednou stránkou a ďalšie môžete postupne pridávať kliknutím na tlačidlo Create New Page na pravom hornom roku panela Pages. Potom si môžete pozrieť akúkoľvek stránku vybratím jednej z panela.

Ak chcete používať stránky rovnako, ako používate kresliace plátna, aktivujte prepínač naľavo od ikony koša a naraz uvidíte niekoľko stránok v “Režime viacerých stránok”. Tieto stránky môžu byť posunuté alebo zmenené do iných veľkostí ako keby to boli jednotlivé dokumenty. V režime viacerých stránok môžete duplikovať stránky kliknutím na názov plátna a potom buď stlačením tlačidla Alt + posunutím myšou alebo skratkou Ctrl / Cmd + D.

Stránky v Gravite taktiež majú skvelú vlasnosť “Hlavné stránky”. Pomocou tejto vlastnosti si môžete nastaviť stránku, aby sa správala ako “hlavná stránka” s prvkami ako sú pozadia, hlavičky, ktoré sú bežné aj na iných stránkach. Potom môžete nastaviť ostatné stránky, aby kreslili všetok obsah z hlavnej stránky, kde môžete vytvárať ďalšie prvky. Keď niečo zmeníte na hlavnej stránke, zmení sa to aj na ostatných stránkach.

A ďalšou skvelou funkciou je, že pomocou stránok môžete vytvoriť prezentáciu “podobnú PowerPointej prezentácii”. Stačí kliknúť na tlačidlo Play, ktorý sa nachádza na pravom hornom rohu a môžete prezentovať. Šípkou dole pôjde na ďalšiu snímku a šípkou hore na predchádzajúcu.

Gravit v režime prezentácie

Cesty a tvary

Tvorba ciest a tvarov v Gravite má podobné nástroje ako každý iný program na vektorovú grafiku. Na kreslenie použijeme obyčajný nástroj pero a taktiež môžeme nakresliť rovné čiary, obdĺžníky, elipsy, mnohouholníky, trojuholníky, hviezdy, atď.

Avšak je tu ešte jeden nástroj navyše, ktorý je veľmi nápomocný, a to je nástroj vagón. Keď podržíte tlačidlo Alt skladania bodov pomocou nástroja vagón, na každý bod budú vytvorené hladné krivky.

Keď budú cesty a tvary nakreslené, ich vlastnosti sa dajú zmeniť pomocou panela na pravej strane. Obyčajné cesty môžu byť nastavené ako otvorené alebo zatvorené, takže cesty sa dajú jednoducho zatvoriť, ktoré nie sú správne zakončené alebo otvoriť, keď chcete pokračovať v pridávaní bodov. Tvary majú nastavenia založené na kontexte ako je prevedenie elíps do koláčových tvarov alebo nastavenie počtu strán na mnohouholníku alebo hviezde.

Obyčajný text a text na ceste

Nástroj text funguje rovnako ako v iných aplikáciách. Keď máte vybratý nástroj text, môžete kliknúť na bod a začať písať text s dynamickou veľkosťou alebo kliknúť na nakreslený tvar, kde bude text vykreslený.

A funkcia, ktorá bude veľmi nápomocná pre webových návrhárov, ak napíšete “lorem” a stlačíte medzeru, vypíše sa vám automaticky vygenerovaný odsek textu “Lorem ipsum”.

Mať text, ktorý nasleduje cestu je veľmi jednoduché s Gravitom. Nakreslite akúkoľvek cestu, posuňte kurzor nad cestu až pokiaľ neuvidíte na nej červenú čiaru a potom na ňu kliknite. Toto vyinštancuje nejaký ďalší text, ktorý bude nasledovať tvar cesty. Cesta môže byť neskôr upravená a text sa tvarovo prispôsobí.

Keď kliknete na ten text, budete mať prístup k nastaveniam na pravej strane, kde môžete nastaviť text, aby bol vo vnútri alebo mimo cesty a môžete ho obrátiť. Na zmenu polohy použite oranžový ukazovateľ.

Integrácia Google Fonts

Väčšina návrhárov už toto zažila niekoľko krát: choďte na Google Fonts, vyberte si písmo, stiahnite ho, nainštalujte ho, reštartujte aplikáciu, vyberte písmo a keď vám to písmo nesedí, opakujte. Alebo použije aplikáciu ako je Skyfonts aby nahradila krok “stiahnutia a inštalácie”.

Avšak v Gravit Designer je celý výber z Google Fonts dostupný ihneď v jednom políčku, takže písma sa používajú rovnako ako obyčajné, nainštalované písma.

Vlastné písma môžete do webovej verzie pridať pomocou File > Import > Add fonts...

Samozrejme, dostupnosť webových písem neznamená, že nemôžete používať systémové písma–pokiaľ používate inštalovateľnú verziu, môžete používať aj písma nainštalované na počítači.

Viacero výplní a stroke

Niečo, čo milujem v Gravite je podpora pre viacero výplní a stroke. Vo väčšine aplikácií, keď chcete vytvoriť kompozitný efekt kladením hluku nad obloženým obrázkom nad obyčajnou farbou, vždy potrebujete zduplikovať cieľový tvar. V Gravit to nie je potrebné, pretože v tomto programe môžete pridať niekoľko výplní a okrajov na jeden ľubovoľný tvar:

Každá výplň alebo okraj sa správa ako samostatná vrstva, spolu s jeho stavom zobrazenia alebo skrytia, režimom miešania alebo nastavenia priehľadnosti. Výplne môžu byť zoradené v akomkoľvek poradí. A pretože môžete používať jednoduché farby, textúry, gradienty alebo hluk, tu je dosť priestoru pre kreativitu.

Efekty: Lepšie ako štýly vrstvy

Efekty v Gravite sú podobné efektom vrstvy s ktorými ste oboznámený v iných aplikáciach, ale rovnako ako s výplňami a stroke, vy nie ste obmedzený na jednu vrstvu-môžete ich mať koľko len chcete.

Efekty zahŕňajú štandardný vrhnutý tieň (môže byť aj ako vonkajšia žiara), vnútorný tieň (vnútorná žiara) a vrstva (farba alebo gradient). Efekty stroke a vrstvy vzoru nie sú potrebné vďaka nástrojom Gravitu pre výplň a stroke. Avšak existuje aj niekoľko zaujímavých prídavných efektov ako je “zrkadlo”, čo vytvára odraz pod tvarom alebo “krivá tieň”, čo vytvára tieň podobná tejto:

Taktiež je tam Gaussovské rozostrenie, vigneta, jednoduchý slider pre odtieň farby a efekt podrobnejšieho nastavenia farby. Všetky tieto efekty môžu byť vrstvené a nastavené podľa chuti počas procesu dizajnu.

Zdieľané štýly: Pre stavy a ušetrenie času

Gravit má schopnosť vytvárať štýly, ktoré určujú výplň vrstvy, okraje, efekty a nastavenia textu. Tieto štýly majú niekoľko sa dajú aplikovať na niekoľko spôsobov.

Prvým spôsobom je vytváranie štýlov pre reprezentáciu rozličných stavov jednakého tvaru, ako je vzhľad predvoleného a vznášajúceho sa tlačidla. Druhým spôsobom môžete aplikovať štýl na viacero objektov v plátne a potom ho aktualizovať na jednom z nich, aby mohli byť aplikované aj na iných.

Kotvy pre polovičnú responzívnosť

Nastavenia kotvy vám umožňujú určiť, ako má tvar reagovať, keď je veľkosť rodiča zmenená, kde môžete vytvoriť polovične responzívnu funkcionalitu a ušetriť kopec času.

Zduplikovaný vrch, spodok a horizontálny stred stránky, (hore) ktorý ovláda odpoveď na zmenu veľkosti rodiča.

Napríklad, keď vytvárate UI, ktoré má pracovať vo viacerých rozlíšeniach, môžete vytvoriť layout v jednej veľkosti a potom nastaviť kotevné body pre ovládanie toho, čo majú robiť prvky návrhu. Potom môžete vytvoriť duplikát aktuálnej stránky a zmeniť jej veľkosť, ponechajúc väčšiny návrhu bez toho, aby sa robil odznovu.

Záver

Gravit Designer je už skvelým softvérom a ukazuje veľmi silný potenciál. V ďalšej verzii, verzii 3.2, budú zahrnuté symboly, čo bude poslednou skladačkou pre požiadavky dizajnérov. Pozrite sa, čo vás čaká v pláne vydaní.

Gravit je mocný, pružný, aktívne vyvíjaný, naozaj multiplatformový a úplne zadarmo. Takže keď pracujete s vektormi z akéhokoľvek dôvodu, mali by ste skúsiť Gravit Designer.

Pre viac informácií navštívte designer.io.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.