Bugünlerde bu konudan baya dert yananlar var sanırsam..Abi psd yaptık ama css’e nasıl dökücez diye dert yanan binlerce kişi vardır sanırsam :) Da kimse kolay kolay anlatmamış psd nasıl css çevirilir diye..

Bende oturdum şimdi size bunu anlatıcam..Biraz zevkli olsun canınız sıkılmasın diye geyik yapalım :)

Şimdi photoshop’ta resmi çizdiniz çok güzel..Ama bu resmi kullanım alanlarına göre parçalamamız gerekiyor..Nasıl derseniz..

Örneğin wp tema yaparken css de kullandığım 3-4 büyük tablo vardır..

Bunlar header,content,sidebar,footer gibi…O yüzden öncelikle css leri yazmamız gerekmektedir..

Psd olarak şunu söylemek istiyorum..Ctrl-shift-alt-s yapıp site olarak kaydetmek bizim için yani daha doğrusu benim için daha çok zaman almaktadır..O yüzden gerektiğinde orayı kullanmak gerekir..

Öncelikle psd halini çizelim..

Ben resimle size gösteriyim..

Basit olarak css’ten bir tema çizdim..

Bunu şimdi css olarak nasıl kullanıcaz derseniz?

Öncelikle aklımızdan geçenler şunlar..Köşeler,arkaplanlar,yerleşimler..

Yazıyı psd’den css çevirmemiz oldukça zordur..Bunun için o alanları boş bırakıp oraya uygun kelimeyi yazmamız gerekmektedir..Ayrıca bu kutucukları tek tek çevirecek olursak işimiz zor olacaktır..

Bunun içinse her tekrar eden kutucuktan bir tanesini css çevirmemiz gerekmektedir..

Örneğin header yani üst kısımdan başlıyalım…

Bunu keselim şimdi o resmin içinden..Ve bunun için bir css şablonu oluşturalım.

.ustkisim {
 width: 500px;
 margin: 0px auto 0px auto;
 padding: 0px;
 border-style: none;
}

eğer arkaplan olarak kullanıcaksak background olarak css eklememiz gerekir..Ama ben normal resim olarak ekleyip link vermek istedim.

<div class="ustkisim">

<a href="http://anarschi.com/dosyalar/ust.png"><img title="ust" src="http://anarschi.com/dosyalar/ust.png" alt="ust" width="500" height="131" /></a>

</div>

olarak eklediğim de o resimi ust kısma ortalanmış biçimde ekler..Dikkat ediceğimiz noktalar şunlardır.

• Resmin boyutu yani sağ tıklayıp özelliklerden baktığınız da genişliği sizin için önemlidir..Çünkü tablonun genişliği ortalamak için gereklidir..Width değişkenine resmin boyutunu yazmanız gerekmektedir.
• Padding değeri o tabloya boşluk verdiği için kullanmıyoruz.
• Margin auto sayesinde bir çeşit text-align:center hesabı o tabloyu sitenin ortasına alıyoruz.

Şimdi geldik PSD To CSS’in en can alıcı bölümüne..

Öncelikle yazı kutucuklarından bir tanesini kesiyoruz..

Yani şöyle bir kutuyu keselim..

Şimdi bu güzel kutucuğu şekle sokmamız gerekicek..Öncelikle tablo yaparken paddinglerle filan kafamız fazla şişirmemek için etrafındaki mavilikleri kaybedelim..Bu işlemi photoshop’un image bölümünden trim kullanarak etrafını temizliyelim..

Yandaki maviliklerin kalma sebebi çokta az olsa kullandığımız shadow’dur yani kafanızı yormayın :) Şimdi bu resmi 3 e bölüyoruz..Niye derseniz yazıları nasıl ekliyicez buna :)

Bunun içinde photoshop’un yine güzel özelliklerinden biri olan slice methodunu kullanıyoruz.

Resmi gördüğünüz gibi 5 parçaya böldük..Bunu 3 parçaya bölüp yapardık ama arkaplanda belki kısa konular olur sorun çıkartır diye küçük parçalara bölmek istedim..

Burda bize gerekli olanlar Koyu mavi olanlar yani 1-3-5 numaralı dilimler gerekicek.Aynı şekilde ctrl-shift-alt-s le html olarak kaydettiğimiz zaman bize images klasöründe bu 5 farklı resmi verecektir..Photoshoptayken sağ tıklayıp edit slice options’dan isimlerini 1. yi ust,3.yü arka,5,yi de alt yaparsak resimleri ayarlamamız kolay olacaktır..

Şimdi elimizde 3 tane resim oldu..Bunları css ‘e gömelim..

