10 astuces pour exporter des ressources vectorielles de Sketch vers Android

Les avantages des vecteurs sur les rasters sont évidents. Les ressources vectorielles sont plus petites, facilement modifiables et beaucoup plus faciles à gérer (en particulier en termes de taille et de couleur).

Je travaille sur une application relativement complexe prenant en charge de nombreuses plates-formes différentes. Avec la taille et la résolution croissantes de l'écran (Nexus 6P) pour Android, nous avons estimé qu'il était nécessaire de mettre à jour les actifs existants, du format raster au format vectoriel, afin de conserver ces derniers à une échelle en raison de la nécessité de prendre en charge différentes résolutions.

La plupart des ressources que nous utilisons actuellement ont été créées à l’origine avec Sketch. Cela a causé des problèmes intéressants lors de la tentative de conversion. Étant donné que les actifs vectoriels ne sont que partiellement pris en charge par Android dans son API actuelle (Android 24), les actifs exportés se sont cassés de nombreuses manières inattendues.

Cela sert de journal d'investigation du point de vue d'un concepteur. Nous avons appris certaines choses en essayant de convertir tous les actifs raster de l'application en vecteurs pour Android. Les guides de l’utilisateur d’Android Studio n’ont pas été particulièrement utiles en matière de dépannage.

Pas tout à fait «support complet»

La plupart des règles écrites ici sont spécifiques à l'exportation d'actifs vectoriels à l'aide de Sketch. Cependant, ils constituent également un bon guide pour l'exportation d'actifs vectoriels propres et fonctionnels destinés à être utilisés sur toutes les plateformes.

1. Keep it Simple Stupid

Ce principe de base de la conception logicielle s’applique également aux actifs: plus les formes sont simples, mieux c'est. Essayez d’utiliser des formes simples pour créer les actifs complexes dont vous avez besoin. La règle générale est la suivante: moins il y a de chemins et d'ancres utilisés, plus il est «propre». L'utilisation d'une seule forme est toujours préférable à l'utilisation de plusieurs formes qui se chevauchent pour créer un actif.

2. Évitez d'utiliser des masques

Les masques créés à l'aide de Sketch ne sont pas pris en charge par la version actuelle de l'API Android. Tous les masques créés dans Sketch sont ignorés par Android VectorDrawble (AVD) et les masques créés dans Sketch plantaient parfois Adobe Illustrator. Si un effet d’ombrage doit être créé, il convient d’utiliser une forme superposée au-dessus du calque existant en faveur des masques.

Utilisez l’opération Pathfinder “Intersection” sur le calque d’ombrage avec le calque de base pour créer la forme dont vous avez besoin.

3. Faites des contours, pas des coups

Dans la mesure du possible, évitez d'utiliser des traits pour créer les formes souhaitées. Les traits ne s’adaptent pas toujours correctement au reste de l’image. De plus, AVD ne fait pas de distinction entre les différentes positions de bordure et traite toutes les bordures comme des traits «centraux».

Cela signifie donc que la bordure intérieure de l'épaisseur 10 sur Sketch devient un trait central d'épaisseur 20 lorsqu'elle est rendue sur AVD.

Étant donné que les contours sont des formes, ils présentent toujours l'aspect souhaité lorsqu'ils sont redimensionnés ou transformés. Les contours sont également beaucoup plus faciles à utiliser si vous souhaitez appliquer des opérations Pathfinder.

Vous pouvez facilement changer les traits en contours en utilisant CMD + Maj + O.

4. Pathfinders est votre ami

La plupart des formes complexes peuvent être créées à partir d'une composition de formes plus simples à l'aide des opérations Pathfinder. Familiarisez-vous avec eux. Les formes créées de cette manière peuvent être correctement affichées sur chaque périphérique.

5. Adobe Illustrator est le meilleur dépanneur

Adobe Illustrator affiche les éléments vectoriels de la même manière que VectorDrawable d’Android (à partir d’une expérience anecdotique). Si un élément ne s'affiche pas correctement dans AVD, essayez de diagnostiquer le problème à l'aide d'Illustrator. Souvent, la solution est aussi simple que de simplement supprimer un remplissage.

Un problème courant lors de l'exportation d'actifs pour Android à l'aide de Sketch.

6. Les formes combinées et transformées peuvent ne pas apparaître comme ce qu'elles paraissent

Les transformations telles que les réflexions et les rotations effectuées dans Sketch ne sont pas entièrement prises en charge dans Android VectorDrawable. Par conséquent, les calques transformés n'apparaissent pas toujours comme vous le souhaitiez. La solution la plus simple consiste à aplatir chaque chemin comportant une transformation afin que celle-ci devienne partie intégrante du chemin.

Toutefois, dans les cas où des transformations sont appliquées à des groupes entiers, le seul moyen de contourner ce problème consiste à transformer et à positionner manuellement chaque calque.

7. Les transparents sont ton ami…

Les transparents sont correctement pris en charge et affichés sur tous les appareils et plates-formes. Utilisez-les pour créer des ombres / des rehauts, le cas échéant.

Notez l'ombre portée sous le steak

8.… et les gradients ne sont pas

Par contre, l’AVD ne prend actuellement pas en charge les dégradés. Les actifs ainsi réalisés vont probablement casser lors de l'importation. Cel shading devrait être utilisé en faveur des techniques d'ombrage dégradé.

L'ombre portée disparaît sous le steak

9. Exporter des planches, pas des calques

L'utilisation d'un cadre de sélection dans Sketch pour définir les dimensions d'un actif vectoriel est une technique ancienne. Bien que la méthode de définition des limites pour l’exportation des vecteurs reste utilisable, la meilleure approche consiste à créer un plan de travail ayant les mêmes dimensions que la fenêtre que vous tentez de définir. Le calque du cadre de sélection de l'actif est traité comme un chemin distinct mais transparent lors de la conversion en xml VectorDrawable.

10. Les formes aplaties vont résoudre la plupart des problèmes

Les actifs exportés contiennent des métadonnées décrivant leurs transformations et leurs compositions lors de leur édition, car elles indiquent aux utilisateurs «comment» elles ont été créées. Toutefois, lorsqu’il s’agit d’exporter et de restituer ces ressources, ces informations superflues sur leur composition entraînent souvent plus de problèmes qu’elles ne résolvent pas (les rotations et les réflexions effectuées dans Sketch ne sont pas prises en charge), en plus de l’augmentation de la taille du fichier.

L'état final de l'actif est la seule chose montrée. Dans ce cas, seule l'apparence de l'état final compte.

Le fait d'aplatir une forme rendra les opérations de transformation et de recherche de trajectoire dans l'actif. Cela réduit la taille du fichier en supprimant les informations obsolètes et vous permet de prévisualiser l'image avec précision.