Enes Ateş - Tasarım kutusu » Web Tasarım

Web Tasarımında Harika Kaplama Uygulamaları

enesates — Mon, 07 Jun 2010 03:46:25 +0000

Six Revisions bizler için harika bir derleme hazırlamış. Kaplamalarla web tasarımı yapmadan önce bu derlemeyi incelemelisiniz.

Portfolio Tasarımı

enesates — Wed, 02 Jun 2010 04:36:41 +0000

Uzun zamandır bloguma yazı giremiyorum, bunun sebebi hem iş hemde gezi için bir haftalığına İstanbul’a gitmem. Bunun için beni takip edenlerden özür diliyorum. Yakın zamanda hem web tasarım elementlerine yeni bir seri geliyor, hemde hazırladığım eğitseli tamamlamış oluyorum o yüzden kendimi size affettireceğim. Portfolio tasarımımı hazırladığım şu zamanlarda bana yardımcı olan bir kaç yazıyı ve derlemeyi sizlerle paylaşacağım. Favorilerinizde bulunsun ileride kesinlikle lazım olacaktır ;)

10 Karakterisitk Portfolio Tasarımı

101 Harika Portfolio Tasarımı

50 Harika Tasarımcı Sitesi

24 Harika Portfolio Tasarımı

30+ Örnek Giriş ve Üye Kayıt Formu

enesates — Tue, 18 May 2010 16:27:58 +0000

Giriş ve Üye kayıt formları tasarımlarınızda önem vermeniz gereken alanlardan biridir. Youthedesigner bizler için 30 örnek alınacak giriş ve kayıt formunu derlemiş buradan inceleyebilirsiniz.

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

Blog Tasarımında 7 Gerekli Element

enesates — Tue, 27 Apr 2010 07:04:47 +0000

Pro Blog Design bizler için harika bir döküman hazırlamış kesinlikle incelemeniz gereken konu blog sahibi ve tasarımı yapanların özellikle işlerine yarıyacak. Blog tasarımlarında 7 gerekli elementi detaylarıyla ele almışlar. Buyrun buradan incleyebilirsiniz.

İlhamlık Temiz ve Minimal Web Tasarımları

enesates — Mon, 26 Apr 2010 10:48:25 +0000

Designs Hard’ın derlediği ilhamlık temiz ve minimal web tasarımlarını kesinlikle incelemelisiniz.

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.

25 Harika Web Tasarım Galerileri

enesates — Sat, 27 Feb 2010 12:17:29 +0000

Bu haftaki derlemede harika web tasarım galeri sitelerini sizlerle paylacağım. İlham almak istediğinizde sizlere lazım olacak web tasarım galeri listesine hemen başlayalım :)

#1 Best Web Gallery

#2 We Love Wp

#3 Web Creme

#4 Style Cruch

#5 Style Boost

#6 Site Inspire

#7 Rgb Garden

#8 Pattern Tap

#9 Oriental Gallery

#10 One Page Love

#11 Mabucplus

#12 FWA

#13 Egort

#14 Dope Awards

#15 Design Licks

#16 Css Tux

#17 Css Remix

#18 Css Mania

#19 Css Fresh Blend

#20 Css Elite

#21 Css Depot

#22 Css Beauty

#23 Creamy Css

#24 Cool Home Pages

#25 CLD Web Gallery

Mavi temalı web siteleri

enesates — Wed, 17 Feb 2010 07:43:29 +0000

Design Your Way ilhamlık mavi temalı web sitelerini bizler için derlemiş. Mavi temalı web siteleri burada.

Haftanın Favorileri #2

enesates — Mon, 01 Feb 2010 18:55:26 +0000

Merhaba, bu haftanın favorileri genel olarak font, eğitsel ve ilhamlık tasarım ağırlıklı. Fazla uzatmadan bu haftanın favorilerini sizlere sunuyorum.

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

02 – 40 Harika Comic Font ( Depo )

03 – 60 Harika Grunge Font ( Depo )

04 – 21 Harika Ücretsiz Font ( Depo )

05 – Harika Brush Fontlar Burada ( Depo )

06 – 50 Harika Blog Tasarımı Part 1 buradan ( İlhamlık )

07 – Kırmızı Banner Yapımı ( Eğitsel )

08 – Sıradışı Wordpress Portfolio ve Photoblog Tasarımı ( İlhamlık )

09 – Çocuklar için tasarlanan web siteleri ( İlhamlık )

10 – 50 Harika Sulu boya ( Eğitsel )

11 – Havalı Media Player Yapalım ( Eğitsel )