Arkadaşlar mehaba bu aralar cok yoğun talep vardı bu konuda elime boyle bir fırsat gecmişken hemen herkese yardımcı olsun diye anlatmaya başlayacağım. İlk once 900 px lik bir calışma alanı acıyoruz biz 476 px kullanacağımızdan dolayı sizin etrafına verdiğiniz değer cok onemli değil.

İlk once sitemizi koyacağımız yerleri belirlemek icin kenarlardan 212 pixellere cetvel cizgisi koyuyoruz (ctrl+r yapıp sağ taraftan cekip bırakın). Boylelikle ortada 476 pixellik bir alan cıkıyor. Bizim sitemiz oraya gelicek.


Evet arkadaşlar şimdi sıra arkaplanı renklendirmeye geldi. Background layerına cift tıklayarak kilidi acıyoruz ve layer style bolmunden gardient overlay seceneğini secip renk gecişini #f4f2f2 den #d3d1d1 ‘ e gecicek şekilde ayarlıyoruz resimde goruşduğu gibi aynı olacak:


Evet şimdi noktalı bir desen hazırlayacağız. deseni buradan indiriyoruz indirdikten sonra yeni layer acıyoruz icini beyaza boyuyoruz pattern overlayden kare olan patternimizi seciyoruz ok deyip cıkıyoruz ve calışmamız bunun gibi gozukuyor:


layer modunu soft light yapıyoruz opacity yi yani saydamlığı %30 yapıyoruz.


Evet şimdi arka plan tamamlandı ve cok cekici oldu tam istediğimiz gibi.. Evet şimdi sitenin asıl bolumunu hazırlamaya başlayacağız cetvelcizgileri arasına beyaz sayfamızı Shape Tool aracılığıyla ciziyoruz icini beyaz ve yuksekliğini 615 pixel yapmayı lutfen unutmayalım calışmanı şuan boyleyse doğru gidiyorsunuz:


Arkadaşlar şimdi 5 pixel icine tekrar bir dikdortgen ciziyoruz. (renk onemli değil)


Fill’i 0 yapıyoruz Dikkatli olmanız gereken bir nokta : Opacity değil fill’i 0 yapıyoruz.


Ve layer styles menusunden stroke ‘u secip 1 pixel kalınlıkta gri renkte (#e7e6e6) stroke uyguluyoruz.


Evet şimdi birazdaha şekil olsun diye sayfamızın altına golge uygulayacağız bunun icin 40 px kalınlığında, 0 hardness olarak resimdeki gibi yapıyoruz:


Aşağadaki gibi Ortadan başlayarak sayfanın sağına doğru bir fırca darbesi oluşturuyoruz.


Ve şimdi biraz dondurmemiz gerekicek Ctrl + T yapıyoruz ve azcık donduruyoruz. Resimdeki gibi:


Duplicate layer (Ctrl+J) yapıyoruz ve Transform (Ctrl+T) yapıyoruz sağ tuş flip hortinizal yapıyoruz.


Sonradan iki layerı ctrl tuşuna basarak seciyoruz sağ tuş yapıyoruz layerların uzerine ve marge layers diyoruz beyaz sayfamızın altına atıyoruz.


Ve opacity’i boyle gorunene kadar duşuruyoruz sizin isteminize bağlı..


Arkadaşlar şimdi logoyu tasarlıyacağız logomuzu secerken kurumsallık ve kişisellik arasındaki ince cizgiyi cok iyi tutturmamız lazım. Bunun icin sade bir font fakat bunun yanı sırada iyi bir hava vermesi lazım. Sadece yazı kullanıcaz. Bunun icin bu fontu kullanacağım. Fontu indirdikten sonra yazımızı yazalım. Yazı rengini #777676 yapmayı unutmayalım.


Ve birazda şekil vermek lazım dimi? Ben altına beyaz bir ışık vurmayı uygun gordum. Layer style > Drop Shadow yapınız ve aşağıdakileri uygulayınız.


Ve boyle bir logo cıkması lazım karşımıza..


Arada biraz boşluk bırakarak sloganımızıda yazmalıyız fontu verdana secerek rengimizi yine #777676 yapıyoruz ve yazmaya başlıyoruz sonuc olarak boyle bir calışma cıkıyor.


Evet arkadaşlar sitemiz yavaş yavaş şekil almaya başlıyor bunu sizinde farkettiğinize eminim. Şimdi menumuzu oluşturuyoruz menumuzde standart olarak 4 menu vardır. Anasayfanız, Hakkınızda sayfanız, Portfoyunuzu koymak icin referanslar sayfanız ve tabiki iletişim sayfanız Bunu yazarken yine Verdana fontunu kullandım ve ilk butonu yeşil yaptım diğerlerini renk butunluğu olması acısından yine yeşil yaptım. Şekil olarak boyle birşey:


Her menunun birde iconu olması lazım değil mi? İconlar icin buraya tıklayarak indirin Sonra iconları yerleştirip atına 1 px lik cizgi koyuyoruz. rengi yine gri


Evet şimdi başlık icin ben Bebas fontunu kullandım ve yazılarımı yazdım aşağıdaki gibi. (bebas fontunu buradan indirin)
http://www.weblebi.net/wp-content/up...2011/03/20.jpg
Waow yuzduk yuzduk kuyruğa geldik ve en can alıcı nokta ve muşterinizin veya arkadaşlarınızın en dikkat ettiği noktadır burası cok onemli arkadaşlar buraya fotorafınızı koyacağız benim sectiğim adam cuk oturmuş. Sizde bunungibi bi fotoğraf yapın. Sakın emoca, gozluklu fotoğraflarınızı koymayın. Birazcık ingilizceniz varsa burayı ziyaret etmenizi oneririm.
http://www.weblebi.net/wp-content/up...2011/03/21.jpg
Altınada kucuk bir acıklama attıkmıdı tam olur.
http://www.weblebi.net/wp-content/up...2011/03/22.jpg
Evet tamamdır şimdi altınada sosyal ağ iconlarıda ekleyelim ve sol alta ismimizi yazalım.
http://www.weblebi.net/wp-content/up...2011/03/23.jpg
Evet inanabiliyormusunuz sonunda bitti artık sizinde bir VCard’ınız oldu! Hadi bir nasıl olmuş goz gezdirelim.
Resim: http://www.weblebi.net/wp-content/up...011/03/241.jpg
Artık sonuna geldik isterseniz javascript uygulamalarıyla siteyi dahada mukemmelleştirebilirsiniz şuan sitemiz bence super oldu! Sizcede oyle değilmi?

PSD Dosyasını indir
Anlatım tamamen bana aittir.
Daha fazlası ve aslı icin sitemizi ziyaret ediniz. www.weblebi.net

Birde 25 adet grafik sınırlaması sacmalık goruntuyu bozuyor.​