Haftanın Favorileri #4

enesates — Thu, 24 Jun 2010 13:35:32 +0000

Haftanın favorileri serisine pek fazla devam edemedik. Aslında not aldığım bir çok eğitsel ve arşivlik paylaşımlar var fakat bloguma yazmak için pek fazla vakit bulamıyorum. Bu haftanın favorileri şöyle.

Retro 3D Yazı Efekti ( Eğitsel )

Vibrant Stickers İkon Seti ( Depo )

Photoshop’ta bambu ağacı nasıl yapılır ? ( Eğitsel )

40 Temiz ve Minimal Wordpress Temaları ( Derleme )

Zarif 3D Yazı Efekti ( Eğitsel )

Bloggerlar için 50 Sosyal Ağ İkon Seti ( Depo )

3D Su Yazı Efekti ( Eğitsel )

Ferah bir müzik sitesi yapalım ( Eğitsel )

Hosting Web Arayüzü Tasarlıyalım. ( Eğitsel )

Kişisel Wordpress Blog Tasarımı Nasıl Yapılır ?

enesates — Fri, 30 Apr 2010 08:50:52 +0000

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 :)

Harika Pattern ve Kaplama Çalışmaları

enesates — Mon, 26 Apr 2010 10:37:18 +0000

İş yoğunluğum yüzünden uzun bir süredir bloguma yazı yazamıyorum bunun için sizden özür dilerim en kısa sürede bunu telafi edeceğim. Photoshopta pattern ve kaplamalarla çalışmanızı güçlendirmek için harika eğitseller buldum ve burada bu eğitselleri paylaşacağım.

1- 10 Adımda Retro poster hazırlayın !

2- Kaplamaları nasıl uygularız ?

3- Retro Poster tasarlayın.

4- Kaplamalarla header tasarımı yapmak için buradan.

5- Photoshopta boyama eğitseli

6- Fantastik ışık efekti

7- Web siteniz için etiket hazırlayın

35 Harika Kullanıcı Arayüz Tasarım Eğitseli

enesates — Thu, 08 Apr 2010 01:47:06 +0000

Pro Blog Design harika derlemesi. 35 harika web arayüz tasarım eğitseli ( Görsel ) bu değerliği kaynağı saklamakta fayda var. Derlemeye buradan ulaşabilirsiniz.

Haftanın Favorileri

enesates — Mon, 18 Jan 2010 04:52:05 +0000

Haftanın favorileri yazısına hoş geldiniz :) her hafta vakit bulduğum sürece karşılaştığım iyi eğitselleri, fontları, iconları, brushları ve ilgimi çeken tasarım ile alakalı bir çok linki bu köşede paylaşacağım. Hemen bu haftanın favorilerine geçelim :). Unutmadan yakın zamanda bulduğum ilk fırsatta sizlere modern bir web tasarımı nasıl yapılır ? başlıklı bir ders hazırlayacağım, onuda buradan söylemiş olalım takip edin ;).

01 – Retro Poster Tasarımı ( Eğitsel )

02 – Çizgi Roman Fotoğraf Efekti ( Eğitsel )

03 – Retro Çizgi Roman Fotoğraf Efekti ( Eğitsel )

04 – Photoshop’ta sihirbaz şapkası yapalım ! ( Eğitsel )

05 – Fotoğrafımızı süsleyelim. ( Eğitsel )

06 – Beraber icon yapalım. ( Eğitsel )

07 – 20 HQ ücretsiz fontlar, hemen indirelim ! ( Depo )

08 – Avatar Foto manüpilasyon buradan.. ( Eğitsel )

09 – Harika icon seti quartz ! ( Depo )

10 – Dramatik yazı efekti ( Eğitsel )

Enes Ateş - Tasarım kutusu » photoshop eğitsel