KOOLPA

[MasterSlawe] · 25-02-2007, 19:01

A- Fireworks MX Araç Paleti

Fireworks araç paletinin tamamı ustte görüldüğü gibidir. Sayfalarımızda olsun, resim çalışmalarımızda olsun ve de vektörel çizimlerimizde bu paletteki alet edevatı kullanarak çalışırız.

Şimdi gelelim bu aletlerin ne işe yaradığına... Sizin de gördüğünüz gibi bazı araçların hemen sağ alt köşesinde ucu aşağı dönük siyah bir üçgen vardır. Bunun anlamı, aynen Photoshop'ta vb. programlarda olduğu gibi "başka seçenekler de var" demektir ve üzerlerine bir kaç saniye basılı tutarak bu özellikleri görebilirsiniz. Bir de dikkat ederseniz, araçlar kullanım alanlarına göre tasnif edilmiş durumdadır. (Select - Bitmap - Vector - Web - Colors). Bu da kullanıcılara büyük kolaylık sağlar. Sözü fazla uzatmadan hemen ilkinden başlayalım:

SEÇME ARAÇLARI

1. Pointer ve Select Behind Aracı

Menüdeki siyah ok işaretine basılı tuttuğumuz zaman hemen alttaki gibi bir kutu açılacaktır. Bu siyah ok işareti (Pointer) bizim her zaman taşımakta, seçmekte, getir götür işlerinde kullanacağımız bir alettir. Hemen altındaki "Select Behind Tool" aracının işlevi, mesela üst üste iki resim varsa, önde olanı değil de arkadaki resmi seçmeye yarar. Parantez içindeki V harfi ile 0 rakamı bu özelliğin klavyedeki kısa yol tuşlarını göstermektedir.

2. Subselection Aracı

Subselection çoklu seçimler ve daha ziyade çoklu resimleri düzenlemede kullancağınız bir araçtır. Kısa yol tuşları, A harfi veya 0 rakamıdır.

3. Scale Aracı

Ustte gördüğünüz Scale aracı yine yanındaki üçgene basılı tuttuğunuzda açılan bir menüye sahiptir. Burada üç ayrı özellik bulunuyor. Bunları denemek suretiyle daha iyi görebilirsiniz. Aynı zamanda bu üç özellikten her hangi biri seçiliyken "rotate", yani istediğiniz derecede döndürme yapmanız mümkündür. İşlevleri şu şekildedir:
Scale Tool: Buna bastığınızda resmin dört kenarında siyah kareler belirecektir. Bunları herhangi bir yönde çekerek büyültüp küçültebilirsiniz. Ancak bu işlem sadece dörtgen olarak geçerlidir. Shift tuşuna basılı tutarak çizdiğinizde bütün kenarlar aynı orantıda büyümektedir.
Skew Tool: Bu özellikle resmin bir tarafı sabit kalırken diğer tarafını uzatabilirsiniz.
Distort Tool: Bu özellikle yalnızca bir kenarı uzatırsınız.

4- Crop Tool

Crop aracının iki özelliği vardır. Bu özellik ilk anlarda fazla işimize yaramayacağı için bunu daha sonra anlatmayı düşünüyorum. Kısa yol tuşları ustte ismin hemen önünde parantez içinde görülmektedir.

5. Marquee Aracı

Bir çok programda kullanılan bir özelliktir bu. Marquee aracı ve Oval Marquee araçlarıyla seçim alanları oluşturup dolgular (fill) yapabilirsiniz, ya da oluşturduğunuz seçim alanını kesip kopyalayarak değişik işlemlerde kullanabilirsiniz. Marquee aracı dörtgen şeklinde seçim alanları oluştururken, diğeri ise daire şeklinde seçim alanları oluşturur. Zaten yazıların solundaki işaretten de durum anlaşılıyor galiba. Shift tuşuna basarak çizdiğimizde yine bütün köşeler aynı orantıda çizilir. Mesela dairede Shift tuşuna basılı tuttuğunuzda tam bir daire çizersiniz. Kısa yol tuşları M harfidir.

6. Lasso Aracı

Photoshop'çular bunu daha iyi bilirler. Ne var ki Photoshop'taki gibi gelişmiş değildir bu özellik. Hele Magnetik Lasso (Mıknatıs seçim) özelliği olmaması eksiklik sayılabilir. Lasso Tool ile resimlerinizin kenarlarında aynen Marquee gibi seçim alanları oluşturabilirsiniz ama bu özellikte şekil sınırı yoktur. Yani istediğiniz gibi seçim alanları oluşturursunuz. Kısa yol tuşu L harfidir.

7. Magic Wand Aracı

Magic Wand Aracı da renk düzenlemelerinizde kullanabileceğiniz güzel bir araçtır. Mesela bir resimde aynı tonda olan renkleri değiştirmek, silmek ya da kullanmak istiyorsunuz; o zaman seçmek istediğiniz alana tıkladığınızda aynı tondaki renkleri seçer ve işlemlerimizde kolaylıklar sağlar. Kısa yol tuşu W harfidir.

8. Brush Aracı

Brush aracı bildiğimiz fırçadır. Boyama ve resimler yapmada bunu kullanabilirsiniz. Kısa yol tuşu B harfidir.

9. Pencil ve Eraser Aracı

Kalem ve silgi araçları yanyana. Zaten hiç ayrılmazlar. Yazma çizme ve silme işlemleri bu ikiliden sorulur yani. Kısa yol tuşları: Kalem: B harfidir, Silgi: E harfidir.

10. Blur Aracı

Blur Tool yine çok özellikli bir araçtır. Resimlerimiz üzerindeki hatalarımızı blur yardımıyla en aza indirebilirken, resimlerimize değişik özellikler de katabiliriz.

Blur Tool menüsü altında beş ayrı araç vardır. Hepsi de farklı işlemler görür. Resmi gölgelendirmek, karartmak, aydınlatmak, açmak, renkleri en açık tona getirmek bu araçların özelliğidir. Bu konuda ileride daha detaylı duracağız. Şimdilik sadece bu bir iki sözle geçmek istiyorum. Kısa yol tuşu R harfidir

