10 tipů pro export vektorových aktiv ze Skica do Androidu

Výhody vektorů pro rastry jsou zřejmé. Vektorová aktiva jsou menší, snadno upravitelná a mnohem jednodušší na mikromanáž (konkrétně z hlediska velikosti a barvy).

Pracuji na relativně složité aplikaci, která podporuje mnoho různých platforem. S rostoucí velikostí a rozlišením obrazovky (při pohledu na vás, Nexus 6P) pro Android jsme se domnívali, že je nutné aktualizovat stávající aktiva z rastrových do vektorových formátů, aby byla aktiva škálovatelná kvůli potřebě podporovat různá rozlišení.

Většina aktiv, která v současné době používáme, byla původně vytvořena pomocí aplikace Sketch. Při pokusu o převod to způsobilo některé zajímavé problémy. Protože vektorová aktiva jsou v současném API (Android 24) podporována Androidem jen částečně, exportovaná aktiva se zlomila mnoha nečekanými způsoby.

To slouží jako vyšetřovací deník z pohledu designéra, pro pár věcí, které jsme se naučili při pokusu převést všechna rastrová aktiva v aplikaci na vektory pro Android. Uživatelské příručky pro Android Studio nebyly příliš užitečné, pokud jde o řešení problémů.

Ne úplně „plná podpora“

Mnoho zde napsaných pravidel je specifických pro export vektorových aktiv pomocí aplikace Skica. Jsou však také dobrými pokyny pro export čistých a funkčních vektorových aktiv pro použití na všech platformách.

1. Nech to jednoduché hloupé

Tento základní princip pro návrh softwaru platí také pro aktiva: čím jednodušší tvary, tím lépe. Zkuste a pomocí jednoduchých tvarů vytvořte složitá aktiva, která potřebujete. Obecným pravidlem je, že se používá méně cest a kotev, tím je „čistší“. Použití jednoho tvaru je vždy výhodnější než použití více překrývajících se tvarů k vytvoření díla.

2. Nepoužívejte masky

Masky vytvořené pomocí aplikace Sketch nejsou v aktuální verzi rozhraní Android API podporovány. Aplikace Android VectorDrawble (AVD) ignoruje jakékoli maskování provedené v aplikaci Sketch a masky vytvořené v aplikaci Sketch by někdy poškodily program Adobe Illustrator. Pokud se vyskytne situace, kdy je třeba vytvořit stínovací efekt, měl by být ve formě masek použit překrývající se tvar na stávající vrstvě.

K vytvoření požadovaného tvaru použijte operaci pathfinder “Průnik” na stínovací vrstvě se základní vrstvou

3. Vytvářejte obrysy, ne tahy

V situacích, kde je to možné, zkuste se vyhnout použití tahů k vytvoření požadovaných tvarů. Tahy se zbytkem obrázku nejsou vždy v pořádku. Kromě toho AVD nerozlišuje mezi různými pozicemi na hranicích a považuje všechny hranice za „středové“ tahy.

To znamená, že vnitřní ohraničení tloušťky 10 na náčrtu se při vykreslení na AVD stane středním tahem tloušťky 20.

Protože obrysy jsou tvary, vykazují při změně měřítka nebo transformace vždy požadovaný vzhled. Obrysy je také mnohem snazší pracovat, pokud si přejete použít operace s hledáčky.

Můžete snadno změnit tahy na obrysy pomocí CMD + Shift + O.

4. Pathfinders jsou váš přítel

Nejsložitější tvary lze vytvořit ze kompozice jednodušších tvarů pomocí operací pathfinder. Seznamte se s nimi. Takto vytvořené tvary lze správně zobrazit na každém zařízení.

5. Adobe Illustrator je nejlepší nástroj pro odstraňování problémů

Adobe Illustrator vykresluje vektorová aktiva stejným způsobem jako VectorDrawable systému Android (z neoficiálních zkušeností). Pokud se aktivum v AVD nezobrazuje správně, zkuste diagnostikovat problém pomocí aplikace Illustrator. Často je řešení stejně jednoduché jako jen odstranění výplně.

Běžný problém při exportu aktiv pro Android pomocí aplikace Skica.

6. Kombinované a transformované tvary se nemusí zdát tak, jak vypadají

Transformace, jako jsou odrazy a rotace provedené v náčrtu, nejsou v Android VectorDrawable plně podporovány. Výsledkem je, že transformované vrstvy se neobjeví vždy tak, jak očekáváte. Nejjednodušším řešením by bylo vyrovnat každou cestu, která má transformaci, takže transformace se stane součástí cesty.

Avšak v situacích, kdy jsou transformace aplikovány na celé skupiny, by jediný způsob, jak to obejít, byla ruční transformace a umístění každé jednotlivé vrstvy.

7. Průhledné fólie jsou vaším přítelem…

Průhledné fólie jsou řádně podporovány a zobrazovány na všech zařízeních a platformách a podle potřeby je vytvářejí stíny / zvýraznění.

Všimněte si vrženého stínu pod steakem

8.… a přechody nejsou

Na druhou stranu AVD v současné době nepodporuje přechody. Takto vytvořená aktiva se během importu téměř jistě zlomí. Cel stínování by mělo být používáno ve prospěch technik stínového gradientu.

Vržený stín pod steakem zmizí

9. Export kreslících desek, nikoli vrstev

Použití ohraničovacího rámečku v náčrtu k definování rozměrů vektorového díla je technika staré školy. Přestože je stále použitelná metoda definování hranic pro export vektorů, lepší přístup je vytvořit kreslicí plátno, které má stejné rozměry jako výřez, který se pokoušíte definovat. Vrstva ohraničovacího rámečku v díle se při překladu do VectorDrawable xml považuje za samostatnou, ale průhlednou cestu.

10. Sloučení tvarů vyřeší většinu problémů

Exportovaná aktiva obsahují metadata popisující její transformace a složení během jejich editace, protože to uživatelům říká, jak „jak“ bylo vytvořeno. Pokud však jde o export a vykreslení těchto aktiv, tato vnější informace o tom, jak byla složena, často způsobuje více problémů, než řeší (rotace a odrazy prováděné v náčrtu nejsou podporovány), kromě zvětšení velikosti souboru.

Konečný stav aktiva je jediná ukázaná věc, takže v tomto případě je důležitý pouze vzhled konečného stavu.

Sloučením tvaru se vykreslí operace transformace a hledání cesty do díla. To zmenšuje velikost souboru odstraněním zastaralých informací a umožňuje vám přesně zobrazit náhled obrázku.