Fireworks de Web 2.0 Buton Yapımı

Question

Merhaba R10 Ailesi,

Fireworks 'e Çizim Programına Yeni Başladım ve Size İlk Dersimi Aktaracağım.

Başlıyoruz...

1-İlk Olarak Dilediğimiz Boyutta Bir Çalışma Sayfası Açıyoruz.File -> New Yoluyla veya Ctrl+N  Tıklayarak Çalışma Boyutumu Daha Rahat Çalışmak İçin 300 x 300 Olarak Ayarlıyorum.

2-Sayfamız Açıldığına Göre Artık Çizimimize Başlayabiliriz.Programın Sol Tarafında Bulunan Araç Çubuğunda Vector Bölümünü Görüyoruz.Burada Rectangle tool (Düz köşeli dikdörtgen yada kare çizer) veya Rounded Rectangle (Köşeleri yuvarlatılmış kare yada dikdörtgen çizer) ile dilediğiniz bir çizim yapabilirsiniz. Ben yukardaki buton için Rounded Rectangle ile bir dikdörtgen çizdim.





Şimdi Bu Dikdörtgenimize Şekil Vereceğiz.Şuan Ben 2 Geçişli Renk Kullanmak İstiyorum.Siz Kendi Çalışmanız Doğrultusunda İstediğiniz Kadar Çoğaltabilirsiniz.Bunun İçin Çizdiğim Dikdörtgeni Bir Kez Tıkladıktan Sonra Altta Properties (özellikler) Kısmında Solid Yazan Yeri Açıyoruz ve Gradient Oradan da Linear Seçiyoruz.



Böylece çizime 2 renkli bir geçiş efekti verdik.



Ama biz bu geçişin yatay değil dikey olmasını istiyoruz. Bunun için çizimin üzerindeki nokta ve küçük kare kulakçıkları mouse yardımıyla yer değiştirip istediğimiz şekli bulalım.



Şimdide Renklerimizi Seçelim.



Ben Mavi Tonlarında 2 Renk Seçtim.



Grafiğin bir kopyasını alıp altına indirelim. Grafik seçili iken ctrl - c sonra ctrl-v yapıp mouse ile aşağı çekebilirsiniz.



Şimdi Bu Oluşturduğumuz İçinci Dikdörtgenimizi Yansıma ya da Işık Grafiğimiz Olacak.Bunun İçin Öncelikle 2. Kopyaladığımız Grafiği Bir Defa Tıklıyoruz.Böylece Grafik Seçili Hale Geliyor.Tıkladıktan Sonra Grafik Üzerinde Bulunan En Altında Bulunan Sağ ve Sol Kulakçıkları Alt Tuşu Basılı Olarak Sağ Kulakçığı Sağa Sol Kulakçığı Sola Dogru Çekiyoruz ve Dikdörtgenimizin Alt Kenarlarını Düz Köşe Haline Getirmiş Oluyoruz.Üst Köşeler Hala Yuvarlak Kalıyor.



Sağ en alttaki sarı kulakçığı sadece mouse yardımıyla resim yüksekliği yarıya gelecek kadar yukarı çekelim. Böylece resmi boyuna küçülttük.



Şimdi bu ikinci grafiği ilkinin en üstüne taşıyalım. Görüntüde sanki tek buton varmış gibi olacaktır.

Yine Properties panelindeki renk kutusuna tıklayalım.. sol ve sağ renk kutucuklarından beyaz seçelim. ve renk seçtiğimiz ok işaretlerinin üzerindeki aşağı bakan okları tıklayalım.



Bu okları tıkladığımızda seçtiğimiz rengin transparan (Opacity değeri) değerleri gelecek ve %100 dürler. soldakiny sola çekerek sıfır, sağdakini de sola çekerek %50 yapalım (değerler size kalmış tabiki).

Böylece aşağıdaki gibi bir grafik elde ettik...



Şimdi Sıra Zemine Desen Vermeye Kaldı Bu Sizin İsteğinize Kalmış.Ben Vericem.
Bunun İçin Alttaki Parçamızı Seçiyoruz.(Pointer Tool İle)En Altta Properties(Özellikler) Kısmında Bulunan  Texture Yazan Yerden Bir Desen Seçiyoruz.



Ben Line-Diag 1 Olanı Seçiyorum.

Ve Son Olarak Çalışmamızda Beyaz Kalan Gereksiz Boş Kısımları Temizlemek İçin Üst Menüden Modify - Canvas - Trim Canvas 'a Tıklıyoruz.Ve Gereksiz Alanlar Temizleniyor.



İşte Sonuç:


Not:Artık Web 2.0 Butonumuz Hazır Üzerine Text Tool İle Yazımızı Yazabilir ve Süsleyebiliriz.Emeği Geçen Batur Kardeşime Teşekkür Ederim.

Erturk · Answer

Güzel çalışma

Bende Fireworks kullanıyorum devamlı. Sıfırdan ogrenmek isteyenler için guzel bir yazı olmus. Lakin Diag koymasan sanki daha ii olurdu. Ayrıca CS4 un kütüphanesi bayagıda geniş 

+rep

c0skun · Answer

Saol DostumValla o zaman ki psikolojim öle imiş koymuşum.Bilmeyenler için onuda öğrenmiş olurlar.Koymayan Koymaz

MaxidaTa · Answer

bilmeyenler ve benim için çok iyi oldu.teşekkürler

Erturk · Answer

c0skun adlı üyeden alıntı:						mesajı görüntüle									Grafiğin bir kopyasını alıp altına indirelim. Grafik seçili iken ctrl - c sonra ctrl-v yapıp mouse ile aşağı çekebilirsiniz. 		Bunun yerine ek olarak  CTRL+ALT+D yaparsanız secili olan herhangi birseyi Clone yapmıs olursunuz ve hemen altına atar 

Bende bunu paylaşayım bari. corbada bizimde tuzumuz olsun

c0skun · Answer

Teşekkürler Ertürk

emo · Answer

Güzel Anlatmışsın ustam hemen deneyeceğim eline sağlık

burak_aydin · Answer

elinize sağlık (:

XpasS · Answer

Güzel paylaşım teşekürler

Delibey09 · Answer

Biraz amatör bir çalişma ama yinede sağol

dataci · Answer

Elinize sağlık iyi çalışma olmuş
 
fireworks e kitap  yada ders koularını nerde bulabilirim