PSD to CSS/XHTML Öğretici Dökümanlar

PSD to CSS/XHTML yani diğer adıyla, PSD (Photoshop) dosyasının dilimlenerek CSS/XHTML olarak dökümü. Web tasarımına yeni başlayan birçok arkadaşın takıldığı en önemli konulardan bir tanesi. Birçok web kullanıcısı var olan tasarımları düzenleyip kullanıyor ama hedeflediklerinden ziyade buldukları ile yetinmeye çalışıyorlar. Bu işle uğraşmak isteyenlere umarım faydalı bir yazı olur.

Tasarım bloglarını dolaşırken gözüme çarpan “PSD to HTML” dökümanlarını da bir kenara toplayıp, arşive almak istedim. Bu konuda birçok blogda derlemeler de yer alıyor. Aşağıda yer alan adresler ise faydalı olacağını düşündüğüm siteler.

A- Videolu Eğitimler

1- Web Deneyimleri – Eşi Benzeri Görülmemiş Bir Video Serisi – Türkçe

Web tasarımı, CSS dökümü ve WordPress entegrasyonu konusunda Volkan Görgülü tarafından hazırlanmış, isminden de belli olduğu gibi Eşi Benzeri Görülmemiş Bir Video Serisi. İngilizce ile arası iyi olmayan arkadaşların bulabileceği en güzel kaynaklardan bir tanesi. Sitede yer alan diğer yazılar da oldukça işinize yarayacaktır.

Adres: http://www.webdeneyimleri.com/xhtml-css-gelistirmek-wordpress-temasi-yapmak/

http://www.webdeneyimleri.com/wordpress-temasi-gelistirmek-videolu-anlati/

2- PSD’den XHTML’e nasıl dönüştürebiliriz?

Web tasarımı ve diğer alanlarda eğitsel yazıları ve dökümanları(tutorial) ile adından çokça söz ettiren Tutsplus’ta işinize yarayacak güzel bir video serisi var. 4 Videoda PSD tasarımı XHTML formatına dönüştürülmüş.

Bölüm 1 – PSD tasarımın dilimlenmesi ve XHTML halinin oluşturulması

Bölüm 2 – CSS

Bölüm 3 – Temel Javascript Uygulamaları

Bölüm 4 – IE6 ile Zorlu Mücadele

Adres: http://net.tutsplus.com/articles/news/how-to-convert-a-psd-to-xhtml/

3- Web Sitesi Oluşturmak

Birçok konuda videolu dökümanları ile kullanıcılarına faydalı olan CSS Tricks’te 3 videodan oluşan bir döküman dikkatimi çekti.

Bölüm 1- Photoshop’ta Tasarımı Oluşturmak

Bölüm 2- Tasarımı CSS/XHTML’e çevirmek

Bölüm 3- WordPress Teması Oluşturmak

4- Tasarımı PSD’den HTML’ye Dönüştürmek

Tutsplus’ta yer alan videolu dökümanlardan bir tanesi daha. Sade ve basit bir arayüzü %100 CSS-XHTML’e dönüştürmeyi anlatıyor.

Adres: http://net.tutsplus.com/articles/news/converting-a-design-from-psd-to-html/

B – Yazılı Dökümanlar – Makaleler

Bu konuda birçok forumda konular açılmış yazılar yazılmış fakat genelde soru soran kişiler aradıklarına cevap bulamamış. Kimisinde Photoshop kullanarak CSS’i oluşturma anlatılmış, kimisinde Photoshop eklentisi ile WordPress teması oluşturmak anlatılmış, bazı sitelerde ise bu konuya detaylı olarak değinilmiş. Türkçe sitelerde sonuç tek bir dökümana ulaşıyor: Fatih Hayrioğlu tarafından hazırlanan CSS Başlangıç Kitabı. Bu işlere merak saldıysanız kesinlikle okumanızı öneriyorum, çünkü bu kitap CSS dünyasına açılan kapının anahtarı ;)

CSS konusunda Fatih Hayrioğlu‘nun Not Defteri bulabileceğiniz en güzel Türkçe kaynaklardan bir tanesi. Temel CSS Dersleri, CSS ipuçları, CSS teknikleri ve problemlerin çözümleri CSS Dersleri sayfasında sizleri bekliyor.

1- O kadar bahsetmişken bir de makalesine yer vermezsek olmaz yani :) 3 yazıdan oluşan seride Fatih Bey, dökümünü yapmış olduğu bir projeyi baştan sona anlatmış. Baya emekle yazılan bu yazı serisini okumadan geçmeyin bence..

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması

Bölüm 1 – Bölüm 2 – Bölüm 3

2- Değerli dostum Beyaz’ın sitesinde bu konu ile alakalı, oldukça basit anlatılmış güzel bir yazı yer alıyor. O da bu konuda arayışta olan arkadaşlar için yazmış :)

Adres: http://anarschi.com/psd-to-css

3- Adım Adım Web Tasarımı – PSD’den HTML’e..

Tutsplus tarafından hazırlanmış güzel bir döküman daha. CSS ile alakalı her döküman arayışımda sürekli karşıma çıkan bir yazı. Faydalı olmak istiyorum dercesine okurlarına ulaşmak istiyor heralde :)

Adres: http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

4- Sıfırdan Portföy Sitesi Oluşturmak

Bu yazıyı CSS-XHTML’e merak saldığım ilk zamanlarda okumuştum. Aradan yaklaşık 3 sene geçmesine rağmen CSS bilgime yeni şeyler ekleyememek, benim için oldukça üzücü bir durum. Umarım yazıyı okuyanlar bu düşünce ile yol almaz :)

Adres. http://net.tutsplus.com/tutorials/site-builds/build-a-sleek-portfolio-site-from-scratch/

5- Oldukça basit bir anlatıma sahip olan başka bir PSD dönüşüm dökümanı..

Adres: http://www.hv-designs.co.uk/2009/01/28/the-design-lab-psd-conversion/

Şimdilik bu kadar. Daha güzellerini gördükçe bu yazıya eklemeye çalışacağım. Yazı biraz uzun oldu farkındayım, umarım açar açmaz sekmeyi kapatmazsınız. Bu satırı okuduğunuza göre sekmeyi kapatmayanlardansınız :)

Yazı hazırlanırken kullanılan derleme adresleri:

http://www.1stwebdesigner.com/tutorials/43-psd-to-xhtml-css-tutorials-creating-web-layouts-and-navigation/

http://designm.ag/resources/converting-psd-to-html/

http://designbeep.com/2010/02/18/38-great-tutorials-to-convert-psd-to-htmlcss/

Faydalanabileceğiniz siteler:

http://www.yakuter.com/kategori/css-xhtml-w3c/

Değerli yorumlarınız ile faydalı siteler kısmını zenginleştirebilirsek çok güzel olur ;)