eburhan.com

Geçtiğimiz günlerde, bir web sayfası için bir şerit (ribbon) görseline ihtiyacım olmuştu. Bu şeritleri, web sayfasındaki kutuların köşelerine yerleştirerek gerçekten hoş bir görüntü oluşturabiliyor ve kullanıcının dikkatini -onu rahatsız etmeden- bir yere çekebiliyorsunuz. Bu şerit görsellerinin hazır yapılmışını ararken, Designing a Family of Websites sayfasında bir eğitsel (tutorial) içerisinde gördüm. Ücretsiz indirme şansı da olmadığı için Adobe Fireworks ile kendim yapmaya çalıştım.

Adım adım sonuca gidelim

1. 250×150 piksel boyutunda ve arkaplanı transparent olan yeni bir döküman açalım.

   

2. Araç kutusundan Rectangle Tool (U) aracını seçip, yeni oluşturduğumuz döküman içerisine 145×85 piksel boyutunda ve arkaplanı #00A3EC olan bir dikdörtgen ekleyelim.

   

3. Bu dikdörtgen seçili haldeyken araç kutusundan bu sefer Knife Tool (Y) aracını seçelim. Bu dikdörtgeni sol-üst ve sağ-alt köşelerinden iki eşit parçaya ayıralım.

   

4. Bize üstteki parça gerekli olacak, alttakini sitebilirsiniz. Üst kısımdaki parça seçiliyken, Modify -> Combine Paths -> Join komutunu verin veya Ctrl + Shift + J klavye kısayolunu kullanın. Böylece ayırdığımız üst parçanın kenarları birleştirilmiş olacak.

   

5. Şimdi parçayı yeniden keseceğiz. Parçanın sol köşesinden 55 piksel uzaklığındaki, alt köşesinden ise 30 piksel uzaklığındaki bir noktayı baz alıp Knife Tool (Y) ile kesim işlemini yapıyoruz. Elde ettiğimiz parçanın kenarlarını, bir önceki adımda anlattığım gibi birleştiriyoruz.

   

6. Artık şerit görselinin kaba bir şekline sahip olduk. Şimdi bu şekli seçip kopyala-yapıştır yaparak bir kopyasını çıkartın (hızlıca ctrl+c ile ctrl+v kısayollarını kullanın). Hemen kopyasının üzerine sağ tıklayarak Transform -> Numeric Transform komutunu verin veya Ctrl + Shift + T klavye kısayolunu kullanın. Açılan pencerede Scale seçili iken, girdi kutularının her ikisine de 98 değerini girip Ok butonuna tıklayın. Bu işlemlerden sonra sağdaki Layer panelinden parçaları “Kopya” ve “Gerçek” olarak isimlendirin.

   

7. “Kopya” parça seçiliyken alttaki Properties panelinden Solid menüsüne tıklayın. Açılan menüden Gradient –> Radial komutunu verin. Hemen sonra arkaplan seçicisine (kova simgeli) tıklayın, renkleri #14B9FF renginden #006DDD rengine geçiş yapacak şekilde ayarlayın. Kopya parça üzerinde çıkan siyah çubuğu da alttaki resimdeki gibi konumlandırın.

   

   

8. Şimdi de şeridimizin üst ve alt köşelerine kıvrıklık vereceğiz. Bunun için araç kutusundan Pencil tool (B) aracını seçiyoruz ve #0048A8 renginin tonlarını kullanarak 6×3 piksellik bir piramit yapıyoruz. Bu minik pramidi şeridin üst köşesiyle birleştirin. Bu pramitten bir kopya çıkartın ve Ctrl+Shift+9 klavye kısayolunu kullanarak döndürün. Pramidin uç noktalarından biraz silerek bu sefer de şeridin alt köşesiyle birleştirin. (biliyorum bu kısım biraz karışık oldu ama alttaki ekran görüntülerinden daha kolay anlayabilirsiniz)

   

   

9. Şimdi de şerit üzerinde görünecek olan “eBurhan” yazısını yazalım. Yazı tipimiz “Arial Narrow”, yazı büyüklüğü “16″, yazı rengi “#FFFFFF” ve harf aralıkları da “4″ olsun. Yazıyı da “bold” ve “italic” yapalım. Kısacası “Properties” panelindeki yazı ayarları aşadaki gibi olmalıdır. Bu ayarları yaptıktan sonra yazının üzerine tıklayın ve araç kutusundaki Scale Tool (Q) ile yazıyı şerit ile paralel olacak şekilde çapraz konuma getirin.

   

   

10. Ve son olarak yazdığımız bu yazıya iki tane efekt vereceğiz. Yazıya bir kere tıkladıktan sonra “Properties” panelinden Filters menüsüne girin ve Shadow and Glow -> Drop Shadow komutunu verin. Ayarlarını da aşağıdaki gibi yapın (gölge için renk kodu: #004164). İkinci efekt içinse yine Filters menüsüne girin ve Bevel and Emboss -> Raised Emboss komutunu verin. Ayarlarını da aşağıdaki gibi yapın.

    

Sonuç

10 adımlık bu uygulamanın sonucunu aşağıda görebilirsiniz. Tasarımcı olmadığım için elimden geldiği kadarıyla ben bu kadarını yapabildim ve orjinal şerit görseline bu kadar yaklaşabildim. Bence burada anlatılanları siz de kendiniz adım adım uygulayın. Ben yine de üzerinde değişiklik yapılabilen orjinal Fireworks dosyasını vermek istiyorum. Dosyayı buradan indirebilirsiniz. 2. bölümünde ise burada hazırladığımız şerit (ribbon) görselini XHTML ve CSS kodları kullanarak web sayfamıza ekleyeceğiz. İnanın bana, web sayfasına eklenmiş haliyle bu şerit görseli o zaman gözünüze çok daha hoş görünecek

benzer yazılar:

• Adobe Fireworks için otomatik kaydetme özelliği