25

Ocak
2008

Fireworks ve Rollover Menü Yapımı

kategori: Grafik, Webmaster
grknclk yazmış,

Blografik.com‘da yayınlanan Fireworks kullanarak rollover menü yapımı. Birçok gösterişli web sitesinde gördüğümüz o ahımlı şahımlı bannerlar bakın nasıl hazırlanıyormuş.

İlk olarak menüyü yaparken Fireworks’ün “Simple Rollover Behavior” özelliğini kullanacağız. Bütün adımlar tek bir resim olarak hazırlandı ve altına da her adın açıklaması yazıldı. Resim anında yüklenemeyebilir biraz beklerseniz eğer açılacaktır.

komple.jpg

İlk önce tabiki yeni bir dosya açıyoruz, boyutları farketmez ben 800×600 açtım.

1.Rectangle aracı ile 500 e 50 boyutlarında bir dikdörtgen yapıyoruz.

2.Daha sonra dikdörtgene tıklıyoruz ve Style penceresinden benim daha önce vermiş olduğum fireworks stillerinden yaşil olanı kullanarak diktdörgenimize stil vermiş oluyoruz.Siz herhangi birini seçebilirsiniz ne olduğu farketmez.

3.Stili uyguladıktan sonra bu hali alıyor.Proporties’den “Fit Canvas” diyerek canvas boyunu dikdörtgene göre ayarlayın.

4.Bu adımda ise buton isimlerini yazıyoruz.

5.Frames penceresine tıkladıktan sonra options’a tıklıyoruz ve dublicate frame diyoruz.Açılan pencereden “After current frame”i işaretleyerek ok diyoruz.Frame mantığını çizgifilm hazırlamaya benzetebiliriz.İkinci sayfaya geçtiğimiz zaman başka bir görüntü geliyor yani menünün üstüne geldiğiniz zaman ikinci sayfadaki resmi gösteriyor.

6.Menümüzü hazırladık ve buton isimlerini yazdık.Bu adımda menünün üstüne geldiğimizi zaman hangi resmi göstereceğini ayarlayacağız.Ben buton isimlerine glow efekti verdim böylece üstüne geldiğimiz zaman parlıyormuş gibi duracak.
Bu aşamada Frame penceresinden “Frame 2″yi seçmeyi unutmuyoruz.Frame 2 yi seçtikten sonra buton isimlerini shift’e basılı tutarak teker teker seçiyoruz. Filter’dan “Shadow and Glow > Glow” diyoruz ve resimdeki ayarları giriyoruz.

7.Glow efektini verdikten sonra resimdeki gibi gözükmesi lazım.

8. Slice aracını seçerek butonları dilimliyoruz.5 tane butonumuz olduğu için herbirini 100 px olarak dilimlerseniz eşit olarak kesmiş olursunuz.Bir tane dilimi yaptıktan sonra “alt” tuşunua basılı tutup sürüklerseniz birebir kopyalamış olursunuz.Bütün dilimleri yaptıktan sonra “shift”e basılı tutarak hepsini seçiyoruz ve herhangi birinin ortasındaki beyaz yere tıklayarak “Add Simple Rollover Behavior” diyoruz.Böylece işlemimiz tamalanmış oluyor. F12′ye basarak tarayıcı da nasıl gözüktüğüne bakabilirisiniz.

9.Dosya olarak almak isterseniz “File>Export” diyoruz ve resimdeki ayarları girerek kaydediyoruz.

Ben bunların hiçbiriyle uğraşmayayım direk indireyim derseniz burdan indirebilirsiniz.Zip dosyasının içinde ayrıca .png dosyası da mevcut.Eklemek istediğiniz, sormak istediğiniz veya şurası yanlış dediğiniz biryer varsa lütfen paylaşmaktan çekinmeyin.

Son olarak şunları söylemek istiyorum ki yaratıcılığın sonu yok.Ben glow veririm siz shadow verirsiniz,ben yeşil kullanırım siz mavi kullanırısınız.Seçenekler sonsuz yani :)  Başka bir derstede Rollover Buton olayını anlatmak istiyorum.Kısa birşey zaten.Şimdilik bu kadar.

Bu Yazıyı Paylaşın


« Google Reader   |   PhpBB Forum Botlarından Kurtulun »

 


Etiketler:

Yorumlar

Kullanıcı girişi yaparak ya da zorunlu olan * alanlarını doldurarak yorum yapabilirsiniz.

İsminiz *

Email adresiniz *

Web sitesiz

Mesajınızı buraya yazabilirsiniz:

Toplam 1 yorum var.

  1. seda | 06 Nisan 2008, 22:19

    merabalar bişi sorcam ben bu web 2.0 style ları ekledim fakat uygulamaya gelince calısmıo nedeni ne olabilir cevap verirseniz sevinirm :S


Kapat
E-posta ile paylaş