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....
Ö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.
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.
Fireworks'te Dönen Bir Grafik Hazırlıyoruz
*200x200 px ebatında yeni bir döküman açın. Canvas color'u beyaza ayarlayın.
*Vektörel şekil (Rectangle) aracını seçerek sahneye bir dikdörtgen çizin.
*Dolgu için, pattern kullanın. Jeans pattern'i seçin.
Property panelinden Live Effects kontrollerini kullanarak Inner Bevel Efekti verin. Bevel ayarlarını olduğu gibi bırakın. Daha sonra onları tecrübe ederek geliştirebilirsiniz..
Çizdiğiniz dörtgeni F8 tuşuna basarak bir sembole çevireceksiniz. Sembol tipi olarak Graphic'i (animation'ı seçmeyin) işaretleyin. Bir sembol adı verin. Böyle bi çalışma için ne ismi verdiğiniz önemli değil, ama birkaç sembolle çalıştığınız zaman karışıklık olmaması babından isimlendirme iyi bir seçimdir. Şimdi sembolün bir kopyasını oluşturacaksınız.
CTRL+Shift+D'ye basarak şekli klonlayın. Şimdi sahne üzerinde iki şekil oldu, ikinci şekil öncekinin sağ üstündedir. Layer'lara baktığınız zaman da aynısından iki şekil olduğunu görebileceksiniz.
Üstteki şekil seçili iken Modify > Transform > Numeric Transform'u seçin...
Açılır menüden Resize seçin ve Constrain Proportions özelliğinin başındaki onay işaretini kaldırin.
*Yüksekliği 5 yapın. Diğerini olduğu gibi bırakın ve OK deyin.
*İşlemleri yaptığınız şekil orjinal şeklin bir parçası gibi görünüyor artık.
*Her iki şekli de seçmek için aşağıdaki metotlardan birini uygulayın.
*Shift'e basılı tutupher iki şekli de tıklayarak seçin.
*Tıklayın ve basılı tutarak kursoru her iki şeklin üzerine taşıyın.
*Layer panelinde Shift'e basılı tutarak seçmek istediğiniz iki şekli de tıklayın.
Şimdi Modify > Symbol > Tween Instances menüsüne gidin ve Distribute to Frames (Frame'lere dağıt) ayarını seçin. Frame numarasını 6'ya ayarlayın. OK deyin. Bu çalışmanıza 6 yeni frame ekleyecektir. Artı, sizin başlama şekliniz ve bitirme şekliniz, toplam 8 frame olacaktır. Frame paneline bir göz atın. Bu dönüşün ilk yarısıdır. Sonucu görmek için Play butonuna basın (buton, sahnede çalışma dosyanızın altındadır) Güzel, değil mi? Gerçekte sadece bastırıp ezme işlemi yaptık, yani şekli yamyassı bir hale soktuk. Fakat göz ve beyin bunu farklı algılayacaktır.
Dönüşün Tamamlanması
Şimdi dönüşü tamamlamanız gerekiyor. Frames panelinde Frames 2'den 7'ye kadarını seçin. Bunu yapmak için önce Frame 2'ye tıklayıp onu seçin, sonra Shift'e basılı tutarken Frame 7'ye tıklayın. Böylece tamamı da seçilecektir.
Frame Panel Ayarlarına tıklayın, ordan Duplicate Frames'i seçin. Bu seçenek seçili 6 frame'in aynısını animasyonunuzun sonuna ekler. Şu an animasyonunuzu çalıştırdığınızda pek bir şey gözükmeyecektir. Yeni frameler yarısına kadar çalışır, tekrar başa döner.
Şimdi kopyaladığınız frame'leri tersine çevirmeniz gerekiyor. Commands > Documents > Reverse Frames yolunu seçin. Bu komut birbirini izleyen frame'leri seçip tam tersine çevirmenize imkan verecektir.
Start Frame kısmındaki açılır menüden Frame 9'u seçin ve End Frame kısmından da 14'ü seçin. OK'i tıklayın.
Animasyonunuzu şimdi oynatın. Şeklin tamamen döndüğünü görebileceksiniz artık.
Son Birkaç Adım:
Gerektiği kadar alan için Trim özelliğini kullanın. Bunun için: Modify > Canvas > Trim Canvas yolunu seçin.
Optimize panelinde dosya formatı olarak Animated GIF seçin.
Resmi 2-Up ya da 4-Up'ta önizleme yapın.
Kaliteyi koruyarak mümkün mertebe az renk modunu kullanın, bu dosyanın boyutunu düşürecektir.
Animated GIF olarak Export edin.
Eğer hazırladığımız örnek PNG dosyası ile çalışıyorsanız, sonuç aşağıdaki gibidir, 16-color GIF resim olarak optimize edilmiştir.
İlkin, zor olmadığını belirtmek istiyorum. Arka planı siyah olarak ayarlayın.
Görüldüğü şekilde iki daire çizelim. Her birini karşılıklı köşeler yerleştirelim.
Sonra, her birine dolgu efekti ekleyeceğiz. Dolgu efektlerini Properties panelinden boya kutusu ile belirlenen açılır menüden bulabilirsiniz. Pattern > menüsündeki efektlere bakınız.
Ay için Paint Light dolgu efektini kullanıyorum. Siz daha uygun bir şey de kullanabilirsiniz. Güneş için ise, Red Amber dolgu efektini kullanıyorum. Ama etkili olacak dolgu efektleri bunlar olacaktır.
Renklerinin gerçeğe yakın olmasını sağlamak istiyoruz. Ay için Effects > Adjust
Color > Hue & Saturation seçeneğine gelelim. Ayarları aşağıdaki gibi ayarlayın.
Güneş için, daireyi sadece kırmızı ile doldurun. (effects > adjust color > color fill, ve kırmızı (#ff0000) ekleyin), ama saydamlığı (opacity) 25%-35% gibi olsun. Şimdi aşağıdaki gibi görünecektir:
Ay için, çok parlak olmasını istiyorsanız yine Effects > Adjust color > Hue & Saturation olunu izleyin ve ayarları aşağıdaki gibi ayarlayın. Bu o kadar da gerekli değil ama yapmanızda fayda var.
Şimdi ay yüzeyinin 3 boyutlu gibi görülebilmesi için bir parlaklık ekleyeceğiz. Effects > shadow & glow > glow seçin. Bu değeri beyaz (#ffffff) yapın, şu değerleri kullanın: offset 4, opacity %65, ve softness 11 gibi olsun..
Güneş için, aynı şeyleri yapın, ama glow (parlaklık) rengi kırmızı (#ff0000) olsun, offset: 15, opacity %65, softness 30 gibi olsun.
Şu anda görünümümüz şu şekilde olacaktır:
Biraz daha geliştirelim şimdi, ikisine de gaussian blur ekleyin. Ay için 0.7-1.5 civarında olsun, güneş için de aynısını yapın. Şimdiki görünümü şu şekilde oldu:
Yavaş yavaş ilerliyoruz, şimdi ay’a bir renk yansıması ekleyeceğiz ve güneş vurduğunda oluşan parlaklık belli olacak.
Ay için çizdiğiniz dairenin üzerine aynı ölçülerde bir daire daha çizin. İçini Linear gradient (siyahtan beyaza) dolgu yapın, böylece güneşe yakın yerini parlak yapacağız. Sonra Properties panelindeki Blend moduna gidin ve ordan Screen seçin, şimdi şu şekilde görünmeli.
Şimdi güneş için alevleri yapmada sıra: Paintbrush aracını seçin ve uç için de Unnatural > paint splatter veya Oil > splatter kullanın. Fırçanın rengi portakal rengi (#ff6600) olmalı. Aşağıdaki gibi bir şekilde çizin ve ona kırmızı bir parlaklık ekleyin. (Shadow & Glow > Glow)
Son İşlem: Sonra bu Bitmap üzerine Zoom > Zoom blur uygulayın (Ben amount ve quality değerlerini 100 yaptım). Sonra bu şekli güneş dairesinin altına taşıyın ve aşağıdaki gibi ayarlayın. İşte size bir güneş ve bir ay.
