Fireworks'de Buton Hazırlama

Web sayfalarımızı hazırlarken olmazsa olmazlardan biri de butonlardır. Tasarımlarınızda sizler de sayfalarınızda ilgi uyandıracak, etkileşimli, renkli grafik butonlar oluşturmak istiyorsanız buyurun bize takılın.

Bu dersimizde sizlerden gelen yoğun istek üzerinde butonlar üzerinde duracağız. Web sayfalarımızı hazırlarken olmazsa olmazlardan biri de butonlardır. Son zamanlarda grafiklerin web sayfalarındaki ağırlığı düşünülecek olursa, grafik bir buton hazırlamanın da önemi anlaşılacaktır. Bunun en güzel örneklerinden birini Hotmail ve MSN sayfalarında görüyoruz, güzel bir grafik tasarım ve grafik butonlar var. Tasarımlarınızda sizler de sayfalarınızda ilgi uyandıracak, etkileşimli, renkli grafik butonlar oluşturmak istiyorsanız buyurun bize takılın.

Fireworks'de Javascript ve HTML bileşimli bir çok buton yapabilirsiniz. Buton editörünü kullanarak sonradan da işinize yarayacak istediğiniz kendi özel butonlarınızı oluşturabilir, hatta bu çalışmalarınızı Flash ve benzeri programlara da buton olarak aktarabilirsiniz.

Rollover buton hazırlamanın inceliklerini göstereceğiz şimdi. Rollover buton, mouse'u üzerine götürdüğünüzde görünümü değişen buton demektir.

Biz resimleri oluşturduğumuzda Fireworks, rollover butonun internet tarayıcısında çalışması için gereken kodları otomatik olarak oluşturacaktır. Ne kadar hoş değil mi? Sonra, hoop butonunuz hazır!

Rollover Buton Oluşturuyoruz

Beyaz zemin renginde 400*400 yeni bir sayfa açın. Edit > Insert > New Button ile buton editörü penceresini açalım. (Kısa yol tuşu: Ctrl+Shift+F8)



Yukarıda gördüğünüz pencere Buton Editörü'dür. Butonları burada hazırlıyoruz. Bir rollover buton hazırlamanın beş aşamadan oluştuğunu bilmenizde fayda var:

1. Ana görünüm (Up)
2. Mouse üzerinde geldiğinde değişen görünüm (Over)
3. Mouse ile basıldığında yansıtılmak istenen görünüm (Down)
4. Mouse üzerinden çekildiğinde yansıtılmak istenen görünüm (OverWhileDown)
5. Butonun aktif alanı (Active Area)

"Import a Button"a tıklayarak Fireworks'un hazır gelen kütüphanesinden bir buton ekleyip üzerinde istediğiniz değişiklikleri yapabilirsiniz. Beğendiğiniz butonun yazılarını değiştirebilir, yeni çizgiler, yeni renkler ilave edebilirsiniz.



ŞİMDİ resimde gördüğünüz gibi Rounded Renctangle (Kenarları Yuvarlatılmış Dikdörtgen) aracını seçelim. Bu araçla kenarları yuvarlatılmış dörtgenler oluştururuz. Bu araç seçili olduğu esnada Properties kısmındaki ayarlarla gerekli düzenlemeleri de yapmamız mümkün. Yuvarlaklık miktarını artırabilir, dolgu ve kenar çizgilerinin renklerini belirleyebilir, Texture ile de dolgu efektleri uygulayabilirsiniz. Hatta çizim yaptıktan sonra Efektler panelinden de istediğiniz efekti verebilirsiniz.

Yuvarlaklık miktarını artırmak ya da azaltmak istiyorsanız, aşağıdaki panelde görünen Rectangle Roundness'in önündeki yuvarlanma sürgüsünü aşağı yukarı sürükleyerek veya istediğiniz değeri girerek bunu gerçekleştirebilirsiniz.