11. Rubber Stamp Aracı
Stamp bir mühür resmiyle temsil edilir. Bu araçla, resminizin içerisindeki bir nesneyi veya bulunduğu alanı olduğu gibi ama istediğiniz şekilde başka alanlara kopyalamanız mümkündür. İlerde bununla ilgili örnekler göreceğiz. Kısa yol tuşu S harfidir.

12. Eyedropper ve Paint Bucket Aracı

Bu iki araç birbirinden ayrılmaz bir ikili gibidir. Göz damlası resmi ile gösterilen Eye Dropper aracı bir yüzeydeki herhangi bir rengi seçmemize yarar. Bu rengi seçtikten sonra Paint Bucket aracı ile alanımızda dolgu yapabiliriz. Gradient aracı ise bir noktadan diğer noktaya artan veya azalan renklerle dolgu yapmamızı temin eder. Kısa yol tuşları, Damla: I - Paint: G harfidir.

VEKTOREL CIZIMLER

13. Line Aracı
Vektörel çizimlerimizde en çok kullandığımız unsurlardan biri olan Line aracı, düz çizgiler çizmemizi sağlar. Logo, amblem vs. işlemlerimizde başlıca yardımcımızdır. Kısa yol tuşu: N tuşudur.

14. Pen Aracı

Pen aracıyla sınırsız doğrultuda çizimler oluşturabiliriz. Bu çizgilerin her bir kıvrımında noktalar bulunur, bu noktaları uzatıp kısaltarak, elastiki haletinden istifade ile muntazam çizgiler oluştururuz. Diğer fonksiyonları da aynı özellikleri içerir ama, bazı küçük farklılıklar bulunmaktadır. Logo, amblem gibi çalışmalarımızda pek sık kullanacağımız özellikle resimlerimizde seçim alanlarımızı daha hesaplı ve kontrollü oluşturabileceğiz. Kısa yol tuşu P harfidir.

15. Rectangle Aracı

Rectangle aracı vektörel çizimlerimizde, web sayfalarımızda en çok kullandığımız araçlardandır. Gördüğünüz gibi bir çok seçeneği olup çeşitli geometrik şekiller çizebiliriz. Kenarları oval, daire, çok köşeli şekiller yapılabilir. Bu şekilleri biraraya getirerek ve değişik motifler işleyerek çok güzel sonuçlar elde edebiliriz. Yine bu kısımda da Shift tuşu kombinasyonu ile orantılı çizimler yapabiliriz. Shift tuşuna basılı tutarak çizdiğimizde kare, tam daire, bütün kenarları orantılı vs. biçimde şekiller oluştururuz. İsterseniz bu özelliği bir deneyerek görün derim. Kısa yol tuşu U harfidir.

16. Text Aracı (Yazı)

Bildiğimiz gibi artık her yerde A harfi ile temsil edilen yazı yazma özelliği Fireworks'ta da çok güzel sunulmuş durumdadır. Web sayfalarında, logo ve amblem çalışmalarımızdaki yazılar için hep kullanacağımız bir özellik. Yeter ki elinizin altında güzel fontlar olsun. Biliyorsunuz, normal html sitelerde yazılar internete upload edildikten sonra, yani kullanıcılara ulaştığı zaman eğer standart fontlar haricinde bir font kullanmışsanız, eğer o font da kullanıcıda yoksa göremiyor. Oysa grafik siteleri değişmez olduğundan fontlar her zaman orjinalliğini koruyacaklardır. Tabii bu da ekstra bir özellik.

17. Diğer Özellikler

Tabii şimdi hepsini anlatmak mümkün değil. Zaten yazımız bayağı uzadı. Diğer kalan özelliklerden şöyle kısaca bahsedelim, yeri geldiğinde etraflıca öğreneceğiz.

Knife (bıçak) adını verdiğimiz ve yine bıçak simgesiyle temsil edilen araç, çizgilerimizi (line) bölmeye, yani kesmeye yarar. Bir bıçak vazifesi görür anlayacağınız.

WEB bölümünde ise Slice (Dilim) adını verdiğimiz özellik bulunuyor. Bunları web sayfamız bittikten sonra sayfamızı bölmek için kullanırız. Tabii bu sonraki iş, bunları ileride yeri geldiğinde teferruatı ile anlatacağız.

COLORS bölümünde renkler var. Her türlü çalışmamızda işimize yarayan ve belki de en çok kullandığımız araçlar yer alıyor. Grafik programlarına aşina olanlar zaten bunları bilirler.

Properties (Özellikler) Bölümü:

Boş bir sayfa açtığımızda Properties (Özellikler) kısmını görürüz ilk önce. Bu bölüm yukarda anlattığımız her bir özelliği seçtiğimizde değişir ve seçtiğimiz aracın değiştirebileceğimiz özellikleri belirir. Bu çok kullanışlı özellik Fireworks 4'te tek tek paneller halindeydi, MX versiyonunda çok güzel dizayn edilmiş durumda olup oldukça kullanışlıdır.

Şimdilik bu dersimiz bu kadar... Biraz uzun oldu ama, bundan sonra işimiz kolaylaşacak. Bu kısmı iyi anladıktan sonra diğer kısımlarını yapmak çocuk oyuncağı olacak, göreceksiniz.

B- BASIT BIR GRAFIK SITESI YARATALIM

İşte ilk önce toolkit (araçlar) bölümünü tanıttıktan sonra sıra bir web sayfası hazırlamaya geldi. Bu arada bazı dostlarımız "neden ilk önce çeşitli işlemlerin nasıl yapıldığını özel olarak ele almadınız?" diye sorabilirler. Bundan maksadımız, hemen işe girişip vakit kaybetmeden, sözkonusu özellikleri de sayfamızı hazırlarken öğrenmek olduğu için bu şekilde hareket edeceğiz.

Yeni bir sayfa açalım

İlk önce File > New diyerek yeni boş bir sayfa açacağız. Karşımıza aşağıdaki gibi bir iletişim kutusu gelecek:

Biz 800*600 için bir web sayfası hazırlayalım ve Width (Uzunluk)=800, Height(Yükseklik)=600 yapalım. Bu bizim ekran çözünürlüğümüz olacak. Resolution (Çözünürlük)=72 olsun.

Canvas Color (Tuval Rengi) için seçeneklerden birini seçelim. İsterseniz "white" diyerek arka planın beyaz olmasını, isterseniz "transparent" diyerek renksiz olmasını, dilerseniz de "custom" bölümünden herhangi başka bir rengi seçmeniz mümkün tabii. Biz "white" diyoruz.

