Fireworks Uygulamaları, Resimli Anlatım ( Banner, Logo,Dairesel Yazı,Renk Değiştirm

Merhaba arkadaşlar, web sitesi ile uğraşan herkesin işine yarar diye
düşündüğüm bir kaç bilgiyi resimli bir şekilde kendi anlatımımla
yazıyorum. Bu arada fireworks ü bilmeyen arkadaşlar için, flash ,
dreamweaver ile aynı şirkete ait ve bu programlarla uyumlu çalışan,
basit ve photshop benzer bir resim editörüdür.

Kıyafet Rengi Değiştirme

İlk olarak rengini değiştirmek istediğimiz fotoğrafı fireworks ile
açıyoruz. Eğer fotoğrafın tamamını değilde bizim yapacağımız gibi
sadece bir bölümünü değiştirmek istiyorsak Tools panelinden Magic Wand
Tool (W) aracı yardımıyla istediğimiz bölümü seçiyoruz. Resimdeki renk
geçişlerinden dolayı her zaman Magic Wand Tool (W) aracı işimizi
görmeyebilir, böyle bir durumda daha rahat çalışmak için önce resminizi
büyütüp, ardından da Tools panelinden Lasso Tool (L) aracını kullanarak
seçiminizi yapabilirsiniz. Seçim işlemi bittikten sonra resim üzerinde
hiç bir yere tıklamadan Filters menusunden Adjust Color ve
Hue/Saturation sekmesine geliyoruz. Artık istediğimiz rengi buluncaya
kadar hue ve saturation ayarlarını değiştirebilirsiniz.

İşte elde ettiğimiz örnekler :



--------------------------------------------------------------------------

Dairesel Yazı Yazma : (Logolarda Çok Önemli)

Fireworks programında boş bir belge açıyoruz. İstediğimiz büyüklükte
bir daire çiziyoruz, dairenin iç rengi yada dış çizgi kalınlığı hiç
önemli değil, çünkü bu daire resmimizde zaten gözükmeyecek. Dairemizi
çizdikten sonra şimdide istediğimiz yazıyı text aracı ile yazıyoruz.
Shift tuşu basılı iken hem yazımıza hem de daireye tıklıyoruz,
böylelikle ikisinide seçmiş olduk. Şimdi de Text menusunden Attach to
Path seceneğine tıklıyoruz. Artık yazımız dairesel bir şekil almış
oldu. Yazıyı istediğimiz gibi ortalamak için properties menusunden
sağa, sola dayayabilir yada ortalayabilirsiniz.

Not : Eğer resmimizde bir dairenin görünmesini istiyorsak, yazı için
kullandığımız daire dışında bir tane daha çizmemiz gerekecektir.

İşte Örneğimiz :


--------------------------------------------------------------------------
Hareketli Resim (Gif Animasyon) Hazırlama

Örneğimizde kullanmak üzere 468*60 boyutlarında boş bir belge açıyoruz
ve arka plan rengini de siyah olarak belirliyoruz. Daha önceden
hazırlamış olduğumuz logomuzu fireworks programı ile açarak logo
resmini açmış olduğumuz fireworks dosyasına yapıştırıyoruz. Artık
animasyonumuzun sabit kısmını hazırlamış olduk. Şimdi 1.resmimizin
üzerine web tasarım yazıyoruz. Animasyonda görülecek ilk resmimiz
hazır. Şimdi ikinci resime geçiyoruz. Bunun için Frames And History
panelinden sağ alt köşedeki New/Dublicate Frame e tıklıyoruz. İkinci
resmimizde önceki resimle aynı olmasını istediğimiz kısımları bir
üstteki frame e giderek kopyalayabilirsiniz. Bunları ikinci frame
yapıştırıp daha önce yazdığımız web tasarım yazısının altına web grafik
yazıyoruz. Aynı şekilde 3.frame i ekleyip onda da istediğimiz
değişiklikleri yaptıktan sonra sıra geldi animasyonda yer alan
resimlerin gösteliş sürelerine. Bunun için Frames Ana History panelinde
yer alan frame lerden birisini seçip hemen frame isminin yanındaki
standart olarak 7 gözüken kısma tıklayarak değiştirebilirsiniz. Burada
7 bir saniyenin 100de 7 sini ifade etmektedir. Yani buraya 7 yerine 100
yazdığımızda o framedeki resmimiz 1 saniye ekranda gözükecek ve bir
sonraki resime geçecektir. Şimdi de resmimizi kayıt edelim. Resmimizi
kayıt etmeden önce resim formatını değiştirmemiz gerekli. Daha önceki
yazımızda da anlattığımız gibi resim formatını değiştirmek için
Optimize panelinden istediğimiz formatı seçiyoruz. Biz animasyon resim
oluşturacağımız için Animated Gif seçiyoruz ve File / Export menusunden
resmimizi kayıt ediyoruz.
1.Resim (Frame1)

2.Resim (Frame2)

3.Resim (Frame3)

Gif Animasyon


--------------------------------------------------------------------------

Banner Hazırlama
File menusunden New sekmesine gelerek 780 genişliğinde, 140
yüksekliğinde bir belge açıyoruz. Daha önceden bulduğumuz resmimizin
yüksekliği 140 olacak şekilde ayarlıyoruz. Bunun için Modify menusunden
Canvas/image Size sekmesini kullanabilirsiniz. Daha sonra bu resmi
kopyala yapıştır tekniği ile yada file menusunden import sekmesini
kullanarak 780*140 boyutunda açmış olduğumuz dosyaya ekliyoruz.
Belgemizin arka plan rengini de properties panelindeki canvas
sekmesinden ayarlayabiliriz. Canvas değerine tıkladığımızda, fireworks
mouse imlecini dokundurduğumuz yerdeki rengi arka plan rengi olarak
ayarlanacaktır. Bu nedenle eklediğimiz resmimizi kullanarak uyumlu bir
arka plan rengi ayarlayabilirsiniz. Resmimizin belge üzerinde daha
güzel bir geçiş oluşturması için bir geçiş efekti kullanacağız. Bunun
için belgemizin üzerindeki resim seçili iken Commands / Creative / Fade
İmage sekmesinden istediğimiz efekti ekleyebiliriz. Son olarak da text
arac çubuğunu kullanarak istediğiniz renk, font ve boyutta yazılar
ekleyip resminizi export menusunden kayıt edebilirsiniz. Resminizin
formatını Optimize panelinden değiştirebilirsiniz.

This image has been resized. Click this bar to view the full image. The original image is sized 780x140.

This image has been resized. Click this bar to view the full image. The original image is sized 780x140.

--------------------------------------------------------------------------

Saydam Resim [07.01.2006]
Resimlerimizi saydam hala getirerek arka planda yer alan nesnelerin
yada renklerinde görünmesini sağlayabilirsiniz. Örneğin ben yapmış
olduğum örnekte alttaki elmanın üstüne kendi resmimi getirdim ve sadece
kendi resmime saydamlık vererek iki resimde bir bütünmüş gibi
görünmesini sağladım. Burda dikkat edilmesi gereken yapacak olduğumuz
çalışmamızda iki parça resim yani iki tane katman bulunması
gerektiğidir. Zaten fireworks istediğiniz katmanı seçmek için o resmin
üzerine tıklamanız yeterlidir. Artık üstte durmasını istediğiniz
katmanı diğer katmanın üzerine sürükleyebilirsiniz. Daha sonra
properties panelinden 100% olan saydamlık değerini azaltabilirsiniz.

This image has been resized. Click this bar to view the full image. The original image is sized 800x97.

Resmimizin daha güzel görünmesi için, üstteki katmanda görünmesini
istemediğiniz kenarlıkları ,tools panelinden silgiyi kullanarak
silebilirsiniz.



ALINTIDIR

saol paylaşım için