Freworks
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çıyoruz.
İ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 yapılır?
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.
Ö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.