Daha önceden Gimp ile web tasarım yapmak konusunda çeşitli yazı ve derslerim olmuştu. Tasarımlarını HTML ve CSS kodlarına dönüştürmek isteyen arkadaşlar için biraz daha detaya girmek gerektiğini anlayınca bu yazı serisini hazırlamaya karar verdim. Umarım başlangıç seviyesinde bulunanlar için yeterli ve faydalı bir belge ortaya çıkar.

Yazı serimiz dört bölümden oluşacak. Mümkün olduğunca basit ve anlaşılır ifadeler kullanmaya çalışacağım. CSS ve HTML kodlama ile ilgili sadece örneklerle yol gösterici olup teknik detaya girmeyeceğim. Bahsettiğim dört bölüm ve içerikleri şu sırada olacak :

1. BÖLÜM : gimp ile basit bir web sayfası tasarlayacağız
2. BÖLÜM : tasarımımızı dilimleyerek kodlamaya hazır hale getireceğiz
3. BÖLÜM : tasarımımızı kodlayacağız ( HTML, CSS )
4. BÖLÜM : tasarımımıza son şeklini vereceğiz

1. BÖLÜM : Gimp ile basit bir web sayfası tasarlama

Arkadaşlar daha önceden zengin içerikli tasarımlar yapmıştık. Ama ben onları kullanmayacağım. İsteyenler yazı dizisi bittikten sonra burada kullanacağımız yöntemlerle onları da dilimleyip kodlayabilirler.

Adım 1. Önce arka planı oluşturalım. 960 (genişilik)x 900 (yükseklik) piksel bir resim oluşturun ve gri ile doldurun (b4b4b4)

Adım 2. Şimdi sayfamız için 900 piksel genişliğinde “sayfa” isimli yeni bir katman oluşturalım ve beyaz (ffffff) ile dolduralım. Taşıma aracını seçip klavyeden ok tuşlarıyla katmanımızı resmin ortasına taşıyalım.

Adım 3. Sayfa katmanımıza için Filtreler>Işık ve Gölge>Drop Shadow filtresini uygulayalım. X ve Y değerlerini sıfır olarak belirledikten sonra “Allow Resizing” ifadesinin yanındaki tiki kaldırmayı unutmayalım. Sayfamıza hafif bir gölge eklemiş olduk.

Adım 4. 900×150 px boyutunda “başlık” isimli yeni bir katman oluşturalım ve resimdeki gibi üst bölüme yerleştirelim.

Adım 5. Ön plan rengi için ff7e00 ve arka plan rengi için e89923 değerini belirledikten sonra Blend aracını seçelim ve başlık katmanına aşağıdan yukarı uygulayalım. Sonuç resimdeki gibi olmalı :

Adım 6. Dörtgen seçim aracı ile katmanın en üstünde 5px yüksekliğinde seçim yapıp ön plan rengi ile dolduralım.

Adım 7. Başlık katmanını çoğaltın ve “delete” tuşuna basarak içini boşaltın. ( yeni bir katman oluşturup yerine taşımayla uğraşmaktansa böyle yapmak daha kısa). Dörtegen seçim aracını seçin ve 1px yüksekliğinde bir seçim yaparak siyah (000000) ile doldurun. Hemen bu seçimin altında yine 1px yüksekliğinde bir seçim yaparak beyaz (ffffff) ile doldurun. Katmanın saydamsızlığını %15 yapın. Böylece başlık bölümüne güzel bir görünüm katmış olduk. Sonuç şu şekilde olmalı :

Adım 8. Üst bölümü bitirdik. Şimdi yan menü ile ilgilenelim. Sayfa katmanını çoğaltın, “delete” tuşuna basarak içini temizleyin. Dörtgen seçim aracı ile sayfanın sağında 320 px genişliğinde seçim yapın, e89923 rengi ile doldurun ve katmanın saydamsızlığını %15 olarak ayarlayın. Son görünüm resimdeki gibi olmalı :

Adım 9. Yan menüyü bu şekilde tamamladıktan sonra alt bölümle ilgilenelim. 100 px (yüksekliği), 900 px (genişliği) “altlık” isimli yeni bir katman oluşturalım. Taşıma aracını seçip klavyeden ok tuşları ile alt bölüme taşıdıktan sonra ff6400 rengi ile dolduralım. Görünüm :

Adım 10. Yazı aracını seçelim. Başlık katmanında oluşturduğumuz çizginin altına Sitemizin menülerini ekleyelim. İstediğiniz yazı özelliklerini kullanabilirsiniz. Pardus işletim sisteminde kullandığım yazı değerleri şu şekilde;

yazı tipi : sans bold

yazı boyutu : 14

yazı rengi : beyaz

yazımızı yazdıktan sonra görünüm şöyle olmalı :

Adım 11. Başlık katmanını çoğaltıp “delete” tuşuna basın. Çizginin altında bulunan menu yazılarından birinin üstünde dörtgen seçim oluşturup beyaz ile doldurun. Saydamsızlığını %10 yaptığınızda görünüm şu şekilde olmalı :

Adım 12. Ve son olarak logomuzu tasarımımıza katman olarak ekleyelim. Bunun için Dosya>open as layers yolunu takip edin. Ben daha önceden Gimp Tr için yaptığım bir logoyu ekliyorum. Onun dersine de buradan ulaşabilirsiniz. Ve tasarımımızın görünümü :

Tasarıma ek olarak görünümün nasıl olduğunu görmek için bazı resim ve yazılar ekledim. Sizin bunları eklemenize gerek yok.

Böylece birinci bölümümüzün sonuna geldik. Çalışmamızı .xcf formatında kaydetmeyi unutmayın. Gelecek bölümlerde, oluşturduğumuz bu basit tasarımı dilimleyip kodlayacağız. Lütfen yorum yapmaktan kaçınmayın. Görüşlerinizi belirtin ki işe yarar bir netice elde edelim.

Saygılarımla;

ivme (Şaban KUŞ)

not : çalışmalarınızı forumdaki ilgili başlıkta görmek isteriz.