Découvrez le premier créateur d’interface 3D pour les web designers
Découvrez le moyen le plus simple de concevoir des UI pour la 3D et l’AR. Voici l’import SVG avancé de Vectary.
Le design d’UI comme jamais auparavant
Dans une industrie créative en constante évolution, qui repousse sans cesse les limites, il est indispensable de rester à l’affût des nouvelles tendances. Les designers spécialisés dans la 2D utilisent généralement des formats et des outils vectoriels pour prototyper de nouvelles UI. La nouvelle fonctionnalité de Vectary crée une passerelle entre outils de création 2D et 3D afin de simplifier le processus de conception. Vectary est la seule plateforme de design 3D qui rapproche la conception 3D et AR des designers 2D.
L’idée maîtresse de cette fonctionnalité est que les designers 2D d’aujourd’hui seront très certainement les designers d’UI 3D de demain. La plupart des interfaces évoluent désormais progressivement vers la 3D et l’AR.
Avantages du nouvel import SVG de Vectary
L’import SVG apporte de nombreux avantages :
- Vectary stocke les fichiers SVG sous forme d’objets vectoriels : vous contrôlez ainsi pleinement la qualité des tracés, le maillage et la pixellisation.
- Tous les paramètres du fichier SVG s’ajustent facilement dans un seul panneau et sont réversibles à tout moment du processus de création.
- Choisissez librement de travailler votre fichier SVG comme une image 2D ou comme une géométrie 3D.
Comment prototyper une maquette d’UI en 3D et AR :
- Téléchargez votre fichier SVG.
- Glissez-déposez le fichier dans Vectary. Il apparaît d’abord sous forme d’image 2D pixellisée. Un menu d’objet SVG s’affiche alors dans le panneau de droite.
- Dans l’onglet Geometry, vous trouverez 3 propriétés modifiables : “Segments”, “Offset” et “Extrude”. En augmentant la valeur de “Extrude”, votre objet prend du volume en 3D : plus la valeur est élevée, plus l’objet est épais. Le paramètre “Segments” définit la qualité des formes 2D converties en géométrie 3D : plus la valeur est élevée, plus l’objet gagne en précision. Attention : cela augmentera la taille du fichier exporté. La fonction “Offset” décompose quant à elle l’objet en différentes couches selon la structure du SVG. Ces couches sont ensuite espacées dans la troisième dimension, ce qui vous offre une vue éclatée.
- Faites un clic droit sur l’objet, puis sélectionnez “Convert To Geometry” pour convertir le fichier SVG en 3D. Modifiez ses couleurs et matériaux, appliquez diverses fonctions 3D comme Bend, ou modifiez l’intégralité du maillage en activant le mode Edit (appuyez sur Entrée lorsque l’objet est sélectionné).
- Le modèle 3D de base est prêt. Ajoutez maintenant différents arrière-plans et options d’éclairage.
- Une fois votre projet finalisé, exportez-le sous forme de fichier PNG ou 3D, ou intégrez-le à votre site web sous forme d’élément 3D interactif avec un aperçu AR.
Astuce : comment exporter un fichier SVG dans Figma pour obtenir un effet d’UI 3D multicouche dans Vectary
- La structure de votre fichier SVG détermine l’espacement des objets en 3D. Plus un calque ou un groupe est profond dans l’arborescence du fichier, plus il apparaîtra haut dans les paramètres SVG “Geometry” de Vectary en utilisant l’option “Offset by structure”.
Créez des logos 3D et AR
Utilisez Vectary pour créer des logos 3D visibles sous forme d’élément 3D interactif sur votre site web ou d’objet en réalité augmentée. Glissez-déposez simplement le fichier SVG de votre logo 2D dans la scène, puis extrudez-le dans les paramètres Geometry du panneau de droite.
Affichez votre design d’UI 3D sur votre site web et en réalité augmentée
Enroulez et déformez vos UI et logos 3D
Un autre exemple d’utilisation consiste à enrouler l’UI ou le logo autour d’un objet. Il peut s’agir d’une UI présentée en réalité augmentée ou d’une étiquette entourant une bouteille. Expérimentez pour cela les outils de déformation “Deform” comme “Bend”. Le nouvel import de fichiers SVG de Vectary ouvre de nouvelles perspectives aux designers 2D, notamment pour créer des maquettes et tester différents scénarios.
