Animasyonlu GIF resimler oluşturma

http://www.yunusyurtturk.com/wp-content/uploads/yresimler/agif/baslikresim.gifGrafik animasyonları, web sitenize heyecan ve görsellik katar. Bu yazımızda, Animasyonlu gif resmi nasıl oluşturulur bunu ele alacağız.

 

Gif animasyonları, eski çizgi filmler gibi oluşturulur. Yani, siz sıralı olarak birçok farklı grafik görürsünüz. Ama bunlar oldukça hızlı değiştiği için, siz grafiği canlıymış gibi hissedersiniz.

1.Adım

Bu adımda ne yapacağımıza karar veriyoruz. Ben bir füze animasyonu yapalım diyorum (Yok artık 🙂  )

İlk önce, 800*200 piksel boyutlarında bir çalışma alanı oluşturalım.

Dosya Oluşturuyoruz

Bizim füzemiz, bir OK'tan oluşacak ve soldan sağa doğru gidecek. Bunun için, penceremize bir OK çizelim. Ben, Arrow Tool yardımı ile aşağıdaki gibi bir ok çizdim.

Ok Çizimi

2.Adım


Bu adımda, okumuza hareket özelliği kazandıracağız. Bunun için, Frames panelinden, Frame 1'i "+" sembolünün üzerine doğru sürüklüyoruz. Bu, içeriği Frame 1 ile aynı olan bir başka Frame (yani Frame 2) oluşturmamızı sağlar.

Sürükle - Bırak

Şimdi Frame 2 seçiliyken, okumuzu biraz sağa kaydıralım(ben 10 piksel kaydırdım.).

Oku Kaydırdık

3.Adım

Şimdi , Frame 2'yi "+" sembolünün üzerine sürükleyin, Frame 3'ü oluşturun ve Frame 3'teki oku da biraz sağa kaydırın. Bu işlemi, istediğiniz kadar tekrarlayın. Ben kendime 37 Frame oluşturdurdum. Ama belli bir Frame' den sonra, 10 piksel yerine 30 piksel kaydırmaya başladım.

Framelerim

4.Adım


Son Adımımız. Artık Animasyonumuz hazır. Animasyonumuzu izlemek için, çalışma alanımızın Sağ altında olan Play düğmesine basarak, animasyonumuzu izliyoruz.

Play Düğmesinin Yeri

Ve işte animasyonumuz. (Animasyonu hemen kapatmayın, aşağıda birkaç bilgi daha var)

Animasyonumuz

Birkaç Fazladan Bilgi:


Bu kısımda size animasyonlarınızı hazırlarken kullanabileceğiniz fazladan birkaç bilgi yazacağım. 2. adımın ikinci resmine bir uyarı yazmıştım. "Resim sizde bu şekilde görünmeyebilir" diye. Şimdi bu resmi nasıl elde ettiğimi anlatacağım:

Onion Skinning : Frames panelinin sol altında yer alan tuşu tıkladığınızda, Onion Skinning menüsü açılır. Aşağıdaki resimlerde bu tuşu ve menü seçeneklerini görüyorsunuz.

Onion TuşuOnion Menüsü

Normal olarak, No Onion Skinning seçeneği işaretli olarak geliyor. Altındaki 3 seçenek ise, seçtiğiniz seçeneğe göre, diğer frame' lerin arka planda saydam olarak görünmesini sağlıyor. Show All Frames(bütün frame'leri göster) seçeneğini seçerek, çalışma ortamımıza tekrar bakalım. Sanırım resim herşeyi anlatıyor.

Show All Frames

Frame' lerin Geçiş Zamanlaması :

Bir diğer bilgi ise, Frame' lerin geçiş zamanlaması oluyor. Frame panelinde, Frame isimlerinin sağında bulunan 7 rakamı, bu geçiş zamanlamasını ifade ediyor. Zamanlamayı tüm frame'lere 20 ayarlayarak tekrar deneyelim.Bunun için, 7 rakamının üstüne çift tıklayarak açılan pencereye 20 değerini girmelisiniz.  Tüm Frameleri Seçmek için Shift tuşundan faydalanabilirsiniz.

Frame Zamanlaması

Sonuç animasyonumuz biraz yavaşladı. İlk animasyonu ve zamanlamayı 20 yaptıktan sonraki animasyonu tekrar koyuyorum. Böylece farkı daha iyi görebiliriz.

Frame Delay :20

20'li animasyon

 

Frame Delay : 7

7'li animasyon

Animasyonu GIF olarak kaydetmek :

Bu işlem için, File > Image Preview komutunu veriyoruz. Karşımıza çıkan pencereden, sadece Format kısmını "Animated GIF" yaparak, export tuşunu basıyoruz ve animasyonumuzu istediğimiz isim ile kaydediyoruz.

Export İşlemi

Animasyonu Otomatik Olarak Oluşturmak :

Karmaşık olmayan animasyonları, Otomatik olarak oluşturabilirsiniz. Nasıl yapabileceğinizi öğrenmek için Animasyonları Otomatik Olarak Hazırlama yazımıza göz atın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir