10 порад щодо експорту векторних активів із ескізу до Android

Переваги векторів перед растрами очевидні. Векторні об’єкти менші, легко редаговані та значно простіші для управління (особливо з точки зору розміру та кольору).

Я працюю над відносно складним додатком, який підтримує багато різних платформ. З ростом розмірів екрана та роздільною здатністю екрана (дивлячись на вас, Nexus 6P) для Android, ми вважали за необхідне оновити наявні активи від растрових до векторних форматів, щоб зберегти масштабованість активів через необхідність підтримки різних дозволів.

Більшість активів, якими ми зараз користуємось, були створені за допомогою програми "Ескіз". Це спричинило цікаві проблеми під час спроби конверсії. Оскільки векторні активи лише частково підтримуються Android в його поточному API (Android 24), експортовані активи зламалися багатьма несподіваними способами.

Це слугує щоденником розслідування з точки зору дизайнера, про пару речей, про які ми дізналися, намагаючись перетворити всі растрові активи в додатку у вектори для Android. Посібники користувача Android Studio не були особливо корисними, коли мова йде про усунення несправностей.

Не зовсім «Повна підтримка»

Багато правил, написаних тут, стосуються експорту векторних активів за допомогою Sketch. Однак вони також є гарними рекомендаціями щодо експорту чистих та функціональних векторних активів для використання на всіх платформах.

1. Будьте простими дурними

Цей основний принцип розробки програмного забезпечення застосовується і для активів: чим простіші форми, тим краще. Спробуйте використати прості форми для створення потрібних складних активів. Загальне правило: чим менше доріжок і якорів використовується, тим "чистішим" є. Використання однієї форми завжди бажано використовувати кілька фігур, що перекриваються для створення об'єкта.

2. Уникайте використання масок

Маски, зроблені за допомогою Sketch, не підтримуються поточною версією Android API. Будь-які маски, зроблені на Sketch, ігноруються Android VectorDrawble (AVD), а маски, зроблені на Sketch, іноді можуть зламати Adobe Illustrator. Якщо виникає ситуація, коли потрібно створити ефект затінення, форма накладення поверх існуючого шару повинна використовуватися на користь масок.

Для створення потрібної форми скористайтеся операцією націлювача на шляху, що перетинається на шарі, що затінює, з базовим шаром

3. Робіть контури, а не штрихи

У ситуаціях, де це можливо, намагайтеся уникати використання штрихів для створення бажаних фігур. Обведення не завжди належним чином наближаються до решти зображень. Крім того, AVD не розрізняє різні кордонні положення і розглядає всі кордони як "центральні" штрихи.

Отже, це означає, що внутрішня межа товщиною 10 на ескізі перетворюється на центральний хід товщиною 20 при візуалізації на AVD.

Оскільки обриси є формами, вони завжди демонструють бажаний зовнішній вигляд при масштабуванні чи перетворенні. З контурами також набагато простіше працювати, якщо ви хочете застосувати операції з пошуку шляху.

Ви можете легко змінити обриси на контури, використовуючи CMD + Shift + O.

4. Pathfinders - твій друг

Більшість складних фігур можна створити з композиції з більш простих фігур, використовуючи операції дорожнього пошуку. Ознайомтеся з ними. Форми, створені таким чином, можна правильно відображати на кожному пристрої.

5. Adobe Illustrator - найкращий засіб усунення несправностей

Adobe Illustrator надає векторні активи так само, як Android VectorDravable (з анекдотичного досвіду). Якщо актив не відображається належним чином у AVD, спробуйте діагностувати проблему за допомогою Illustrator. Часто рішення настільки просто, як просто видалення заливки.

Поширена проблема експорту активів для Android за допомогою Sketch.

6. Комбіновані та перетворені форми можуть виглядати не такими, якими вони здаються

Такі трансформації, як відбиття та обертання, зроблені на Sketch, не підтримуються повністю в Android VectorDrawable. Як результат, трансформовані шари не завжди виглядають так, як ви їх очікуєте. Найпростішим рішенням цього було б просто вирівняти кожен шлях, який має трансформацію, тому перетворення стає частиною шляху.

Однак у ситуаціях, коли перетворення застосовуються до цілих груп, єдиним способом обійти це було б ручне перетворення та розміщення кожного окремого шару.

7. Прозорі твої товариші ...

Прозорі плівки належним чином підтримуються та відображаються на всіх пристроях та платформах, використовуйте їх для створення тіней / яскравих ділянок, де це доречно.

Зверніть увагу на краплину тіні під стейком

8.… а градієнти - ні

З іншого боку, AVD наразі не підтримує градієнти. Активи, створені таким чином, майже напевно зламаються під час імпорту. Затінення кельмою слід використовувати на користь градієнтних методів затінення.

Крапля тіні під стейком зникає

9. Експортуйте обкладинки, а не шари

Використання обмежувального поля в Sketch для визначення розмірів векторного об'єкта - це техніка старої школи. Хоча це все ще корисний метод визначення меж для експорту векторів, кращим підходом є створення арт-області, яка має ті ж розміри, що і вікно перегляду, який ви намагаєтеся визначити. Шар обмежувального поля в об’єкті розглядається як окремий, але прозорий шлях при перекладі на VectorDravable xml.

10. Вирівнювання фігур вирішить більшість проблем

Експортовані активи містять метадані, що описують його перетворення та композиції під час редагування, оскільки це повідомляє користувачам про те, як вони були створені. Однак, якщо мова йде про експорт та надання цих активів, ця стороння інформація про те, як він був складений, часто викликає більше проблем, ніж вирішує (обертання та відображення, виконані в Sketch, не підтримуються), крім збільшення розміру файлу.

Кінцевий стан активу - це єдине, що показується, і тому в цьому випадку має значення лише поява кінцевого стану.

Вирівнювання форми перетворює перетворення та операції з пошуку маршрутів у актив. Це зменшує розмір файлу, видаляючи застарілу інформацію, і дозволяє точно переглянути зображення.