ImageReady ile Gif Animasyonun Temelleri

Adobe Photoshop
programı ile birlikte gelen ( 6 versyionu ve üzeri ) ImageReady
programı ile basit ama etkili animasyonlar oluşturabilirsiniz. Bu
derste aniamsyonun temel adımları gösterilmektedir.
Yanılmıyor isem Photoshop
6 sürümünden sonra gelen photoshoplar ile birlikte verilmeye başlanan
imageready ile Animasyon Yapılması mümkün olmaya başlamıştır.
Programın Çok basit bir sistem ve mantıkla Flasha Benzer Layer Mantığı
ile hareket verilebilme özelliği çok özel bir kullanım yeri getirmiştir
photoshopa.
Son Gelen Photoshop CS2 sürümü ile Artık Animasyon ve Gelişmiş Gif özellikleri Direk Photoshop Programınada Uyarlanmıştır.

Benim Bu Derste Amacım size imagereadynin genel kullanımı Hakkında
Bilgi Vermekten çok Yanlızca Programın Animasyon özelliğini
Anlatmaktır. Başladıktan Sonra gif yapmanın ne kadar kolay olduğunu
sizde Görüceksiniz...

İlk Olarak Gif Animasyon Mantığını Anlatıyım;
Gif yani Graphics Interchange Format (Grafik
Değiştirme Biçimi) Anlamına Gelir. Maksimum 8bit Renk (256Renk) Desteği
bulunur. Tam Transparanlık özeliği vardır. Yani Yarı Saydam Olamazlar.
Piksel (Bitmap) Tabanlı Animasyon Olarak Saklanabilirler. Genel Amacı
düşük renkler sayesinde düşük yer tutması sebebiyle Görselleri
Saklamada Kullanılırlar. Yada Webte Düşük Boyutlu buton ve küçük
resimler için.

Bir gif içerisine Verilen Frame Sayısı Sınırsızdır. Fakat Avi yada mov
gibi yine bitmap tabanlı filmlere göre Akıcı değildir. Basit 4 5
kareyi(Frame) hareket ettirerek sürekli yada 1 kere tekrar eden
animasyon gösterimine elverişlidir.

Evet Bu Kadar Bilgi Yeter, Şimdi ilk Örneğimizle Başlıyalım.
Yanlız Belirtmek istiyorum bu bir çizim dersi değildir. Söylediğim
Şekillerin Nasıl çizildiği ile ilgili Forumumuzda Mevcuttur. Örneklerde
çizdiğim şekilleri sizinde çizebilmeniz Gerekmektedir...
Evet;
Photoshopu Açın ve 400 x 400 piksellik bir Sayfa Oluşturun.
Ben Basit Bir Arka Fon resmi Koydum Sahneme.


Şimdi Sahneye Bize El Sallıyan Bir Karakter Oluşturucaz.
Bunun için Basit Bir Karakter çizebilir yada mevcut bir resminizin
Etrafını Temizleyerek Koyabilirsiniz.Eğer Siz Çizecekseniz Kol, Bak ve
Ayak Gibi Uzuvları Ayrı Layerde Bırakın. Eğer resim Ekliycek iseniz
Eklediğiniz Resmin El Baş Ve Ayaklarını Layerlere Ayırın.
Benim Karakterim Bu;


Gözleri Boş Bıraktım Daha Sonra Değişik Bir animasyon Çeşidini Gözler üzerinde Göstericem...
Şimdi Karakterimizin Layerlerini Resimdeki Oluşturun.


Az Önce dediğim gibi Yanlızca Animasyon Vericeğimiz Layerların Ayrı olması yeticektir.
Şimdi Yapmamız gereken Photoshopun tool Menüsünün Altındaki İmageready
simgesine tıklamak ve direk olarak imagereadye geçmek olucaktır.


Bu Butona tıkladığımız Zaman Otomatik olarak imageready açılacak ve Sayfamız Layerleri ile birlikte aynen orda açılacaktır.
imageReady menüsü Photoshop menülerine oldukça benzediğinden kullanım konusunda zorluk çekmiyceksiniz.
Görüldüğü gibi seçilen Layerler etrafında çizgi ile gösterilir. Burda
Photoshopun aksine Move Tool ile tıkladığımız resmin layeri seçili hale
gelir.


Tool Menüsündeki Elipse Tool ile Gözü oluşturucak siyah noktayıde ekliyorum.


Bu Photoshoptaki ile Tamamen Aynı Şekilde Çalışır.
Aynı Photoshoptaki Gibi Work Path Yerine Shape olarak oluşturuyorum.


Gözleri Shapelerden Yapmamızın Sebebi imageReadynin Shapelere Verilen
Hareketleri Daha Gerçekçi Animasyon Haline Getirebilmesi yüzündendir.
Şimdi Gelelim Animasyon Kısmına;
Animasyon için Her Kareyi Ayrı Ayrı oluşturmamız Gerekmektedir. Gif
Mantıksal olarak animasyonu oluşturan resimlerin tıpkı bir film şeridi
gibi ardarda gelmesinden oluşur.


(animasyon Penceresinde Animasyonun Herkaresi düzenlenir)

Bu Yüzden Önce Animasyonun hikayesini düşünmeli ve Karakterimizin
hareketlerini teker teker Buna Göre çizmeliyiz. Tabi Layer Mantığıyla.
Yani Sadece Kol Hareket edicekse 2 tane Kol layeri oluşturmalı bu
layerların ilkinde kol normal ikincisinde hareketin bittiği noktada
olmalı. Animasyon kısmında ilk Frame ilk layeri, ikinci frame ise
ikinci layeri gösterdiği zaman sanki kol hareket etmiş gibi bir görüntü
oluşturur. bunun için ilk framede normal kol layeri görünür hareket
layeri görünmez, ikinci framede ise tam tersi şeklinde uygulanmalıdır.

