Gimp ile web tasarım-2 (html ve css)
Çalışmamızın ikinci bölümünde ilk bölümde yaptığımız tasarımımızı dilimleyeceğiz. Bir resmi gimp ile üç farklı şekilde dilimleyebilirsiniz. Bu yollar :
1 ) düz yol: Ben tek tek uğraşmaktan zevk alırım diyenlere hitap ediyor. Uzun gereksiz bir yol. Bildiğimiz kopyala/yapıştır mantığı.
2 ) HTML siz dilimlemek (Guillotine): Gimp sadece bölsün html tablo oluşturmayı ben kendim yaparım diyenlere hitap ediyor. Web tasarımda uzman değilseniz, ya da tablo oluşturmakla uğraşmak istemiyorsanız hiç uğraşmayın. Ama diyorsanız ki ben CSS ile resimleri birleştiririm bu yöntem size hitap ediyor demektir.
3 ) HTML li dilimlemek (slice): Resmi parçalara ayırır, htlm sayfasını tablolar ile oluşturur. Hızlı ve paratik bir yöntem. Yalnız bu özellik sadece Linux işletim sistemlerindeki Gimp sürümlerinde var.
Bu üç yöntemden bize en uygun olanı ikincisi gibi duruyor. Çünkü biz resimleri css yardımıyla birleştirmeyi düşünüyoruz. Kısaca bu yöntemi nasıl uygulayacağımızdan bahsetmek istiyorum :
Resmi gimp ile açın. Resim>klavuzlar>new guide ile resminize yeteri miktarda yatay (horizontal) ve düşey (vertical) klavuzlar ekleyin. Ctrl+m tuşlarına bastıktan sonra bu kılavuzları fare ile resmin üstünde istediğiniz yere sürükleyebilirsiniz. Bu şekilde yatay ve düşey kılavuzları resmin nasıl parçalanmasını istiyorsanız öyle yerleştirin. Yerleştirme işlemi bittikten sonra Resim>dönüştür> Guillotine yolunu takip edin. Birkaç saniye içinde masaüstünde parça şeklinde bir çok resim oluşacak. Her bir resmi ayrı ayrı kaydedin.
Bu kadar ön bilgiden sonra artık dersimize başlayabiliriz :
Adım 1. Birinci bölümde oluşturduğumuz .XCF dosyasını Gimp ile açın.
Adım 2. Katman diyalog kutusunda resim ve yazı katmanlarının yanında bulunan göz resmine tıklayarak saklayın. Onları dördüncü dersimizde kodlarla index ve css dosyalarımızın içine ekleyeceğiz. Görünüm şu hale gelmeli :
Adım 3. Şimdi dilimleme için kılavuzları ekleyeceğiz. Resim>klavuzlar>new guide ile tasarımımıza yatay (horizontal) klavuzlar ekleyelim. M tuşuna bastıktan sonra bu kılavuzları fare ile resmin üstünde istediğiniz yere sürükleyebilirsiniz. Şimdi ekleyeceğiniz kılavuzları resimde görülen şekilde yerleştirin. Ben 6 adet klavuz ekledim. Resim görünümünü büyülterek yerleştirirseniz olası hataları önlemiş olursunuz.
Bu dilimlemede gördüğünüz gibi; başlık, linkler menüsü, ana içerik ve altlık bölümlerini oluşturmuş oluyoruz.
Adım 4. Yerleştirme işlemi bittikten sonra Resim>dönüştür> Guillotine yolunu takip edip uyguladığımızda birkaç saniye içinde masaüstünde parça şeklinde bir çok resim oluşacak.
Adım 5. Şimdi her bir resmi isimlendirerek kaydedeceğiz. Burada vereceğimiz isimler önemli çünkü CSS stil sayfamızda bu resimleri isimleri ile çağıracağız. Vereceğimiz isimler şu şekilde olmalı :
baslik.png , menulink.png, sayfa.png, altlik.png
Sayfa resminden gördüğünüz gibi üç adet oluştu. Bizim için bir tane yeterli, diğer ikisini kaydetmeden kapatabilirsiniz.
Adım 6. Çalışmamızın ilk bölümünde fare ile linklerin üzerine geldiğimizde bir efekt oluşması için saydamlığı %15 olan beyaz bir katman oluşturmuştuk. Şimdi XCF dosyamızda efekt ve başlık hariç diğer bütün katmanları görünmez hale getirelim. Efekt katmanı seçili iken dörtgen seçim aracı ile resimdeki gibi bir seçim yapalım, düzenle>görünür kısmı kopyala ve şeffaf yeni bir resim belgesi açarak yapıştıralım. Bu yeni resmi efekt.png olarak kaydedelim.
Adım 7. resimler isimli bir klasör oluşturalım ve bütün resimleri içine taşıyalım. Bu klasör içinde bulunması gereken resimler : baslik.png , linkmenu.png, sayfa.png, altlik.png, efekt.png .
Üçüncü bölümde XHTML ve CSS kodlamaya başlayacağız.
Saygılarımla;
ivme (Åžaban KUÅž)
Ekim 21st, 2008 at 14:48
çok sağol diğer bölümü sabırsızlıkla bekliyorum