Logo animasyonu, bir logoyu daha dinamik ve çekici kılmak için görsel öğelere hareket veya değişiklik getirme sürecidir. Bir logonun metin, resimler, renkler ve şekiller gibi farklı bölümlerine uygulanabilir ve metnin yanıp sönmesi veya renklerinin solması gibi basit animasyonlardan, hareketli veya etkileşimli nesneleri içeren karmaşık animasyonlara kadar değişen karmaşıklık derecelerine sahip olabilir. Etkileri.
Logo animasyonu giderek yaygınlaşıyor. Akıllı telefonlar ve internet teknolojisinin genel gelişimiyle birlikte logolar artık dijital alanlarda çok daha yaygın hale geliyor ve bu da fiziksel ürünlerle mümkün olmayan animasyon gibi görsel efektlerin kapısını aralıyor. Elbette logo animasyonunun artan popülaritesi, giderek daha fazla markanın rekabetçi kalabilmek için buna ihtiyaç duyacağı anlamına geliyor. Dolayısıyla bir logoya nasıl animasyon uygulanacağını öğrenmek, logonuzu bir sonraki seviyeye taşıyacak değerli bir beceri olabilir.
Aynı zamanda, animasyon yazılımı da bu büyüyen kullanıcı tabanını desteklemek için daha yaygın, akıcı ve sezgisel hale geldi. Yani logo animasyonu kulağa ne kadar teknik ve karmaşık gelse de, yeni başlayanlar bile artık basit ama etkili animasyonlar oluşturabiliyor.
After Effects'te Logo Animasyonu -
Adım 1. Logo dosyanızı hazırlayın.
Aslında Adobe Illustrator'da (veya benzer logo tasarım yazılımında) bir logoya nasıl animasyon uygulanacağıyla ilgili eğitimimize başlayacağız. Dosyamızın güvende olduğundan emin olmak için bu gereklidir. animasyon için logo kurulumu.
Animasyon yazılımının kendisi raster olmasına rağmen orijinal logo dosyalarının vektör formatında olması gerekir. Bu, bunları değiştirmenize olanak tanır kayıp görüntü kalitesi için (örneğin, bir raster logoyu yakınlaştırmak pikselleşmeyle sonuçlanır) ve bu daha sonra şekil katmanlarıyla çalışırken faydalı olacaktır.
Katmanlar panelini kullanarak logonuzun katmanlara ayrıldığından emin olun.
Logo ayrıca tek bir nesnede gruplanmak yerine çok katmanlı olmalıdır. Bu, logonun ayrı ayrı bölümlerini hareketlendirerek daha karmaşık animasyonlar oluşturmayı kolaylaştırır. " seçeneğini kullanarak yeni katmanlar oluşturabilirsiniz. Yeni katman ekle" Katmanlar panelinin altındaki simgesini tıklayın ve ardından logonuzun bazı kısımlarını kopyalayıp bunlara yapıştırın.
Son olarak animasyon doğası gereği dijital olduğundan RGB renklerle de çalışıyoruz. Illustrator dosyanız CMYK olarak ayarlanmışsa logonuzu seçip Düzenle > Renkleri Düzenle > RGB'ye Dönüştür seçeneğine giderek bunu değiştirebilirsiniz.
Hazır olduğunuzda logonuzu tam katmanlı bir vektör dosyası olarak dışa aktarın. After Effects dosya türleri Adobe yazılım ailesinin bir parçası olduğundan oluşturduğum logoyu AI dosyası olarak kaydedeceğim (Adobe Illustrator), ancak başka bir yazılım kullanıyorsanız aralarından seçim yapabileceğiniz birkaç farklı vektör dosyası türü vardır.
Adım 2: Logonuzu After Effects'e aktarın. Logo animasyonu
After Effects'i açın. Arayüz ilk bakışta karmaşık görünebilir, o yüzden temelleri inceleyelim:
- araç çubuğu : buradan ana menüye erişebilirsiniz grafik araçlarıKalem aracı, Yazım aracı vb. gibi.
- Proje paneli : Burası tüm projeye ilişkin medya dosyalarını yönettiğiniz ve düzenlediğiniz yerdir.
- Kompozisyon penceresi : Bu, üzerinde çalışmakta olduğunuz mevcut kompozisyonun (genellikle kompozisyon olarak adlandırılır) animasyonunu önizleyebileceğiniz bir video önizleme penceresidir. Kompozisyonlar aslında her biri kendi ayrı animasyon zaman çizelgesine sahip sahnelerdir. Bir sonraki bölümde kompozisyonları daha ayrıntılı olarak ele alacağız.
- Zaman çizelgesi : Animasyonunuzu oluşturacağınız yer burasıdır. Hem sağ tarafta gerçek bir zaman çizelgesi (animasyon etkinliklerini zaman çizelgesinde çalışacak şekilde ayarlayacağınız yer) hem de sol tarafta (medya varlıklarınızın niteliklerini üst üste koyacağınız ve düzenleyeceğiniz) bir düzen alanından oluşur.
- Kontrol paneli : Burada medya bilgileri, paragraf ve hizalama seçenekleri ve After Effects'te yerleşik önceden oluşturulmuş animasyon ve görsel efekt kitaplıkları gibi çeşitli destekleyici özelliklere erişebilirsiniz.
Bir araç veya düğme hakkında emin değilseniz, farenizi onun üzerine getirdiğinizde size bir açıklama verilecektir.
Bir logo dosyasını içe aktarmak için dosyayı Proje paneline sürüklemeniz veya Dosya" > " İçe aktarmak" > " Dosya" . Sonraki iletişim kutusunda Medyayı farklı içe aktar'ı seçin. çekimler ve birleştirilmiş katmanlar .
Adım 3: Kompozisyonunuzu ayarlayın. Logo animasyonu.
Kompozisyon (comp), medya dosyalarına animasyon oluşturmanıza, düzenlemenize ve uygulamanıza olanak tanıyan bir kaptır. Film gibi daha büyük bir yapım, bir proje panelinde düzenlenen birden fazla parçayı içerecektir. Yani parçaları o filmdeki tek bir sahne olarak düşünebilirsiniz ve her parçanın kendine ait ayrı bir zaman çizelgesi olacaktır. Bizim durumumuzda beş saniyeden kısa süren bir logo animasyonu çok az kompozisyon gerektiriyor.
Kompozisyonunuzu özelleştirmek için medya dosyalarını zaman çizelgesi panelinin sol tarafına sürükleyin.
Basit bir arka planla başlayalım. Düzen paneline sağ tıklayın ve " Oluşturmak" > " Sağlam" . Logom beyaz olduğu için düz rengi seçtim siyah renk, ancak herhangi bir rengi seçebilirsiniz. Bir sonraki pencerede katıyı adlandırın (benim durumumda "BG"), " Boyutu yap bilgisayar" ve " seçeneğini seçin TAMAM" . Şimdi logo dosyanızı Proje panelinden Zaman Çizelgesi paneline sürükleyin; kompozisyon penceresinde logonuzun önizlemesini görmelisiniz. Değilse, düz arka planı logo dosyasının altına sürükleyerek katmanları yeniden düzenlediğinizden emin olun.
Düzen panelinde logo dosyasına sağ tıklayın ve Oluşturmak" > " Çok katmanlı bir kompozisyona dönüştürün" . Bu, logo dosyanızı farklı bir kompozisyona dönüştürecektir (simgenin değiştiğini göreceksiniz). Logo dosyasına çift tıkladığınızda artık yeni bir sekme açılacak ve sizi Illustrator'da ayarladığınız tüm katmanları içeren bu yeni kompozisyona götürecektir. Artık kompozisyonların nasıl çalıştığını görebilirsiniz: aslında alt klasörlere benzerler.
Logo animasyonu
Dilerseniz bu katmanların her birini sağ tıklayıp seçerek ayrı kompozisyonlara dönüştürebilirsiniz. Ön kompozisyon" . Bu, bu katmana önceki kompozisyonun içine yerleştirilmiş kendi animasyon zaman çizelgesini verecektir. Logonun tamamını bir kerede canlandırmak istiyorsanız ana kompozisyonla ilişkili bir zaman çizelgesi kullanmalısınız.
Bunu bir kenara bırakarak, bu zaman çizelgelerinin animasyon için nasıl çalıştığını anlayalım.
Adım 4: Anahtar Kareleri Kullanarak Logoyu Canlandırın
After Effects (ve çoğu animasyon yazılımı) ana kareleri kullanarak çalışır. Anahtar kareler, animasyonunuzun başlangıç ve bitiş durumlarının ne zaman gerçekleşmesi gerektiğini belirlemek için zaman çizelgesinde ayarlayabileceğiniz işaretçilerdir.
Örneğin çok basit bir animasyonla başlayalım: yavaş yavaş kaybolma. Bir nesnenin kendisine bağlı farklı nitelikleri vardır ve belirli bir süre içinde değişen nitelikler aslında animasyondur. Bu nitelikleri görmek için logonun yanındaki Genişlet simgesini ve ardından "Dönüştür" özelliği .
Zaman Çizelgesi panelinde Özellikler'in yanındaki kronometre simgesini tıklatarak ana kareler oluşturun.
Solan bir animasyon için, bir nesnenin görünürlüğünü ölçen öznitelik ile çalışmak istiyorsunuz: opaklık. Opaklık %100 olarak ayarlanmıştır çünkü varsayılan olarak logo tamamen görünür durumdadır.
Opaklık seçeneğinin yanındaki kronometre simgesini tıkladığınızda oynatma çubuğu işaretçisinin ayarlandığı yerde bir baklava şekli göreceksiniz (zaman çizelgesini kesen soluk mavi çizgi). Bu bir anahtar karedir, temel olarak belirli bir özelliğin geçerli değerinin anlık görüntüsüdür. Ana kareyi tıklayıp zaman çizelgesindeki 2 saniye işaretine sürükleyerek taşıyın. Kaydırıcıyı tekrar 0 saniye işaretine sürükleyin, ardından başka bir ana kare oluşturun ve opaklığı %0'a ayarlayın. Animasyonu kompozisyon penceresinde görüntülemek için Ara Çubuğu'na basın.
After Effects
Yalnızca iki ana kareyle opaklığı 0 saniyede %100'dan %2'e değiştirerek yumuşak bir geçiş animasyonu oluşturduğunuzu göreceksiniz. After Effects'te tüm animasyonlar bu şekilde yapılır. Zaman çizelgesi boyunca farklı aralıklarla bir başlangıç anahtar karesi ve bir bitiş anahtar karesi oluşturabilirsiniz ve After Effects, A noktasından B noktasına (animasyon işinde geleneksel olarak ara kareler olarak adlandırılır) ulaşmak için gerekli kare geçişlerini otomatik olarak hesaplar.
Opaklık özelliği için iki ana kare kullanılarak basit ve pürüzsüz bir animasyon oluşturulur.
Üzerinde çalışabileceğiniz bir dizi özelliğin olduğunu görebilirsiniz. Mülkiyet dönüşümü, bunu burada kısaca açıklayacağız. Ana karelerle denemeler yapmaktan ve animasyon yetenekleri hakkında fikir sahibi olmak için her birini değiştirmekten çekinmeyin:
- Pozisyon : Bu özellik, logonun yerleşim ekranındaki X, Y alanındaki konumunu tanımlar ve doğrusal hareketin canlandırılmasına olanak tanır.
- ölçek : Bu özellik, logonun boyutunu açıklar (orijinal dosyanın tam boyutunun yüzdesi olarak) ve yakınlaştırma veya küçültme animasyonları oluşturmanıza olanak tanır.
- rotasyon : Bu özellik, yönlendirmeyi derece cinsinden tanımlar ve döndürme animasyonları oluşturmanıza olanak tanır.
Bir profesyonelden tavsiye :
Bir logoyu canlandırmak söz konusu olduğunda, animasyonun bitmiş, tam logoda bitmesi gerektiğinden geriye doğru çalışmak (karartma işleminde yaptığımız gibi) mantıklıdır. Bu, öznitelik değerlerinin anlık görüntülerine varsayılan durumlarında sahip olmak için herhangi bir şeyi değiştirmeden önce ana kareler oluşturmanız gerektiği anlamına gelir. Daha sonra bu anahtar kareleri zaman çizelgesinde istediğiniz bitiş noktasına taşıyabilir (animasyonun ne kadar sürmesini istiyorsanız) ve zaman çizelgesinin başlangıcındaki değişiklikler için yeni anahtar kareler oluşturabilirsiniz.
Adım 5. Şekil katmanlarını kullanarak logoyu canlandırın.
Şimdi şekil katmanlarını kullanan daha ilginç animasyon tekniklerine geçelim. Şekil katmanları, bağlantı noktaları ve bağlayıcı çizgiler (vektör programlarındakilere benzer) gibi yol bilgilerini içeren nesnelerdir ve bunların işlenmesi, bunun ötesinde bir dizi animasyon olanağının kapısını açar. Özellikleri dönüştürme .
Logonuz için doğru rengi nasıl seçersiniz?
İlk önce logoyu bir şekil katmanına dönüştüreceğiz. Katmanlı Kompozisyon panelinde (3. adımda oluşturulan katmanlar), tüm katmanlarınızı seçin, sağ tıklayın ve " Oluşturmak" > " Vektör katmanından şekiller oluşturun" . Her katmanın yanında bir yıldızla kopyalandığını göreceksiniz - bu bir şekil katmanıdır. Şekil katmanının altına yerleştirilmiş olarak şunları bulacaksınız: İçerik özelliği ek olarak Özelliği dönüştür . Hakları için İçerik özellikleri ayrıca bir düğme göreceksiniz " Ekle" Bu, canlandırmak için daha da fazla nitelik seçmenize olanak tanır.
Şekil katmanları, kırpma yolları gibi her türlü animasyonlu özelliği eklemenizi sağlayan bir Ekle düğmesi (İçerik özelliğinin sağında) içerir.
Adobe Illustrator'da Bir Nesneyi Ölçeklendirme
Yolları Kes
Logom için Yolları Kırp özelliğini kullanarak oldukça yaygın ve kullanışlı bir animasyon kullandım. Bunu yapmak için "Yolları Kırp" düğmesini kullanarak ekledim Ekle" Her harfin şekil katmanlarında, Bitiş özelliği anahtar karesini zaman çizelgesinin başlangıcında %0'a ve yaklaşık 100 saniye sonra %1'e ayarlayın. Gördüğünüz gibi harflerin ana hatları görünmez bir el tarafından gerçek zamanlı olarak çizilmiş gibi görünüyor.
Yolları Kırp özelliğini kullanmak, çizgilere gerçek zamanlı olarak kendilerini çizecek şekilde animasyon uygulamanıza olanak tanır.
Ayrıca arka plana biraz vurgu animasyonu eklemek istedim. Siyah beyaz çalıştığım için Alacakaranlık Kuşağını anımsatan döngüsel bir tünel efekti seçtim. Bunu yapmak için Araçlar panelindeki çokgen aracını kullanarak kompozisyonumun ortasına bir şekil çizerek yeni bir şekil katmanı oluşturdum.
Daha sonra Repeater özelliği ekledim, konumu ortaladım ve kopya sayısını artırdım. Bu, şekli kopyalayarak görünüşte sonsuz bir tünel yaratıyor. Ölçeğin ayarlanması her kopya arasındaki boşluğu artırır ve döndürmenin değiştirilmesi kopyaları görsel ilgi açısından farklı yönlere yönlendirir.
Son olarak, işi biraz daha renklendirmek için, zaman çizelgesinin başlangıcında 0'lık bir uzaklığı ana kareye ekledim ve daha sonra bunu zaman çizelgesinde negatif bir değere ayarladım.
Çokgen bir şekil katmanını ve Tekrarlayıcı özelliğini kullanarak hareketli bir arka plan oluşturmayı başardım.
Muhtemelen şekil katmanları için birçok seçeneğin olduğunu tahmin etmişsinizdir. Bu doğru: İnternette konuyla ilgili eksiksiz çevrimiçi kurslar var ve denemeye, pratik yapmaya ve öğrenmeye zaman ayırmalısınız.
Ayrıca hangi animasyon stilinin size uygun olacağını da söyleyemem. logo veya hangi özel araçlar Bu stile ulaşmak için ihtiyacınız olacak animasyonlar. Ancak bunu kendiniz nasıl keşfedeceğiniz konusunda size tavsiyelerde bulunabilirim. Tıpkı logoyu ilk oluşturduğunuzda yaptığınız gibi, rakipleriniz, hayran olduğunuz markalar ve/veya Pinterest veya Dribbble gibi siteler gibi diğer animasyonlu logolardan ilham alın.
Bir logoyu nasıl canlandıracağınıza dair yeni bilginizi kullanarak bunları analiz etmeye başladığınızda, çoğunun basit temellere dayandığını göreceksiniz. manipülasyonlar şekiller ve dönüşümlerle (gelişmiş stilize efektlerle açıkça katmanlanmış olanlar bile). Beğendiğiniz birkaç tane bulduğunuzda, After Effects'te geriye doğru çalışarak bu animasyonları pratik için tersine mühendislik yapmayı deneyebilirsiniz.
Adım 6: Saati ayarlayın.
Animasyon karelerinin animasyon boyunca hızını tanımlayan zamandan bahsedelim. Grafik Düzenleyiciye giderek zamanın görsel bir temsilini görebilirsiniz. Bunu yapmak için, zaman çizelgesi panelinin üst kısmındaki grafik simgesine (üzerine geldiğinizde Grafik Düzenleyici olarak etiketlenir) tıklayın; bu, zaman çizelgesini bir çizgi grafiğine dönüştürecektir.
Anahtar kare niteliklerinden birine tıklarsanız, bir anahtar kareden diğerine düz bir çizgi göreceksiniz. Şu anda yalnızca başlangıç ve bitiş noktalarının anahtar çerçevesini oluşturduğumuz için zamanlamayı After Effects'ten bıraktık. After Effects, yön olmadan animasyonun her karesini eşit şekilde hareket ettirerek mükemmel düz bir çizgi elde edilmesini sağlar.
Grafik düzenleyici, ana kare zamanlamasını çizgi grafiğinde gösterildiği gibi gösterir.
Ancak zamandaki kasıtlı değişiklik, animasyona gerçekçilik duygusu veren şeydir. Örneğin, sıçrayan bir top animasyonunda top, momentum ve yerçekimi nedeniyle sıçrama yüksekliğinde daha yavaş, yere yaklaştıkça daha hızlı hareket eder. Yani tüm animasyon boyunca aynı hızda hareket etmiyor, eğer hareket etseydi bir robot olarak öne çıkacaktı.
Grafik düzenleyicinin alt kısmında bulunan Bezier araçları, grafik çizgisinin eğriliğini ayarlamanıza olanak tanır.
Anahtar Kareleri Otomatik Bezier'e Dönüştür
Grafik Düzenleyici, bir grafik çizgisini bir eğriye dönüştürmek için Bezier tutamaçlarını kullanarak kendi animasyonunuzun zamanlamasını ayarlamanıza olanak tanır. Grafik düzenleyicinin sağ alt köşesinde çizgilere iliştirilmiş bazı kare nokta simgeleri göreceksiniz; bunlar Bezier araçlarıdır.
Anahtar karelerden birine tıklayın ve " etiketli olanı bulana kadar Bezier araçlarının üzerine gelin Anahtar Kareleri Otomatik Bezier'e Dönüştür" . Buna tıkladığınızda grafikte sarı bir işaretin göründüğünü göreceksiniz. Bu tutamacı sürüklemek çizginin bükülmesine neden olur ve bu da animasyonunuzun zamanlamasını değiştirir. Eğrinin daha belirgin olduğu yerde kareler daha hızlı oynatılacak, eğrinin daha düzgün olduğu yerde ise kareler daha yavaş oynatılacaktır.
Daha keskin bir eğri daha hızlı senkronizasyona, daha yumuşak bir eğri ise daha yavaş senkronizasyona karşılık gelir.
Kendi zamanlamanızı ayarlamanın nüanslarını gerçekten anlamak, animasyon deneyimi gerektirir; bu nedenle Bezier eğrilerini manuel olarak ayarlamak daha ileri düzey bir konudur. Bu başlangıç kılavuzunda Bezier aracını kullanmanızı öneriyorum Kolay Kolaylık (seçtiğiniz ana kareye otomatik bir eğri uygulayan) tüm animasyon zaman aralıkları için. Basvurabilirsin Kolay Kolaylık Ana kareyi seçip sağ tıklayarak diyagram düzenleyicinin dışındaki bir ana kareye gidin.
Adım 7: Logonuzu dışa aktarın.
Bitmiş animasyonlu logonuzu dışa aktarmaya hazır olduğunuzda " Dosya" > " İhracat" > " Adobe Media Encoder'ı kuyruğa ekle" . After Effects'te varsayılan olarak dışa aktarmalar formatındaki dosya video için uygun olan mp4. Logomuzun paylaşılabilir bir resim dosyasını oluşturmak istediğimiz için onu animasyonlu bir GIF olarak dışa aktaracağız. Medya Kodlayıcı penceresinde, "Biçim" kelimesinin altında vurgulanan mavi metin satırının yanındaki oka tıklayın ve " Animasyonlu GIF" . Bitmiş dosyanız için hedef klasörü "Çıktı Dosyası" kelimelerinin altındaki mavi metne tıklayarak da ayarlayabilirsiniz.
Bir dosyayı dışa aktarmak için Dosya > Dışa Aktar > Adobe Media Encoder Kuyruğuna Ekle seçeneğine gidin ve Format sütunundaki açılır listeden Animasyonlu Gif'i seçin.
Dışa Aktarma Seçenekleri penceresini açmak için ön ayarın altındaki vurgulanan mavi metne çift tıklayın. Dosya boyutunuzu küçültmek için bakmak isteyeceğiniz birkaç seçenek vardır: Kalite (20'ye ayarladım), Kare Hızı (video için daha yüksek kare hızları (fps) önerilmesine rağmen 10'a ayarladım) ve Önizleme altındaki mavi çubuk olan süre (benimkini 4 saniyeye düşürdüm). Seçme tamam Bu pencereyi kapatmak için.
İşiniz bittiğinde Media Encoder'ın sağ üst köşesindeki yeşil Oynat simgesini seçin; dosyanız seçtiğiniz hedef klasörde görüntülenecektir. İşte bu: logo animasyonu tamamlandı!
Logo animasyonu ile markanıza hayat verin.
-
Logo animasyonu, markaların takip etmek zorunda kaldığı popüler bir trendden çok daha fazlasıdır. Ayrıca logo animasyonunun yadsınamaz bir büyüsü vardır ve markanızla etkileşime giren herkes için görsel bir zevk anı yaratmanın harika bir yoludur. Ve şans eseri, animasyon yazılımı öyle gelişti ki, becerisi ne olursa olsun hemen hemen herkes kendi logosuna bu sihrin bir kısmını ekleyebiliyor.
Bununla birlikte, bu eğitimin amacı logo animasyonunun temellerine başlamanıza yardımcı olmak olsa da, temel animasyonun ötesine geçmek için çok fazla deneme yanılma, pratik ve deneyim gerekir. Gerçekten özel bir logo animasyonu istiyorsanız profesyonel bir logo animatörü yatırım yapmaya değer.
Leave a comment