Grafik 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.
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.
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.
Şimdi Frame 2 seçiliyken, okumuzu biraz sağa kaydıralım(ben 10 piksel kaydırdım.).
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.
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.
Ve işte animasyonumuz. (Animasyonu hemen kapatmayın, aşağıda birkaç bilgi daha var)
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.
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.
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.
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
Frame Delay : 7
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.
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.