Spline : la Révolution 3D du Web Design !

Spline, c’est une petite révolution dans l’univers de la 3D ! Il faut dire qu’il a pour objectif de démocratiser la conception 3D pour simplifier la vie des utilisateurs. Et rien que pour ça, ça vaut le détour. Il s’adresse donc à des infographistes 2D, des web designers ou des motion designers qui n’ont pas forcément envie de se lancer dans un apprentissage coûteux pour de la création graphique.

Au niveau des fonctionnalités, il vous offre de nombreuses possibilités pour des designs uniques avec de la modélisation 3D, de l’animation 3D, de la sculpture 3D ou des expériences interactives. Et tout ça ? À partir d’une seule et même interface facile à prendre en main et dédiée aux débutants. Alors c’est vrai que j’ai l’habitude de travailler sur plus complexe et plus complet (pour ne pas dire plus chiant et très technique ;-)). Mais honnêtement, j’ai adoré Spline et je voulais vraiment vous le présenter. Donc c’est parti !

Comment démarrer avec Spline ?

Débuter avec Spline est assez simple. En effet, c’est un outil de conception 3D disponible sur un navigateur et entièrement gratuit ! La page d’accueil du site vous donne d’ailleurs une meilleure idée de ce qu’il est possible de faire. Le but, c’est de permettre à tous ceux qui travaillent déjà dans le design 2D de se familiariser avec la 3D. Spline est donc pensé pour offrir une expérience ludique et engageante, surtout dans le secteur du webdesign.

Si vous débutez totalement dans l’univers 3D, alors il faudra d’abord vous repérer sur l’interface. Mais le gros avantage de cet outil, c’est qu’il est très intuitif, contrairement à d’autres logiciels 3D beaucoup plus complet. Alors évidemment, vous n’aurez pas accès à des fonctionnalités ultra-puissantes qui vous permettraient de modéliser ou d’animer une création 3D sur-mesure. Toutefois, c’est un programme qui vous permet déjà de mettre les mains dedans pour concevoir pas mal de graphismes sympa !

Blender 3D : le Logiciel Indispensable pour Débuter !

Les premiers pas sur l’interface de Spline

Pour ouvrir l’interface de conception 3D, il suffit de renseigner votre nom d’utilisateur ou de vous connecter avec Google. Ensuite, il faut répondre à une série de questions qui visent à mieux cerner votre profil. Pour terminer, vous arrivez sur l’interface utilisateur. Ce qu’il faut retenir, c’est « où seront conservés vos outils » et se familiariser avec leur nom. Ça vous permettra de gagner un temps précieux dans vos créations.

Pour entrer un peu plus dans le détail :

• Sur la gauche, on trouve le gestionnaire des objets
• Sur la barre supérieure, on voit apparaître différents objets comme la sphère ou le cube
• Sur la droite, on trouve les effets visuels avec les lumières, les couleurs ou la caméra.

Vous pouvez aussi directement déposer des objets 2D ou 3D pour les travailler avec Spline.

Comment créer ses premières formes dans Spline ?

Pour créer vos premières formes dans Spline, il suffit d’ouvrir un nouveau fichier et de commencer. Depuis l’interface, les principales formes sont présentes avec le cube, la sphère, le carré ou le rectangle. À l’aide d’un outil de contrôle très simple, vous pourrez déplacer les formes, les redimensionner ou de les faire pivoter pour obtenir exactement le rendu souhaité. Spline vous offre donc un maximum de liberté dans vos créations pour simplifier la vie des développeurs et des designers web !

La création d’un cube

Pour débuter dans la création de formes dans Spline, le plus simple reste le cube. Il suffit de l’ajouter en faisant un clic avec la souris ou en cliquant et en le faisant glisser. Pour conserver des proportions égales, il suffit de maintenir la touche Maj enfoncée. Vous ne le voyez pas apparaître ? Alors rendez-vous à droite pour changer sa couleur et le rendre un peu plus visible. Et si jamais vous vous êtes trompés, il reste le bon vieux ctrl+alt+suppr !

