Animasyon Nasıl Hazırlanır?

[patriote]

Arkadaşlar bu yazı forumda animasyonla ilgili farklı zamanlarda sık sık sorular sorulması nedeniyle hazırlanmıştır.
Yazının amacı meraklıların basit animasyon tekniklerini kavramasına yardımcı olmaktır.
Öncelikle paylaşacağım bilginin kendi bildiklerimle sınırlı olduğunu belirtmek isterim. Bu nedenle eksiklerim, hatalarım olabilir.
Bu işin profesyoneli olan arkadaşlar da katkı sağlarlarsa güzel bir sonuç ortaya çıkarabiliriz diye düşünüyorum.
Benim vereceğim animasyon teknikleri Adobe ImageReady programına göre hazırlanmıştır. Piyasa da bir çok programla animasyon hazırlayabilirsiniz. Fakat sistem hemen hemen aynıdır.
ImageReady’i seçmemin sebebi ise Photoshop ile birlikte gelmesidir. (tabii eski sürümlerde bu olmayabilir. O zaman bir yerlerden indirip bilgisayarınıza kurun.) Bu da yapacağımız işler için ayrı ayrı programlar kurma zahmetinden bizi kurtaracaktır.
Bunun dışında Macromedia şirketinin Flash programı animasyon konusunda en profesyonel programlardan biridir. Bu programla çok daha profesyonel animasyonlar oluşturabilir, isterseniz gif olarak da kaydedebilirsiniz. Fakat motosiklet sitesinde olduğumuzu düşünerek fazla da coşmayalım diye düşünüyorum.
Dersi hazırlarken Photoshop ile ilgili temel bilgilerinizin olduğunu varsayıyorum.
Bu bilgiler;
Resimleri boyutlandırma nasıl yapılır?
Layer(Katman) nedir?
Yeni bir layer açma ve layerlerle işlem yapma.
Yazı yazma ve yazıya efekt uygulama

Gibi temel bilgilerdir. Eğer bunlar hakkında biraz da olsa bilgi sahibi iseniz, animasyon işini de kolayca kavrayabileceğinizi düşünüyorum.

Elimizde bulunan 4 resmi sıra ile gösteren bir animasyon yapacağız. Bu animasyonu bitirdiğimizde artık animasyon prensipleri hakkında temel bilgiye sahip olmuş olacaksınız.

Bir klasör oluşturup kullanmak istediğiniz resimleri bu klasöre kopyalayın. Bu bir çok işi kolaylaştıran bir yöntemdir.

Öncelikle şunu belirtmek istiyorum. Ben bütün işlemleri photoshop da yapıp her şey bittikten sonra ImageReady programına geçiyorum. Ama bu yaptığımız işlemlerin aynısını ImageReady de de yapabilirsiniz.

Bu örnekte fazla bir filtre ya da efekt uygulamayacağımızdan tüm işlemleri ImageReady de yapacağız.

Hazırsak başlayalım.
Tabii önce programımızı açalım ve ufaktan bir tanıyalım.
Aşağıda ki resmi inceleyin. Bu resim ImageReady programının çalışma masasının bir görünüşüdür.



Eğer programı açtıysanız şimdi resimlerinizi açın.
ImageReady’de resim dosyalarımızı açmanın en kolay yolu program üzerinde bir boşluğa çift tıklamaktır. Açılan pencereden resimlerimizi kopyaladığımız klasörü bulalım ve resimlerimizi açalım. Siz de resimlerinizi benim yaptığım gibi sıralayın.
Şimdi programımızı inceleyelim. Sağ tarafta layers yazılı bir bölüm görüyorsunuz.(Eğer programınız ingilizce değil faklı bir dilde ise farklı isimler olabilir. Bazı kullanıcılar, programlarını Türkçeleştirme yolunu seçiyorlar. Benim tavsiyem daha anlaşılır olabilmesi bakımından programı ingilizce kullanmanızdır.)
Alt kısımda ise Animation yazılı bir bölüm var. Biz animasyon yapmak için bu iki bölümde çalışacağız.
Eğer bu iki bölümü programınızda göremiyorsanız, yukarıda window yazılı yere tıklayıp açılan menüden layers ve animation seçeneklerini işaretleyin. Bölümler masa üstünüze gelecektir.



