Cara Membuat Animasi LottieFiles Di After Effects

LottieFiles membuat jenis file yang cepat, dapat diskalakan, dan dapat diedit setelah dirender, dan mudah bagi Anda untuk terlibat dan membuat animasi dalam format ini. Dengan menggunakan Adobe After effect dan beberapa plugin, Anda dapat menjadi bagian dari jenis file terbaru yang hype: Lottie.

Apa Itu Lotti?

Lottie, atau dotLottie, adalah jenis file yang membuat para pengembang web terkejut. Anda mungkin pernah membuat animasi untuk disertakan dalam desain Anda, baik untuk media sosial, desain web, atau desain UX dan UI. Dan Anda mungkin menyimpan animasi Anda sebagai file GIF, SVG, atau PNG. File Lottie adalah bagian terbaik dari jenis file tersebut, tetapi lebih kecil, lebih cepat, dan lebih mudah untuk diedit setelah dirender.

LottieFiles adalah database besar animasi premade yang disimpan dalam format Lottie atau JSON. Animasi ini dirender secara real-time, memungkinkan pengiriman lebih cepat ke desain Anda. Tidak perlu menunggu untuk mengunduh file-file ini; mereka akan muncul segera setelah halaman terbuka.

Untuk mempelajari lebih lanjut tentang LottieFiles, lihat kami pengenalan Lottie.

Mulai

Kami akan membuat Lottie menggunakan Adobe After Effects, tetapi ada perangkat lunak lain yang dapat Anda gunakan untuk membuat animasi Lottie Anda. Anda dapat menggunakan Adobe Animate dengan plugin LottieFiles untuk membuat Lottie. Anda juga dapat mengonversi animasi format SVG menjadi Lottie jika Anda telah membuat animasi dalam format ini.

After Effects adalah pilihan utama kami, bagaimanapun, mengingat LottieFiles awalnya dibuat untuk digunakan di After Effects. Mari kita mulai.

1. Buat Animasi Anda

Aspek animasi Lottie Anda sama dengan format lainnya. Kami membuat ilustrasi animasi kami menggunakan Adobe Illustrator. Ini membuat lapisan terpisah dan siap untuk diimpor ke After Effects. Setelah ilustrasi Anda diimpor, Anda dapat menyesuaikan lapisan komposisi Anda untuk animasi akhir.

Animasi Lottie berjalan terus menerus, jadi pertimbangkan itu untuk titik akhir dan awal desain Anda. Animasi harus sederhana dan berdurasi sekitar tiga detik.

2. Unduh Plugin

Ada dua plugin yang dapat Anda gunakan untuk membuat file Lottie: plugin LottieFiles atau plugin Bodymovin. Keduanya tersedia untuk After Effects, tetapi plugin LottieFiles juga dapat ditemukan di perangkat lunak lain. Mereka masing-masing melakukan hal yang sedikit berbeda, tetapi kami akan fokus pada plugin LottieFiles sekarang.

Untuk mengunduh plugin LottieFiles, buka Halaman plugin LottieFiles After Effects. Anda akan menemukan dua opsi unduhan.

Opsi di sebelah kanan memerlukan Manajer Ekstensi dari Anastasiy yang bekerja dengan Mac dan Windows. Setelah Anda mengunduh Extension Manager, unduh plugin ZXP dari halaman LottieFiles.

Setelah plugin ZXP diunduh, buka Anastasiy Extension Manager, klik Setelah efek, pilih plugin LottieFiles dari daftar, dan tekan Install.

Kembali ke halaman plugin LottieFiles, unduh juga plugin Adobe Exchange; buka aplikasi desktop Creative Cloud Anda dan instal plugin. Kembali ke selesai Anda animasi di After Effects.

Beberapa orang memiliki kesalahan izin saat menggunakan plugin ini. Untuk menghindari masalah ini, buka Setelah efek > Preferensi > Skrip & Ekspresi > Skrip Aplikasi dan centang kotak untuk Izinkan Skrip untuk Menulis File dan Mengakses Jaringan.

Setelah ini selesai, popup untuk LottieFiles akan meminta Anda untuk masuk. Jika Anda belum memiliki akun LottieFiles, sekarang saatnya untuk membuatnya.

