Ať už jste v Showit začátečník nebo pokročilý uživatel, každý ocení tipy a triky, které pomohou zrychlit a zefektivnit práci. Představíme si tři užitečné nástroje, které vám ušetří spoustu času při tvorbě webu.


1. MOŽNOSTI ZAROVNÁNÍ

Přesné zarovnání prvků je základem profesionálně vypadajícího webu. Showit nabízí pokročilé nástroje pro zarovnání v pravém postranním panelu pod sekcí ALIGNMENT. Tyto nástroje se automaticky zobrazí, když označíte více objektů najednou.

Pro označení více objektů máte několik možností:

• Můžete jednoduše podržet levé tlačítko myši a táhnout přes oblast s prvky, které chcete označit
• Další možností je držet klávesu Shift a postupně klikat na jednotlivé prvky
• Nebo můžete použít kombinaci Ctrl/Command + klik na každý prvek
• Podívejme se na jednotlivé možnosti zarovnání:

ALIGN TO CANVAS (Zarovnání k plátnu)

Tato funkce umožňuje zarovnat prvky vzhledem k celému plátnu. Můžete centrovat 1. horizontálně nebo 2. vertikálně, což je ideální pro vytvoření vyváženého designu. Všechny vybrané prvky se automaticky zarovnají tak, aby jejich výška nebo šířka byla vycentrována vzhledem k rozměrům plátna.

ALIGN TO GROUP (Zarovnání ke skupině)

Zde můžete zarovnávat prvky vzájemně mezi sebou. Máte šest možností zarovnání:

• Horní okraj: všechny prvky se zarovnají k nejvýše umístěnému prvku
• Střední výška: prvky se vycentrují na společnou střední linii
• Spodní okraj: prvky se zarovnají ke spodnímu okraji nejnižšího prvku
• Levý okraj: zarovnání k nejvíce vlevo umístěnému prvku
• Střední šířka: horizontální vycentrování všech prvků
• Pravý okraj: zarovnání k nejvíce vpravo umístěnému prvku

MATCH SIZE (Sjednocení velikosti)

Tato funkce je neocenitelná pro vytvoření konzistentního vzhledu:

• Sjednocení šířky: všechny prvky získají stejnou šířku jako nejširší prvek
• Sjednocení výšky: výška všech prvků se přizpůsobí nejvyššímu prvku
• Sjednocení obou rozměrů: kompletní sjednocení velikosti všech prvků

DISTRIBUTE (Rozložení)

Pomáhá vytvořit rovnoměrné mezery mezi prvky:

• Horizontální distribuce: rovnoměrné rozložení prvků po šířce
• Vertikální distribuce: rovnoměrné rozložení prvků po výšce

Máte na výběr z několika možností rozložení:

• AUTO (Automaticky) - Automaticky vygeneruje mobilní verzi s optimalizovaným rozložením prvků.

• SCALED (Měřítko) - Vytvoří přesnou kopii desktop verze, pouze přizpůsobenou mobilním rozměrům. Pozor na velikost písma - to bude pravděpodobně potřeba upravit.

• STACKED (Skládaný) - Vycentruje a upraví velikost všech prvků tak, aby je bylo možné snadno ručně přeuspořádat.

• DO NOT LAYOUT (Bez úprav) - Zachová současné rozložení a zkopíruje pouze styly a nastavení.

Dodatečná nastavení:

• Copy Desktop Canvas: přenese všechna nastavení ze stolní do mobilní verze
• Copy desktop elements: zkopíruje nastavení pouze vybraných prvků

Tyto nástroje vám pomohou významně urychlit práci a vytvořit konzistentní design napříč celým webem. Nejlepší způsob, jak se s nimi seznámit, je praktické vyzkoušení - experimentujte s různými možnostmi a najděte si vlastní workflow, který vám bude vyhovovat.

2. KLÁVESOVÉ ZKRATKY

Jedná se o velmi praktickou funkci, kterou oceníte při každodenní práci. Showit nabízí speciální klávesové zkratky pro kopírování a vkládání nastavení mezi prvky nebo mezi stolní a mobilní verzí.

Jak postupovat:

• Vyberte zdrojový prvek a stiskněte Command + C (Mac) nebo Control + C (PC)
• Označte cílový prvek
• Použijte speciální vložení: Shift + Command + V (Mac) nebo Shift + Control + V (PC)

Co všechno můžete kopírovat:

• Text: kompletní styly, hover efekty, přechody a další efekty
• Tvary: veškeré nastavení stylů, hover efekty a přechody
• Ikony: barvy, hover efekty a další nastavení
• Galerie: všechna nastavení včetně efektů a přechodů

3. POMOC S ROZLOŽENÍM MOBILNÍ VERZE

Tvorba responzivního designu je často výzvou. Showit nabízí užitečný nástroj, který vám pomůže převést desktop verzi do mobilního zobrazení.

Jak na to:

1. U příslušného canvasu klikněte na tři tečky

2. Zvolte možnost LAYOUT MOBILE