Birkaç gün önce yayınlamış olduğum ‘Müşteriyle paradan konuşmak‘ başlıklı yazdımda da belirttiğim gibi, Haziran ayında bir gazete için hazırlamış olduğum ancak bazı nedenlerden dolayı teslim edemediğim farklı bir konsepte sahip haber sitesi tasarımımı bugün kaynak dosyalarıyla birlikte sizlerle paylaşmak istiyorum. Umarım bu birilerinin işine yaracaktır.

Dikkat: Tasarımda kullanılmış olan marka ve logolar hayal ürünüdür.

Bahar geldi, derken yağmurlu günleri gördük. Sonra bir yaz, bir kış daha geçti. Bu iki yıllık sürede site az da olsa yazdığım yazılarla beslendi, büyüdü. Değişmeyen tek şeyi kaldı, o da yeşil. Siteyi üç kere yeniden tasarlasam da, yeşil hep aynı yerde kaldı. İşte bugün, ona veda ettiğimiz gün. MuhammetSevim.com, yeni tasarımıyla yayında.

Popüler çevrimiçi proje yönetim sistemi Basecamp‘in yapımcıları 37signals‘daki bir makalelerinde web için arayüzler tasarlarken neden direk olarak kağıttan CSS/XHTML’e geçtiklerini, bir tasarım aşamasında Photoshop ve benzeri programlara neden el sürmediklerini anlatmışlar.

En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

Yazıyı okumaya başlamadan önce durun ve üzerinizdeki aksesuarlara bir bakın; kolunuzdaki saatiniz, bileğinizdeki takınız, parmağınızdaki yüzüğünüz. Belki burnunuzdaki piercing, kol kaslarınızı daha da ortaya çıkaran dövme. Belki onlarsız dışarıya çıkamayacağınız, sizi siz yapan bu aksesuarlar, giyim ve stilinizi tamamlayan küçük; fakat önemli unsurlar. Tıpkı web sitelerinden tanıdığımız, sürekli gözümüze çarpan, biryerlerde asılı olarak bize göz kırpan o küçük faviconlar gibi.

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.