3. Ekspor Lottie Anda

Dengan plugin LottieFiles terpasang, Anda dapat membuat animasi Lottie Anda. Saat pada komposisi animasi Anda yang sudah selesai, klik Jendela > Ekstensi > File Lottie. Ini akan memunculkan popup dengan nama-nama komposisi Anda. Klik panah hijau di sebelah nama komposisi Anda, ini akan memunculkan jendela render Lottie.

Setelah beberapa detik, animasi Anda akan muncul di jendela popup. Animasi akan diputar secara real-time pada loop. Di sini, Anda dapat memilih untuk menyimpan animasi Anda atau mengunggah animasi Anda ke perpustakaan LottieFiles.

Mengklik Simpan Sebagai akan memberi Anda dua opsi ekspor: Lottie JSON (*.json) atau dotLottie (*.lottie). File dotLottie adalah file zip yang menyertakan metadata, yang sebenarnya tidak kami perlukan untuk diekspor. Kami pergi dengan Lottie JSON.

File yang Anda ekspor akan menjadi file teks, bukan file animasi visual; ini adalah cara kerja file JSON. Tetapi bagaimana jika Anda ingin animasinya siap digunakan? Mari kita lihat bagaimana Anda dapat mengaksesnya.

Bagaimana Anda Dapat Menggunakan Animasi Lottie Anda

Untuk mengunggah Lottie Anda ke perpustakaan LottieFiles, klik Mengunggah. Ini akan merender selama beberapa detik. Kemudian, klik tombol dengan globe di atasnya. Ini akan membuka situs web LottieFiles tempat Anda dapat mengirimkan animasi Lottie Anda ke perpustakaan LottieFiles. Beri nama file Anda dan tekan Lepaskan.

Setelah animasi Anda disetujui di perpustakaan LottieFiles, Anda dapat menggunakan plugin LottieFiles dalam perangkat lunak seperti Adobe XD, Figma, atau Sketch untuk mengirimkan animasi ke desain Anda.

Ada cara lain untuk menggunakan animasi LottieFiles Anda selain langsung di perpustakaan plugin. Anda selanjutnya dapat mengedit animasi Lottie Anda dari jendela di browser. Ini menawarkan panel lapisan dasar; Anda dapat mengubah warna latar belakang, kecepatan pemutaran, kecepatan bingkai, dan beberapa hal lainnya.

Dari jendela Handoff, Anda dapat mengunduh animasi Anda sebagai File JSON untuk implementasi dalam pengembangan web dan desain, atau Anda dapat mengubahnya menjadi GIF untuk penggunaan yang lebih konvensional. Anda juga dapat menyematkan animasi Anda dengan kode penyematan HTML, dan ada juga opsi iOS dan Android, sehingga Anda dapat mengirimkan animasi ke dalam desain web Anda.

Menyematkan HTML Lottie memungkinkan Anda mengedit kode untuk mengedit animasi Anda. Anda dapat mengubah warna dan ukuran langsung di kode saat Anda menambahkannya ke situs web Anda.

Mengunduh aplikasi LottieFiles di ponsel memungkinkan Anda memindai kode QR animasi untuk melihat pratinjau animasi di aplikasi. Anda juga dapat menggunakan keyboard LottieFiles dan meletakkan dotLottie Anda sebagai komentar di postingan tertentu.

Buat Lottie Di After Effects

Meskipun mungkin masih terasa seperti jenis file yang tidak biasa, karena Anda tidak bisa begitu saja mengunggah animasi Anda langsung ke media sosial seperti Anda bisa dengan GIF atau PNG, Lottie hadir dengan banyak manfaat bagi pengembang dan perancang web yang menggunakan plugin atau kode penyematan di desain.

File Lottie dan JSON menghemat ruang dan waktu pemuatan, serta menjaga kualitas dibandingkan dengan jenis file tradisional. LottieFiles terus-menerus menciptakan cara baru untuk mengimplementasikan desain, kemungkinannya tidak terbatas.

Cara Membuat Animasi Gerak Menggunakan Procreate

Membuat animasi gerak di Procreate itu mudah, dan artikel ini akan menunjukkan cara melakukannya.

Baca Selanjutnya

Tentang Penulis