Evet problem yoksa
Programınızda açtığınız resimlerin üzerine sırayla tıklayın. Aşağıda ki animation penceresinde aktif olan resmin yer aldığını göreceksiniz.

Evet bu kadar bilgi yeter. Şimdi animasyonumuzu yapmaya başlayalım.
Boyutları birbirinden farklı olan 4 resmimiz var. Önce resimlerimizin hepsini aynı boyuta getirelim. Ben örneğimiz de 400X350 px boyutunda bir animasyon yapacağım. Bu nedenle bütün resimleri bu boyuta getiriyorum.
Resimlerin boyutunu değiştirmek için,Image/Image size komutunu verelim aşağıdaki gibi bir pencere açılacak.



Burada width(genişlik) kısmına 400 yazıyorum. ,
Altta Height(yükseklik) seçeneğinin otomatik olarak değiştiğini göreceksiniz. Örneğin benim resmim de yüksekliği 345 olarak ayarladı ama ben 350 olmasını istiyorum. Bunun nedeni hemen alttaki Constrain Proportions seçeneğinin işaretli olması. Bu seçenek resimlerimizin boyutlarını orijinal oranlarını koruyarak değiştirmemizi sağlar. Bu seçeneğin solundaki kutudan işareti kaldırıyorum ve 350 rakamını giriyorum.
Evet bu işlemi 4 resim için de ayrı ayrı uyguluyorum. Sonuçta aynı boyutta 4 resmimiz olacak.
Sırada resimleri birbirlerinin üzerine kopyalamak var.
Bütün resimleri seçtiğim bir resmin üzerine kopyalayacağım. Kopyaladığım her resmi kapatacağım ki ortalık karışmasın.
Resimleri kopyalamak için şu basit yöntemi kullanabilirsiniz. Önce kopyalayacağınız resmin üzerine bir kez tıklayın.
Daha sonra Ctrl+A tuşuna birlikte basın. Resminiz seçili hale gelecek.
Şimdi de Ctrl+C tuşuna basın. Resmi hafızaya aldınız. Şimdi bu resmi kapatın.
1.resminize birkez tıklayıp aktif hale getirin ve Ctrl+V tuş kombinasyonunu yapın. Kopyaladığınız resmin birinci resmin üzerine geldiğini göreceksiniz. Aynı işlemleri diğer iki resimle de yapın ve her seferinde 1. resminizin üzerine yapıştırın.
Evet şimdi layers penceremizi inceleyelim.
Programımızda tek bir resim gözükmesine rağmen layers panelinde 4 layer oluştuğunu görüyoruz.



Bu layerslerin(katman) solunda gözler var. Üstteki 3 gözün üstüne sırayla tıklayarak gözleri kapatın. Resminizi incelediğinizde kapattığınız gözlerdeki resimlerin görünmediğini farkedeceksiniz.



Şimdi animation bölümüne geçelim.
Şu anda animasyon penceresinde bir frame ve bu framenin içerisinde yukarıdaki resimde gördüğünüz resmin aynısını görüyor olmalısınız.



Dikkat ettiyseniz animation penceresinin altında winamp yada media player tuşları gibi tuşlar var. Bunlar bir müzik dosyasını oynatır gibi animasyonumuzu oynatmamızı sağlayan tuşlardır. Bu tuşların sağ tarafında zincire benzeyen bir icon (tweens animation frames) onun sağında da ucu kıvrılmış bir sayfa iconu (Dublicates current frame) var. Bu sayfa iconuna tıklayın.
Gördüğünüz gibi ikinci bir framemiz oldu. Bu frame daha önceki ile aynı.



