LottieFiles heeft een snel, schaalbaar, achteraf weergegeven bewerkbaar bestandstype gemaakt en het is gemakkelijk voor u om mee te doen en animaties in dit formaat te maken. Met Adobe After effects en enkele plug-ins kun je deel uitmaken van de nieuwste hype van bestandstypes: de Lottie.
Wat is een Lottie?
A Lottie, of dotLottie, is een bestandstype dat webontwikkelaars stormenderhand verovert. Je hebt misschien animaties gemaakt om in je ontwerpen op te nemen, of het nu gaat om sociale media, webdesign of UX- en UI-ontwerp. En u slaat uw animaties waarschijnlijk op als GIF-, SVG- of PNG-bestanden. Een Lottie-bestand zijn alle goede delen van die bestandstypen, maar kleiner, sneller en gemakkelijker te bewerken na het renderen.
LottieFiles is een enorme database met vooraf gemaakte animaties die zijn opgeslagen in Lottie- of JSON-indeling. Deze animaties worden in realtime weergegeven, waardoor ze sneller in uw ontwerpen kunnen worden verwerkt. U hoeft niet te wachten tot deze bestanden zijn gedownload; ze verschijnen zodra de pagina wordt geopend.
Voor meer informatie over LottieFiles, bekijk onze introductie tot de Lottie.
Aan de slag
We gaan een Lottie maken met behulp van Adobe na effecten, maar er is andere software die u kunt gebruiken om uw Lottie-animatie te maken. U kunt Adobe Animate gebruiken met de LottieFiles-plug-in om een Lottie te maken. Je kunt een animatie in SVG-formaat ook converteren naar een Lottie als je al een animatie in dit formaat hebt gemaakt.
After Effects is echter onze eerste keuze, aangezien LottieFiles oorspronkelijk is gemaakt om te worden gebruikt in After Effects. Laten we beginnen.
1. Maak je animatie
Het animerende aspect van je Lottie is hetzelfde als bij elk ander formaat. We hebben de illustratie van onze animatie gemaakt met Adobe Illustrator. Dit houdt de lagen gescheiden en klaar om te importeren in After Effects. Zodra uw illustratie is geïmporteerd, kunt u de lagen van uw compositie aanpassen voor de uiteindelijke animatie.
Lottie-animaties lopen in een continue lus, dus houd daar rekening mee voor het eind- en beginpunt van je ontwerp. De animatie moet eenvoudig zijn en ongeveer drie seconden duren.
2. Download de plug-ins
Er zijn twee plug-ins die je kunt gebruiken om een Lottie-bestand te maken: de LottieFiles-plug-in of de Bodymovin-plug-in. Beide zijn beschikbaar voor After Effects, maar de LottieFiles-plug-in is ook in andere software te vinden. Ze doen elk iets andere dingen, maar we gaan ons nu concentreren op de LottieFiles-plug-in.
Om de LottieFiles-plug-in te downloaden, gaat u naar de LottieFiles After Effects-plug-inpagina. U vindt twee downloadopties.
De optie aan de rechterkant vereist een Extension Manager van Anastasiy dat werkt met zowel Mac als Windows. Nadat u Extension Manager hebt gedownload, downloadt u de ZXP-plug-in van de LottieFiles-pagina.
Nadat de ZXP-plug-in is gedownload, opent u de Anastasiy Extension Manager, klikt u op After Effects, selecteer de LottieFiles-plug-in uit de lijst en druk op Installeren.
Terug op de LottieFiles-plug-in-pagina, download ook de Adobe Exchange-plug-in; open uw Creative Cloud desktop-app en installeer de plug-in. Keer terug naar uw voltooide animatie in After Effects.
Sommige mensen hebben een toestemmingsfout bij het gebruik van deze plug-ins. Om dit probleem te voorkomen, gaat u naar After Effects > Voorkeuren > Scripting en expressies > Applicatie Scripting en vink het vakje aan voor Scripts toestaan om bestanden te schrijven en toegang te krijgen tot het netwerk.
Zodra dit is gebeurd, zal de pop-up voor LottieFiles je vragen om in te loggen. Als je nog geen LottieFiles-account hebt, is dit het moment om er een aan te maken.
3. Exporteer je Lottie
Met de LottieFiles-plug-ins geïnstalleerd, kunt u uw Lottie-animatie renderen. Terwijl je bezig bent met je voltooide animatiecompositie, klik je op Raam > Extensies > LottieFiles. Er verschijnt een pop-up met de namen van je composities. Klik op de groene pijl naast de naam van je compositie, zal dit het Lottie-rendervenster openen.
Na een paar seconden verschijnt uw animatie in het pop-upvenster. De animatie wordt in realtime in een lus afgespeeld. Hier kun je ervoor kiezen om je animatie op te slaan of je animatie te uploaden naar de LottieFiles-bibliotheek.
Klikken op Opslaan als geeft u twee exportopties: Lottie JSON (*.json) of dotLottie (*.lottie). Het dotLottie-bestand is een gecomprimeerd bestand dat metadata bevat, die we niet echt nodig hebben om te exporteren. We gingen met Lottie JSON.
Uw geëxporteerde bestand is een tekstbestand, geen visueel animatiebestand; dit is hoe JSON-bestanden werken. Maar wat als je wilde dat de animatie klaar was voor gebruik? Laten we eens kijken hoe u er toegang toe kunt krijgen.
Hoe u uw Lottie-animatie kunt gebruiken
Om uw Lottie naar de LottieFiles-bibliotheek te uploaden, klikt u op Uploaden. Dit wordt enkele seconden weergegeven. Klik vervolgens op de knop met de wereldbol erop. Dit opent de LottieFiles-website waar u uw Lottie-animatie kunt indienen bij de LottieFiles-bibliotheek. Geef je bestand een naam en druk op Overdracht.
Zodra uw animatie is goedgekeurd in de LottieFiles-bibliotheek, kunt u de LottieFiles-plug-in gebruiken in software zoals Adobe XD, Figma of Sketch om uw animatie naar uw ontwerp te verzenden.
Er zijn andere manieren om uw LottieFiles-animatie te gebruiken, afgezien van rechtstreeks in de plug-inbibliotheek. U kunt uw Lottie-animatie verder bewerken vanuit het venster in de browser. Het biedt een basislagenpaneel; je kunt de achtergrondkleur, afspeelsnelheid, framesnelheid en nog een paar dingen wijzigen.
Vanuit het Handoff-venster kunt u uw animatie downloaden als een JSON-bestand voor implementatie in webontwikkeling en ontwerp, of je kunt het converteren naar een GIF voor meer conventioneel gebruik. U kunt uw animatie ook insluiten met een HTML-insluitcode en er zijn ook iOS- en Android-opties, zodat u de animatie in uw webontwerp kunt verzenden.
Door de Lottie HTML in te sluiten, kunt u de code bewerken om uw animatie te bewerken. U kunt kleuren en maten direct in de code wijzigen wanneer u deze aan uw website toevoegt.
Door de LottieFiles-app op je telefoon te downloaden, kun je de QR-code van de animatie scannen om een voorbeeld van de animatie in de app te bekijken. Je kunt ook het LottieFiles-toetsenbord gebruiken en je dotLottie neerzetten als een opmerking in bepaalde berichten.
Maak een Lottie in After Effects
Hoewel het misschien nog steeds als een onconventioneel bestandstype aanvoelt, kun je je animatie niet zomaar rechtstreeks uploaden naar sociale media zoals dat kan met een GIF of PNG, de Lottie biedt veel voordelen voor webontwikkelaars en ontwerpers die plug-ins gebruiken of codes insluiten in hun ontwerpen.
Lottie- en JSON-bestanden besparen ruimte en laadtijd en behouden de kwaliteit in vergelijking met traditionele bestandstypen. LottieFiles creëert voortdurend nieuwe manieren om de ontwerpen te implementeren, de mogelijkheden zijn eindeloos.
Het maken van een bewegingsanimatie in Procreate is eenvoudig en in dit artikel wordt uitgelegd hoe u dit doet.
Lees volgende
- Creatief
- Computer animatie
- Adobe
- Bestandsconversie
Ruby is een schrijver in de categorie Creative van MUO en richt zich op het schrijven over ontwerpsoftware. Ruby heeft gewerkt als ontwerper, illustrator en fotograaf en heeft ook een BA in grafische communicatie en een MA in Engels met creatief schrijven.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren