Vos boutons et/ou images uploadés sur votre campagne vous semblent flous ? Vous pouvez utiliser le format vectoriel (.SVG) afin de gagner en qualité d'apparence.

Cette fonctionnalité est uniquement disponible pour les boutons (classiques et widgets) ainsi que les médias images.

Comment procéder ?

Gardez le même principe que l'upload média et l'ajout de boutons dans la plateforme. Il faudra juste reproduire vos images préalablement au format .SVG. Pour cela, vous devrez utiliser un logiciel de création vectorielle, comme Illustrator.

Design

Voici les étapes à suivre pour la production et l'export des boutons et images :

Attention : Si vous avez des textes au sein de vos CTA ou images, ils devront obligatoirement être vectorisés avant d’être exportés !
En effet, car la police d'écriture utilisée dans le .SVG risque d’être remplacée si le joueur ne la possède pas sur le device utilisé pour jouer.

Pour cela, nous vous conseillons de dupliquer tous vos CTA et/ou images dans un second calque avant de vectoriser les textes afin de conserver des boutons dont les textes resteront modifiables si besoin d’y apporter des modifications.

Voici une Notice ainsi qu'un Template Illustrator (.Ai) vous expliquant la création de boutons en format .SVG :

Télécharger le Template et la Notice

Le template comporte deux calques (textes modifiables et textes vectorisés) dans lesquels se trouvent les boutons qui sont groupés et renommés.

Taille du média .SVG

À la différence des formats .PNG .JPG etc... Le format .SVG n’inclut pas de dimensions en pixels, il vous faudra donc redimensionner vos boutons et images manuellement lors de l’importation dans la plateforme. Cela n'aura aucun impact sur la qualité des visuels.

Pour faciliter l’intégration et le redimensionnement, nous vous conseillons de produire des visuels avec une hauteur et/ou une largeur fixe.

Pour le redimensionnement, utilisez les points aux extrémités gauches et droites et non ceux du milieu.

En effet, cela vous évitera que la zone de contour de votre CTA ou image n'empiète sur un objet dynamique (champ de formulaire, autre bouton etc...) :