Fireworks CS3 Yeni Özellikler ve Neden Fireworks? 1. Bölüm




Adobe - Macromedia birleşmesinde herkesin merak ettiği konu Fireworks ve Freehand' e ne olacağıydı. Birleşmenin ilk günlerinde Freehand MX in artık geliştirilmeyeceği hemen ilan edildi. Adobe Fireworks için stratejik bir karar alarak devam dedi. Bizim de size birazdan tanıtacağımız sürüm ortaya çıktı. Fireworks programı yaklaşık 10 yıllık tarihinde en büyük ve yapısal ilerlemeyi CS3 sürümünde yakaladı.

Öncelikle eğer ilginizi çekerse bu 10 yıllık süre içerisinde bıkmadan usanmadan Fireworks kullanmış biri olarak sizlere birkaç deneyimimi ve neden Fireworks kullandığımı izah etmek istiyorum.

10 yıla yakın bir süre boyunca Fireworks benim her zaman elimin altında oldu. Fireworks' le yüzlerce site, onlarca portal tasarladım, prototip çalışmaları yaptım. Pek çok insana anlamsız gelse de yüzlerce logo ve kurumsal kimlik tasarımını ya da taslaklarını Fireworks de oluşturdum. Flash projeleri geliştirirken çizimlerimi Fireworks de yapıp Flash a vector olarak copy /paste yontemiyle aktarmak ya da baskı /matbaa projelerinde benim için gerekli olacak pek çok çizimi Freehand' e aktarmak gerçekten çok kolaylaştırcıydı.

Ayrıca iş akışı şemaları, database diyagramları dahil olmak üzere pek çok insana anlamsız gelebilecek ürünleri yine Fireworks kullanarak oluşturdum.

Çünkü Bitmap "Fâni"dir.
Fireworks benim için her şeyden önce proje yönetim aracım ve arkadaşımdı. Hazırladığım site ya da portal taslaklarını frame ler halinde kaydediyor ve .PNG formatında vector ozelliklerini kaybetmeden saklayabiliyordum. Şu anda bile 8-10 sene önce yaptığım tasarımlarım png dosyaları halinde arşivlenmiş durumdadır.
Fireworks ozellikle web tasarımcıları ve flash animasyoncuları için müthiş özelliklere sahip bir programdır. Playingwithfire.com ve macromedia/ extentions bölümleri sayesinde binlerce Fireworks kullanıcısı yazdığı eklentilerle Fireworks' u daha da zenginleştirmişler ve kollektif bir ürün haline getirmişlerdir.
Fireworks Tasarımcıları "Kısıtlayan" Bir Program mıdır?

Elbette ki hayır! Raster - bitmap işleme bakımından Photoshop' tan ve diğer programlardan hiç bir eksikliği olmadı. Photoshop 'la satın alınmış efektler kullanarak birbirinin aynısı çalışmalar yapabilecekken; "hazıra dağ dayanmaz" sözünden hareketle otomatize edilmiş ve bir örnek haline gelmiş şeyler yapmaktansa Fireworks ile özgün projeler üretmeye gayret ettim.

Örneklemek gerekirse, bir fotoğrafın üzerinde damla ettisi vermek için diğer programları kullanan insanlar genellikle bir yerlerden bir effect paketi, stamp ya da action dosyası bulup bir kaç tıklama ile bir damla "oluştururken" , ben; bunu vector ve radyan kullanarak, yapıyor ve istediğim her hangi bir çalışmada (Flash, Freehand, Photoshop projelerimde bile.. ) yeniden kullanmak üzere saklayabiliyordum.


Ayrıca, Fireworks, geçmişte muadili imaj işleme programlarına göre her zaman daha uygun bir fiyatla lisanslandı. Şimdi de öyle:-)

Hedefler

Aslında bu yazıya başlama nedenim FW8 ve FW CS3 arasındaki farkları, son sürümle gelen yeni özellikleri tanıtmaktı. Ama bu gerçekten hiç kolay olmayacak. Bazıları için minor denilebilecek değişiklikler benim için gerçekten uzun uzun anlatılması gereken şeyler. Bu bakımdan ben bu yazımı; genel olarak tüm FW versiyonlarında yapabileceğimiz, fotograflarla çalışma, imaj işleme, boyama, vector bitmap kombinasyonu, layerlarla çalışmak anahtar kelimelerini içinde barındırıan basit bir giriş olarak kurguladım. Önümüzdeki bir kaç günden itibaren Fireworks CS3 şerefine en az 12 adet yazıyla karşınızda olacağım.

