10 nasvetov za izvoz vektorskih sredstev iz programa Sketch v Android

Prednosti vektorjev pred rastri so očitne. Vektorska sredstva so manjša, jih je mogoče enostavno urejati in jih je veliko lažje upravljati (zlasti glede na velikost in barvo).

Delam na razmeroma kompleksni aplikaciji, ki podpira veliko različnih platform. Z naraščajočimi velikostmi zaslonov in ločljivostmi (gledamo vas, Nexus 6P) za Android, smo se počutili potrebne, da posodobimo obstoječa sredstva od rastrskih do vektorskih formatov, da se sredstva ohranijo razširljivo zaradi potrebe po podpori različnih ločljivosti.

Večina sredstev, ki jih trenutno uporabljamo, je bila prvotno ustvarjena s programom Sketch. To je povzročilo nekaj zanimivih težav med poskusom pretvorbe. Ker je vektorska sredstva v trenutnem API-ju (Android 24) le delno podprta, so izvožena sredstva prelomila na številne nepričakovane načine.

Ta služi kot preiskovalni dnevnik z vidika oblikovalca, za nekaj stvari, ki smo se jih naučili med poskusom pretvorbe vseh rastrskih sredstev v aplikaciji v vektorje za Android. Uporabniški priročniki za Android Studio niso bili posebej koristni, ko gre za odpravljanje težav.

Ne ravno

Številna pravila, zapisana tukaj, so specifična za izvoz vektorskih sredstev s programom Sketch. Vendar so tudi dobre smernice za izvoz čistih in funkcionalnih vektorskih sredstev za uporabo na vseh platformah.

1. Naj bo preprosto neumno

To osnovno načelo za načrtovanje programske opreme velja tudi za sredstva: čim enostavnejše so oblike, tem bolje. Poskusite in uporabite preproste oblike za ustvarjanje zapletenih sredstev, ki jih potrebujete. Splošno pravilo je, da se uporablja manj poti in sidrij, "čistejše" je. Uporaba ene oblike je vedno bolje uporabiti več oblik prekrivanja, da bi ustvarili sredstvo.

2. Izogibajte se uporabi mask

Maske, narejene s programom Sketch, trenutno ne podpirajo Android API-ja. Vse maske, narejene v Sketchu, Android VectorDrawble (AVD) ne upoštevajo, maske, narejene v Sketchu, pa bi včasih zrušile Adobe Illustrator. Če je treba ustvariti učinek senčenja, je treba v primerjavi z maskami uporabiti obliko prekrivanja na zgornjem delu obstoječe plasti.

Uporabite operacijo usmerjevalnika poti

3. Naredite obrise, ne udarcev

Kadar je mogoče, se poskusite izogniti udarcem za ustvarjanje želenih oblik. Risbe ne ustrezajo vedno pravilno ostalim delom slike. Poleg tega AVD ne razlikuje med različnimi mejnimi pozicijami in vse meje obravnava kot "sredinske" poteze.

To pomeni, da notranja meja debeline 10 na Sketchu postane osrednja poteza debeline 20, ko je upodobljena na AVD.

Ker so obrisi oblike, vedno kažejo želeni videz, ko jih pomaknemo ali preoblikujemo. Tudi obrisi so veliko lažji za delo, če želite uporabiti postopke iskanja poti.

S potekom CMD + Shift + O lahko hitro spremenite poteze v obrise.

4. Potniki so vaš prijatelj

Večino zapletenih oblik je mogoče ustvariti iz kompozicije enostavnejših oblik s pomočjo operacij poti. Seznanite se z njimi. Tako ustvarjene oblike je mogoče pravilno prikazati v vsaki napravi.

5. Adobe Illustrator je najboljši sredstvo za odpravljanje težav

Adobe Illustrator upodablja vektorska sredstva na enak način kot Android's VectorDravable (iz naključne izkušnje). Če se sredstvo ne prikaže pravilno v AVD, poskusite diagnosticirati težavo s programom Illustrator. Pogosto je rešitev tako preprosta, kot samo odstranitev polnila.

Pogosta težava pri izvozu sredstev za Android s programom Sketch.

6. Kombinirane in preoblikovane oblike se morda ne zdijo takšne, kot se zdijo

Preoblikovanja, kot so odsevi in ​​rotacije, narejeni na Sketchu, v Android VectorDravable niso v celoti podprti. Posledično transformirani sloji ne izgledajo vedno tako, kot pričakujete. Najlažja rešitev za to bi bila, če bi samo poravnali vsako pot, ki ima preobrazbo, tako da transformacija postane del poti.

Vendar pa se v situacijah, ko se transformacije nanašajo na celotne skupine, edini način za obvladovanje tega ročno preoblikuje in pozicionira vsak posamezen sloj.

7. Prosojnice so vaš prijatelj ...

Prosojnice so pravilno podprte in prikazane na vseh napravah in platformah, z njimi uporabite za ustvarjanje senc / poudarkov, kadar je to primerno.

Upoštevajte kapljico pod zrezkom

8.… in gradienti niso

Po drugi strani AVD trenutno ne podpira naklonov. Tako ustvarjena sredstva se bodo med uvozom skoraj zagotovo zlomila. Senčenje Cel je treba uporabiti v prid tehnikam gradientnega senčenja.

Spustna senca pod zrezek izgine

9. Izvozi umetniške plošče, ne plasti

Uporaba omejevalnega polja v Sketchu za določitev dimenzij vektorskega sredstva je tehnika stare šole. Čeprav je še vedno uporaben način določanja meja za izvoz vektorjev, je boljši pristop ustvariti umetniško ploščo z enakimi dimenzijami kot vidno polje, ki ga poskušate definirati. Plast omejujočega polja v sredstvu se obravnava kot ločena, vendar pregledna pot, ko je preveden v VectorDravable xml.

10. Ploščanje oblik bo rešilo večino težav

Izvožena sredstva vsebujejo metapodatke, ki opisujejo pretvorbe in sestave med urejanjem, saj to uporabnikom pove, kako je bil ustvarjen. Ko pa gre za izvoz in upodabljanje teh sredstev, te nenavadne informacije o tem, kako je bil sestavljen, pogosto povzročajo več težav, kot jih rešujejo (rotacije in odsevi, izvedeni v Sketchu, niso podprti), poleg tega, da se poveča velikost datoteke.

Končno stanje sredstva je edino, kar je prikazano, zato je v tem primeru pomemben samo videz končnega stanja.

Ploščanje oblike bo pretvorbo in delovanje poti usmerilo v sredstvo. To zmanjša velikost datoteke, tako da odstranite zastarele podatke, in vam omogoča natančen predogled slike.