PSD to HTML Dersi

Merhaba arkadaşlar, 2013 yılının son gününde sizler için bir yıl başı hediyesi hazırladım. Ve güzel bir psd to html dersi çektim.

Bu ders 3 bölümden oluşuyor. Header – Container ve Footer olarak. Toplamda 1 saat 57 dakikadan oluşuyor. Ve eğitim boyunca şunları öğreneceksiniz;

– ikonlar için font awesome kullanımını
– css’i hızlandırmak için less kullanımını
– yeni bir slider geçiş tekniğini
– bir psd tasarımın nasıl css’e aktarılacağını
– ve tayfun erbilen’in hasta olduğunu +_^

1. Bölüm (header)

2. Bölüm (container)

3. Bölüm (footer)

Kolay yoldan layer’ı kopyalamanın kısa yolu
Derste kullandığım kısayol: “ctrl + g” ile klasör içine alıyorum. “ctrl + e” ile yeni bir layer haline getiriyorum. “ctrl + a” ile tüm sayfayı seçip “ctrl + c” ile mevcut layerı kopyalıyorum.. “ctrl + n” ile yeni bir sayfa açıyorum ve “ctrl + v” ile kopyaladığım layerı yapıştırıyorum.

Dersteki kaynkalar;

PSD İndirme Linki;
http://dribbble.com/shots/1328390–PSD-eCommerce-Theme/

Reset.CSS;
http://meyerweb.com/eric/tools/css/reset/

PSD’de kullanılan font;
http://www.fontsquirrel.com/fonts/Aller

Kullanılacak İkon Seti;
http://fontawesome.io/icons/

Mutlu Yıllar!

kaynak dosyalar için;
http://www.prototurk.com/video/psd-to-html-dersi/399

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“PSD to HTML Dersi” üzerine 12 yorum

  1. Çok güzel bir anlatım olmuş. Bende bu şekilde birşey tasarlamayı düşünüyorum. Fakat kod yazma konusunda pek başarılı değilim.

    Sizden ricam ilerleyen zamanlarda bu temayı WordPress’e uyumlu hale getirme, WordPress’de sepet sistemi, WordPress’de alışveriş teması yönetim paneli yapımı gibi derslerle sıfırdan yönetim panelli bir e-ticaret teması yapımı şeklinde bir ders olursa çok verimli olacağını düşünüyorum.

    Mutlu Yıllar. : )

  2. Sağlıklı, Mutlu, Başarılı ve Bol kazançlı bir yıl dilerim Tayfun hocam. Hediyen de çok makbule geçti teşekkür ederim.

  3. Tayfun hocam güzel çalışman için teşekkür ederim eline sağlık.Hızına yetişmek mümkün değil :)) Harikasın Tekrar geçmiş olsun.
    css hazır olan tasarımı Wordpreste aktarma wordprese uyarlama olayınıda bir video da anlatırsan güzel olur.
    Sağlık ve mutluluk dolu bir yıl dilerim.

    Saygılarımla

    iyi çalışmalar

  4. Merhabalar oncelikle tesekkur ederim cok guzel anlatmıssınız.
    Malum suanda responsive site tasarımları için bootstrap kullanılmakta.Aynı işlemleri yaparak ufak değişikliklerle bootstraple uyumlu responsive hale getirebilir miyiz tayfun bey

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir