Photoshop Magazin
 


After Effects ile Arayüz Animasyonu

01 February 2007 | Sayı: Feb 2007
 
1 2 3 4 5
 

After Effects ile Arayüz Animasyonu


Photoshop'da hazırladığınız bir arayüzü, çok pratik bir şekilde canlandırabilirsiniz. Bildiğimiz gibi Adobe firmasının bir efekt-compositing programı olan After Effects sadece post prodüksiyon sektöründe değil animasyon içeren tüm sektörlerde (web siteleri, multimedya cd'ler) hızla yaygınlaşmaya başlamıştır. Eğer Photoshop'da yetkin olduğunuzu düşünüyorsanız, After Effects programına adapte olmanız çok zor olmayacaktır. Bu alıştırmada Photoshop'da hazırladığımız bir ara yüz tasarımını canlandırma yöntemlerine değineceğiz. Bu alıştırmada asıl dikkat çekilen konu, .PSD uzantılı dosyaların Adobe ürünlerinde senkronizasyonu sağlayan güçlü kimliğidir.


Çalışmamızın ön hazırlığı olarak, 640px X 480px ebatlarında bir çalışma alanı açıyoruz. Resolution değerimiz için 72 dpi yeterli; bu TV ve web için standart değerdir.



hspace=0



Şimdi çalışmamızın zemin layer'ını lacivert renge boyayalım. Ardından bir layer daha oluşturalım. Bu layer'ın ismine doku adını verelim. Bu örneğimizde doku layerımızın içini dairesel şekillerle doldurduk. Opacity değerini de % 25'e düşürelim.

Şimdide çalışmamıza resim ekleyelim. Dokümanımıza üç ayrı resmi dekupe edip yerleştiriyoruz. Ve bunları hizalamak için kılavuzlardan (guide) yararlanıyoruz. Son olarak ara yüze bir yazı ekliyoruz. After Effects programında, burada oluşturduğumuz bir yazıyı nasıl değiştirebileceğimizi göreceğiz. Dosyamızı .PSD uzantılı olarak kaydediyoruz.

hspace=0

hspace=0

Ve hareket başlıyor !
After Effects programında, daha önce oluşturduğumuz arayüzü kullanabilmek için Import etmemiz gerekiyor. Ancak Import ederken dikkat etmemiz gereken şey Import penceresindeki seçeneklerin doğru işaretlenmesi. Normalde After Effects programında bir dosyayı kullanabilmek için yeni bir kompozisyona ihtiyaç duyulur. Sadece .PSD formatlarında katman bilgilerini saklayabilen kompozisyon şeklinde Import etme seçeneği mevcuttur. Böylece Photoshop'da ne hazırlamışsak kayıpsız olarak bu programda kullanabiliriz.

hspace=0

Burada Import Kind sekmesinde seçmemiz gereken opsiyon Composition olmalı. Böylece katmanlarımız Photoshop'da olduğu gibi üstüste ve birbirinden bağımsız olacak. Aynı kısımda dikkat edilmesi gereken bir başka sekme de, Footage Dimensions kısmı.

hspace=0

Bildiğimiz gibi Photoshop'da her katmanın boyutu sadece kendi sınırladığı bölge kadardır. Buradaki bir yazının katman boyutu 180 X 60 px iken, eğer Document Size seçilirse boyut olarak 640 X 480 px görünecektir. Bu da dönüşümler uygulanırken (Transform) istenmeyen sonuçlar doğuracaktır. Uzun lafın kısası, seçmemiz gereken opsiyon Layer Size olmalıdır.

hspace=0

Dosyamızı başarıyla Import ettik. Projemizde kullanacağımız materyallerin toplandığı Project panelinde katmanlarımızı barındıran bir klasör ve bunların bir araya geldiği bir kompozisyon simgesi göreceksiniz. Böylece katmanları toplu halde kullanabileceğimiz gibi teker teker farklı kompozisyonlarda kullanabileceğimizi görmüş olduk. Şimdi animasyona geçmemiz için bir monitöre ve bir timeline'a ihtiyacımız var. Bunun için tek yapmamız gereken şey Project panelinde gördüğümüz arayüz Composition simgesine çift tıklamak.

Katmanlarımızın Photoshop'daki sıra ile yerleştirildiğine dikkat edin. Sadece bununla da kalınmıyor. Klavuz çizgilerimiz de saklanmış durumda. Bunlar senkronizasyonun sadece ufak bir parçası. Bir sonraki aşamada, katman özelliklerini kullanarak animasyon oluşturuyoruz.