..::: NOT ::.. Farenin tuşunu bırakmadan sağ ve sol yön tuşlarını basılı tutarak dörtgeni çizerken yuvarlanma miktarını değiştirebilirsiniz.

Buton yapımına devam ediyoruz. Buton editörü içinde olduğumuzu unutmadan aşağıdaki gibi bir dörtgen çizelim.



Dörtgeni çizdikten sonra Properties panelinden Bevel and Emboss > Inner Bevel efekti verin. İsterseniz siz değişik efektler deneyebilirsiniz. Efekt panelinden istediğiniz şekli elde edene kadar ayarları değiştirin.



Şimdi butona Ana Sayfa yazısı ekleyeceğiz. Bunun için Text Aracını kullanarak zıt bir renkle yazımızı yazalım ve dörtgenin tam ortasına yerleştirelim. İsterseniz yazımıza herhangi bir efekt ekleyebiliriz. Mesela ben Drop Shadow efekti verdim.



Rollover resmi oluşturmak için Over sekmesini tıklatalım. Oluşturduğumuz orjinal butonun (dörtgen ve metin, up kısmında yaptığımız her şey) bir kopyasını yapmak için Copy Up Graphic'e tıklayın.



Böylece Up penceresinde oluşturduğumuz buton kopyalanıp Over penceresinde aynı yere yapıştırıldı. Normalde rollover resim orjinal resme dayanır, sadece metnin rengini veya butonun gölgesini değiştirmek yeterli olabilir.

Biraz evvel efekt verdiğimiz dörtgeni seçin efekt alanında gördüğünüz Inner Bevel'e çift tıklayın. Gelen ayarlar kutucuğunda Raised yazan yerden Inset'i seçin. Sonuç aşağıdaki gibi olacaktır:



Gördüğünüz gibi Mouse üzerinde geldiğinde göreceğimiz görünümümüz de hazır oldu artık. Diğer sekmeleri anlatmıyorum, onları şu an için kullanmamıza gerek yok. Ama siz isterseniz kendiniz çeşitli efekt ve renkleri bu sekmeler içinde uygulayarak deneyebilir, butonunuza çeşitlilik katabilirsiniz.

Buton editöründen çıkmak için kapatma düğmesine tıklayın. Yani o pencereyi kapatın.

Buton oluşturduğunuz zaman aynı zamanda Fireworks o buton için slice'lar oluşturur. Bu butonla beraber başka butonlar yerleştirirken bu durum kolaylıklar sağladığı gibi, bazen de rahatsız edebilir. Sayfayı tasarlarken bir gösterip bir gizlemeniz gerekecektir. Şimdilik gizlememiz gerekiyor, onun için gizleyelim. Gizlemek için resimde kırmızı daire içinde gösterilen "Dilimleri gizle ve göster" opsiyonlarını kullanın. Resimdeki soldaki şekli tıklayarak gizleyelim.



Butonumuz sahnede belirmiş durumda. Ancak seçili olduğunda sol alt kenarında yukarı doğru bir ok işareti vardır, bu da onun bir sembol olduğunu gösterir, buton olduğu anlaşılır böylece.



Artık butonumuz hazır. Ama ihraç edilmeye hazır değil henüz. Çünkü bir link eklememiz gerekiyor. Butonumuz seçili iken Properties paneline bakıyoruz.



Text: Ana Sayfa yazısı butonun üzerindeki yazıyı gösterir. Bu yazıyı başka yazılarla değiştirmeniz ise gayet kolaydır: Ana Sayfa yazısını silip istediğiniz yazıyı yazmak. Bunu yaptığınızda Fireworks sizin yerinize Up ve Over (diğer aşamalar da dahil) sekmelerinde ayrıca yapacağınız işlemleri sizin yerinize yapacaktır. Diyelim ki, sayfanızda bu butonun aynısından kullanmak istiyorsunuz, ancak yazıları değişik olacak: Ana Sayfa, Resimlerim, Galeri, Filmlerim, Ziyaretçi Defteri vs. gibi. İşte o zaman Text kutucuğuna bu isimleri yazmanız yetiyor anlayacağınız.

