10 Tips untuk mengekspor aset vektor dari Sketch ke Android

Keuntungan vektor untuk raster jelas. Aset vektor lebih kecil, mudah diedit, dan jauh lebih mudah untuk pengelolaan mikro (khususnya dalam hal ukuran dan warna).

Saya bekerja pada aplikasi yang relatif kompleks yang mendukung banyak platform berbeda. Dengan semakin besarnya ukuran dan resolusi layar (melihat Anda, Nexus 6P) untuk Android, kami merasa perlu untuk memperbarui aset yang ada dari raster ke format vektor untuk menjaga agar aset dapat diskalakan karena kebutuhan untuk mendukung resolusi yang berbeda.

Sebagian besar aset yang saat ini kami gunakan awalnya dibuat menggunakan Sketsa. Ini menyebabkan beberapa masalah menarik saat mencoba konversi. Karena aset vektor hanya didukung sebagian oleh Android dalam API saat ini (Android 24), aset yang diekspor rusak dengan berbagai cara yang tidak terduga.

Ini berfungsi sebagai buku harian investigatif dari sudut pandang seorang desainer, untuk beberapa hal yang kami pelajari ketika mencoba mengubah semua aset raster di aplikasi menjadi vektor untuk Android. Panduan pengguna Android Studio tidak terlalu membantu dalam hal pemecahan masalah.

Tidak cukup

Banyak aturan yang ditulis di sini khusus untuk mengekspor aset vektor menggunakan Sketch. Namun, mereka juga panduan yang baik untuk mengekspor aset vektor yang bersih dan fungsional untuk digunakan di semua platform.

1. Tetap Sederhana Bodoh

Prinsip inti untuk desain perangkat lunak ini berlaku untuk aset juga: semakin sederhana bentuk semakin baik. Coba dan gunakan bentuk sederhana untuk membuat aset kompleks yang Anda butuhkan. Aturan umum adalah, semakin sedikit jalur dan jangkar yang digunakan, "bersih" itu. Menggunakan bentuk tunggal selalu lebih baik daripada menggunakan beberapa bentuk yang tumpang tindih untuk membuat aset.

2. Hindari menggunakan topeng

Masker yang dibuat menggunakan Sketsa tidak didukung oleh versi Android API saat ini. Masker apa pun yang dibuat di Sketch diabaikan oleh Android VectorDrawble (AVD), dan topeng yang dibuat di Sketch kadang-kadang akan crash Adobe Illustrator. Jika ada situasi di mana efek bayangan perlu dibuat, bentuk yang tumpang tindih di atas lapisan yang ada harus digunakan untuk masker.

Gunakan operasi pathfinder

3. Buat garis besar, bukan guratan

Dalam situasi di mana memungkinkan, cobalah untuk menghindari menggunakan goresan untuk membuat bentuk yang diinginkan. Strok tidak selalu diukur dengan benar dengan gambar lainnya. Selain itu, AVD tidak membedakan antara posisi perbatasan yang berbeda, dan memperlakukan semua batas sebagai pukulan "tengah".

Jadi apa artinya ini adalah bahwa batas dalam ketebalan 10 pada Sketsa menjadi garis tengah ketebalan 20 ketika diberikan pada AVD.

Karena garis adalah bentuk, mereka selalu menunjukkan penampilan yang diinginkan ketika diskalakan atau diubah. Garis besar juga jauh lebih mudah untuk dikerjakan jika Anda ingin menerapkan operasi pathfinder.

Anda dapat dengan mudah mengubah goresan menjadi garis besar dengan menggunakan CMD + Shift + O.

4. Pathfinders adalah teman Anda

Sebagian besar bentuk kompleks dapat dibuat dari komposisi bentuk yang lebih sederhana menggunakan operasi pathfinder. Biasakan diri mereka. Bentuk yang dibuat dengan cara ini dapat ditampilkan dengan baik di setiap perangkat.

5. Adobe Illustrator adalah pemecah masalah terbaik

Adobe Illustrator membuat aset vektor dengan cara yang sama seperti VectorDrawable Android (dari pengalaman anekdotal). Jika suatu aset tidak ditampilkan dengan benar dalam AVD, cobalah mendiagnosis masalahnya menggunakan Illustrator. Sering kali solusinya sesederhana hanya dengan menghapus isian.

Masalah umum untuk mengekspor aset untuk Android menggunakan Sketch.

6. Bentuk gabungan dan transformasi mungkin tidak tampak seperti apa yang tampak

Transformasi seperti pantulan dan rotasi yang dibuat dalam Sketsa tidak sepenuhnya didukung di Android VectorDrawable. Akibatnya, lapisan yang diubah tidak selalu muncul seperti yang Anda harapkan. Solusi termudah untuk ini adalah hanya meratakan setiap jalan yang memiliki transformasi, sehingga transformasi menjadi bagian dari jalan.

Namun, dalam situasi di mana transformasi diterapkan ke seluruh kelompok, satu-satunya cara untuk mengatasi ini adalah dengan mengubah dan menempatkan setiap lapisan secara manual.

7. Transparansi adalah teman Anda ...

Transparansi didukung dengan baik dan ditampilkan di semua perangkat dan platform, menggunakannya untuk membuat bayangan / sorotan jika perlu.

Perhatikan drop shadow di bawah steak

8. ... dan gradien tidak

Di sisi lain, AVD saat ini tidak mendukung gradien. Aset yang dibuat dengan cara ini hampir pasti akan rusak selama impor. Cel shading harus digunakan untuk mendukung teknik gradasi warna.

Drop shadow di bawah steak menghilang

9. Ekspor artboards, bukan lapisan

Menggunakan kotak pembatas dalam Sketsa untuk menentukan dimensi aset vektor adalah teknik kuno. Meskipun ini masih merupakan metode yang dapat diperbaiki untuk mendefinisikan batas untuk mengekspor vektor, pendekatan yang lebih baik adalah membuat artboard yang memiliki dimensi yang sama dengan viewport yang Anda coba tetapkan. Lapisan kotak pembatas dalam aset diperlakukan sebagai jalur terpisah, namun transparan ketika diterjemahkan ke VectorDrawable xml.

10. Meratakan bentuk akan menyelesaikan sebagian besar masalah

Aset yang diekspor mengandung metadata yang menjelaskan transformasi dan komposisinya saat sedang diedit, karena ini memberi tahu pengguna tentang "bagaimana" itu dibuat. Namun ketika datang untuk mengekspor dan merender aset ini, informasi asing tentang bagaimana ini disusun sering menyebabkan lebih banyak masalah daripada memecahkannya (rotasi dan refleksi yang dilakukan dalam Sketch tidak didukung), selain menambah ukuran file.

Status akhir dari aset adalah satu-satunya hal yang ditunjukkan, dan dalam hal ini hanya penampilan kondisi akhir yang penting.

Meratakan bentuk akan membuat transformasi dan operasi pathfinder menjadi aset. Ini mengurangi ukuran file dengan menghapus informasi yang sudah usang, dan memungkinkan Anda untuk melihat pratinjau gambar secara akurat.