Bunu şöyle bir örnekle gösterelim;
Karakterimizin Kol Layerini Duplicate edelim,
Duplicate layerine "Kol Hareket" ismini verelim ve Ctrl + T yardımı ile şeklini değiştirelim.


Şekilde iki adet Kol Layerimiz Var.
Aynı şekilde Animasyon Penceresindede iki frame oluşturalım.
Bunun için animasyon penceresinin altındaki küçük duplicate frame
butonuna bir kez tıklayalım. Böylece Ordaki Framein bir kopyasını
oluşturur.




Karelerimiz(Frameler) sadece Layerlarıdaki visibility (görünürlülük) ve
Opacity (Opaklık, saydamlık) Ayarlarını üzerlerinde saklayabilirler.
Bu mantıkla Animasyon penceresinden ilk karemizi seçelim ve layer
penceresinden Sol Kol hareket Layerinin Yanındaki küçük köz işaretine
tıklayarak kaldıralım.


Aynı Şekilde yine Animasyon penceresinden bu sefer ikinci karemizi
seçip, Layer Penceresinden hareket layerini aktif, Normal Kol Layerinin
yanındaki Gözü ise (deaktif)iptal edelim...

Şimdi Yine Duplicate Frame tuşu ile Animasyon Penceresinde bir Kare
Daha oluşturalım. Bu Karede de ilk karedeki gibi normal kol hareketinin
görünür hareket kol layerinin gizli olmasını ayarlıyalım.
Şimdi Animasyon Penceresinin Altındaki Küçük Oynatma tuşu ile Animasyonumuza önizleme yapabiliriz.


Evet Gelelim Karelerin hızını Ayarlamaya;
Görüldüğü gibi animasyonumuz çok hızlı hareket etmekte ve sürekli başa dönmektedir.
Bizim istedğimizde sürekli tekrar etmesidir fakat hareket hızını
ayarlamamız gerekmektedir. Bunun için tek yapmamız gereken şey
Framelerimizin Gösterimiz zamanını uzatmaktır.
Animasyon Penceresindeki karelerin altında 0.0 seconds yazdığını görürsünüz, işte bu karenin gösterme zamanıdır.


Buna tıkladığınız zaman çıkan açılır pencereden Gösterim Zamanı
seçenekleri ve kendiniz bir zaman vermeniz için Other seçeneği
bulunmaktadır. Biz ilk Kareye 0,2 sn, ikinci kareye 0,5sn ve 3.kareye
yine 0,2 sn verelim...


Şimdi izlediğimizde ise animasyonumuzun hareket hızlarının daha gerçekçi olduğunu görürsünüz.

Burda Mantık şudur; ilk karede Görünür tüm layerler 0,2 saniye
göründükten sonra ikinci kareye geçip burdada görünür tüm layerleri 0,5
sn gösterip diğer kareye(frame)geçmesidir.

Bu mantıkla animasyonlarımız oluşturulabilir. Daha yumuşak ve gerçekçi
geçişler için kol hareketini daha fazla layerden oluşturup kare
sayılarını bu şekilde ayarlıyabilirsiniz.

Yumuşak Geçişlerin ikinçi yolu ise flashtakine benziyen Tween
özelliğidir. bu özellik sayesinde uğraşmadan iki kare arası opacity
ayarlı geçişler oluşturabiliriz. Aslında Asıl amacı Çizdiğimiz Shape
Şekillerinin Yer değişimi arasında oluşan hareketleri hesaplamaktır.
Biz Göz için çizdiğimiz shapleri bu şekilde düzenliycez. Neyse ama ilk
önce opacity geçişini gösterelim...

Bunun için Geçiş yapıcağımız iki karemizi shift yardımı(ilk kareyi
seçip ikinci kareyi shifte basılı tutarak) ile seçiyoruz. Tabi sadece
yanyana bulunan kareler için.


Ardından Animasyon Penceresindeki küçük tween tuşuna basıyoruz(duplicate framein hemen yanında).


Açılan Pencere;


Bu Pencerede ilk kısımdaki sayı girilen yer animasyon geçişi için kaç
kare kullanmak istediğinizi sorar. bunun 5 te kalması makuldur.
Layers Kısmındaki All Layers seçili olmalı diğeri seçili olursa yanlızca seçili layera hareket verir.
ikinci kısımdaki seçenekler açık kalsın.
ve Ok tuşuna Basabilirsiniz.



Gördüğünüz gibi tween Seçtiğimiz iki kare arasında 5 yeni kare(frame) ekledi.
Kareleri incelerseniz görürsünüzki iki kare arasında verdiğimiz opacity
ayarlarını geçiş şeklinde sıralamıştır. Yani ilk karede solkol
hareketimiz 100% görünmezken bu 2 , 3 , 4 , 5 karelerde sırayla yukarı
şekilde görünür olmuş ve ilk seçtiğimiz anda ikinci kare olan ama şu
anda 6. kare olan framemimizde ise 100% görünür hale gelmiştir.

Animasyonu Kaydetmek için ise Ctrl + Shift + Alt + S ye Basmanız Ve
Burda Gif olarak Kaydetmeniz Gerekmektedir... Ben burda göz
animasyonlarınıda ekledim bunu yapmak için gözleri her framedeki
yerlerine getirip yine tweeni kullanıp bu sefer çıkan pencerede sadece
positionu seçili bırakarak ok demeniz yeterlidir...