After Effects'te LottieFiles Animasyonu Nasıl Oluşturulur

LottieFiles hızlı, ölçeklenebilir, sonradan işlenen düzenlenebilir bir dosya türü oluşturdu ve bu formatta dahil olmak ve animasyonlar oluşturmak sizin için çok kolay. Adobe After efektlerini ve bazı eklentileri kullanarak en yeni dosya türü heyecanının parçası olabilirsiniz: Lottie.

Lottie Nedir?

Lottie veya dotLottie, web geliştiricilerini kasıp kavuran bir dosya türüdür. İster sosyal medya, ister web tasarımı, ister UX ve UI tasarımı olsun, tasarımlarınıza dahil etmek için animasyonlar yapmış olabilirsiniz. Ve muhtemelen animasyonlarınızı GIF, SVG veya PNG dosyaları olarak kaydedersiniz. Bir Lottie dosyası, bu dosya türlerinin tüm iyi parçalarıdır, ancak daha küçük, daha hızlı ve oluşturulduktan sonra düzenlenmesi daha kolaydır.

LottieFiles, Lottie veya JSON formatlarında kaydedilmiş büyük bir hazır animasyon veritabanıdır. Bu animasyonlar gerçek zamanlı olarak işlenerek tasarımlarınıza daha hızlı sevkiyat yapılmasına olanak tanır. Bu dosyaların indirilmesini beklemek yok; sayfa açılır açılmaz görünürler.

LottieFiles hakkında daha fazla bilgi edinmek için Lottie'ye giriş.

Başlarken

kullanarak bir Lottie oluşturacağız Adobe After Effects, ancak Lottie animasyonunuzu oluşturmak için kullanabileceğiniz başka yazılımlar da var. Lottie oluşturmak için Adobe Animate'i LottieFiles eklentisiyle birlikte kullanabilirsiniz. Daha önce bu formatta bir animasyon yaptıysanız, SVG formatındaki bir animasyonu Lottie'ye de dönüştürebilirsiniz.

After Effects bizim en iyi seçimimizdir, ancak LottieFiles'ın orijinal olarak After Effects'te kullanılmak üzere yaratıldığı düşünülürse. Başlayalım.

1. Animasyonunuzu Oluşturun

Lottie'nizin animasyon yönü, diğer formatlarla aynıdır. Adobe Illustrator kullanarak animasyonumuzun illüstrasyonunu oluşturduk. Bu, katmanları ayrı ve After Effects'e içe aktarmaya hazır tutar. Çiziminiz içe aktarıldıktan sonra, son animasyon için kompozisyonunuzun katmanlarını uyarlayabilirsiniz.

Lottie animasyonları sürekli bir döngüde çalışır, bu nedenle tasarımınızın bitiş ve başlangıç ​​noktaları için bunu düşünün. Animasyon basit ve yaklaşık üç saniye uzunluğunda olmalıdır.

2. Eklentileri İndirin

Bir Lottie dosyası oluşturmak için kullanabileceğiniz iki eklenti vardır: LottieFiles eklentisi veya Bodymovin eklentisi. Her ikisi de After Effects için mevcuttur, ancak LottieFiles eklentisi diğer yazılımlarda da bulunabilir. Her biri biraz farklı şeyler yapar, ancak şu anda LottieFiles eklentisine odaklanacağız.

LottieFiles eklentisini indirmek için şuraya gidin: LottieFiles After Effects eklenti sayfası. İki indirme seçeneği bulacaksınız.

Sağdaki seçenek bir Anastasiy'den Extension Manager hem Mac hem de Windows ile çalışır. Extension Manager'ı indirdikten sonra, LottieFiles sayfasından ZXP eklentisini indirin.

ZXP eklentisi indirildikten sonra Anastasiy Extension Manager'ı açın, tıklayın. After Effects, listeden LottieFiles eklentisini seçin ve Düzenlemek.

LottieFiles eklenti sayfasına geri dönün, Adobe Exchange eklentisini de indirin; Creative Cloud masaüstü uygulamanızı açın ve eklentiyi yükleyin. Bitmiş halinize dönün After Effects'te animasyon.

Bazı kişilerde bu eklentileri kullanırken izin hatası oluyor. Bu sorunu önlemek için şuraya gidin: After Effects > tercihler > Komut Dosyası ve İfadeler > Uygulama Komut Dosyası ve için kutuyu işaretleyin Komut Dosyalarının Dosya Yazmasına ve Ağa Erişmesine İzin Ver.

