10 Tips untuk mengeksport aset vektor dari Sket ke Android

Kelebihan vektor untuk raster adalah jelas. Aset vektor lebih kecil, mudah disunting, dan lebih mudah untuk micromanage (khusus dari segi saiz dan warna).

Saya bekerja pada aplikasi yang kompleks yang menyokong banyak platform yang berbeza. Dengan saiz skrin dan resolusi yang semakin meningkat (melihat kepada anda, Nexus 6P) untuk Android, kami merasakan perlu untuk mengemas kini aset sedia ada dari raster ke format vektor untuk mengekalkan aset yang boleh diukur kerana keperluan untuk menyokong resolusi yang berbeza.

Kebanyakan aset yang kami gunakan pada asalnya dicipta menggunakan Sketsa. Ini menyebabkan beberapa masalah yang menarik semasa cuba penukaran. Memandangkan aset vektor hanya sebahagiannya disokong oleh Android dalam API semasa (Android 24), aset yang dieksport memecahkan banyak cara yang tidak dijangka.

Ini berfungsi sebagai diari penyiasatan dari sudut pandangan seorang pereka, untuk beberapa perkara yang kami pelajari semasa cuba menukar semua aset raster dalam aplikasi kepada vektor untuk Android. Panduan pengguna Android Studio tidak begitu berguna ketika datang untuk menyelesaikan masalah.

Tidak cukup

Banyak peraturan yang ditulis di sini adalah khusus untuk mengeksport aset vektor menggunakan Sketsa. Walau bagaimanapun, ia juga merupakan garis panduan yang baik untuk mengeksport aset vektor yang bersih dan berfungsi untuk digunakan di semua platform.

1. Simpannya Mudah Bodoh

Prinsip teras untuk reka bentuk perisian juga digunakan untuk aset: bentuknya lebih mudah. Cuba dan gunakan bentuk mudah untuk mencipta aset kompleks yang anda perlukan. Peraturan umum adalah, jalan yang lebih sedikit dan sauh digunakan, "bersih" itu. Menggunakan bentuk tunggal selalu lebih baik menggunakan pelbagai bentuk bertindih untuk membuat aset.

2. Elakkan menggunakan topeng

Topeng yang dibuat menggunakan Sket tidak disokong oleh versi API Android semasa. Mana-mana topeng yang dibuat dalam lakaran tidak diabaikan oleh Android VectorDrawble (AVD), dan topeng yang dibuat dalam lakaran kadangkala akan merosakkan Adobe Illustrator. Jika ada keadaan di mana kesan teduhan perlu diwujudkan, bentuk bertindih di atas lapisan yang sedia ada harus digunakan memihak kepada topeng.

Gunakan operasi penapis laluan

3. Buat garis besar, bukan pukulan

Dalam keadaan yang mungkin, cuba elakkan menggunakan pukulan untuk mencipta bentuk yang dikehendaki. Strok tidak selalu disusun dengan betul dengan sisa imej. Di samping itu, AVD tidak membezakan antara kedudukan sempadan yang berbeza, dan melayan semua sempadan sebagai "pusat" sebatan.

Jadi apa maksudnya adalah bahawa sempadan ketebalan 10 pada Sketsa menjadi stroke ketebalan 20 apabila diberikan pada AVD.

Oleh kerana garis besar adalah bentuk, mereka sentiasa mempamerkan penampilan yang dikehendaki apabila berskala atau diubah. Garispanduan juga lebih mudah untuk digunakan jika anda ingin memohon operasi penapis jalan.

Anda boleh menukar strok dengan mudah dengan menggunakan CMD + Shift + O.

4. Pathfinders adalah rakan anda

Bentuk yang paling rumit boleh dibuat dari komposisi bentuk yang lebih mudah dengan menggunakan operasi penggali laluan. Dapatkan akrab dengan mereka. Bentuk yang dibuat dengan cara ini boleh dipaparkan dengan betul pada setiap peranti.

5. Adobe Illustrator adalah penyelesai masalah terbaik

Adobe Illustrator menghasilkan aset vektor dengan cara yang sama seperti Android VectorDrawable (dari pengalaman anekdotal). Jika aset tidak muncul dengan betul dalam AVD, cuba diagnosis masalah menggunakan Illustrator. Seringkali kali penyelesaiannya adalah semudah memadam isi.

Masalah biasa untuk mengeksport aset untuk Android menggunakan Sketsa.

6. Bentuk gabungan dan berubah mungkin tidak kelihatan seperti apa yang mereka nampak

Transformasi seperti pantulan dan putaran yang dibuat dalam lakaran tidak disokong sepenuhnya dalam Android VectorDrawable. Akibatnya, lapisan yang berubah tidak selalu kelihatan seperti yang anda harapkan. Penyelesaian yang paling mudah untuk ini adalah untuk meratakan setiap laluan yang mempunyai transformasi, jadi transformasi menjadi sebahagian daripada jalan.

Walau bagaimanapun, dalam keadaan di mana transformasi digunakan untuk seluruh kumpulan, satu-satunya cara untuk mengatasi masalah ini adalah untuk mengubah dan meletakkan setiap lapisan secara manual.

7. Ketelusan adalah kawan anda ...

Ketelusan disokong dengan betul dan dipaparkan di semua peranti dan platform, menggunakannya untuk membuat bayang / sorotan jika sesuai.

Perhatikan bayang-bayang jatuh di bawah stik

8. ... dan kecerunan tidak

Sebaliknya, AVD tidak menyokong gradien pada masa ini. Aset yang dibuat dengan cara ini hampir pasti akan pecah semasa import. Cel shading harus digunakan memihak kepada teknik teduhan kecerunan.

Letakkan bayangan di bawah stik hilang

9. Papan iklan eksport, bukan lapisan

Menggunakan kotak terikat dalam lakaran untuk menentukan dimensi aset vektor adalah teknik sekolah lama. Walaupun ia masih merupakan kaedah yang boleh digunakan untuk menentukan sempadan untuk mengeksport vektor, pendekatan yang lebih baik adalah untuk membuat papan iklan yang mempunyai dimensi yang sama seperti viewport yang anda cuba tentukan. Lapisan kotak terikat dalam aset itu dianggap sebagai laluan yang berasingan tetapi telus apabila diterjemahkan ke xml VectorDrawable.

10. Bentuk perataan akan menyelesaikan kebanyakan masalah

Aset yang dieksport mengandungi metadata yang menerangkan transformasi dan komposisinya semasa ia diedit, kerana ini memberitahu pengguna tentang bagaimana "ia" dibuat. Walau bagaimanapun, apabila mengeksport dan menghasilkan aset-aset ini, maklumat luar biasa tentang bagaimana ia terdiri sering menyebabkan lebih banyak masalah daripada menyelesaikannya (putaran dan pantulan yang dilakukan dalam lakaran tidak disokong), selain meningkatkan saiz fail.

Keadaan akhir aset adalah satu-satunya perkara yang ditunjukkan, dan dalam kes ini hanya penampilan hal keadaan akhir.

Penataan bentuk akan menyebabkan transformasi dan operasi penggali laluan ke dalam aset. Ini mengurangkan saiz fail dengan membuang maklumat usang, dan membolehkan anda mempratonton imej dengan tepat.