Diğer tüm programlarda tasarlanan web grafiklerinde olduğu gibi, Fireworks ile hazırlanan grafiklerde de dokumalar (veya ün salmış ismiyle ‘Texture’lar) ve renk geçiş efektleri, yani ‘gradient’ler baskındır.

Bu küçük iki efekt, -her ne kadar basit olsalar da- pek verimli sonuçlarla tasarımcıları memnun ediyor. Özellikle Photoshop kullanıcıları, programla beraber gelen dokumaları sürekli kullanmakta, hatta Fireworks’e geçtiklerinde ilk olarak dokuma menüsünü aramaktadırlar.

Ne var ki, dokuma ayarları Fireworks’te Photoshop’taki kadar ayrıntılı değildir. Photoshop’ta dokumaların renklerini istediğinize göre değiştirebiliyor, ve yeni dokumaları otomatik olarak oluşturabiliyorsunuz. Peki bu durum Fireworks’te nasıl? İşte bu yazımızda web grafik dünyasının küçük kahramanlarını inceleyeceğiz.

Yazı sonunda ne yapabileceğim?

Yazı sonunda yukarıdaki gibi bir grafiği Fireworks üzerinde hazırlayabilir nitelikte olacağız.

Bölüm 1: Renk geçişleri

Örnek resmimizde olduğu gibi, 364×150 boyutlarında boş bir Fireworks belgesi açarak işe koyulalım.

Belgemiz işlenmeye hazır.

Sağ menüde bulunan ‘Vector’ alt menüsündeki ‘Rectangle tool’u seçerek 364×150 boyutlarında bir dörtgen çizin. Çizdiğiniz dörtgenin önceden kullandığınız rengi aldığını göreceksiniz. Resimde de görüldüğü gibi, dörtgenimizin koyu lacivert ve açık lacivert renklerine bürünmesi gerekiyor. Bunu da Fireworks renk geçişleriyle gerçekleştireceğiz.

Dörtgeninizi seçtikten sonra, alt bölümdeki ‘Properties’ menüsünde bulunan renk, ve genel ayarda ‘Solid’ seçeneğinin seçilmiş olduğu kutucukta ‘Gradient’ alt menüsü altındaki ‘Radial’i seçin.

‘Properties’ menüsü açık değilse, CTRL+F3 (Windows) veya Command+F3 (Mac) tuş kombinasyonuyla bu menüyü açabilirsiniz.

Bu işlemin ardından, dörtgeninizin renginin içe doğru dönüştüğünü göreceksiniz. ‘Gradient’ menüsü altındaki diğer öğeler ile, renk efektlerini değiştirebilirsiniz.

Bu işlemi uyguladıktan sonra, dörtgeninizin üzerinde bir ucu yuvarlar, diğer ucu kareden oluşan bir ok oluştuğunu göreceksiniz. Bu okun yuvarlak kenarından oku diğer bölgelere taşıyarak renklerin başlangıç noktasının yerini değiştirebilir, kareli kenar ile okun yönünü ve uzunluğunu ayarlayabilirsiniz.

‘Properties’ menüsü açık değilse, CTRL+F3 (Windows) veya Command+F3 (Mac) tuş kombinasyonuyla bu menüyü açabilirsiniz.

Okun kare ucunu basılı tutarak, ucu düz şekilde dörtgenin en sağ bölümüne taşıyın. Ardından ‘Properties’ menüsündeki renk seçme kutucuğuna tıklayarak, iç renk olarak #003B65, dış renk olarak #00182C renklerini seçin;

Ve bu adımla, dörtgenimizi tamamlamış olduk.

Adım 2: Dokuma

Daha önce de bahsettiğim gibi, Fireworks’ün dokuma ekleme/değiştirme özelliği, ne yazık ki Photoshop’taki kadar gelişmiş olmadığından kendi ekleyeceğimiz dokumaları belli bir klasöre atmak zorundayız. Yine de, internetten indirdiğiniz dokumalarda genellikle otomatik yükleme paketleri bulunmaktadır.

Fireworks’te kendi texture’unuzu oluşturun.

İnternetten bulduğunuz, veya çizdiğiniz dokumaları Program Files -> Macromedia Fireworks 8 -> Configuration -> Textures klasörüne kopyalayın. Resmimizde kopyalayacağımız dokumayı, lütfen bu link üzerinden indirip yukarıdaki klasöre yapıştırın.