Gördüğünüz gibi böyle bir küçük kutu oluştu 3 resimle..Şimdi bu 3 resimle fantezi yapalım.

.guzeltablom
{
padding:0px;
width:305px;
margin:0px;

}

Bu kod sayesinde 3 resmi bir tablonun içine almamız gerekti..Resimlerin 3′nünde genişliği 305px olduğundan tabloya 305 px verdik.

Şimdi geldik tablonun üstünü yapmaya..

.tablomunustu

{

padding:0px;
width:305px;
height: 11px;
background-image: url('ust.png');
background-repeat: no-repeat;

}

Neden 11 px kullandık derseniz.Ust.png olarak kaydettiğimiz üst resmimiz 11 pixel boyundadır eğer fazla bir değer verirsek tabloda hoş olmayan görüntüler ortaya çıkıcaktır.

Şimdi bu ilk kodu diğer ikisinin içinde kopyalıyalım..

.tablomunarkasi

{

padding:0px;
 width:305px;
 background-image: url('arka.png');
background-repeat: repeat-y;
}

.tablomunalti

{

padding:0px;
 width:305px;
 height: 10px;
 background-image: url('alt.png');
 background-repeat: no-repeat;

}

Ve tablomuzu css’e döktük..Şimdi bunları kısaca özetliyelim.ust,alt ve arka.png adındaki 3 resmimimizle bir kutu oluşturduk..

Ve css şablonunu xhtml aktarırsak

<div class="guzeltablom">

<div class="tablomunustu"></div>

<div class="tablomunarkasi">

Buraya kutunun içine yazıcaklarımız gelecektir.

</div>

<div class="tablomunalti"></div>

</div>

Bu şekilde cssle xhtml birleştirerek kutucuklarımızı oluşturduk..Bu kodları tekrarladığımız takdirde kutucuklar artıcaktır..Yani 5 kutucuk yapıcaksak bu divleri 5 kere tekrarlamamız gerekmektedir..Ama wp kullananlar için temada bir tane kullanmamız yeterli.Zaten endwhile fonksiyonu otomatik tekrarlar..

Aynı şekilde yanmenü için o boyutlarda kesip aynı yöntemleri uygulayarak tablolarımızı hazırlayabiliriz..

Psd’den öte önemli olan css kodlarını bilmektir..

Birkaç ek bilgi vermek gerekirse;

• Eğer kutunuzun iç kısmının arkaplanı gradient tarzı şeyler uyguladıysanız bunun için tablomunarkasi divine height fonksiyonu kullanmanız gerekmektedir..Ve gradient kullandığınız o bölümü düzgün biçimde kesmeniz gerekmektedir..
• Arkaplan uyuşmazlığı konusunda sıkıntınız varsa kutucukları transparan arkaplan kullanarak yapabilirsiniz..Fakat eski ie lerde transparan tanınmadığı için mavi hoş olmayan görüntüler ortaya çıkardığı için eski yöntemle anlattım.
• Arkaplan resimlerini ayarlamak için birkaç tekrarlama yöntemi vardır..Yukarda gösterdiğim gibi “no:repeat” resmi tekrarlamama fonksiyonudur..repeat-y – y ekseni üzerinde resmi tekrarlar..repeat-x ise x ekseni üzerinde..Yani y ekseni aşağı doğru,x ekseni yana doğru :)
• Öncelikle css’le alakalı bir kaç bilginiz olması gerekmektedir.Bu konuda Fatih Hayrioğlu’nun css başlangıç kitabı size yardım edecektir.
• Photoshop’un kendi xhtml-css şablonu olarak aktarmasını da isterseniz kullanabilirsiniz..Fakat o yöntemde oldukça kafanız karışır..Bu şekilde resimleri arkaplan kullanarak yapmanız size oldukça kolaylık sağlayacaktır.
• Ayrıca wordpress’e aktarmak için Volkan Görgülü’nün Web Deneyimlerinde anlattığı wordpress teması yapımı videosunu izleyebilirsiniz.

Ayrıca bir temayla ilgili ek bilgi vermek istedim..Eğer temalarınızı yaptıysanız listeleme (ul,li) fonksiyonlarına (Menü sistemleri,yan menüde konuları listeleme gibi özellikler için ), (padding,margin) gibi yer koşullarını iyi bilmeniz gerekmektedir.

Yine Photoshop konusunda slice,crop gibi ayarları bilmeniz sizin faydanıza olacaktır..

Bu yöntemi aynı şekilde png template’lerde de kullanabilirsiniz..

Sorularınızı veya eksik anlattığım şeyleri bu konu altından söyleyebilirsiniz..

Saygılarımla..

Kaynak göstermeden alıntı yapmazsanız sevinirim :)