Sayfamızı açıldı ve artık web sayfamız için çalışmalarımıza başlayabiliriz. Şimdi hayalî bir yayınevi için basit bir grafik web sayfası yapacağız. Adımlarımızı tek tek izleyin. Araç kutusundan bilemediğiniz olursa, bir önceki dersimize bakabilirsiniz.

Web sayfamız için önce bir arka plan yapacağız. Bunun için "Renctangle" aracını kullanarak tüm arka alanı kaplayacak şekilde bir dörtgen çiziyoruz. Properties'e gelin ve şu değerleri girin: Dolguyu Solid (renk: #003366) yapın. Edge: Antialias, Texture: Line-Horiz 1, (45-50) yapalım. Netice aşağıdaki gibi bir şey olacaktır:

Yukardaki gibi bir sayfamız oldu. Yapacağımız diğer unsurları bunun üzerine bina edeceğiz. Eğer isterseniz siz daha farklı efektler, dolgular deneyebilirsiniz. Şimdi üzerine yine "Renctangle" aracını kullanarak bu kez beyaz bir alan oluşturacağız. Aşağıdaki gibi bir alan oluşturun:

Şimdi bu kez de beyazın üstünden biraz kırparak menü alanı oluşturalım. Bunun için şu işlemleri takip edin: Yine "Renctangle" aracını kullanarak üstten bir küçük bir dörtgen çizin.

Bu arada gördüğünüz gibi layer (katman) çizgileri seçildiğinde mavi olarak görünür. Seçilmeden önce üzerine geldiğinizde kırmızı renktedir. Üstte bu beyaz alanı oluşturduktan sonra devam edelim. Şimdi bu beyaz alanımızın üstten küçük bir kısmını keserek zarif bir görüntü oluşturmak istiyorum. Bıçakla sağ üstten küçük kenarını yatay bir şekilde keseceğim, bunun için katman seçiliyken bıçak (knife tool) sembolünü seçiyor ve kesiyorum. Sonra o alanı tek başına seçerek "delete" tuşuyla siliyorum. Aşağıdaki gibi olması gerekiyor.

Şimdi üst taraflara açılır menüler yerleştireceğiz. Onun için böyle bir şey yaptık. Aslında menülerin açıldığı her bir sayfa için bu şekilde beyaz çıkıntılar oluşturarak menülere gidildiğinde o kısım ayrı bir parçaymış hissi uyandırılabilir. Bunun en güzel örneğini MSN Hotmail sayfalarında görebilirsiniz.
Şimdi üste yerleştirdiğimiz küçük beyaz dörtgene bir renk vereceğiz, dolgu yaparak.

Dolguyu nasıl yapacağız?

Toolkit menüsünden "Gradient" aracını seçelim. Aşağıda Properties (Özellikler) bölümünde ilgili alanın kullanabileceğimiz özellikleri görüntülenecektir. Dolgu menüsünden "Linear" ismini seçin. Bununla bir bölgeden diğer bölgeye azalan renk alanları oluştururuz. Şimdi boya kutusu simgesine tıklayın:

Yukarı doğru bir kutu açıldı. Burada dolgu kutularını görüyorsunuz. Sağ taraftaki dolgu kutusu mavi, soldaki beyaz olduğundan bir taraftan diğer tarafa doğru renk azalıyordur. Gördüğünüz kutucukları orta taraflarda her hangi bir yere tıklamak suretiyle çoğaltabilirsiniz. O zaman renk sayısı tacaktır. Veya Preset açılır menüsünden hazır renkler seçebilirsiniz. Şimdi şeklimize dönelim. Aşağıdan yukarı mouse'u çekelim. Aşağıdan yukarı maviden beyaza bir geçiş görülecektir. Şimdi de hazırladığımız maviyi üst köşeye yerleştirelim.

Gördüğünüz gibi orada hoş bir görünüm oluştu. Şimdi o aynı işlemi tam aksi istikamete de uygulayacağız. Öyleyse, "Linear" uyguladığınız mavi alanı (yani beyaz şeklimizi) seçin, şu işlemlerden birini yapın:
Alan seçili olduğu halde Edit > Duplicate komutunu verin. Resmin hemen altına bir kopyası çıkarılır.
Ya da, Edit > Clone komutunu verin. Resmin tam üstüne kopyası çıkarılır.
Ya da, "Alt" tuşuna basılı tutarken resmi sürükleyin, kopyasını çıkarmış olursunuz.
Ya da, "Ctrl+C" tuşuna basıp, "Ctrl+V" ile yapıştırın. (Bu her yerde kullanılan genel bir yöntemdir)
Kopyalama işlemi bittiyse, kopyasını yaptığınız şeklimizi sağ tarafa taşıyıp aşağıdaki resimde olduğu gibi yerleştirin. Ama önce resmi ters çevirmemiz gerekiyor. Bunun için de şu işlemlerden birini yapın:
Sırasıyla, Modify > Transform > Flip Vertical komutunu verin, arkasıdan Modify > Transform > Flip Horizontal işlemlerini uyguladığınızda tam ters çevrilmiş olduğunu göreceksiniz.
Ya da, en kolay yoldan Modify > Transform > Free Transform yapıp resmi sizin istediğini şekle gelinceye kadar çevirebilirsiniz.

Son durum:

Güzel bir arayüz oldu, öyle değil mi? Şimdi işe koyulup üste logo, menüler yapacağız. Alt tarafta da bir ana sayfa oluşturacağız. Zaman ilerledikçe güzel bir web sayfası elde edeceğiz....

[MasterSlawe] · 25-02-2007, 19:37

Önceki çalışmamızda üst tarafa yerleştirmek amacıyla küçük bir parça hazırlamış ve üzerine "linear" dolgusu yapmıştık. Şimdi bu parçayı yine kullanacağız. Amacımız üst tarafa başka menüler eklemek.

Şimdi bu şeklimizi çoğaltacağız, bir önceki derste anlattığımız "Dublicate", "Clone", "Copy+Paste" gibi yöntemlerden biri ile çoğaltıp beş ayrı parça oluşturalım.
Resimdeki gibi çoğalttığımız şeklimizi üst taraflara yerleştirelim. Bu işi yaparken LAYER bölümünde dizilişe dikkat etmelisiniz. İlk çizdiğimiz RECTANGLE (Dörtgen) parçanın üzerinde olmalı.

