Bir Banner Hazırlıyoruz

Bir önceki derste sizlere banner boyutları hakkında malumat vermiştik. Bu dersimizde ise, Fireworks'da banner nasıl hazırlanır, onu anlatacağız.

Bir önceki derste sizlere banner boyutları hakkında malumat vermiştik. Bu dersimizde ise, Fireworks'da banner nasıl hazırlanır, onu anlatacağız. Dersimiz esnasında tam banner boyutunu (468*60) kullanacağız.

Fireworks programında 468*60 boyutlarında yeni bir dosya açıyoruz.

İster Modify>Canvas Color menüsünü kullanarak, isterseniz Properties menüsünü kullanarak bir arka plan rengi belirliyoruz. Ben açık yeşil bir renk kullanacağım.

Hareketli bir banner yapacağız, bu bir kaç kareden oluşacak. Bu yüzden ilk karemizde kullanacağımız metnimizi banner üzerine yazıyoruz:



Şimdi açık değilse Window>Frames (Kısa yol tuşu: Shift+F2) menüsünü aktif hale getirelim.

İlk karemiz hazır ve zaten Frames panelinde aşağıdaki gibi görünüyordur:



Şimdi ikinci frame ekleyip işlemlerimize devam edeceğiz. İkinci frame'i eklemek için şu işlemlerden birini yapın:

1. Edit>Insert>Frame menüsünü kullanabilirsiniz.
2. Ya da Frames panelinde sağ alt köşede bulunan (çöp sepeti işaretinin solundaki) butonu kullanabilirsiniz.
3. Ya da, panel üzerinde Frames and History yazısının sağındaki işaret üzerine tıklayarak açılan menüden "Add Frame" seçeneğini tıklayabilirsiniz.

Bu üç işlemden birini yaparak yeni bir frame ekleyelim:



Yukarıda da görüldüğü gibi şu an iki adet karemiz bulunuyor. Bu menüden 2.kareye tıklayarak şimdi bu karemizi düzenlemeye başlayalım. Bu karemizde daha önce yazmış olduğumuz “Sanalkurs” metininin yanına “.net” metnini yazacağız. Bu işlemi yaparken Frame panelinde Frame 2 bölümü seçili olmalı.

Metinimizi yazdık, peki iki karede de bulunan metinlerin birbirine göre hizalanmasını nasıl yapacağız? Her seferinde frame menüsünden bir o kareye bir bu kareye gitmemiz mi gerekiyor? Tabii ki, hayır.

Frame panelinin sol alt köşesinde “onion skinning” adında (soldan ilk buton) bir buton bulunmaktadır. Bu buton karemizde bulunan nesnelerimize belli bir şeffaflık vermektedir. Bu sayede, biz bir kareyi düzenlerken diğerlerini de görebilmekte ve istediğimiz gibi bir banner hazırlayabilmekteyiz. Bu butona tıklandığı zaman karşımıza bir menü çıkmaktadır. Bu menüden “Multi frame editing” ve “Show all frames” özellikleri işaretliyoruz. Şimdi karşımıza aşağıdaki gibi bir görüntü çıkması gerekmektedir:

[/img]


Yukarıda anlattığımız frame ekleme adımlarından birini tekrarlayarak yeni bir kare daha oluşturuyoruz. Bu karede “.net” metinimizin yanına “ne yapabileceğini göster” metnini ekleyeceğiz:



Gerekli düzenlemeleri yaptıktan sonra elimizde 3 karesi bulunan bir gif animasyonumuz olacaktır. Fakat animasyonumuza daha güzel bir görüntü kazandırabilmek için yeni bir kare daha ekliyoruz. Bu eklediğimiz dördüncü kareyi boş olarak kullanacağız ve frame menüsünden üstüne tıklayıp, tutarak en üst sıraya taşıyacağız. Yani eklediğimiz son frame, ilk frame'in üstünde olacak.

İstersek tuvalde alttaki "play" işaretine basarak banner'in son halini izleyebiliriz. Ancak okunamayacak kadar hızlı bir şekilde tekrarlandığını göreceksiniz. Öyleyse animasyonumuzun hızını biraz yavaşlatmamız gerekiyor.