hspace=0

Katman için açılır menü'de Opacity özelliğini buluyor ve sol tarafındaki saat ikonuna bir kere tıklıyoruz. Aynı satırda bir noktacığın oluştuğunu göreceksiniz. Daha önce animasyon yaptıysanız size tanıdık gelecek bir arkadaş; keyframe. Böylece 0'ıncı anda arka plan katmanının Opacity değerinin 0 olduğu bilgisini işlemiş olduk.

Timeline'da ki sürükleme çizgisini yarım saniye kadar sürükleyip Opacity değerini bu noktadayken 100 yapalım. Bir keyframe'in de burada oluştuğunu göreceksiniz. Böylece After Effects programına toplam beş tane bilgi vererek bir animasyon oluşturmasını sağladık.

Animasyon (canlandırma) yapılacak özellik: Opacity Başlangıç zamanı 00:00, başlangıç değeri 0, bitiş zamanı 00:12, bitiş değeri 100. After Effects bu bilgiler doğrultusunda arka plan katmanının Opacity değerini yarım saniyelik bir zaman diliminde 0'dan 100'e çıkartacaktır. Animasyonun ön izlemesini space ya da 0 tuşlarına basarak yapabilirsiniz.

hspace=0

Arka plan katmanı için hazırlayacağımız animasyonu böylece tamamlamış olduk. Timeline çizgisini tekrar başlangıç zamanına getirerek arka plan katmanı için açılır menüyü kapatın. Doku katmanı için dönüşüm özeliklerini açın. Burada Opacity değerinin Photoshop'da ilk hazırladığımız dosya ile aynı değerde (%25) olduğuna dikkat edin. Bu katmanımızın arka plandan daha sonra ekrana gelmesini sağlamak için timeline üzerinde biraz sağa kaydırıyoruz. Doku katmanı için örnek videoda, aynı anda Opacity değeri artarken ebat değeri (scale) %100'den %110'a çıkmaktadır.

Resimlerimizin'de tasarladığımız animasyona göre sıra ile gelmesini sağlamalıyız. Bunun için doku katmanında yaptığımız gibi timeline'da yarım saniye kadar ileriye kaydırıyoruz. Daha sonra da ilk ve üçüncü resim için sağdan, ikinci resim için soldan gelmesini sağlıyoruz. Bunu yaparken Position değerine keyframe vermelisiniz. Örnekte yarım saniyelik bir sürede resimler ekranın dışından gelerek yerlerine oturmaktadır.

hspace=0

Motion Blur: Kompozisyonlar için genel bir özellik olan Motion Blur, aktif hale getirildiğinde hareketli katmanlara hızlarıyla orantılı olarak bulanıklaştırma uygulamaktadır.

Aktif hale getirmek için, Motion Blur'dan etkilenmesini istediğimiz katmanlar için () ikonuna tıklıyoruz. Kompozisyon penceresinde görebilmek için de üstteki () ikonuna tıklıyoruz.

hspace=0

Sıra geldi yazımıza. Ancak diyelim ki, Photoshop'da bir harf yanlış yazdığımızı farkettik. Ya da rengiyle ilgili sorunlarımız var. After Effects programı Rasterize edilmemiş text katmanlarını değiştirebilme yetisine sahiptir.

Bunun için text katmanı seçili iken Layer > Convert to Editable Text sekmesine tıklamanız yeterli. Photoshop'dan tanıdığımız Text Tool aracını seçerek yazımızı değiştirebiliriz.

hspace=0

Yazımız için tasarladığımız animasyon, aynı anda ebatlarının %360 değerinden %100 değerine yarım saniye içerisinde düşmesidir. Aynı anda opacity değerimiz de 0 dan 100'e yükselirse daha yumuşak bir geçiş olduğunu görebiliriz.

Yaptığımız tüm animasyonun ön izlemesini 0 tuşu ile yapabileceğimizi söylemiştik. İstediğiniz herhangi bir zamanda katmanları orijinal hallerine döndürebilir. Animasyon süreleri ile oynayabilirsiniz. Animasyonu tamamladıktan sonra, File > Export sekmesinden istediğimiz bir formatta çıktı alabiliriz.

hspace=0

hspace=0

Not: Bu dosya, Bilge Adam eğitim kurumdan Mesut Ersöz tarafından hazırlanmıştır.

 

February 2007

 


Genel