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)
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
Çok güzel bi ders olmuş,çok teşekkürler ve MUTLU YILLAR 🙂
Ç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. : )
Emeğine sağlık 🙂 ve geçmiş olsun
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.
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
dersleriin devamını bekliyoruz hocam
Çok güzel bir anlatım tebrik ederim.
Merhaba. Hocam bende Less Profiles yok. Resimde de belirttim.
eğer yok ise, pluginler kısmından yüklemeniz gerekmeke.
Bu seriyi birkaç yere yedeklemek lazım, kaybolacak diye çok korkuyorum 😀
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
Çok güzel anlatım teşekkürler .