Artık üst taraflara menülerimizi yapabiliriz. Yazılarımızı hazırlayalım. Bunlar için ben yeni bir LAYER kullanıyorum. Siz de öyle yaparsanız işimiz kolaylaşacak. Evet, "A" simgeli Text Tool'u kullanarak yazılarımızı hazırlayalım.

Ben üstte gördüğünüz gibi yazıları hazırlayıp yerleştirdim ve orta alana da daha önce hazırlanmış efekt verilmiş bir resim koydum. Alt sağ köşeye de hayalî yayınevimizin ismi olan "Osmanoğlu Yayınevi" yazısını yerleştirdim. Siz de kendinize göre bir şey hazırlayabilirsiniz.
Hazırladığımız bu yazılara alt menüleri nasıl yerletireceğiz?

Alt menüler için "slice"lar oluşturmamız gerekecek. Çünkü bütün web olayları slice'lar (dilim) ile alakalıdır. Araç paletinden "Slice Tool"u seçiyoruz. "Slice Tool"u aynen RECTANGLE gibi kullacağız. Mouse'u getirip "eserler" yazısının üzerine bir dörtgen çizelim. Aşağıdaki gibi yeşil bir alan oluşacaktır.

Bütün işlemlerimizi bu yeşil alan üzerinde yapacağız. Ben sadece birinin üzerinde neler yapılabileceğinden bahsedeceğim, diğerlerini de siz aynı şekilde isteğiniz doğrultusunda ayarlayın.

Slice'ı çizdikten sonra seçiyoruz. Seçtiğimiz zaman tam ortasında saat resmine benzeyen bir işaret belirdi.
Ayrı bir not: Slice'ların her biri dışarı ayrı bir resim olarak çıkar. Grafik sayfalarından oluşan web sayfalarını indirdiğinizde resimlerin anlamsız parçalar halinde olmasının sebebi de budur. Bu yüzden web sayfalarınızı istediğiniz kadar dilimlere ayırabilirsiniz, ne kadar çok dilim olursa sayfa o kadar hızlı açılır; ancak sayfanın bütünlüğünün bozulmaması için mümkün mertebe orantılı sayıda dilimler oluşturmak daha akıllıca olacaktır.

Geçiyoruz... Şimdi dilimimizi seçtik ve seçili olduğu halde sağ tıklayalım (isterseniz saat işaretinin üzerinde sol tıklarsanız da aynı komut verilecektir). Karşımıza bir menü açılacaktır.

Gördüğünüz gibi birçok özellik var. Çeşitli web olayları buradan yapılıyor. Bunu bilmenizde fayda var. Ancak biz hepsini görmeyeceğiz şimdi, ileride diğerlerini tek tek anlatacağız. Bizim yapmak istediğimiz açılır menüler eklemek. Bu sebeple "Add Pop-up Menu..." komutunu kullacağız, öyleyse tıklayın bu komuta. Şöyle bir iletişim kutusu gelmeli.

Buraya çeşitli yazılar içeren menüler ekleyeceğiz. "Text" yazan kısmın altındaki beyaz alana tıklayın ve bir şeyler yazın. Artı işaretine tıklayarak menü sayısını artırabilirsiniz. "Link" yazan kısmın altına basıldığı zaman gideceği adres, "Target" yazan kısmın altına da web sayfamızın tıklanıldığı zaman aynı sayfada mı, yoksa boş bir sayfada mı (blank) açılacağını belirleyeceğiz. Ben bir kaç menü ekliyorum, siz de kendinize göre ekleyin.

Böyle bir örnek hazırladım, siz de kendi kafanıza göre birşeyler hazırlarsınız. Sonra "Next" butonundan devam edip bir sonraki adıma geçelim. Sonraki adımlar çok kolay, yazı tiplerini, renkleri belirliyor, açılır menünüzün butonun neresinde duracağını tespit ediyorsunuz. "Next" diyerek işlemlerinizi tamamlayın ve en son "Done" diyerek bitirin. Artık açılır menümüz hazır. Web sayfasında görüntüleyerek kontrollerinizi yapabilirsiniz. Program içinde bu işlemleri görmeniz mümkün değil, bu yüzden mevcut browser'ınızda görüntülemelisiniz. F12 kısa yol tuşuna basın veya File > Preview in Browser > .... komutunu verin.

Son durum aşağıdaki gibi oldu:

Elbette menünüzü daha farklı şekillerde yapmanız mümkün. Sayfanızın ahengine ve tasarım özelliklerine göre değişik şekiller, renkler kullanabilirsiniz.

Fireworks'de Buton Hazırlama

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.

simdi ust resimde gösterildiği 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.
http://www.resimyuklet.com/uploads2/load72205.jpg

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.

[MasterSlawe] · 25-02-2007, 19:45

Fireworks 8 88.53 MB'i İndirebileceğiniz Link;

Macromedia - Fireworks Support Center : Downloads : Updaters

ahmetduru06 · 02-02-2008, 21:35

bu linke girmiyo :S

**efe** · 02-02-2008, 21:39

adam linki kopyalarken bakmamış ki ne kopyaladığına !
uyarı için teşekkürler, link düzeltildi

