PSD’den CSS’e çevirme – PSD to CSS

Web dünyasında ön geliştiriciler (Front End) ve arka geliştiriciler(Back End) vardır. Ön geliştiriciler kullanıcıya görünen kısımda yani ön kısımda çalışırken arka geliştiriciler ise kullanıcı tarafından görülmeyen arka kısımdan görevlidirler. Ön taraf diye adlandırılan kısımda tasarım – client, arka taraf diye adlandırılan kısımdaysa dinamik – server tabanlı bir çalışma mevcuttur. Ön geliştiriciler de arka geliştiriciler gibi kod yazabilirler fakat bu kodların türü değişiktir. Örneğin kendini ön geliştirici olarak geliştiren kişi client tabanlı diller yani Jquery, Javascript, Html, Css vb.. dillerde ileriyken arka tarafta kendini geliştiren kişi ise sunucu tabanlı diller olan PHP, ASP, MySQL vs. gibi dillerde kendini geliştirmektedir.

PSD’den CSS’e çevirme – PSD to CSS

Bu alanda çok profesyonel yerlere gelmek istiyorsanız bir zamandan sonra size sadece PSD’den CSS’e çevirmek yetmeyecektir. Aynı zamanda Jquery gibi teknolojilerle de ilgilenmelisiniz. Başlarken dikkat edilmesi gerekenler arasında elbette size göre en kullanışlı bir web editörü ve hızlı bir şekilde açılan iyi bir tarayıcı PSD’den CSS’e çevirme işleminde sizi sonuca ulaştıracak gereksinimler arasında yatıyor. Fakat işleme geçmeden bilinmesi gereken en temel gereksinim elbette ki HTML. CSS kodlarını ilk aşamada ezberlemeye çalışmayın. Zaten bunu pratikte yapacaksınız. En başta işlemin mantığına odaklanın. Başlayalım…

Photoshop PSD dosyası  Proje dosyasını indir

Temayı indir

1.Aşama: Bölümlendirme

psdPSD’den CSS’e çevirme işlemini yapmadan önce PSD’ yi önce kendi kafanızda daha sonra ise fiziksel olarak bölümlendirmelisiniz. PSD to CSS işleminde bölümlendirme işlemini bir satır – sütün ilişkisi olarak adlandırın. Bu şekilde adlandırdığınız takdirde zihninizde CSS’e çevirmek istediğiniz temayı daha kolay bölümlendirebilirsiniz. Bazı PSD to CSS işlemindeki bölümlendirmeler. Profesyonel çalışmak istiyorsanız bölümlendirme işlemini px tabanlı olarak gerçekleştirin. Temayı kodlamadan önce pixel genişliklerini ve bölümleri kaba taslak olarak bir defteri geçirmenizi öneririm. Bu sayede temayı kodlarken tekrar tekrar bölümlendirmeye konusunda zaman kaybı yaşamazsınız.

Continue reading “PSD’den CSS’e çevirme – PSD to CSS”