GIF WebSnap 128 yazan kısım buton ihraç edildiğindeki dosya uzantısını gösterir. İsteğe göre GIF, JPEG'den birini seçebilirsiniz.

Link bölümü butonumuza link vermek içindir. Sayfamızda kullandığımız bu butona basıldığında, diyelim ki anasayfa.html isimli bir sayfaya gidecek olsun. Öyleyse oraya anasayfa.html yazıyoruz. Bunun bir güzelliği de Dreamweaver'de düzenleme yaparken bu linkin aynen muhafaza edilmesidir. Zaten her bir slice Dreamweaver'e ihraç edildiğinde tablo içinde resimler olarak ihraç edilmiş olduğundan, Dreamweaver'de iken bu butonu seçtiğinizde resim olarak tanınmasına rağmen linki de aynen görünür. Hatta linki değiştirmeniz bile mümkündür.

Alt yazan kısım, web sayfasında iken resmin üzerine geldiğinizde görünmesini istediğiniz yazıyı yazacağınız kısımdır. "Ana Sayfaya Gitmek İçin Lütfen Buraya Tıklayınız.." gibi.

Target kısmında web sayfanızda bu butona basıldığında açılacak olan sayfanın durumunu belirlersiniz. (None, _blank, _self, _parent, _top)

Eğer butonunuza daha değişik efektler eklemeyi düşünüyorsanız "Add Effects"e tıklayarak bunu yapabilirsiniz.

Gördüğünüz gibi buton hazırlamak çok da zor değil. Biz sadece basit bir buton hazırladık. Sizler daha profesyonel butonlar hazırlayabilir, daha güzel çalışmalar ortaya koyabilirsiniz.

  • Etiketler;
Yorum Yaz

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

ders çok güzeldi teşekkür ederim mükemmle bir ders oldu benim içn..:)
slm sıraç ders çok güzeldi, aynen uyguladım.. ama kafama takılan bir şey var. buttonu gif olarak kaydettim daha sonra dreamveawer da resim ekle dedim buttonu ekledim aynı efekti vermedi.. ben mi yanlış yapıyorum..
Butonu bu şekilde değil de bir de şu yolu dene: - Mesela buton.html olarak export et, sonra bu html dosyasını aç, oradaki tabloyu kopyala kendi sayfana yapıştır. Ancak butonun resimlerini kendi site haritana almayı ve yolunu göstermeyi unutma. - Ya da rollover buton için yapman gereken bir diğer şey Dreamweaver'ın bu konudaki desteğidir. İki resim hazırla: Biri butonun görünen hali, diğeri üzerine gelince görünecek hali. Bunları Dreamweaver'dan Rollover resim olarak ayarla, iş tamamdır. Hangisi kolay geliyorsa...
ana sayfa ürünler iletişim adında üç tane button alt alta yaptım yaparken tabiki ana sayfa buttonunu kopyalayıp yapıştırdım efektleri verdim daha sonra done yaptım yalnız kaydettikten sonra fare ile üzerine geldiğimde üç button birlikte effekt oluyor.. ayrıca fireworks dizayn ekranında link de veremedim çünkü üçü birden topluca gözüküyor.. ben bu işi yapamayacağım galiba.. :)
Symbol kütüphanesinden butonu çoğaltarak işlemlerini yap, çünkü her değiştirdiğinde tek sembolü değiştiriyorsun, dolayısı ile diğerleri de değişiyor.
bir sorum olacak arkadşlar... buton kullandıgım bir html sayfasına daha sonra yaptıgım yeni bir butonuda eklmek istiyorum bunun için ne yapmam gerek. ilginize teşekkürler. ayrıca çalşma için de tşk. ederm hocam..
eline sağlık

Yukarı Git