Bunlar;

- CS3 versiyonu ile gelen yenilikler,
- Adobe Flex için arabirim tasarlamak,
- Bir web portalı için prototip geliştirmek ,
- Dreamweaver CS3 entegrasyonu,
- Flash CS3 entegrasyonu
- Photoshop CS3 entegrasyonu
- Fireworks CS3 ile xml flash tabanlı bir slideshow tasarlamak,
- Fireworks CS3 Batch Prossesing ( toplu imaj işleme),
- Fireworks için component (eklenti) geliştirmek,
- Fireworks CS3 için Style dosyası yaratmak,
- Fireworks Bitmap- Raster editing ....şeklinde olacak.

Daha önce bulunduğum projelerde yarattığım prototip, taslak ve son taslak çalışmalarımı da sizinle buradan paylaşacağım.

Yukarıda saydığım eğiticileri bu ay içinde tamamlayıp sizinle paylaşmaya çalışacağım. Unutmayın, sizlerden de katkı bekliyoruz (özellikle de Ferruh Mavituna' dan! Evet yanlış duymadınız, Ferruh hem güvenlikçi hem Fireworks 'cüdür:-) )

Bu çalışma FW CS3 beta versiyon kullanılarak yapıldı. Bendeniz yaklaşık 6 aydır Adobe Fireworks Beta ekibindeydim ve CS3 sürümünü epey kurcalamak ve bulduğum hataları raporlamak şansına eriştim. Eğer ilginizi çekiyorsa ekranlardan hareketle önceki versiyonla CS3 arasındaki 7 farkı bulabilirsiniz.:-)

Neyse, Buraya kadar size biraz sıkıcı gelmiş olabilir. Hala bu yazıyı okumakta ısrar ediyorsanız FW CS3 ortamında daha önceki sürümlerde de bulunan bazı özellikleri kullanarak bir çalışma yapalım. . Eğlence başlasın.

Başlıyoruz!....
Fireworks' ün "gerçek tasarımcılar tarafından " hep alay konusu edilen bir araç olduğunu, fakat bunu hiç haketmediğini kendi deneyimlerimden hareketle, size aktarmaya çalıştım. Eğer Photoshop kullanıcısıysanız ve Fireworks için ciddi olumsuz önyargılarınız varsa bu yazı tam size göre. Şimdi basitce bir kaç adımda Layer, bitmap ve vector kullanarak basit bir uygulama yapalım.

Öncelikle siyah-beyaz bir resim ediniyoruz. Örneğin aşağıdaki gibi;
Not: Aşağıda bulunan resimlere tıklayarak büyük versiyonlarına daha yakından inceleyebilirsiniz.

Öncelikle Properties penceresinde (resmin en altında) kutu içerisinde kırmızı yatay çizgi ile gösterilen sayfanın arka alan (canvas) rengini transparan duruma getirelim. Sonra resmi aşağıdaki resimde olduğu gibi alfa' ya çevirelim. Bunun için resme tıklayalım, Filters >>Others >>Convert to Alpha yı seçelim.



Resmimiz şöyle birşeye dönüşmüş olmalı. Plastik bir poşet gibi oldu değil mi? Bunu neden mi yaptık?
Açıklayalım. Fireworks beyaz alanları hemen algılar ve alfa moda geçince diğer tonlara ve resmin dokusuna çok fazla zarar vermeden objeleri şeffaflaştırır. Bunu Magic Wand, Lasso ya da Photoshop' daki Color Select aracıyla yapmak bizi epey uğraştıracaktı. Üstelik bu kadar nefis bir sonuç elde etmek için ruh sağlığımız da epeyce bozulabilirdi!



Biz resmimize dönelim. Aşağıdaki resme daha dikkatli bakarsanız arkadaki sayfanın transparan olduğunu anlatmaya yarayan kutucukların üzerinde model olarak seçtiğimiz arkadaşın ten dokusunun korunmuş olduğunu hemen farkedeceksiniz.Yani resmin içindeki objelere, dokuya hiçbirşey olmadı. Bu bizim için çok önemli. Devam edelim....
Artık resmimizi renklendiremeye başlayabiliriz. Bitmap renklendirmeyi normal şartlarda bitmap- raster işleyici araçlarla şöyle yaparız, resmi boyarız! Boya kovası , ya da fırçalar kullanırız.
Fireworks 'de boyle yapmıyoruz. Yeni bir layer açmamıza gerek yok. Çünkü Fireworks bunu bizim için otomatik olarak yapıyor. Yarattığımız her objeyi anlamlı olarak isimlendirip katmalar halinde saklıyor.