Bu yapıldıktan sonra, LottieFiles açılır penceresi sizden oturum açmanızı isteyecektir. Halihazırda bir LottieFiles hesabınız yoksa, şimdi bir tane oluşturma zamanı.

3. Piyangonuzu Dışa Aktarın

Yüklü LottieFiles eklentileri ile Lottie animasyonunuzu oluşturabilirsiniz. Bitmiş animasyon kompozisyonunuzdayken, pencere > Uzantılar > LottieDosyaları. Bu, kompozisyonlarınızın adlarını içeren bir açılır pencere açacaktır. Tıkla Yeşil ok kompozisyonunuzun adının yanında, bu, Lottie oluşturma penceresini getirecektir.

Birkaç saniye sonra animasyonunuz açılır pencerede görünecektir. Animasyon döngüde gerçek zamanlı olarak oynatılacaktır. Burada, animasyonunuzu kaydetmeyi veya animasyonunuzu LottieFiles kitaplığına yüklemeyi seçebilirsiniz.

tıklama Farklı kaydet size iki dışa aktarma seçeneği sunar: Lottie JSON (*.json) veya dotLottie (*.lottie). dotLottie dosyası, dışa aktarma için gerçekten ihtiyacımız olmayan meta verileri içeren sıkıştırılmış bir dosyadır. Lottie JSON ile gittik.

Dışa aktarılan dosyanız bir görsel animasyon dosyası değil, bir metin dosyası olacaktır; JSON dosyaları böyle çalışır. Peki ya animasyonun kullanıma hazır olmasını istiyorsanız? Nasıl erişebileceğinizi görelim.

Lottie Animasyonunuzu Nasıl Kullanabilirsiniz?

Lottie'nizi LottieFiles kitaplığına yüklemek için Yüklemek. Bu, birkaç saniye için oluşturulacaktır. Ardından, üzerinde küre bulunan düğmeyi tıklayın. Bu, Lottie animasyonunuzu LottieFiles kitaplığına gönderebileceğiniz LottieFiles web sitesini açar. Dosyanızı adlandırın ve tıklayın Dokunma.

Animasyonunuz LottieFiles kitaplığında onaylandıktan sonra, animasyonunuzu tasarımınıza göndermek için Adobe XD, Figma veya Sketch gibi yazılımlarda LottieFiles eklentisini kullanabilirsiniz.

LottieFiles animasyonunuzu doğrudan eklenti kitaplığında kullanmanın başka yolları da vardır. Lottie animasyonunuzu tarayıcıdaki pencereden daha fazla düzenleyebilirsiniz. Temel katmanlar paneli sunar; arka plan rengini, oynatma hızını, kare hızını ve birkaç şeyi daha değiştirebilirsiniz.

Handoff penceresinden animasyonunuzu bir Web geliştirmede uygulama için JSON dosyası ve tasarlayabilir veya daha geleneksel kullanımlar için bir GIF'e dönüştürebilirsiniz. Animasyonunuzu bir HTML yerleştirme koduyla da gömebilirsiniz ve iOS ve Android seçenekleri de vardır, böylece animasyonu web tasarımınıza gönderebilirsiniz.

Lottie HTML'sini gömmek, animasyonunuzu düzenlemek için kodu düzenlemenize olanak tanır. Web sitenize eklediğinizde doğrudan kodda renkleri ve boyutları değiştirebilirsiniz.

Telefonunuza LottieFiles uygulamasını indirmek, uygulamadaki animasyonu önizlemek için animasyonun QR kodunu taramanıza olanak tanır. Ayrıca LottieFiles klavyesini kullanabilir ve dotLottie'nizi belirli gönderilere yorum olarak bırakabilirsiniz.

After Effects'te Bir Lottie Yaratın

Hala alışılmadık bir dosya türü gibi görünse de, animasyonunuzu doğrudan aşağıdaki gibi sosyal medyaya yükleyemezsiniz. Bir GIF veya PNG ile yapabilirsiniz, Lottie, eklentileri veya gömme kodları kullanan web geliştiricilerine ve tasarımcılarına birçok avantaj sağlar. tasarımlar.

Lottie ve JSON dosyaları yerden ve yükleme süresinden tasarruf sağlar ve geleneksel dosya türlerine kıyasla kaliteyi korur. LottieFiles, tasarımları uygulamak için sürekli olarak yeni yollar yaratır, olasılıklar sonsuzdur.

Procreate Kullanarak Hareketli Animasyon Nasıl Oluşturulur

Procreate'de bir hareketli animasyon oluşturmak kolaydır ve bu makale size bunu nasıl yapacağınızı gösterecektir.

Sonrakini Oku

Yazar hakkında