(Dokumayı kullanabilmek için Fireworks’ü yeniden başlatmanız gerektiği için, dosyanızı kaydedip programı yeniden başlatın.)

Dokumayı yükledikten sonra, hazırlamış olduğumuz dörtgenimizin üzerine yine aynı tekniklerle aynı boyutlarda bir dörtgen daha çizin. Bu dörtgenin renk ayarını, yine aynı kutucuktan tek renk, yani ‘Solid’ olarak ayarladıktan sonra, az önce kullanmış olduğumuz koyu lacivert (#00182C) rengini ikinci dörtgenimize atayın. Bu işlemden sonra, ilk dörtgenimizin yeni dörtgenimizin altında kalarak görünmemesi gerekiyor.

Ve son olarak, yine ‘Properties’ bölümünde bulunan ‘Texture’ kutucuğundan az önce yüklemiş olduğumuz ‘BT-Pixel Argyle 2′ dokumasını seçin.

İlk olarak karşınıza şöyle bir görüntü çıkacak;

Ve şimdi dokuma belirginliğini %50′ye indirip hemen aşağısındaki ‘Transparent’ kutucuğunu işaretleyin.

Ve bingo! Grafiğimizin son hali bu minik 2 ayardan sonra karşınızda.

Yukarıdaki grafiği farklı kaydedip, Fireworks ile açarak grafik üzerinde değişiklikler yapabilir, nasıl yapıldığını görebilirsiniz.

Öncelikle, Fireworks nedir?

Bir Macromedia (şu an Adobe) programı olan Fireworks, en çok kullanılan 2. grafik işleme programıdır. Kolay arayüzü ve kullanımıyla Photoshop’un en büyük rakiplerinden biri olan Fireworks’ün Photoshop’tan en büyük farkı, daha çok web grafikleri için hazırlanmış olmasıdır. Fireworks yardımıyla fotoğraflarınızla oynayabilirsiniz, ancak bu özellikleri Photoshop kadar ayrıntılı değildir.
Fireworks’ün 30 günlük test versiyonunu indirin.

1. Attach to path

Bu basit özelliğin yardımıyla, herhangi bir metni istediğiniz Fireworks ile çizdiğiniz istediğiniz bir öğeye yaslayabilirsiniz.

Öncelikle, örnek bir metin oluşturun. Az sonra bu metni, oluşturacağımız bir öğeye yaslayacağız.

Bu adımda, texti yaslayacağımız çizgiyi oluşturacağız. Burada istediğiniz her türlü şeyi oluşturma özgürlüğüne sahipsiniz. Ben bu örnek için oval bir çizgiyi uygun gördüm.
Pen Tool’u seçin. Herhangi bir alanda farenin sol tuşunu basılı tutup metnin uzunluğunda bir düz çizgi çizin. Farenin sol tuşunu bırakmadan, çizgiyi çizdikten sonra fareyi aşağıya doğru hareket ettirin. Yukarıdaki gibi bir sonuç alacaksınız.

Son adımda, oluşturmuş olduğunuz metin ve çizgiyi seçip ‘Text -> Attach to path’i seçin.

Sonucun yukarıdaki gibi görünmesi gibi gerekiyor.

Objeleri birleştirme

Bazen karşınıza tek çizimde zor hazırlanabilecek çizimler çıkabilir, bu durumda birkaç obje hazırlayarak bunları tek obje haline getirme gereği duyabilirsiniz.
En basit örnek olarak Quark’ın en logosunu ele alalım.

Eğer daha önce objeleri birleştirerek herhangi bir çalışma yapmadıysanız, resmi hazırlayacağımız zaman kafanız biraz karışabilir. Fakat logonun hazırlanma süresi en fazla 1 dakika sürecektir.
Öncelikle bir ‘Ellipse Tool’ ile bir daire oluşturup ‘#48B83A’ rengini bu daireye arkaplan rengi olarak atıyoruz. Hemen ardından ‘Rectangle Tool’ ile dairenin sağ alt köşesine ayrı renkte bir kare çiziyoruz;

Hazırladığımız çizim her ne kadar logoya büyük benzerlik gösterse de, bu iki objeyi birleştirip tek obje haline getirmemiz gerekiyor. Bu işlem, ileride yapacağımız renk işlemleri, dokuma atamaları vs. işlemlerde bizlere büyük kolaylık sağlayacak. Bu işlem için ‘Modify’ menüsü üzerinden ‘Combine paths -> Union’u seçiyoruz.

Bu işlemlerden sonra oluşturduğumuz objeler hatlarıyla bağlanacak ve tek obje haline gelecekler.

Maske – İstediğiniz şekle sokun

Şekil verilmiş fotoğraflarla, içleri imajlarla doldurulmuş metinlerle birçok kez karşılaşmışsınızdır. Tasarımcının vazgeçemediği özelliklerden biri olan maske ile, hazırlamış Fireworks üzerinde hazırlamış olduğunuz herhangi bir objenin istediğiniz bir fotoğraf, metin gibi bir objeyi kapsamasını, buna göre o fotoğrafın hazırladığınız objenin sınırları içerisine alınmasını sağlayabilirsiniz.

Örnek olarak, istediğiniz bir fotoğrafın üzerine dilediğiniz bir metni yazın, en iyi görünüm için beyaz renkli bir metin hazırlayın.

Ardından bu iki objeyi seçin.

Seçili objelere ‘Modify -> Mask -> Group as mask”i uygulayın, hemen ardından hazırladığınız metnin kullanmış olduğunuz fotoğrafı içine aldığını göreceksiniz.

Ayrıca aynı yolla daha yaratıcı, daha karizmatik sonuçlara ulaşmak da yine sizin elinizde.

Stok ikon sitelerinde rastladığınız ikonlar her ne kadar pahalı olsa da, ücretsiz ikon siteleri de yok değil. İşte onlardan birkaçı;

FamFamFam

FamFamFam, şüphesiz son zamanların en hızlı çıkış yapan ikon sitelerinden biri. Birkaç kategoride, bin 250′nin üzerinde ücretsiz, 16×16 boyutundaki tatlı ikonlar kullanıma sunulduğu sitede, adını bile duymadığınız ülkelerin bayrak ikonları bile bulunuyor. ‘Silk’ (=İpek) kategorisinde bulunan 1000 ikon ise, hayalgücünün yetenek ile birleşmesinin bizlere bir hediyesi olsa gerek.

Drunkey ♥ Love

100′den fazla pixel ikonun beğeninize sunulduğu Drunkey-Love FamFamFam’e alternatif olarak sunulabilir. Eğer pixel ikon taraftarıysanız, Drunkey-Love sizin için iyi bir seçenek gibi görünüyor.

Tango

Linux kullanıcılarının yakından tanıdığı Tango Projesi‘nin ikonları. Yüzlerce kaliteli ikonun farklı boyut seçenekleriyle kullanıma sunulduğu proje, kalitesinden ziyade özellikle Open-Source taraftarlarının ilgisini çekiyor.

Bitcons

Bir düşünün, yüzden fazla birbirine benzeyen tek renkli, şirin mi şirin ikonlar kullanımınıza sunulmuş. Bitcons, sadelik taraftarlarının hayranı olduğu küçük bir ikon paketi. Bitcons şimdi yeni hayranlarını arıyor.

Sanscons

Bitcons ikonlarının sadeliği bile beni tatmin etmiyor diyorsanız, bir de Sanscons ikon paketine göz atın. Gradient efektinin çekilmiş olduğu Sanscons ikonları, beğeninize bu sefer de bu şekilde sunulmuş.

Feed Icons

RSS & Feed popülerleştikçe bu ikonları çoğu sitede görmek mümkün oluyor. Feed ikon paketi, farklı uzantılı ikonlarla size tam olarak değiştirilebilir ikonlar sunuyor.

Yellow Icon

.Ico ve .Png uzantılı binlerce ikon ile, Yellow Icon en büyük ücretsiz stok ikon sitelerinden biri. Her zevke hitap eden birbirinden farklı ikonlar, Yellow Icon aracılığıyla beğeni ve kullanımıza sunulmuş.

Icon Mac

Icon Mac, Türk tasarımcı Orhan Okay tarafından Mac OS X işletim sistemleri için hazırlanmış ikonları barındıran bir site. Gerçekten kaliteli olan ikonları kullanmamak elde değil.

Gördüğünüz gibi, ayrıntılarla sitenizin kalitesini artırmak için birçok yolunuz var. Herşey sizin elinizde. Bulabildiğiniz diğer ikon paketlerini yorumunuzu bırakarak herkes ile paylaşabilirsiniz.