Herkeze merhaba, daha önceden hazırladığım eğitselde gelen istek ve yorumlar sonucunda yeni bir eğitsel ile karşınızdayım. İlk hazırladığım eğitselde ilgi, alaka ve vakit ayırıp bana mail atan herkeze teşekkür ederim beni çok iyi motive ettiniz :). Karşılık beklemeden birşeyler paylaşmak ve bu paylaşımın insanlara yarar sağladığını görmek beni çok mutlu etti. Lafı fazla dolandırmadan hemen eğitselimize geçelim kişisel wordpress blog teması nasıl yapılır bu eğitselde sizlere bu konuyu anlayacağım ve beraber uygulamaya ineceğiz.

Blog artık ülkemizde çok fazla yaygınlaşmaya başladı haliyle bu alanı işe çevirenlerde oldu. Bloggerlar, blog tasarımcıları vs. blog tasarımlarının çok sade ve anlaşılır olmasından yanayım çünkü çoğu zaman bir blogta çok uzun bir süre geçirebiliyoruz. Renkler özenli seçilmeli ve okurumuzun gözünü fazla yormamalı. Bu yüzden bloggerların en önem vermesi gereken konu bloglarının tasarımları. Sade, okunabilir, kullanışlı tasarımlar her zaman bir artı katar bloglara. Sonuç olarak uzunca bir yazıyı okuyanların gözünü yoran renklerin olması çok iyi olmaz. Bunları düşünerek blog tasarımı dersi oluşturmaya karar verdim.

ÇALIŞMA SONUCU

STEP 1

Adobe Photoshop programımızı açıyoruz. Yeni bir çalışma dosyası oluşturuyoruz ( CTRL + N ). Ayarlar Aşağıdaki Gibiridir.

Blogumuzun genişliği 980 px olacak. CTRL + R ile cetvelimizi açıyoruz ve alanımızı belirliyoruz.

SOL adında yeni bir grup oluşturuyoruz ( CTRL + G )

SOL grubunun içerisine ANA adında yeni bir grup oluşturuyoruz ( CTRL + G ). Rectangle Tool (U) yardımı ile sol tarafa 305 px genişliğinde bir alan çiziyoruz. Çizdiğimiz bu katmanın adı ” SOL “

