Her ne kadar uzun zamandan beri siteyi aç bırakmış olsam da, bundan sonraki bir kaç yazıda onu Fireworks’ün inceliklerini tanıyacağımız yazılarla ‘yemleyerek’, kendimi ona ve tabii ki sizlere affettireceğimi umuyorum.

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.

Etiketler: grafik, Tasarım