Şimdi layer penceresine dönelim ve alttan ikinci sıradaki layerin solundaki gözün olması gereken yere bir kez tıklayalım. Daha önce bu gözü kapatmıştık. Şimdi tekrar açtık. En alttaki gözü de kapatalım. Layer penceresinde son durum şöyle olmalı.



Animation penceresi de şöyle olmalı



Evet.
Animation penceresinin altındaki sayfa iconuna(Dublicates current frame) tekrar tıklayalım. Animation penceresinde 3. bir framenin açıldığını görüyoruz. Bu framede bir önceki ile aynı. Ama biz artık ne yapacağımızı biliyoruz öyle değilmi?
Eveet afferin.
Alttan 3. sıradaki layerimizin gözünü açıp, ikinci sıradakinin gözünü kapatıyoruz.
Layer penceresinde son durum.



Animation penceresinde ki son durum



Artık animasyonumuzu bitirmek için son bir hamlemiz kaldı.
Sayfa iconuna (Dublicates current frame) tekrar tıklayıp yeni bir frame daha açıyoruz.
Layers penceremizde en üstteki layerin gözünü açıyoruz. Alttakinin gözünü kapatıyoruz.
Layers penceresinde ki son durum.



Animation penceresindeki son durum



Evet şimdi play tuşuna basarsanız resimlerin değiştiğini görebilirsiniz ama doğal olarak aşağıdaki gibi bir görüntü ile karşılaşacaksınız.



Gördüğünüz gibi resimler çok hızlı dönüyor. Bunun nedeni zaman sekansını ayarlamamış olmamız. Peki nasıl ayarlayacağız?
Aşağıdaki resimde her framenin altında 0 sec (sıfır saniye) yazısını görüyorsunuz.



Bu yazıların üzerine tıklarsanız şöyle bir popup pencere açılacak.



Gördüğünüz gibi burada belli süre seçenekleri var. Her frame için gösterilecek süreyi buradan işaretleyip animasyonumuzu tamamlıyoruz.
Örneğin ben birinci frame 1sn, ikinci 1,5 sn, üçüncü 2 sn ve 4. frame de 1 sn gösterilsin istiyorum. Zamanlamayı da buna göre ayarladım.
Eğer bu pencere de görünmeyen bir zamanlama seçeneği isterseniz Other kısmını işaretleyip çıkan pencereye elle girebilirsiniz.
Animasyonumuz hayırlı olsun.

İsterseniz play tuşuna basıp ön izleme yaparak hatanız varsa düzeltebilirsiniz.
Şimdi animasyonumuzu web için kaydedelim.
Önce File bölümüne giriyoruz ve aşağıdaki resimde gördüğünüz mavi işaretli bölüme tıklıyoruz.



Daha sonra aşağıdaki gibi bir pencere açılacak.




Burada animasyonumuza bir isim verip kaydedeceğiz.
Dikkat edeceğimiz husus Images Only seçeneğinin aktif olması. Eğer bir html sayfasına gömülü olarak resminizi kaydetmek isterseniz,HTML and Images seçeneğini kullanabilirsiniz.


Bunun dışında yaptığımız animasyonları faklı biçimlerde de optimize etme seçeneğimiz var.
Örneğin animasyonumuzu video dosyası olarak da kaydedebiliriz.
Bunun için
File/Export original komutunu verelim.
Açılan pencere de dosyamıza isim verdiğimiz yerin altındaki bölümü açalım.




Burada Quick time movie seçeneğini işaretleyip okeye bastığınızda Compression settings penceresi açılacak.



Burada yukarıda gördüğünüz video seçeneğini işaretleyip Kaydediyoruz.
Bakın animasyon yapmak isterken video yaptık.



Konuyu anlamayanlar parmak kaldırsın.
Sırayla herkese cevap vereceğim….
Tabii burada sadece basit bir animasyonun yapım tekniğini anlattım. Daha sonra fırsat buldukça geçiş efektleri,vs. gibi şeyleri nasıl yaptığımızı da anlatmaya çalışırım.
Sizler de bilgileriniz ve yapmış olduğunuz animasyonları burada paylaşarak konuyu pekiştirmeye yardımcı olabilirsiniz.
Hepinize mutlu günler dilerim.

