Comment créer une illustration animée avec Parallax Effect

Faites bouger vos illustrations avec cette technique et donnez à vos images une nouvelle dimension en suivant notre tutoriel étape par étape

Vous connaissez probablement cet effet ou l'avez déjà vu sur un site Web : lorsque vous entrez dans une page et que vous la faites défiler, l'arrière-plan semble se déplacer indépendamment, créant ainsi de la profondeur. C'est ce qu'on appelle le parallaxe, une tendance qui a débuté dans la conception de sites Web et qui s'est étendue à l'illustration et à la réalité augmentée.

Cette ressource ajoute du mouvement à n'importe quelle pièce en 2D, en simulant le déplacement des éléments d'arrière-plan, pour donner une perspective différente. Cet effet visuel décale le premier plan et plonge le spectateur dans une expérience approfondie et plus attrayante.

Nous nous sommes entretenus avec l'illustrateur Jarom Vogel, un précurseur dans l'utilisation de cette ressource pour le dessin, afin de découvrir cet effet en détail.

Jarom Vogel a travaillé comme designer et développeur web avant de se mettre à son propre compte comme freelance il y a quelques années. L'esthétique de Vogel, développée pendant ses études d'art, se définit par un style plat, coloré et texturé, un goût pour la peinture acrylique et des contours et formes marqués.

Chaque pièce véhicule un sentiment de nature et d'aventure, de thèmes enfantins, que Vogel a voulu enrichir de nouveaux éléments attractifs. Cette recherche l'a amené à l'effet Parallaxe, et l'a conduit à collaborer avec Apple, Disney, Procreate, et Adobe.

Jarom Vogel partage le processus créatif derrière l'une de ses dernières pièces, qui intègre le Parallaxe.

Comment créer une illustration avec l'effet Parallaxe ?

1. L’esquisse
Je commence toujours par une esquisse. Pour cette œuvre, j'en ai fait un petit, animé, mais je n'utilise habituellement qu'un crayon. Je voulais qu'il ressemble à un cercle de lumière dans une forêt, avec l'obscurité autour.

2. L'importance des détails
J'ai passé beaucoup de temps à apporter des corrections au dessin. Si je ne suis pas satisfait des couleurs de l'original, alors je le refait. Ici , j'ai corrigé les ombres puis ai ajouté plus de lumière et de textures, et j'ai utilisé des tons plus froids. J'ai aussi légèrement agrandi la toile, passant d'un carré de 512 px à un carré de 2048 px.

3. Amélioration de l'animation
Une fois que je suis satisfait de l'apparence de l'image, je perfectionne l'animation. J'effectue cette étape dans Procreate. Je suis assez lent, donc je travaille sur cinq couches différentes, mais seulement trois images en mouvement. C'est très simple.

4. Rendre l'animation interactive
Une fois l'animation terminée, je décide de regrouper les calques et comment les organiser pour les rendre interactifs. J'exporte tous les calques, et je les nomme, afin qu'ils aient un sens pour le codage (tous les cercles bleus sont les ombres : Je les ai exportés dans un mode de mélange dans la pièce finie).

5. Le code
Je télécharge tous les fichiers dans un dossier particulier de mon site web, et je les traduis en HTML. Pour cette pièce, j'ai décidé d'utiliser des transformations 3D en CSS. Dans d'autres projets, j'ai utilisé un effet Parallax plus simple, où chaque couche s'équilibre indépendamment lorsqu'elle se déplace, ce qui donne une impression de profondeur.

À ce stade, je décide d'intégrer ou non la réalité augmentée à la pièce. Comme cela ne fonctionne pas aussi bien à partir du web, je dois le modifier dans Xcode.
Quoi qu'il en soit, la configuration à partir de ce point est la même : vous devez juste décider comment manipuler les éléments. Il est essentiel d'avoir un grand masque de calque blanc en arrière-plan : sinon, tous les bords des calques seraient visibles, et l'effet serait gâché.

6. L'élément interactif
Enfin, vous devez ajouter l'utilisation d'un gyroscope et d'un accéléromètre à l'appareil. Il vous faut plusieurs tests et pas mal de temps pour finaliser les chiffres afin de vous assurer que tout semble naturel. Pour résumer, cette pièce a été dessinée et animée dans Procreate avec du code HTML, CSS, et Javascript.

Filmer une vidéo d'une main tout en déplaçant l'appareil de l'autre est, à mon avis, l'une des parties les plus difficiles.

Retrouvez les animations de Jarom sur son Instagram.