Curse
Üye
- Kayıt
- 30 Eylül 2007
- Mesaj
- 315
- Tepki
- 2
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.
--------------------------------------------------------------------------
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.
Resmimizin daha güzel görünmesi için, üstteki katmanda görünmesini istemediğiniz kenarlıkları ,tools panelinden silgiyi kullanarak silebilirsiniz.
ALINTIDIR
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.
--------------------------------------------------------------------------
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.
Resmimizin daha güzel görünmesi için, üstteki katmanda görünmesini istemediğiniz kenarlıkları ,tools panelinden silgiyi kullanarak silebilirsiniz.
ALINTIDIR