Biz şimdi Pen aracıyla birşeyler çiziyoruz ve Fireworks çizdiğimiz vector nesneyi, bitmap resmin üzerinde kalacak şekilde yeni bir layer olarak kaydediyor. Bu bizim yazımızın en can alıcı noktası. Aşağıdaki örneğe lütfen dikkatli bakın. Daha yakından görmek için resme tıklayabilirsiniz:


Pen aracıyla çok da özenmeden bir gökyüzü resmi çizdik. Saçmalama öyle gökyüzü olmaz diyebilirsiniz:-) Ama ileride biraz daha iyi görünecek sizi temin ederim.
Sol panelde Frames bölümünde 2 tane katman göreceksiniz. Bizim gökyüzümüz üst katmanda görünmekte. Onu fare yardımıyla resmin altına gelecek şekilde sürükleyelim.

Gökyüzümüzü ve ilgili katmanı seçtikten sonra, resmin dokusuyla örtüşecek bir tonlama ve etki yaratmak için aşağıdaki resimde görebileceğiniz gibi bulut vector' umuze fade özelliği veriyoruz. Bunu ton geçişi yaratmak amacıyla yapıyoruz:


Benim seçtiğim renk tonu ve fade değeri gayet gelişi güzel. Fakat yine de biraz gökyüzüne benzedi gibi. Bundan sonra biraz rutine bağlayarak çeşitli katmanlar yaratmaya devam edeceğiz. Aşağıdaki resimde modelimizin arkadasında kalan sazlıkları renklendiriyoruz.Yeşil olmalarını tercih ettim. Siz renkler konusunda serbestsiniz...

Pen aracıyla yeni bir path daha çizdik. Bu katmanımızı da (level) aşağıya doğru iteliyoruz.

Resme tıklayıp aşağıda fade değerini nasıl verdiğimize yakından bakabilirsiniz:

Nehir'i renklendireceğimiz bir katman daha yaratalım ve nehrimize bir renk atayalım.

Şimdi ten rengini yaratalım. Bu ton pek ten rengi gibi değil diyeceksiniz. Alfa ya çevirdiğimizde resmin dokusunun kaybolmadığını bitmap resmin içinde korunduğunu söylemiştik. Bakalım öylemiy miş?


Evet! Ten rengi biraz abartılı açık olmakla birlikte. Fotografımız birşeylere benzemeye başladı gibi. Ama küçük müdehalelere de ihtiyacımız var. Şimdi biraz ayrıntılı çalışacağız. Devam edelim...

Modelimizin elindeki gülü de unutmuyoruz. Biraz parlak bir pembe kullanıp vektor nesnemizin transparan değerleriyle oynayarak ve kırmızı çerçeve içerisinde gördüğümüz üzere bitmap layerin altında kalacak şekilde aly layer olarak konumlandırıyoruz.

Devam edelim..

İdare eder. Ama rötuşa ihtiyacı var. Birazdan geri döneceğiz. Bir sonraki aşamada dudakları biraz pembeleştirelim.

Biraz fazla kırmızı oldu. Alt katmana kaydıralım ve opacity 'sini düşürelim. Gülümüzüde tekrar edit edelim.

Kollar ve gökyüzündeki renk taşmalarını vector pathleri büyütüp küçülterek sağa sola çekiştirerek düzenleyelim. Gerekli tonlamaları yapalım. Sona doğru geliyoruz.

İşte.Son! resme tıklayarak yakından bakabilirsiniz.



Resmin öcesi ve sonrası arasındaki farkı daha net görmek için, kıyaslayalım.
Sadece birkaç adımda resmi renklendirdik. Eminim sizin yaptığınız örnekler bundan daha güzel olacaklar! Siz kendi çalışmanızda ve kendi fotoğraflarınızda radyan renk geçişleri de kullanarak daha realistik etkiler yaratabilirsiniz.

Uygulama dosyasını indirmek için. .Zip dosyasının içinde hem Fireworks 8.0 Studio hem de Fireworks CS3 dosyası .PNG formatında mevcut.

sağolasın kardes
selametle