Ensuite, si vous souhaitez déplacer votre cube, il suffit de cliquer sur la souris et de le faire glisser autour de la toile, exactement comme dans Photoshop ou Illustrator. Quant à la faire pivoter, amusez-vous avec les bandes de rotations pour trouver exactement l’inclinaison voulue.

Si vous souhaitez lisser les bords pour créer des arrondis, alors il faut vous rendre dans le panneau de commande juste à droite et cliquer sur lisser et modifier. Vous pouvez aussi utiliser l’outil Plume pour tracer un chemin, étirer une face, étirer une arête… En bref, vous personnalisez toutes les formes que vous voulez !

Les Tips pour une navigation facile

Pour naviguer plus facilement dans Spline, je vais vous donner quelques Tips qui vont vous permettre de gagner un temps précieux. Une fois que vous aurez créé plusieurs objets sur l’interface, vous pouvez :

• Maintenir Option/ALT et faire glisser pour tourner autour de votre composition
• Maintenir Espace et faire glisser pour vous déplacer autour de votre composition
• Déplacer la molette Haut et Bas de la souris pour zoomer en avant ou en arrière

Comment importer vos créations vectorielles dans Spline ?

Si vous avez déjà créé une illustration vectorielle ou une conception 3D, alors vous pourrez facilement travailler la composition qui vous plaît grâce à Spline ! À noter que lors de l’importation, il faudra absolument vérifier que toutes les coordonnées sont à zéro avant d’enregistrer et d’importer votre illustration. Sinon, cela risque de produire un point de rotation décentré.

L’importation dans Spline

Une fois que vous avez importé votre création, il faudra l’enregistrer sous forme de fichiers SVG. Mais, vous pourrez aussi opter pour un rendu en WebGL ou en CSS3D. Ensuite, cliquez sur le hamburger dans le coin supérieur gauche et sélectionnez Ouvrir/Importer pour trouver le nom de votre fichier.

Une fois sur votre interface, vous pourrez faire ce que vous voulez grâce à Spline ! Par exemple, vous pouvez transformer un objet 2D en objet 3D, animer votre logo ou donner du mouvement à vos textes. Les plus ambitieux pourront se tourner vers l’animation d’un squelette en 3D pour créer une vidéo corporate sur-mesure avec des particules qui simulent la neige, le feu, le sable… En plus, vous aurez directement accès à la plateforme d’images libres de droit Pixabay pour personnaliser encore plus vos créations. En bref, vous transformez tout ce dont vous avez envie pour améliorer l’expérience utilisateur et le graphisme de votre site Web.

L’exportation dans Spline

Quant à l’export ? Il existe plusieurs solutions pour vous simplifier la vie. La première génère automatiquement une URL publique qui vous permet de mieux visualiser votre création sur un navigateur Web. Vous pourrez également la partager plus facilement et plus rapidement. Quant à la deuxième, elle vous permet d’intégrer votre composition directement sur un site Web en copiant le code généré.

Et si vous avez besoin de travailler en équipe, le logiciel vous offre également une solution de collaboration en temps réel. Disponible sur Windows, Mac ou Linux, vous trouverez énormément de ressources sur la chaîne YouTube de Spline ou directement en ligne avec une documentation très bien faite pour vous aider à faire vos premiers pas dans l’univers de la conception graphique 3D !

J’espère que cette brève présentation de Spline aura encouragé certains d’entre vous à se lancer dans la création 3D. Je pense plus particulièrement aux infographistes 2D, aux web designers ou aux motion designers qui n’ont pas forcément l’envie ni le temps nécessaire pour se plonger dans une formation de plusieurs heures sur un logiciel 3D. Si vous avez besoin d’un tuto vidéo plus approfondi sur le sujet, n’hésitez pas à me le faire savoir en commentaire, j’y répondrais avec plaisir 😉