Navrhování uživatelských rozhraní často vyžaduje použití tvarů a symbolů, aby se vytvořila atraktivní a uživatelsky přívětivá zkušenost. V tomto tutoriálu se naučíš, jak si vytvořit tvary v Adobe XD a používat je symetricky, aby bylo tvoje design efektivnější. Budeme hovořit o tom, jak pracovat se základními nástroji, abychom rychle vytvořili různé ikony a symboly, které můžeš opakovaně používat ve svých projektech.
Hlavní poznatky
- Symboly a tvary mohou být vytvořeny nebo importovány přímo v Adobe XD.
- Použití nástroje Pathfinder umožňuje efektivně spojit čáry a vytvořit složité tvary.
- Symboly by měly být používány pro objekty, které potřebuješ vícekrát, abys ušetřil čas a zajistil konzistenci.
Podrobný návod
1. Aktivace mřížky a začátek s nástrojem příček
Abychom začali vytvářet tvary, nejprve aktivuj mřížku tím, že přiblížíš pracovní plochu. Mřížka pomáhá přesně zarovnat prvky. S nástrojem příčka lze udělat už hodně. Klikni na něj a drž klávesu Shift, abys nakreslil přímku.
2. Vytváření šipek pomocí Pathfinderu
Nyní můžeš přizpůsobit velikost čar, které jsi nakreslil. Označ všechny čáry, které jsi vytvořil, abys mohl použít nástroj Pathfinder. Použij funkci „Přidat“, abys sloučil čáry do jediné šipky. Pokud jsou rohy příliš ostré, aktivuj volbu pro zaoblené rohy.
3. Vytváření ikony Hamburger
Pro ikonu Hamburger nejprve nakresli čáru s určitou tloušťkou. Poté vyber opakující mřížku a přidej dvě další čáry, aby vytvořil tři pruhy pro ikonu vytvořil. Poté seskup čáry, aby ikona zůstala stabilní.
4. Použití nástroje cesty pro kreativní tvary
Nyní použijeme nástroj cesty k vytvoření kreativnějších tvarů. Nakresli kruh a pak přidej pomocí Pathfinderu několik dalších kotevních bodů. To umožní vytvoření zakřivených tvarů, jako je ikona Wi-Fi. Nezapomeň přizpůsobit tloušťku čáry a seskupit celý tvar.
5. Vytváření tlačítek a úprava textu
Abychom vytvořili tlačítko, nakresli obdélník a vyber pro něj vhodnou barvu nebo přechod. Poté přidej textové pole, abys tlačítku přiřadil popis. Nezapomeň, že změny textu se nebudou vztahovat globálně na všechna tlačítka, pokud jsou uložena jako symbol.
6. Vytváření a ukládání symbolů
Abychom vytvořili symboly, označ prvky, které chceš použít jako symbol, a použij klávesovou zkratku Command (Control) + K, abys je převedl do panelu symbolů. Tímto způsobem můžeš stejné prvky používat opakovaně, aniž bys je musel při každém použití znovu vytvářet.
7. Využití schopností úpravy symbolů
Pokud chceš změnit symbol ve svém designu, ale nechceš, aby byla změna globální, můžeš zrušit seskupení symbolu nebo ho převést na normální tvar. To ti umožní individuální přizpůsobení bez vlivu na jiné instance symbolu.
8. Využití praktické funkce hledání
Pokud máš ve svém designu mnoho prvků, funkce hledání v panelu symbolů ti umožní rychle najít konkrétní symbol. Použij jednoduše filtr, abys procházel symboly a snadno je spravoval.
Souhrn - Adobe XD: Efektivní využití symbolů a tvarů
Stručně řečeno, Adobe XD ti nabízí nástroje pro efektivní vytváření a správu tvarů a symbolů. S technikami a klávesovými zkratkami, které byly představeny, jsi schopen optimalizovat své designové procesy a vytvářet konzistentní designy.
Často kladené otázky
Jak vytvořím nový symbol v Adobe XD?Označ požadovaný prvek a stiskni Command (Control) + K, abys ho uložil do panelu symbolů.
Co se stane, když vymažu symbol z panelu symbolů?Symbol bude odstraněn z knihovny, ale zůstane viditelný na kreslicí ploše.
Mohu změnit velikost již vytvořeného symbolu?Ano, pokud přizpůsobíš tloušťku čáry, automaticky se změní všechny instance symbolu.
Jak mohu upravit více instancí symbolu, aniž bych je globálně změnil?Zruš seskupení pravým kliknutím nebo použij klávesovou zkratku Command (Shift) + G.
Fungují texty v symbolech stejně jako jiné prvky?Ne, změny textu symbolu se projeví pouze na specifické instanci a ne na ostatních.