Frame panelinde gördüğünüz gibi her bir frame'in karşısında bir rakam yazmaktadır. Bu rakam "default" olarak "7" şeklinde ayarlıdır. Biz bu rakamın üzerine çift tıklayarak "Frame delay" değerini belirleyelim. Gördüğünüz gibi bir frame hızlı olabilirken diğeri yavaş olarak ayarlanabilir. Yani birbirinden bağımsız olarak değerleri değiştirebiliyoruz. Bu sayede dilediğimiz kare uzun, dilediğimiz kare de kısa olabilir.



Artık bannerimiz hazır hale geldi. Sizler hayal gücünüzü kullanarak daha farklı ve etkileşimli bannerlar hazırlayabilirsiniz. Biz sadece basit bir banner örneği verdik burada.

Şimdi son bir işlem daha kaldı; dosya boyutunu belirleyeceğiz. İnternette boyut hususu çok önemlidir bildiğiniz gibi. Şimdi Window>Optimize menüsünü kullanarak Optimize panelini aktif hale getirin. Değerler aşağıdaki gibi olmalı.



"Animated GIF" olmasına dikkat etmeliyiz. Bu tür banner yapımlarında size tavsiyemiz, zemin rengi olarak tek renk kullanmanız olacaktır. Bu sayede yukarıdaki menüde bulunan “Loss” seçeneğinin değerini %50’ye kadar çıkarabilmekteyiz ve animasyonumuzu minimal boyutlara indirebiliriz. Ayrıca tek renk kullanımı animasyonumuz içerisindeki “contrast” değerlerinin sabit bir düzeyde kalmasına yardımcı olacaktır. Son olarak banner animasyonumuzda kullandığımız renk sayısını da azaltarak animasyonumuzu yayınlayabileceğimiz bir hale getiriyoruz.

Artık hazır haldeki "banner"imizi export (ihraç) edelim. File>Export menüsünü kullanarak ihraç ediyoruz. Dosyamızı kaydettikten sonraki hali şu şekilde olacaktır.



Hepinize kolay gelsin. Çalışmalarınızı bekliyoruz.
  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

fw yeni derslerinizi merakla bekliyorum.öncelikle kare şeklindeki bir resmi nasıl oval hale getirebiliriz bu konuda bir ders anlatırsanız çok memnun olurum....şimdiden çok teşekkürler...
lütfen biri bana üstüne nasıl yazı yazıldığını anlatabilirmi
yardım edin nasıl üstüne yazı yazıcam
kardeş sol taraftaki menüde "A" işareti var ona tıkla sonra istegin yere yazz..:kirp:
hocam çok teşekkürler.Parmaklarınız drt görmesin:D
birşey soucaktım bende şimdi hepsi ayrı ayrı oLArak görünüyor benim hepsini bir karede göstermem için kısabir yol warmı yoksa sadece kopyalayarakmı yapıcM
bu arada çok tşk ederim
BENİM İLK BANNER HAZIRLAYIŞIM AMA ÇOK GÜZEL OLDU:)SİZİNDE ELİNİZE SAÐLIK TŞK.
ya bu Fireworks programını nerden indirebılırım bı yardımcı olur musunz? çok acıl.. teşkkurler..
çok teşekkürler çok güzel anlatmışsınız
window>frames ten sonrasını yapamıyom yardım edersenız sevınırım....
çok tesekkürlerr...:kirp:
güzel bir çalışma teşekkürler... çalışmalarınız devamını bekliyoruz.... kolay gelsin herkede
banner i başka bir png sayfasına nasıl koyacaz peki? ben freworks de html sayfsı yaptım, onun içine de banner eklemek istiyorum; Nasıl yapcam???
Ayrıca Animated Gif olarak kaydedip HTML sayfasını Dreamweaver'da açarak eklemen lazım.
ya benım anlamadıgım bu yaptıgımm bannerı bı sayfa ıcınde kullanıyorum ve butun sayfa bannermıs gıbı davranıyo yanı sayfamın hepsı bırden yanıp sonuyo nasıl yapcaz onu ya
YA PLAY NERDE BULAMADIM ÇILDIRCAM ŞİMDİ
Play tuşu sayfanın altında.
tamam teşekkür ederim çok güzel oldu anlatımınız için tekrar teşekkür ederim....:kirp::kirp::kirp:
Çok güzel kolay anlatımlı bir çalışma emeğinize teşekürler.......
tskr ederız cok güzeldi

Yukarı Git