Not: Dersi alıp aparmak, başka sitelere kotarmak, kendiniz yapmış gibi şişinmek benim açımdan bir problem teşkil etmez.
Fakat bu yazıyı motosiklet net forumu için özel hazırladığımdan, en azından forumun adından bahsederseniz, yapmış olduğunuz ahlaksızlığı bir nebze de olsa affettirmiş olursunuz.

[Prometheus]

Arkadaşlarımıza faydalı olacak süper bilgiler Emeğine sağlık..

Photoshop ve Imageready beceriyorum da az çok, bi ara bana Corel anlatsan

[mostwanted_57]

Hazır elin deymişken 3d max ve AutoCad anlatımlarınıda bekleriz.

[Prometheus]

Evet evet 3d MAX.. Bir ara çok merak sardım da beceremedim.

[alp_tunay]

Teşekkürler....Emeğine sağlık...Çok güzel çalışma olmuş...Umarım faydalı olur arkadaşlara..

[KÜRŞAD_KORKUT]

Gerçekten güzel olmuş ellerine sağlık teşekkür ederiz.

En kısa zaman da bende yapıp sana tekmil verecem.

[patriote]

Photoshop ve Imageready beceriyorum da az çok, bi ara bana Corel anlatsan

Hazır elin deymişken 3d max ve AutoCad anlatımlarınıda bekleriz.

Evet evet 3d MAX.. Bir ara çok merak sardım da beceremedim.

Bir motosiklet forumun da bu kadar detaya giremeyiz sanırım.
Bu tip programlarla ilgili bir site/forum hazırlıyorum.
Ama amiral gemisi Photoshop ve Flash olacak.
Şu anda derslerin büyük bölümünü(en azından ben diğer dersleri yazarken ziyaretçiyi oyalayacak kadar bölümünü) hazırladım.

Amacım Türkiye'de eksikliği çok hissedilen, Türkçe bir Tutorials sitesi yapmak.

Bu çok masraflı bir iş değil. Bu nedenle maddi giderlerini cebimden karşılayabilirim.

Tek sorun uygun bir isim bulmak ve uygun forum tipini seçebilmek.
Programlama ile yaklaşık 20 yıldan bu yana uğraşmama rağmen Net üzerinden programlamaya ayıracak vaktim pek olmadı. Şu anda izlediğimiz forum gibi hazır sistemlerden birini seçeceğim.
Yani kullanıcı geldiğinde ana sayfada tutorial başlıklarını görebileceği, içeriğe girdiğinde ekleme ya da eleştri yapabileceği aktif bir site olsun istiyorum.

Bu konular da uzman olan arkadaşların da yardım ve desteğine ihtiyacım var tabii.

Dediğim gibi maddi kısmı ben karşılayacağım.
Böylece sponsorlarımızı tıklayın, Aman Google sitelerini ziyaret edin gibi kaygılarımız olmadan rahatça bilgi paylaşımında bulunabileceğiz.

Bu konuda önerileriniz olursa dinlemeye hazırım.

[CenkKeskin]

TEşekkürler eline sağlık

[Gökhan]

eline saglık birçok kişinin merak edipte saglıklı bilgi alamadıgı bir konuydu.

[sahinbirinci]

çok teşekkürler eline emeğine sağlık güzel paylaşım olmuş

[KÜRŞAD_KORKUT]

Ben biraz geç yapacam hocam,bilgisayar sibop kesti formatlayıp sonra yapacam

[patriote]

Ben biraz geç yapacam hocam,bilgisayar sibop kesti formatlayıp sonra yapacam

Tekmili bekliyorum Kürşat.
Bu ara avatarının üzerinde bir yazı var.
Hazır site yada programlardan birini mi kullanarak mı avatarı yaptın?
Yoksa özellikle vermek istediğin bir mesaj mı var?