|
Buton Hazirlama
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.
Kaynak: SanalKurs.NET |
