Forum
Aktif konular
Üyeler
Kurallar
Arama
PSD To CSS/XHTML Öğretici Dökümanlar PSD To CSS/XHTML Öğretici Dökümanlar
-
Hep şundan nefret ettim tasarım biliyor bir çok insan ama diyer gerekli olan elementleri bilmiyorlar bende öğrenmeye karar verdim bakalım nekadar geliştirebilirsek nekadar teşvik edebilirsek okadar iyi heleki tbt de teşvik etiğim tasarım ile uğraşan müridlerin öğrenmesini çok isterim
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ı
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 :)
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://designm.ag/resources/converting-psd-to-html/
http://designbeep.com/2010/02/18/38-great-tutorials-to-convert-psd-to-htmlcss/
Faydalanabileceğiniz siteler:
-
eyvallah kardeşimin dersine faydalı olacaktır sağolasın hocam
-
tesekkurler, vakit bulunca bayagi isime yarayacak seyler var gibi gorunuyor...
-
html ve css in mantığını iyice kavrayınca, çocuk oyuncağı gelir herhangi bi tasarımın css kodlamasını yapmak.
bir sonraki aşama bütün tarayıcılarda siteyi sorunsuz göstermye çalışma olacaktır.
tarayıcılar için ayrı ifler yazarsınız(tabiki sorun çıkaran hep ie olur)
bi sonraki level ie6 ie7 css hack yöntemleri vs vs.
ne kadar çok tasarımı css e dökerseniz o kadar level atlarsınız.....
böyle uzar gider.
-
Zaman olunca gözden geçireyim.
-
Ar0fer bunu yazdı:
-----------------------------Zaman olunca gözden geçireyim.
-----------------------------en çok senle zero nun öğrenmesini isterim
-
bendede tasrım dersi olucak şura yazıyım lazım olur öğreniriz gereksiz iş yapmaktan iidir.
-
Sonra göz atılmak üzere bit ataç atalım bakalım.
-
müdür eline saglık çizdim gitti.
-
Ne güzel bir köşe olmuş burası... Ellerine sağlık :SaygıylaEğilenSmiley:
-
eyvallah cizelim :)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla