23 Nisan WordPress Teması Ders Anlatımı (Resimli ve Videolu PSD Tasarım Bölüm 1)

Arkadaşlar bu ders temel yada orta düzey photoshop bilginizin olduğu farzedilerek hazırlanmış ve adım adım gösterilmektedir. Bir blog biçiminde sitenin (wordpress temalar, wordpress tema, wordpress, blog, kişisel site) nasıl tasarlandığını adım adım göstermektedir. Yazıyı ve resimleri baştan sonra okuyarak fikir edinebilir, benzer bir tasarımı yapabilir ve photoshop’u daha verimli kullanabilirsiniz.

Daha önce bir psd tasarımı yapmıştım o ders kaydını yaparken güzelim ülkemin elektrikleri birden kesiliverdi ve kayıt uçtu geriye sadece psd dosya kaldı. Diğer tasarımın psd si şurada.

1.Adım: 950px X 900px biçiminde bir sayfa açıyorum bu sayfa başlangıç için yeterli eninin 950 px olmasının sebebi bir çok internet kullanıcısının 1024 px genişliğe sahip çözünürlükte siteleri geziyor olması. O yüzden 950px bu genişliğe uygun tabi isterseniz geniş ekranları hedef alacak içimdede çalışabilirsiniz yada sayfa boyutlandırmalarını otomatik yaparsanız sayfa genişliği arttıkça sitede büyüyebilir bu konu daha çok css ile ilgili araştırmanızı tavsiye ederim.

2.Adım: Sayfamız bu şekilde oluşuyor %100 olarak izleyebilirsiniz. Bir dikdörtgen çizmek için tools tan seçimimi yapıyorum.

3.Adım: ve resimdeki gibi bir görüntü elde ediyorum. bu kısım banner olacak. (dikdörtgenin köşe yuvarlığı aracı seçtiğinizde yukarıda çıkan ayarlardan yapılıyor)

4.Adım: altına da menü oluşturmak için bir bar daha çiziyorum.

5.Adım: renklerini düzenliyorum, path biçiminde çizdiğinden vectorelmiş gibi davranıyor istediğimiz rengi layerde renge tıklayarak verebiliyoruz.

6.Adım: CTRL+R kısayolu ile cetvelleri çıkartıp slicelar çiziyorum sitenin yaklaşık yerleşim yapısını görmemiz gerekiyor.  Sağ sidebar için 250 px gibi alan bırakıyorum. sol tarafta yazılar akacak, şekilde bırakıyoruz.

7.Adım: menümüzü ve yazı başlığımızı Tekton Pro fontu ile yazıyorum.  Siz değişik bir biçim izleyebilirsiniz. Yazı alanı için Arial 12px kullanıyorum yumuşaklığı kaldırıyorum webte göründüğü gibi tasarlamamız gerkeiyor. Başlıkları cufon kullanarak birebir aynı font biçiminde kullanmanız mümkün.

8.Adım: buton A:hover olunca yani cursor üstüne gelince nasıl bir hal alacak onu ayarlıyoruz. Butonun arkasına dikdörtgen çizerek “ınner shadow ” efekti veriyorum. Bu güzel bir etki bırakacaktır.

9.Adım:  yazımızın bilgiler için yazar, tarih, kategori, yorumlar..vs ikon arıyoruz. bunun için famfamfam.com diye çok güzel bir site var ücretsiz ikon dağıtıyor orayı kullanabiliriz. Lazım olan ikonları kaydedip projede kullanıyoruz.

10.Adım: İkonlarıda yerleştirdikten sonra yazımız ve başlığın altı bu şekilde görünüyor. lorem ipsum’u da değiştirdim anlamlı bir yazı yaptım : )

11.Adım: Yazımıza devamını oku linki ekliyoruz bloglar da uzun yazılar için bu çok kullanılmaktadır.

12.Adım: Siteyi renklendirmek ve neşelendirmek için bir fotoğraf buluyoruz 23 nisan ulusal egemenlik ve çocuk bayramına uygun günün anlam ve önemini taşıyan bir resim.

13.Adım: Banner kısımını ve menu renklerini resmin temasına göre ayarlıyoruz güzel bir şeye benzedi. Ayrıca Layerler kısmındaki tüm layerleri gruplar halinde ayırıp proje karmaşıklaştıkça kafamızın karışmasını önlüyoruz. Bu “çok önemli !” arkadaşlar iş büyüdükçe dağınıklık içinden çıkamazsanız layer gruplamayı iyi öğrenin.

14.Adım: Tek bir tane yaptığımız yazıyı aşaı doğru çoğaltarak bir blog yapısı elde ediyoruz başa açtığımız sayfa boyutu yetmeye bilir Canvas Size ile sayfayı aşağıya doğru büyütünüz.

15.Adım: Sağ Sidebar’ı dolduruyoruz belli başlı içerikleri girdim fakar örneğin bu psd wordpress e göre kodlanırsa dinamik bir yapıda olacaktır o yüzden çoklu düşünerek gelebilecek şeylere göre bir tasarım oluşturmaya çalışın.

16.Adım:  Wordpress temamız veya web sitesmiz veya blogumuzun son halide bu şekilde oluyor.

Arkadaşlar umarım yararlı bir ders olmuştur.  PSD dosyasını [download id=”12″]2.5 mb  indirebilirsiniz.

—–

Video İzle

“23 Nisan WordPress Teması Ders Anlatımı (Resimli ve Videolu PSD Tasarım Bölüm 1)” için 2 yorum

  1. süper bir paylasım çok merak etigim kunulardan biriydi ins bir deiğerki dersiniz html wp giydirme olur

  2. ellerine sağlık hocam paylaşımların süper ötesi. insallah kitabındada gözüm kaldı aradıgım birşeydi çeşitli örnekleri var fakat senn içerik olarak çogundan önde oldugun bir gerçek gibi duruyor. insallah kitabın ve sonrasında sennle tanısmak dileğiyle..

Bir cevap yazın

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