GÖLGE adında yeni bir layer oluşturup SOL adlı katmanımızın alanını seçiyoruz ( CTRL + SOL KLİK ) renk kodumuz ( # 313131 ) Gradient ( G )aracımız ile geçişimizi veriyoruz.

Üst kısma Rectangle Tool (U) yardımı ile 305 x 175 px boyutunda bir çizim yapıyoruz renk kodumu ( #09a3ca ). Oluşturduğumuz bu katmanın adı ” LOGO “

LOGO katmanına  Sağ klik > Blend Options > Inner Shadows Efekti veriyoruz. Inner Shadow değerleri resimdedir.

GRADIENT adında yeni bir layer oluşturup LOGO adlı katmanımızın alanını seçiyoruz ( CTRL + SOL KLİK ) renk kodumuz ( #2cd1fb)Gradient ( G ) aracımız ile ( Radial ) geçişimizi veriyoruz.

GÖLGE adında yeni bir layer oluşturup LOGO adlı katmanımızın alanını seçiyoruz ( CTRL + SOL KLİK ) Renk Kodumuz ( #0d83a9 ) Gradient ( G) aracımız ile alt kısımdan çok ufak bir geçiş veriyoruz. Bu şekilde SOL katmanımızla LOGO katmanımıza çıkıntı efekti vermiş olduk.

Üst kısma Logomuzu yerleştiriyoruz

ANA adındaki grubumuzu kapatıyoruz.

STEP 2

ARAMA adında yeni bir grup oluşturuyoruz ( CTRL + G ).

3D başlığımızı oluşturalım Ana renk kodumuz (#ffc000), Açık ( Gradient )renk kodumuz (#ffdd56) ve koyu renk tonumuz (#e79315) bu renk tonlarında 3d başlığımızı oluşturalım. 3D Web elementleri dersinde başlık ve bantların nasıl oluşturulduğunu buradan videolu anlatım ile izleyebilirsiniz.

Rounded Rectangle Tool (U) ( Radius 8px ) 275×35 px boyutlarında  renk kodu (#282828) bir çizim yapıyoruz. Oluşturduğumuz bu katmanın adı TXT, TXT katmanına  Sağ klik > Blend Options > Inner Shadows Efekti veriyoruz. Inner Shadow değerleri resimdedir.

Hemen altına ( Tahoma – Regular – 10pt – aa=none – renk #787878 ) Popüler aramalar yazıp aramalarımızı girelim.

ARAMA adındaki grubumuzu kapatalım.

STEP 3

HAKKINDA adında yeni bir grup oluşturalım ( CTRL + G ) oluşturacağımız bu alan bizim hakkımızda ufak bir bilgi verecek.

Rectangle Tool (U) aracıyla 270×287 px boyutunda bir çizim yapalım renk kodumuz (#c8c8c8) oluşturdupumuz bu katmanın adı ANA.

Oluşturduğumuz ANA katmanına  Sağ klik > Blend Options > Inner Shadows Efekti veriyoruz. Inner Shadow değerleri resimdedir.

GRADIENT adında yeni bir layer oluşturarak ANA adlı katmanımızın alanını seçiyoruz ( CTRL + SOL KLİK ). Gradient Aracı (G)ile renk kodu (#d5d5d5) sol üst ve sağ alt kısma bir geçiş veriyoruz radial.

Rectangle Aracıyla (U) 249×98 px boyutunda bir çizim yapıyoruz oluşturduğumuz bu katmanın adı RES ( RESİM KISALTMASI ) hakkımızda bilgi verecek bu alanda olmasını istediğimiz resimi çalışma alanımıza atıyoruz ve RES adlı katmana maskeliyoruz bunu

attığımız resimi RES adlı katmanın üst kısmına ekleyerek resimimize sağ tıklayarak CREATE CLIPPING MASK diyerek oluşturduğumuz RES adlı katmana maskeliyoruz.

Resmin hemen altına hakkımızda yazısını yazıyoruz ( Tahoma – Regular – 10pt – aa=none – renk #7e7e7e)

HAKKINDA adlı grubu kapatalım

STEP 4

KATEGORİ adında yeni bir grup oluşturuyoruz ( CTRL + G ) bu alan bizim KATEGORI ve ARŞİV alanımız olacak.

Başluğımız için STEP 2 de oluşturduğumuz 3D başlığımızı kopyalıyoruz ve rengini değiştiriyoruz renk kodları, Ana renk kodumuz (#c42f29), Açık ( Gradient )renk kodumuz (#dc3d32) ve koyu renk tonumuz (#8d1914)

Rectangle Aracıyla (U) 161×195 px boyutunda bir çizim yapıyoruz renk kodumu (#282828) bu katmanımızın adı ANA, ANA katmanına  Sağ klik > Blend Options > Inner Shadows Efekti veriyoruz. Inner Shadow değerleri resimdedir

( Tahoma – Regular – 10pt – aa=none – renk #7e7e7e ) kategori kutumuzun içeriğini dolduruyoruz.

Rectangle Aracıyla (U) 95×195 px boyutunda bir çizim yapıyoruz renk kodumu (#282828) bu katmanımızın adı ARŞİV, ARŞİV katmanına  Sağ klik > Blend Options > Inner Shadows Efekti veriyoruz. Inner Shadow değerleri resimdedir

( Tahoma – Regular – 10pt – aa=none – renk #7e7e7e ) arşiv kutumuzun içeriğini dolduruyoruz.

KATEGORİ grubumuzu kapatıyoruz.

STEP 5

ETIKET adında yeni bir grup oluşturuyoruz ( CTRL + G ) bu alanda etiketlerimiz yer alıcaktır.

Başlığımız için STEP 2 de oluşturduğumuz 3D başlığımızı kopyalıyoruz ve rengini değiştiriyoruz renk kodları, Ana renk kodumuz (#84c13f), Açık ( Gradient )renk kodumuz (#bbdd58) ve koyu renk tonumuz (#649a27)

İçeriğini dolduruyoruz.

ETIKET grubumuzu kapatıyoruz

STEP 6

Katıldığımız sosyal ağların logolarını sıralıyoruz.

Sosyal ağ ikonlarına buradan ulaşabilirsiniz.

STEP 7

COPY adında yeni bir grup oluşturuyoruz ( CTRL + G ).

Bu alanda copyright bilgileri, sistem alt yapısı, kuruluş tarihi yer alıyor.

STEP 1 de oluşturduğumuz ana grubumuz SOL grubunu kapatıyoruz.

Bu adımla sol kısmımızı ( sidebar ) tamamlamış olduk. Hemen içerik tasarımımıza geçelim

STEP 8

ORTA adında yeni bir grup oluşturuyoruz ( CTRL + G )

Rectangle Aracıyla (U) 621×299 px boyutunda bir çizim yapıyoruz rengimiz beyaz. Bu katmanımızın adı ANA

Aynı şekilde Rectangle Aracıyla (U) 597×278 px boyutunda bir çizim yapıyoruz rengimiz gri . Bu katmanımızın adı RES, RES katmanını ANA katmanımız ile ortalayalım.

Manşetteki olmasını istediğimiz resmi çalışma alanına atıyoruz ve RES adlı katmana maskeliyoruz bunu attığımız resimi RES adlı katmanın üst kısmına ekleyerek resimimize sağ tıklayarak CREATE CLIPPING MASK diyerek oluşturduğumuz RES adlı katmana maskeliyoruz.

Rectangle aracı (U) ile 47×46 px boyutunda siyah kutucuk oluşturalım opacity değeri %65 Sağ okumuzu katmanımızın üstüne yapıştırıyoruz. Resimde görüldüğü gibi aynı işlemleri Sol okumuz içinde yapıyoruz.

Rectangle aracı (U) ile üst kısmda 403×46 px boyutunda siyah kutucuk oluşturalım opacity değer %70 bu kısma yazı başlığımız gelecek.

ORTA adındaki grubumuzu kapatıyoruz

STEP 9

KONU adında yeni bir grup oluşturuyoruz ( CTRL + G ).

Rectangle aracı (U) ile 621×383 px boyutunda beyaz kutucuk oluşturalım bu katmanımızın adı ANA.

Rounded Rectangle Aracı (U) ile 558x82 px boyutunda bir çizim yapalım bu katmanımızın adı RES bu katmanda konumuzun resmi bulunacak. Bu alanda olmasını istediğimiz resmi çalışma alanına atıyoruz ve RES adlı katmana maskeliyoruz bunu attığımız resimi RES adlı katmanın üst kısmına ekleyerek resimimize sağ tıklayarak CREATE CLIPPING MASK diyerek oluşturduğumuz RES adlı katmana maskeliyoruz.

resmimizin üstüne GÖLGE adında yeni bir layer oluşturuyoruz bu layerda gölge efektimizi vereceğiz. Gölgelendireceğimiz alanı seçiyoruz ve Gradient Aracımız ( G ) ile siyah renkte açık bir gölge atıyoruz ve resmimiz oluştu.

Resmimizin hemen sol tarafına tweet butonumuzu ekliyoruz

ve alt kısma, içeriğimizi giriyoruz.

içeriğin altına Rectangle aracı (U) ile 599×40 px boyutunda renk kodumuz (#d2d2d2) kutucuk oluşturalım bu katmanımızın adı ALT.

ALT adlı katmanımızın alanını seçiyoruz ( CTRL + SOL KLİK )

Renk kodumuz (#e0e0e0) gradient aracımız ile ( radial ) geçişlerimizi veriyoruz ve içine bilgileri giriyoruz.

Konu adlı grubumuzu kapatalım.

Konu alanımızda tamamlanmıştır. Şimdi Konu adlı grubumuzu alt alta iki defa kopyalıyoruz ve hemen sayfalamaya geçiyoruz.

STEP 10

SAYFA adında yeni bir grup oluşturalım.

Rectangle Aracı (U) ile 619×38 px boyutunda beyaz bir çizim yapalım. Bu katmanımızın adı ANA

Ana katmanımızın bulunduğu alanı seçiyoruz ( CTRL + SOL KLİK ) GRADIENT adında yeni bir layer oluşturuyoruz renk kodumuz (#dddddd) gradient aracı ile yukarıdan aşağıya geçişimizi veriyoruz. Sağ, sol ve üst kısımdan 1er px alan siliyoruz.

üzerine sayfalarımızı yazıyoruz ve blog tasarımımızı tamamlıyoruz.

BİTTİ

Sadece 10 stepte blog tasarımımızı yapmış bulunuyoruz dilerseniz kendinize göre eklemeler yaparak sayfaya renk katabilirsiniz. Tasarımın kaynak dosyalarını buradan indirebilirsiniz. Tasarımı istediğiniz yerde kullanma hakkına sahipsiniz.

Vakit ayırıp yorumlayan arkadaşlarada şimdiden çok teşekkür ederim başka bir eğitselde görüşmek dileğiyle :)