10 sfaturi pentru exportul de resurse vectoriale de la Sketch la Android

Avantajele vectorilor față de rastre sunt evidente. Activele vectoriale sunt mai mici, ușor de modificat și mult mai ușor de micromânat (în special în ceea ce privește dimensiunea și culoarea).

Lucrez la o aplicație relativ complexă care acceptă multe platforme diferite. Odată cu creșterea dimensiunilor ecranului și a rezoluțiilor (privind spre tine, Nexus 6P) pentru Android, am considerat că este necesar să actualizăm activele existente de la raster la formate vectoriale pentru a menține activele scalabile datorită necesității de a susține diferite rezoluții.

Majoritatea activelor pe care le folosim în prezent au fost create inițial folosind Sketch. Acest lucru a cauzat unele probleme interesante în timp ce încercați conversia. Întrucât activele vectoriale sunt acceptate parțial doar de Android în API-ul său actual (Android 24), activele exportate s-au rupt în multe moduri neașteptate.

Acesta servește ca jurnal de investigație din punctul de vedere al unui designer, pentru câteva lucruri pe care le-am învățat în timp ce încercăm să convertim toate activele raster din aplicație în vectori pentru Android. Ghidurile utilizatorului Android Studio nu au fost deosebit de utile atunci când vine vorba de depanare.

Nu tocmai „Suport complet”

Multe dintre regulile scrise aici sunt specifice exportului de active vectoriale folosind Sketch. Cu toate acestea, acestea sunt, de asemenea, recomandări bune pentru exportul de active vector curate și funcționale pentru utilizare pe toate platformele.

1. Păstrează-l simplu Stupid

Acest principiu de bază pentru proiectarea software se aplică și pentru active: cu cât formele sunt mai simple, cu atât mai bine. Încercați să utilizați forme simple pentru a crea activele complexe de care aveți nevoie. Regula generală este, cu cât sunt utilizate mai puține căi și ancore, cu atât este mai „curat”. Utilizarea unei singure forme este întotdeauna de preferat să folosești mai multe forme care se suprapun pentru a crea un activ.

2. Evitați să folosiți măști

Măștile create cu Sketch nu sunt acceptate de versiunea actuală a API-ului Android. Orice mascări realizate în Sketch sunt ignorate de Android VectorDrawble (AVD), iar măștile realizate în Sketch ar putea prinde uneori Adobe Illustrator. Dacă există o situație în care este necesar să se creeze un efect de umbrire, trebuie să se utilizeze o formă de suprapunere deasupra stratului existent în favoarea măștilor.

Folosiți operațiunea de tip „intersectare” de pe stratul de umbrire cu stratul de bază pentru a crea forma de care aveți nevoie

3. Faceți contururi, nu lovituri

În situațiile în care este posibil, încercați să evitați folosirea loviturilor pentru a crea formele dorite. Traseele nu sunt întotdeauna corelate corect cu restul imaginii. În plus, AVD nu face distincția între diferitele poziții de frontieră și tratează toate granițele ca lovituri de „centru”.

Așadar, ceea ce înseamnă asta este că o bordură interioară de grosime 10 pe Sketch devine o cursă centrală de grosime 20 atunci când este redată pe AVD.

Deoarece contururile sunt forme, acestea prezintă întotdeauna aspectul dorit atunci când sunt scalate sau transformate. Schițele sunt, de asemenea, mult mai ușor de lucrat dacă doriți să aplicați operațiuni de parcurs.

Puteți schimba cu ușurință loviturile în contururi folosind CMD + Shift + O.

4. Căii de căutare sunt prietenul tău

Cele mai multe forme complexe pot fi create dintr-o compoziție de forme mai simple, utilizând operațiunile de parcurs. Familiarizați-vă cu ei. Formele create astfel pot fi afișate corect pe fiecare dispozitiv.

5. Adobe Illustrator este cel mai bun depanator

Adobe Illustrator redă activele vectoriale la fel ca VectorDrawable pentru Android (din experiență anecdotică). Dacă un activ nu apare corect în AVD, încercați să diagnosticați problema folosind Illustrator. De multe ori soluția este la fel de simplă decât eliminarea unei completări.

O problemă comună pentru exportul de active pentru Android utilizând Sketch.

6. Formele combinate și transformate pot să nu apară așa cum par

Transformările precum reflecțiile și rotirile efectuate în Sketch nu sunt acceptate pe deplin în Android VectorDrawable. Drept urmare, straturile transformate nu apar întotdeauna așa cum vă așteptați. Cea mai ușoară soluție în acest sens ar fi doar aplatizarea fiecărei căi care are o transformare, astfel încât transformarea devine o parte a căii.

Cu toate acestea, în situațiile în care transformările sunt aplicate grupurilor întregi, singura modalitate de a rezolva acest lucru ar fi transformarea manuală și poziționarea fiecărui strat individual.

7. Transparențele sunt prietenul tău ...

Transparențele sunt acceptate și afișate în mod corespunzător pe toate dispozitivele și platformele, utilizându-le pentru a crea umbre / evidențieri acolo unde este cazul.

Notă umbra de picătură sub friptură

8.… iar gradienții nu sunt

Pe de altă parte, AVD nu acceptă în prezent gradienți. Activele realizate în acest fel se vor rupe aproape sigur în timpul importului. Umbrirea Cel trebuie folosită în favoarea tehnicilor de umbrire gradientă.

Umbra de picătură sub friptură dispare

9. Exportați tablouri, nu straturi

Utilizarea unei căsuțe de delimitare din Sketch pentru a defini dimensiunile unui activ vectorial este o tehnică din vechile școli. Deși este încă o metodă funcțională de definire a limitelor pentru exportul de vectori, abordarea mai bună este crearea unei planșe de artă care să aibă aceleași dimensiuni ca și portofoliul pe care încercați să îl definiți. Stratul casetei de delimitare din activ este tratat ca o cale separată, dar transparentă, atunci când este tradus în VectorDrawable xml.

10. aplatizarea formelor va rezolva majoritatea problemelor

Activele exportate conțin metadate care descriu transformările și compozițiile sale în timpul editării, deoarece acest lucru le spune utilizatorilor „modul” în care a fost creat. Cu toate acestea, atunci când vine vorba de exportul și redarea acestor active, aceste informații extrane despre modul în care au fost compuse adesea provoacă mai multe probleme decât rezolvă (rotațiile și reflecțiile efectuate în Sketch nu sunt acceptate), pe lângă creșterea dimensiunii fișierului.

Starea finală a activului este singurul lucru arătat și, în acest caz, doar aspectul stării finale contează.

Aplatizarea unei forme va transforma transformările și operațiile de parcurs în activ. Acest lucru reduce dimensiunea fișierului prin eliminarea informațiilor învechite și vă permite să previzualizați imaginea cu exactitate.