LottieFiles je stvorio brzu, skalabilnu, naknadno renderiranu vrstu datoteke koja se može uređivati, a vama je lako uključiti se i stvoriti animacije u ovom formatu. Koristeći Adobe After efekte i neke dodatke, možete biti dio najnovije vrste datoteka: Lottie.
Što je Lottie?
Lottie, ili dotLottie, vrsta je datoteke koja osvaja web programere. Možda ste napravili animacije koje ćete uključiti u svoje dizajne, bilo da se radi o društvenim medijima, web dizajnu ili dizajnu UX-a i korisničkog sučelja. I vjerojatno spremate svoje animacije kao GIF, SVG ili PNG datoteke. Datoteka Lottie svi su dobri dijelovi tih vrsta datoteka, ali je manja, brža i lakša za uređivanje nakon renderiranja.
LottieFiles je ogromna baza podataka unaprijed izrađenih animacija spremljenih u Lottie ili JSON formatima. Ove se animacije prikazuju u stvarnom vremenu, omogućujući bržu dostavljanje u vaše dizajne. Nema čekanja da se te datoteke preuzmu; pojavit će se čim se stranica otvori.
Da biste saznali više o LottieFilesu, pogledajte naš upoznavanje s Lottie.
Početak rada
Napravit ćemo Lottie koristeći Adobe After Effects, ali postoji i drugi softver koji možete koristiti za izradu svoje animacije Lottie. Možete koristiti Adobe Animate s dodatkom LottieFiles za izradu Lottie. Također možete pretvoriti animaciju SVG formata u Lottie ako ste već napravili animaciju u ovom formatu.
Međutim, After Effects je naš najbolji izbor, s obzirom da je LottieFiles izvorno stvoren za korištenje u After Effects. Započnimo.
1. Napravite svoju animaciju
Animirajući aspekt vaše Lottie je isti kao i za bilo koji drugi format. Ilustraciju naše animacije izradili smo koristeći Adobe Illustrator. To čini slojeve odvojenim i spremnim za uvoz u After Effects. Nakon što je vaša ilustracija uvezena, možete prilagoditi slojeve svoje kompozicije za konačnu animaciju.
Lottie animacije se izvode u neprekidnoj petlji, pa to uzmite u obzir za završne i početne točke vašeg dizajna. Animacija bi trebala biti jednostavna i duga oko tri sekunde.
2. Preuzmite dodatke
Postoje dva dodatka koja možete koristiti za stvaranje Lottie datoteke: dodatak LottieFiles ili dodatak Bodymovin. Oba su dostupna za After Effects, ali dodatak LottieFiles također se može pronaći u drugom softveru. Svaki od njih radi malo drugačije stvari, ali sada ćemo se usredotočiti na dodatak LottieFiles.
Da biste preuzeli dodatak LottieFiles, idite na Stranica dodatka LottieFiles After Effects. Pronaći ćete dvije opcije preuzimanja.
Opcija s desne strane zahtijeva an Upravitelj proširenja od Anastasiy koji radi i s Mac i Windows. Nakon što preuzmete Extension Manager, preuzmite dodatak ZXP sa stranice LottieFiles.
Nakon što je ZXP dodatak preuzet, otvorite Anastasiy Extension Manager, kliknite After Effects, odaberite dodatak LottieFiles s popisa i pritisnite Instalirati.
Vratite se na stranicu dodatka LottieFiles, preuzmite i dodatak Adobe Exchange; otvorite svoju desktop aplikaciju Creative Cloud i instalirajte dodatak. Vratite se na svoje završilo animacija u After Effects.
Neki ljudi imaju grešku u dopuštenju pri korištenju ovih dodataka. Da biste izbjegli ovaj problem, idite na After Effects > Preference > Skriptiranje i izrazi > Skriptiranje aplikacije i označite okvir za Dopustite skriptama za pisanje datoteka i pristup mreži.
Nakon što to učinite, skočni prozor za LottieFiles tražit će od vas da se prijavite. Ako još nemate LottieFiles račun, sada je vrijeme da ga stvorite.
3. Izvezite svoju Lottiju
S instaliranim dodacima LottieFiles, možete generirati svoju animaciju Lottie. Dok ste na gotovoj kompoziciji animacije, kliknite Prozor > Ekstenzije > LottieFiles. Ovo će prikazati skočni prozor s nazivima vaših skladbi. Kliknite na zelena strijela pored naziva vaše kompozicije, ovo će prikazati prozor za renderiranje Lottie.
Nakon nekoliko sekundi, vaša animacija će se pojaviti u skočnom prozoru. Animacija će se reproducirati u stvarnom vremenu u petlji. Ovdje možete odabrati da spremite svoju animaciju ili učitate svoju animaciju u biblioteku LottieFiles.
Klikom Spremi kao dat će vam dvije opcije izvoza: Lottie JSON (*.json) ili dotLottie (*.lottie). DotLottie datoteka je komprimirana datoteka koja uključuje metapodatke, koji nam zapravo nisu potrebni za izvoz. Išli smo s Lottie JSON.
Vaša izvezena datoteka bit će tekstualna datoteka, a ne datoteka vizualne animacije; ovako rade JSON datoteke. Ali što ako želite da je animacija spremna? Pogledajmo kako mu možete pristupiti.
Kako možete koristiti svoju Lottie animaciju
Da biste prenijeli svoju Lottie u biblioteku LottieFiles, kliknite Učitaj. Ovo će se renderirati nekoliko sekundi. Zatim kliknite gumb s globusom na njemu. Ovo otvara web stranicu LottieFiles na kojoj možete poslati svoju Lottie animaciju u biblioteku LottieFiles. Imenujte datoteku i pritisnite Handoff.
Nakon što je vaša animacija odobrena u biblioteci LottieFiles, možete koristiti dodatak LottieFiles u softveru kao što je Adobe XD, Figma ili Sketch da pošaljete svoju animaciju u svoj dizajn.
Postoje i drugi načini korištenja vaše LottieFiles animacije osim izravno u biblioteci dodataka. Možete dodatno uređivati svoju Lottie animaciju iz prozora u pregledniku. Nudi osnovnu ploču slojeva; možete promijeniti boju pozadine, brzinu reprodukcije, brzinu kadrova i još nekoliko stvari.
Iz prozora Handoff možete preuzeti svoju animaciju kao a JSON datoteka za implementaciju u web razvoju i dizajn, ili ga možete pretvoriti u GIF za konvencionalniju upotrebu. Također možete ugraditi svoju animaciju pomoću HTML koda za ugradnju, a postoje i opcije za iOS i Android, tako da možete poslati animaciju u svoj web dizajn.
Ugradnja Lottie HTML-a omogućuje vam uređivanje koda za uređivanje vaše animacije. Možete promijeniti boje i veličine izravno u kodu kada ga dodate na svoju web stranicu.
Preuzimanje aplikacije LottieFiles na vaš telefon omogućuje vam skeniranje QR koda animacije za pregled animacije u aplikaciji. Također možete koristiti LottieFiles tipkovnicu i ispustiti svoju dotLottie kao komentar u određenim postovima.
Stvorite Lottie u After Effectsu
Iako se i dalje može činiti kao nekonvencionalna vrsta datoteke, budući da ne možete jednostavno prenijeti svoju animaciju izravno na društvene mreže kao što su možete s GIF-om ili PNG-om, Lottie ima mnoge prednosti za web programere i dizajnere koji koriste dodatke ili ugrađuju kodove u svoje dizajna.
Lottie i JSON datoteke štede prostor i vrijeme učitavanja te čuvaju kvalitetu u usporedbi s tradicionalnim vrstama datoteka. LottieFiles neprestano stvara nove načine za implementaciju dizajna, mogućnosti su beskrajne.
Izrada animacije pokreta u Procreateu je jednostavna, a ovaj članak će vam pokazati kako to učiniti.
Pročitajte dalje
- Kreativno
- Računalna animacija
- Adobe
- Pretvorba datoteke
Ruby je pisac u MUO-ovoj kategoriji Creative, fokusirajući se na pisanje o softveru za dizajn. Nakon što je radila kao dizajnerica, ilustratorica i fotografkinja, Ruby je također diplomirala grafičku komunikaciju i magistrirala engleski jezik s kreativnim pisanjem.
Pretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu