Lottie ! Mais qui est cette personne qui attise l’intérêt des graphistes numériques ? C’est Charlotte – Lotte – Reiniger, réalisatrice allemande et pionnière de l’animation de silhouette. C’est de là que vient le terme Lottie qui est une solution de création d’images en mouvement qui vient remplacer le flash.
Le roi est mort, vive la reine ! Des pionniers avaient compris que le flash était voué à une mort certaine. Adobe l’a enterré à la fin de l’année 2020. Requiescet in pace Amigo !
Les Lotties donnent un coup de fouet à la création numérique destinée au web.
Si vous êtes un graphiste, comme moi, vous voulez illustrer les sites Internet avec de l’image. Et si cela bouge, c’est encore mieux. J’ai longtemps été frustré. D’un côté, je pouvais réaliser des animations en Flash, mais elles étaient incompatibles avec les sites modernes.
J’imagine que vous pensez comme moi, vous aimez quand c’est propre. Le GIF c’est sympa, mais voilà, c’est inesthétique. Il nous reste deux solutions.
La première : on reste traditionnel et on continue à passer du temps à faire des GIF animés sur Photoshop.
La meilleure : on fait vite un tour sur After Effects et on sort une quantité incroyable de créations sympathiques en Lottie.
Vous êtes peut-être actuellement en emploi ou vous sortez des études. Dans un cas comme dans l’autre, vous avez probablement prévu un budget de sécurité. Votre travail vous apporte un salaire qui vous permet de subvenir à vos besoins et à ceux de votre famille et si vous êtes encore chez vos parents cela vous permet de voir venir encore quelque temps.
Quand on décide de se lancer en tant qu’entrepreneur on prend forcément une part de risque. Est-ce qu’on peut vivre sans salaire pendant une ou deux années ? Très peu de sociétés génèrent suffisamment de revenus pour s’autofinancer pendant la phase de démarrage. Les entrepreneurs doivent souvent réinvestir entièrement leurs bénéfices pour assurer leur croissance.
Une société a généralement besoin d’au moins trois ans pour atteindre son rythme de croisière. Et il faut compter plus de sept ans pour entrer dans un cycle de consolidation.
Il sera alors nécessaire à toute personne désirant se lancer dans les affaires de faire une évaluation comptable de sa situation financière à court et moyen terme.
En 2015, Hernan Torrisi, graphiste chez Airbnb, était à la recherche d’une application ou d’un format pouvant remplacer la mort annoncée du Flash.
Comme sa recherche était vaine, il a eu l’idée d’exporter la représentation d’une animation dans Adobe After Effects et de rendre l’animation interactive. Il a exploité les capacités de script du logiciel pour énumérer un projet d’animation. Puis, il a publié un plugin appelé Bodymovin, qui exporte la description au format JSON.
Hernan Torrisi a également édité le tout premier moteur de rendu pour le format Lottie. Grâce à un lecteur JavaScript pour les navigateurs, les animations sont ainsi visibles de tous les internautes.
En 2017, les ingénieurs Brandon Withrow, Gabriel Peal et Leland Richardson, également chez Airbnb, ont vu le potentiel des animations basées sur le JSON.
Les trois ingénieurs se sont associés à l’animateur principal de chez Airbnb : Salih Abdul-Karim. C’est lui qui les a aidés à créer des bibliothèques d’animations au format JSON pour iOS et Android. C’est cette équipe qui a donné le nom « Lottie » à ces fichiers.
En 2020, le format .lottie a été créé. C’est un format de fichier open-source qui regroupe un ou plusieurs fichiers Lotties ainsi que les ressources associées dans un seul emplacement.
En 2021, le format Lottie est devenu le nouveau standard pour l’animation interactive. Il devient impératif de se former et de créer des animations si on veut rester concurrentiel.
Le premier, et imparable avantage du Lottie est le fait qu’il soit redimensionnable sans perte de définition. Cela résout énormément de problèmes d’intégration aux contenus numériques.
Combien de fois, vous vous êtes pris la tête avec une image qui perdait en qualité ?
Tout simplement parce qu’à l’origine, le fichier était mauvais. Vous, comme moi, savez que, quelques fois, nos clients ou collègues nous transmettent des documents sur lesquelles nous devons travailler sans autre discussion. Et on évite de parler de l’utilisation erronée de notre travail final et dont la qualité se dégrade quand on en perd la main.
Le deuxième avantage est son faible poids qui en fait l’allier de tout web développeurs en recherche d’optimisation. Il est 600x plus léger qu’un fichier PNG ou GIF, et se déploie 10x plus vite.
On peut ainsi utiliser plusieurs animations sur une même page sans craindre le contrôle rapidité. Une landing page sera, de ce fait, plus qualitative en ayant une animation lottie qui soutient le propos en un coup d’œil.
Troisièmement, les animations peuvent être lues sur plusieurs systèmes comme iOS, Androïd ou React Native, le framework de Facebook. Très user friendly, il peut être utilisé sur plusieurs supports comme les montres ou les objets connectés. C’est un format qui est apprécié des UX Designers pour exprimer une idée.
Le quatrième avantage est de pouvoir créer les animations depuis un logiciel comme After Effects ou Animate. Ces logiciels d’animation sont connus de tous les motion designers car ils font partie des outils indispensables à la création visuelle.
Initialement utilisé pour des animations vidéos, After Effects, est devenu un outil que tous les graphistes utilisent pour créer des contenus animés.
C’est un grand soulagement. Quand on a l’habitude de son écosystème de logiciels de travail, on est plus productif. Si vous êtes familier de la création d’animation, créer des lotties est pour vous un jeu d’enfant.
Le dernier avantage est la communauté. Comme sur WordPress, il y a déjà énormément de ressources disponibles pour créer des animations en utilisant des bibliothèques.
Vous pouvez également proposer vos créations de façon gratuite ou payante. LottieFiles est à la fois une plateforme de test, de collaboration et de partage d’animations. Elle propose une gamme d’outils et de fonctionnalités qui visent à rendre la découverte, la création et la mise en œuvre des animations Lottie plus faciles et efficaces.
Et bonus, vous pouvez créer vos premières animations Lottie sans connaissance de langage de programmation. Sur LottieFiles, on peut importer et pré-visualiser les animations Lottie. On peut ainsi générer des lignes de code que l’on utilisera pour implémenter les animations dans nos projets.
Pour commencer à créer des lotties, on doit obligatoirement utiliser un logiciel d’animation. Le plus populaire est After Effects mais on peut également utiliser Adobe Animate, Flow, Haiku Animator, Synfig Studio, Inkscape ou Keyshape. Toutefois, il faut installer le plugin lottie dédié à la solution que vous utilisez.
Mon conseil est d’utiliser After Effects car il apporte la meilleure alternative. Beaucoup plus intégré que les autres, vous avez la possibilité de travailler avec une meilleure autonomie. De plus la puissance du logiciel, vous permet de pousser votre créativité là où vous le désirez.
Mais avant d’utiliser ces solutions de création, il faut impérativement avoir des bases solides en dessin vectoriel et en retouche d’image. Apprendre à utiliser Illustrator et Photoshop, vous fait gagner énormément de temps dans votre création.
La préparation des images est une phase qu’il faut prendre en considération. L’animation est intransigeante avec ça. Le mouvement, c’est une succession d’images qui se modifient doucement. C’est une danse. Pour que le déplacement soit fluide, il faut travailler correctement ses calques.
Lancez-vous et donnez du mouvement à la création digitale !
Je serais heureux de voir votre travail et d’échanger avec vous.
Si vous avez besoin de vous former, je serais enchanté de vous rencontrer au sein de Cadschool. Que ce soit auprès de mes collègues ou dans l’un de mes cours, vous trouverez chez nous un accompagnement sincère
Vous avez aimé cet article ?
Partagez-le avec vos collègues ou amis
Articles similaires
Genève
Route de Frontenex 62
1207 Genève
Lausanne
Avenue de la Rasude 2
1006 Lausanne
© Cadschool 2024
Les textes et visuels de ce site Internet ont profité des possibilités impressionnantes de l’intelligence artificielle.
Depuis plus de 25 ans, les entreprises, les professionnels indépendants et les apprenants privés nous sollicitent pour concevoir et animer des formations sur-mesure.
C’est parfois la meilleure solution pour rapidement monter en compétences, sur des sujets spécifiques, avec un budget maîtrisé !
La mise en place de formations sur mesure inclut les services suivants :
Nous pouvons vous proposer différentes prestations : rejoindre un cours collectif, organiser une session dédiée ou encore suivre des cours privés… en fonction de vos objectifs de formation, du nombre et de la disponibilité des participants, ainsi que du budget alloué.
Voici quelques exemples – parmi tant d’autres – de formations spécifiquement conçues pour nos clients : « Présentation Revit vs ArchiCAD », « Coordination BIM », « Data visualization », « optimiser le référencement du site Internet de notre entreprise », « Générer des prospects qualifiés grâce aux canaux du marketing digital »…
Échangeons ensemble pour concevoir la formation qui correspond parfaitement à vos objectifs !
Des questions ? Notre conseiller en formation est à votre disposition.
L’échange effectué via la plateforme Zoom a, généralement, une durée de 30 minutes.
Si vous êtes affilié à un organisme du chômage ou à l’Hospice Général, merci de prendre contact au 022 552 43 43.
PHOTOSHOP, INDESIGN, ILLUSTRATOR, MIDJOURNEY…
BIM, Construction…, Soumission…
AUTOCAD, REVIT, ARCHICAD, 3Ds Max, BLENDER…
MOTION GRAPHIC DESIGN, AFTER EFFECTS, PREMIERE PRO…
UX & UI DESIGN, FIGMA, WORDPRESS, WIX…
MARKETING DIGITAL ET RÉSEAUX SOCIAUX, COMMUNITY MANAGEMENT ET BRAND CONTENT…
Business Development Digital
Stage en entreprise · Accueillez un stagiaire