25-02-2007, 19:01	#1 (permalink)
[MasterSlawe] KoooLpa Üyelik tarihi: Dec 2006 Nerden: Aklımın Odaları Mesajlar: 771 Tecrübe Puanı: 4	FireWorks Dersleri A- Fireworks MX Araç Paleti Fireworks araç paletinin tamamı ustte görüldüğü gibidir. Sayfalarımızda olsun, resim çalışmalarımızda olsun ve de vektörel çizimlerimizde bu paletteki alet edevatı kullanarak çalışırız. Şimdi gelelim bu aletlerin ne işe yaradığına... Sizin de gördüğünüz gibi bazı araçların hemen sağ alt köşesinde ucu aşağı dönük siyah bir üçgen vardır. Bunun anlamı, aynen Photoshop'ta vb. programlarda olduğu gibi "başka seçenekler de var" demektir ve üzerlerine bir kaç saniye basılı tutarak bu özellikleri görebilirsiniz. Bir de dikkat ederseniz, araçlar kullanım alanlarına göre tasnif edilmiş durumdadır. (Select - Bitmap - Vector - Web - Colors). Bu da kullanıcılara büyük kolaylık sağlar. Sözü fazla uzatmadan hemen ilkinden başlayalım: SEÇME ARAÇLARI 1. Pointer ve Select Behind Aracı Menüdeki siyah ok işaretine basılı tuttuğumuz zaman hemen alttaki gibi bir kutu açılacaktır. Bu siyah ok işareti (Pointer) bizim her zaman taşımakta, seçmekte, getir götür işlerinde kullanacağımız bir alettir. Hemen altındaki "Select Behind Tool" aracının işlevi, mesela üst üste iki resim varsa, önde olanı değil de arkadaki resmi seçmeye yarar. Parantez içindeki V harfi ile 0 rakamı bu özelliğin klavyedeki kısa yol tuşlarını göstermektedir. 2. Subselection Aracı Subselection çoklu seçimler ve daha ziyade çoklu resimleri düzenlemede kullancağınız bir araçtır. Kısa yol tuşları, A harfi veya 0 rakamıdır. 3. Scale Aracı Ustte gördüğünüz Scale aracı yine yanındaki üçgene basılı tuttuğunuzda açılan bir menüye sahiptir. Burada üç ayrı özellik bulunuyor. Bunları denemek suretiyle daha iyi görebilirsiniz. Aynı zamanda bu üç özellikten her hangi biri seçiliyken "rotate", yani istediğiniz derecede döndürme yapmanız mümkündür. İşlevleri şu şekildedir: Scale Tool: Buna bastığınızda resmin dört kenarında siyah kareler belirecektir. Bunları herhangi bir yönde çekerek büyültüp küçültebilirsiniz. Ancak bu işlem sadece dörtgen olarak geçerlidir. Shift tuşuna basılı tutarak çizdiğinizde bütün kenarlar aynı orantıda büyümektedir. Skew Tool: Bu özellikle resmin bir tarafı sabit kalırken diğer tarafını uzatabilirsiniz. Distort Tool: Bu özellikle yalnızca bir kenarı uzatırsınız. 4- Crop Tool Crop aracının iki özelliği vardır. Bu özellik ilk anlarda fazla işimize yaramayacağı için bunu daha sonra anlatmayı düşünüyorum. Kısa yol tuşları ustte ismin hemen önünde parantez içinde görülmektedir. 5. Marquee Aracı Bir çok programda kullanılan bir özelliktir bu. Marquee aracı ve Oval Marquee araçlarıyla seçim alanları oluşturup dolgular (fill) yapabilirsiniz, ya da oluşturduğunuz seçim alanını kesip kopyalayarak değişik işlemlerde kullanabilirsiniz. Marquee aracı dörtgen şeklinde seçim alanları oluştururken, diğeri ise daire şeklinde seçim alanları oluşturur. Zaten yazıların solundaki işaretten de durum anlaşılıyor galiba. Shift tuşuna basarak çizdiğimizde yine bütün köşeler aynı orantıda çizilir. Mesela dairede Shift tuşuna basılı tuttuğunuzda tam bir daire çizersiniz. Kısa yol tuşları M harfidir. 6. Lasso Aracı Photoshop'çular bunu daha iyi bilirler. Ne var ki Photoshop'taki gibi gelişmiş değildir bu özellik. Hele Magnetik Lasso (Mıknatıs seçim) özelliği olmaması eksiklik sayılabilir. Lasso Tool ile resimlerinizin kenarlarında aynen Marquee gibi seçim alanları oluşturabilirsiniz ama bu özellikte şekil sınırı yoktur. Yani istediğiniz gibi seçim alanları oluşturursunuz. Kısa yol tuşu L harfidir. 7. Magic Wand Aracı Magic Wand Aracı da renk düzenlemelerinizde kullanabileceğiniz güzel bir araçtır. Mesela bir resimde aynı tonda olan renkleri değiştirmek, silmek ya da kullanmak istiyorsunuz; o zaman seçmek istediğiniz alana tıkladığınızda aynı tondaki renkleri seçer ve işlemlerimizde kolaylıklar sağlar. Kısa yol tuşu W harfidir. 8. Brush Aracı Brush aracı bildiğimiz fırçadır. Boyama ve resimler yapmada bunu kullanabilirsiniz. Kısa yol tuşu B harfidir. 9. Pencil ve Eraser Aracı Kalem ve silgi araçları yanyana. Zaten hiç ayrılmazlar. Yazma çizme ve silme işlemleri bu ikiliden sorulur yani. Kısa yol tuşları: Kalem: B harfidir, Silgi: E harfidir. 10. Blur Aracı Blur Tool yine çok özellikli bir araçtır. Resimlerimiz üzerindeki hatalarımızı blur yardımıyla en aza indirebilirken, resimlerimize değişik özellikler de katabiliriz. Blur Tool menüsü altında beş ayrı araç vardır. Hepsi de farklı işlemler görür. Resmi gölgelendirmek, karartmak, aydınlatmak, açmak, renkleri en açık tona getirmek bu araçların özelliğidir. Bu konuda ileride daha detaylı duracağız. Şimdilik sadece bu bir iki sözle geçmek istiyorum. Kısa yol tuşu R harfidir 11. Rubber Stamp Aracı Stamp bir mühür resmiyle temsil edilir. Bu araçla, resminizin içerisindeki bir nesneyi veya bulunduğu alanı olduğu gibi ama istediğiniz şekilde başka alanlara kopyalamanız mümkündür. İlerde bununla ilgili örnekler göreceğiz. Kısa yol tuşu S harfidir. 12. Eyedropper ve Paint Bucket Aracı Bu iki araç birbirinden ayrılmaz bir ikili gibidir. Göz damlası resmi ile gösterilen Eye Dropper aracı bir yüzeydeki herhangi bir rengi seçmemize yarar. Bu rengi seçtikten sonra Paint Bucket aracı ile alanımızda dolgu yapabiliriz. Gradient aracı ise bir noktadan diğer noktaya artan veya azalan renklerle dolgu yapmamızı temin eder. Kısa yol tuşları, Damla: I - Paint: G harfidir. VEKTOREL CIZIMLER 13. Line Aracı Vektörel çizimlerimizde en çok kullandığımız unsurlardan biri olan Line aracı, düz çizgiler çizmemizi sağlar. Logo, amblem vs. işlemlerimizde başlıca yardımcımızdır. Kısa yol tuşu: N tuşudur. 14. Pen Aracı Pen aracıyla sınırsız doğrultuda çizimler oluşturabiliriz. Bu çizgilerin her bir kıvrımında noktalar bulunur, bu noktaları uzatıp kısaltarak, elastiki haletinden istifade ile muntazam çizgiler oluştururuz. Diğer fonksiyonları da aynı özellikleri içerir ama, bazı küçük farklılıklar bulunmaktadır. Logo, amblem gibi çalışmalarımızda pek sık kullanacağımız özellikle resimlerimizde seçim alanlarımızı daha hesaplı ve kontrollü oluşturabileceğiz. Kısa yol tuşu P harfidir. 15. Rectangle Aracı Rectangle aracı vektörel çizimlerimizde, web sayfalarımızda en çok kullandığımız araçlardandır. Gördüğünüz gibi bir çok seçeneği olup çeşitli geometrik şekiller çizebiliriz. Kenarları oval, daire, çok köşeli şekiller yapılabilir. Bu şekilleri biraraya getirerek ve değişik motifler işleyerek çok güzel sonuçlar elde edebiliriz. Yine bu kısımda da Shift tuşu kombinasyonu ile orantılı çizimler yapabiliriz. Shift tuşuna basılı tutarak çizdiğimizde kare, tam daire, bütün kenarları orantılı vs. biçimde şekiller oluştururuz. İsterseniz bu özelliği bir deneyerek görün derim. Kısa yol tuşu U harfidir. 16. Text Aracı (Yazı) Bildiğimiz gibi artık her yerde A harfi ile temsil edilen yazı yazma özelliği Fireworks'ta da çok güzel sunulmuş durumdadır. Web sayfalarında, logo ve amblem çalışmalarımızdaki yazılar için hep kullanacağımız bir özellik. Yeter ki elinizin altında güzel fontlar olsun. Biliyorsunuz, normal html sitelerde yazılar internete upload edildikten sonra, yani kullanıcılara ulaştığı zaman eğer standart fontlar haricinde bir font kullanmışsanız, eğer o font da kullanıcıda yoksa göremiyor. Oysa grafik siteleri değişmez olduğundan fontlar her zaman orjinalliğini koruyacaklardır. Tabii bu da ekstra bir özellik. 17. Diğer Özellikler Tabii şimdi hepsini anlatmak mümkün değil. Zaten yazımız bayağı uzadı. Diğer kalan özelliklerden şöyle kısaca bahsedelim, yeri geldiğinde etraflıca öğreneceğiz. Knife (bıçak) adını verdiğimiz ve yine bıçak simgesiyle temsil edilen araç, çizgilerimizi (line) bölmeye, yani kesmeye yarar. Bir bıçak vazifesi görür anlayacağınız. WEB bölümünde ise Slice (Dilim) adını verdiğimiz özellik bulunuyor. Bunları web sayfamız bittikten sonra sayfamızı bölmek için kullanırız. Tabii bu sonraki iş, bunları ileride yeri geldiğinde teferruatı ile anlatacağız. COLORS bölümünde renkler var. Her türlü çalışmamızda işimize yarayan ve belki de en çok kullandığımız araçlar yer alıyor. Grafik programlarına aşina olanlar zaten bunları bilirler. Properties (Özellikler) Bölümü: Boş bir sayfa açtığımızda Properties (Özellikler) kısmını görürüz ilk önce. Bu bölüm yukarda anlattığımız her bir özelliği seçtiğimizde değişir ve seçtiğimiz aracın değiştirebileceğimiz özellikleri belirir. Bu çok kullanışlı özellik Fireworks 4'te tek tek paneller halindeydi, MX versiyonunda çok güzel dizayn edilmiş durumda olup oldukça kullanışlıdır. Şimdilik bu dersimiz bu kadar... Biraz uzun oldu ama, bundan sonra işimiz kolaylaşacak. Bu kısmı iyi anladıktan sonra diğer kısımlarını yapmak çocuk oyuncağı olacak, göreceksiniz. B- BASIT BIR GRAFIK SITESI YARATALIM İşte ilk önce toolkit (araçlar) bölümünü tanıttıktan sonra sıra bir web sayfası hazırlamaya geldi. Bu arada bazı dostlarımız "neden ilk önce çeşitli işlemlerin nasıl yapıldığını özel olarak ele almadınız?" diye sorabilirler. Bundan maksadımız, hemen işe girişip vakit kaybetmeden, sözkonusu özellikleri de sayfamızı hazırlarken öğrenmek olduğu için bu şekilde hareket edeceğiz. Yeni bir sayfa açalım İlk önce File > New diyerek yeni boş bir sayfa açacağız. Karşımıza aşağıdaki gibi bir iletişim kutusu gelecek: Biz 800600 için bir web sayfası hazırlayalım ve Width (Uzunluk)=800, Height(Yükseklik)=600 yapalım. Bu bizim ekran çözünürlüğümüz olacak. Resolution (Çözünürlük)=72 olsun. Canvas Color (Tuval Rengi) için seçeneklerden birini seçelim. İsterseniz "white" diyerek arka planın beyaz olmasını, isterseniz "transparent" diyerek renksiz olmasını, dilerseniz de "custom" bölümünden herhangi başka bir rengi seçmeniz mümkün tabii. Biz "white" diyoruz. Sayfamızı açıldı ve artık web sayfamız için çalışmalarımıza başlayabiliriz. Şimdi hayalî bir yayınevi için basit bir grafik web sayfası yapacağız. Adımlarımızı tek tek izleyin. Araç kutusundan bilemediğiniz olursa, bir önceki dersimize bakabilirsiniz. Web sayfamız için önce bir arka plan yapacağız. Bunun için "Renctangle" aracını kullanarak tüm arka alanı kaplayacak şekilde bir dörtgen çiziyoruz. Properties'e gelin ve şu değerleri girin: Dolguyu Solid (renk: #003366) yapın. Edge: Antialias, Texture: Line-Horiz 1, (45-50) yapalım. Netice aşağıdaki gibi bir şey olacaktır: Yukardaki gibi bir sayfamız oldu. Yapacağımız diğer unsurları bunun üzerine bina edeceğiz. Eğer isterseniz siz daha farklı efektler, dolgular deneyebilirsiniz. Şimdi üzerine yine "Renctangle" aracını kullanarak bu kez beyaz bir alan oluşturacağız. Aşağıdaki gibi bir alan oluşturun: Şimdi bu kez de beyazın üstünden biraz kırparak menü alanı oluşturalım. Bunun için şu işlemleri takip edin: Yine "Renctangle" aracını kullanarak üstten bir küçük bir dörtgen çizin. Bu arada gördüğünüz gibi layer (katman) çizgileri seçildiğinde mavi olarak görünür. Seçilmeden önce üzerine geldiğinizde kırmızı renktedir. Üstte bu beyaz alanı oluşturduktan sonra devam edelim. Şimdi bu beyaz alanımızın üstten küçük bir kısmını keserek zarif bir görüntü oluşturmak istiyorum. Bıçakla sağ üstten küçük kenarını yatay bir şekilde keseceğim, bunun için katman seçiliyken bıçak (knife tool) sembolünü seçiyor ve kesiyorum. Sonra o alanı tek başına seçerek "delete" tuşuyla siliyorum. Aşağıdaki gibi olması gerekiyor. Şimdi üst taraflara açılır menüler yerleştireceğiz. Onun için böyle bir şey yaptık. Aslında menülerin açıldığı her bir sayfa için bu şekilde beyaz çıkıntılar oluşturarak menülere gidildiğinde o kısım ayrı bir parçaymış hissi uyandırılabilir. Bunun en güzel örneğini MSN Hotmail sayfalarında görebilirsiniz. Şimdi üste yerleştirdiğimiz küçük beyaz dörtgene bir renk vereceğiz, dolgu yaparak. Dolguyu nasıl yapacağız? Toolkit menüsünden "Gradient" aracını seçelim. Aşağıda Properties (Özellikler) bölümünde ilgili alanın kullanabileceğimiz özellikleri görüntülenecektir. Dolgu menüsünden "Linear" ismini seçin. Bununla bir bölgeden diğer bölgeye azalan renk alanları oluştururuz. Şimdi boya kutusu simgesine tıklayın: Yukarı doğru bir kutu açıldı. Burada dolgu kutularını görüyorsunuz. Sağ taraftaki dolgu kutusu mavi, soldaki beyaz olduğundan bir taraftan diğer tarafa doğru renk azalıyordur. Gördüğünüz kutucukları orta taraflarda her hangi bir yere tıklamak suretiyle çoğaltabilirsiniz. O zaman renk sayısı tacaktır. Veya Preset açılır menüsünden hazır renkler seçebilirsiniz. Şimdi şeklimize dönelim. Aşağıdan yukarı mouse'u çekelim. Aşağıdan yukarı maviden beyaza bir geçiş görülecektir. Şimdi de hazırladığımız maviyi üst köşeye yerleştirelim. Gördüğünüz gibi orada hoş bir görünüm oluştu. Şimdi o aynı işlemi tam aksi istikamete de uygulayacağız. Öyleyse, "Linear" uyguladığınız mavi alanı (yani beyaz şeklimizi) seçin, şu işlemlerden birini yapın: Alan seçili olduğu halde Edit > Duplicate komutunu verin. Resmin hemen altına bir kopyası çıkarılır. Ya da, Edit > Clone komutunu verin. Resmin tam üstüne kopyası çıkarılır. Ya da, "Alt" tuşuna basılı tutarken resmi sürükleyin, kopyasını çıkarmış olursunuz. Ya da, "Ctrl+C" tuşuna basıp, "Ctrl+V" ile yapıştırın. (Bu her yerde kullanılan genel bir yöntemdir) Kopyalama işlemi bittiyse, kopyasını yaptığınız şeklimizi sağ tarafa taşıyıp aşağıdaki resimde olduğu gibi yerleştirin. Ama önce resmi ters çevirmemiz gerekiyor. Bunun için de şu işlemlerden birini yapın: Sırasıyla, Modify > Transform > Flip Vertical komutunu verin, arkasıdan Modify > Transform > Flip Horizontal işlemlerini uyguladığınızda tam ters çevrilmiş olduğunu göreceksiniz. Ya da, en kolay yoldan Modify > Transform > Free Transform yapıp resmi sizin istediğini şekle gelinceye kadar çevirebilirsiniz. Son durum: Güzel bir arayüz oldu, öyle değil mi? Şimdi işe koyulup üste logo, menüler yapacağız. Alt tarafta da bir ana sayfa oluşturacağız. Zaman ilerledikçe güzel bir web sayfası elde edeceğiz.... Konu efe tarafından (02-02-2008 Saat 21:43 ) değiştirilmiştir..*

25-02-2007, 19:37	#2 (permalink)
[MasterSlawe] KoooLpa Üyelik tarihi: Dec 2006 Nerden: Aklımın Odaları Mesajlar: 771 Tecrübe Puanı: 4	Önceki çalışmamızda üst tarafa yerleştirmek amacıyla küçük bir parça hazırlamış ve üzerine "linear" dolgusu yapmıştık. Şimdi bu parçayı yine kullanacağız. Amacımız üst tarafa başka menüler eklemek. Şimdi bu şeklimizi çoğaltacağız, bir önceki derste anlattığımız "Dublicate", "Clone", "Copy+Paste" gibi yöntemlerden biri ile çoğaltıp beş ayrı parça oluşturalım. Resimdeki gibi çoğalttığımız şeklimizi üst taraflara yerleştirelim. Bu işi yaparken LAYER bölümünde dizilişe dikkat etmelisiniz. İlk çizdiğimiz RECTANGLE (Dörtgen) parçanın üzerinde olmalı. Artık üst taraflara menülerimizi yapabiliriz. Yazılarımızı hazırlayalım. Bunlar için ben yeni bir LAYER kullanıyorum. Siz de öyle yaparsanız işimiz kolaylaşacak. Evet, "A" simgeli Text Tool'u kullanarak yazılarımızı hazırlayalım. Ben üstte gördüğünüz gibi yazıları hazırlayıp yerleştirdim ve orta alana da daha önce hazırlanmış efekt verilmiş bir resim koydum. Alt sağ köşeye de hayalî yayınevimizin ismi olan "Osmanoğlu Yayınevi" yazısını yerleştirdim. Siz de kendinize göre bir şey hazırlayabilirsiniz. Hazırladığımız bu yazılara alt menüleri nasıl yerletireceğiz? Alt menüler için "slice"lar oluşturmamız gerekecek. Çünkü bütün web olayları slice'lar (dilim) ile alakalıdır. Araç paletinden "Slice Tool"u seçiyoruz. "Slice Tool"u aynen RECTANGLE gibi kullacağız. Mouse'u getirip "eserler" yazısının üzerine bir dörtgen çizelim. Aşağıdaki gibi yeşil bir alan oluşacaktır. Bütün işlemlerimizi bu yeşil alan üzerinde yapacağız. Ben sadece birinin üzerinde neler yapılabileceğinden bahsedeceğim, diğerlerini de siz aynı şekilde isteğiniz doğrultusunda ayarlayın. Slice'ı çizdikten sonra seçiyoruz. Seçtiğimiz zaman tam ortasında saat resmine benzeyen bir işaret belirdi. Ayrı bir not: Slice'ların her biri dışarı ayrı bir resim olarak çıkar. Grafik sayfalarından oluşan web sayfalarını indirdiğinizde resimlerin anlamsız parçalar halinde olmasının sebebi de budur. Bu yüzden web sayfalarınızı istediğiniz kadar dilimlere ayırabilirsiniz, ne kadar çok dilim olursa sayfa o kadar hızlı açılır; ancak sayfanın bütünlüğünün bozulmaması için mümkün mertebe orantılı sayıda dilimler oluşturmak daha akıllıca olacaktır. Geçiyoruz... Şimdi dilimimizi seçtik ve seçili olduğu halde sağ tıklayalım (isterseniz saat işaretinin üzerinde sol tıklarsanız da aynı komut verilecektir). Karşımıza bir menü açılacaktır. Gördüğünüz gibi birçok özellik var. Çeşitli web olayları buradan yapılıyor. Bunu bilmenizde fayda var. Ancak biz hepsini görmeyeceğiz şimdi, ileride diğerlerini tek tek anlatacağız. Bizim yapmak istediğimiz açılır menüler eklemek. Bu sebeple "Add Pop-up Menu..." komutunu kullacağız, öyleyse tıklayın bu komuta. Şöyle bir iletişim kutusu gelmeli. Buraya çeşitli yazılar içeren menüler ekleyeceğiz. "Text" yazan kısmın altındaki beyaz alana tıklayın ve bir şeyler yazın. Artı işaretine tıklayarak menü sayısını artırabilirsiniz. "Link" yazan kısmın altına basıldığı zaman gideceği adres, "Target" yazan kısmın altına da web sayfamızın tıklanıldığı zaman aynı sayfada mı, yoksa boş bir sayfada mı (blank) açılacağını belirleyeceğiz. Ben bir kaç menü ekliyorum, siz de kendinize göre ekleyin. Böyle bir örnek hazırladım, siz de kendi kafanıza göre birşeyler hazırlarsınız. Sonra "Next" butonundan devam edip bir sonraki adıma geçelim. Sonraki adımlar çok kolay, yazı tiplerini, renkleri belirliyor, açılır menünüzün butonun neresinde duracağını tespit ediyorsunuz. "Next" diyerek işlemlerinizi tamamlayın ve en son "Done" diyerek bitirin. Artık açılır menümüz hazır. Web sayfasında görüntüleyerek kontrollerinizi yapabilirsiniz. Program içinde bu işlemleri görmeniz mümkün değil, bu yüzden mevcut browser'ınızda görüntülemelisiniz. F12 kısa yol tuşuna basın veya File > Preview in Browser > .... komutunu verin. Son durum aşağıdaki gibi oldu: Elbette menünüzü daha farklı şekillerde yapmanız mümkün. Sayfanızın ahengine ve tasarım özelliklerine göre değişik şekiller, renkler kullanabilirsiniz. Fireworks'de Buton Hazırlama 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 400400 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. simdi ust resimde gösterildiği 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. http://www.resimyuklet.com/uploads2/load72205.jpg 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. Konu efe tarafından (02-02-2008 Saat 21:40 ) değiştirilmiştir..*

25-02-2007, 19:45	#3 (permalink)
[MasterSlawe] KoooLpa Üyelik tarihi: Dec 2006 Nerden: Aklımın Odaları Mesajlar: 771 Tecrübe Puanı: 4	Fireworks 8 88.53 MB'i İndirebileceğiniz Link; Macromedia - Fireworks Support Center : Downloads : Updaters Konu efe tarafından (02-02-2008 Saat 21:38 ) değiştirilmiştir..

02-02-2008, 21:39	#5 (permalink)
efe Genel Yayın Yönetmeni Üyelik tarihi: Nov 2006 Nerden: Renkli Rüyalar Oteli Mesajlar: 3,025 Blog Başlıkları: 11 Tecrübe Puanı: 10	adam linki kopyalarken bakmamış ki ne kopyaladığına ! uyarı için teşekkürler, link düzeltildi __________________ uykusuzken hiçbirşey gerçek görünmüyor. sanki herşey uzakta. herşey suretinin suretinin suretinin sureti...

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid Şeklinde gösterime geç Ağaç şeklinde gösterime geç

KOOLPA

FireWorks Dersleri

FireWorks Dersleri

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Benzer Konular

02-02-2008, 21:35	#4 (permalink)
ahmetduru06 KooLpa Üyelik tarihi: Feb 2008 Mesajlar: 1 Tecrübe Puanı: 0	bu linke girmiyo :S

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Fantastic Fireworks Shots	lifeandeath	Photoshop / Flash	0	11-01-2008 17:21
Fireworks Photoshop Brushes	efe	Photoshop Brushes	0	18-08-2007 23:53
Adobe Fireworks CS3 (RUS)	efe	Photoshop / Flash	0	12-08-2007 06:02
Fireworks CS3 Essential Training	efe	Webmaster Genel	0	29-04-2007 03:34

Sponsor Linkler