Arkadaşlar mehaba bu aralar çok yoğun talep vardı bu konuda elime böyle bir fırsat geçmişken hemen herkese yardımcı olsun diye anlatmaya başlayacağım. İlk önce 900 px lik bir çalışma alanı açıyoruz biz 476 px kullanacağımızdan dolayı sizin etrafına verdiğiniz değer çok önemli değil.
İlk önce sitemizi koyacağımız yerleri belirlemek için kenarlardan 212 pixellere cetvel çizgisi koyuyoruz (ctrl+r yapıp sağ taraftan çekip bırakın). Böylelikle ortada 476 pixellik bir alan çıkıyor. Bizim sitemiz oraya gelicek.
Evet arkadaşlar şimdi sıra arkaplanı renklendirmeye geldi. Background layerına çift tıklayarak kilidi açıyoruz ve layer style bölmünden gardient overlay seçeneğini seçip renk geçişini #f4f2f2 den #d3d1d1 e geçicek şekilde ayarlıyoruz resimde görüşdüğü gibi aynı olacak:
Evet şimdi noktalı bir desen hazırlayacağız. deseni buradan indiriyoruz indirdikten sonra yeni layer açıyoruz içini beyaza boyuyoruz pattern overlayden kare olan patternimizi seçiyoruz ok deyip çıkıyoruz ve çalışmamız bunun gibi gözüküyor:
layer modunu soft light yapıyoruz opacity yi yani saydamlığı %30 yapıyoruz.
Evet şimdi arka plan tamamlandı ve çok çekici oldu tam istediğimiz gibi.. Evet şimdi sitenin asıl bölümünü hazırlamaya başlayacağız cetvelçizgileri arasına beyaz sayfamızı Shape Tool aracılığıyla çiziyoruz içini beyaz ve yüksekliğini 615 pixel yapmayı lütfen unutmayalım çalışmanı şuan böyleyse doğru gidiyorsunuz:
Arkadaşlar şimdi 5 pixel içine tekrar bir dikdörtgen çiziyoruz. (renk önemli değil)
Filli 0 yapıyoruz Dikkatli olmanız gereken bir nokta : Opacity değil filli 0 yapıyoruz.
Ve layer styles menüsünden stroke u seçip 1 pixel kalınlıkta gri renkte (#e7e6e6) stroke uyguluyoruz.
Evet şimdi birazdaha şekil olsun diye sayfamızın altına gölge uygulayacağız bunun için 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ırça darbesi oluşturuyoruz.
Ve şimdi biraz döndürmemiz gerekicek Ctrl + T yapıyoruz ve azcık döndürüyoruz. 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 seçiyoruz sağ tuş yapıyoruz layerların üzerine ve marge layers diyoruz beyaz sayfamızın altına atıyoruz.
Ve opacityi böyle görünene kadar düşürüyoruz sizin isteminize bağlı..
Arkadaşlar şimdi logoyu tasarlıyacağız logomuzu seçerken kurumsallık ve kişisellik arasındaki ince çizgiyi çok iyi tutturmamız lazım. Bunun için sade bir font fakat bunun yanı sırada iyi bir hava vermesi lazım. Sadece yazı kullanıcaz. Bunun için 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 gördüm. Layer style > Drop Shadow yapınız ve aşağıdakileri uygulayınız.
Ve böyle bir logo çıkması lazım karşımıza..
Arada biraz boşluk bırakarak sloganımızıda yazmalıyız fontu verdana seçerek rengimizi yine #777676 yapıyoruz ve yazmaya başlıyoruz sonuç olarak böyle bir çalışma çıkıyor.
Evet arkadaşlar sitemiz yavaş yavaş şekil almaya başlıyor bunu sizinde farkettiğinize eminim. Şimdi menümüzü oluşturuyoruz menümüzde standart olarak 4 menü vardır. Anasayfanız, Hakkınızda sayfanız, Portföyünüzü koymak için 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 bütünlüğü olması açısından yine yeşil yaptım. Şekil olarak böyle birşey:
Her menünün birde iconu olması lazım değil mi? İconlar için buraya tıklayarak indirin Sonra iconları yerleştirip atına 1 px lik çizgi koyuyoruz. rengi yine gri
Evet şimdi başlık için 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/uploads/2011/03/20.jpg
Waow yüzdük yüzdük kuyruğa geldik ve en can alıcı nokta ve müşterinizin veya arkadaşlarınızın en dikkat ettiği noktadır burası çok önemli arkadaşlar buraya fotorafınızı koyacağız benim seçtiğim adam cuk oturmuş. Sizde bunungibi bi fotoğraf yapın. Sakın emoca, gözlüklü fotoğraflarınızı koymayın. Birazcık ingilizceniz varsa burayı ziyaret etmenizi öneririm.
http://www.weblebi.net/wp-content/uploads/2011/03/21.jpg
Altınada küçük bir açıklama attıkmıdı tam olur.
http://www.weblebi.net/wp-content/uploads/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/uploads/2011/03/23.jpg
Evet inanabiliyormusunuz sonunda bitti artık sizinde bir VCardınız oldu! Hadi bir nasıl olmuş göz gezdirelim.
Resim: http://www.weblebi.net/wp-content/uploads/2011/03/241.jpg
Artık sonuna geldik isterseniz javascript uygulamalarıyla siteyi dahada mükemmelleştirebilirsiniz şuan sitemiz bence süper oldu! Sizcede öyle değilmi?
PSD Dosyasını indir
İlk önce sitemizi koyacağımız yerleri belirlemek için kenarlardan 212 pixellere cetvel çizgisi koyuyoruz (ctrl+r yapıp sağ taraftan çekip bırakın). Böylelikle ortada 476 pixellik bir alan çıkıyor. Bizim sitemiz oraya gelicek.
Evet arkadaşlar şimdi sıra arkaplanı renklendirmeye geldi. Background layerına çift tıklayarak kilidi açıyoruz ve layer style bölmünden gardient overlay seçeneğini seçip renk geçişini #f4f2f2 den #d3d1d1 e geçicek şekilde ayarlıyoruz resimde görüşdüğü gibi aynı olacak:
Evet şimdi noktalı bir desen hazırlayacağız. deseni buradan indiriyoruz indirdikten sonra yeni layer açıyoruz içini beyaza boyuyoruz pattern overlayden kare olan patternimizi seçiyoruz ok deyip çıkıyoruz ve çalışmamız bunun gibi gözüküyor:
layer modunu soft light yapıyoruz opacity yi yani saydamlığı %30 yapıyoruz.
Evet şimdi arka plan tamamlandı ve çok çekici oldu tam istediğimiz gibi.. Evet şimdi sitenin asıl bölümünü hazırlamaya başlayacağız cetvelçizgileri arasına beyaz sayfamızı Shape Tool aracılığıyla çiziyoruz içini beyaz ve yüksekliğini 615 pixel yapmayı lütfen unutmayalım çalışmanı şuan böyleyse doğru gidiyorsunuz:
Arkadaşlar şimdi 5 pixel içine tekrar bir dikdörtgen çiziyoruz. (renk önemli değil)
Filli 0 yapıyoruz Dikkatli olmanız gereken bir nokta : Opacity değil filli 0 yapıyoruz.
Ve layer styles menüsünden stroke u seçip 1 pixel kalınlıkta gri renkte (#e7e6e6) stroke uyguluyoruz.
Evet şimdi birazdaha şekil olsun diye sayfamızın altına gölge uygulayacağız bunun için 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ırça darbesi oluşturuyoruz.
Ve şimdi biraz döndürmemiz gerekicek Ctrl + T yapıyoruz ve azcık döndürüyoruz. 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 seçiyoruz sağ tuş yapıyoruz layerların üzerine ve marge layers diyoruz beyaz sayfamızın altına atıyoruz.
Ve opacityi böyle görünene kadar düşürüyoruz sizin isteminize bağlı..
Arkadaşlar şimdi logoyu tasarlıyacağız logomuzu seçerken kurumsallık ve kişisellik arasındaki ince çizgiyi çok iyi tutturmamız lazım. Bunun için sade bir font fakat bunun yanı sırada iyi bir hava vermesi lazım. Sadece yazı kullanıcaz. Bunun için 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 gördüm. Layer style > Drop Shadow yapınız ve aşağıdakileri uygulayınız.
Ve böyle bir logo çıkması lazım karşımıza..
Arada biraz boşluk bırakarak sloganımızıda yazmalıyız fontu verdana seçerek rengimizi yine #777676 yapıyoruz ve yazmaya başlıyoruz sonuç olarak böyle bir çalışma çıkıyor.
Evet arkadaşlar sitemiz yavaş yavaş şekil almaya başlıyor bunu sizinde farkettiğinize eminim. Şimdi menümüzü oluşturuyoruz menümüzde standart olarak 4 menü vardır. Anasayfanız, Hakkınızda sayfanız, Portföyünüzü koymak için 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 bütünlüğü olması açısından yine yeşil yaptım. Şekil olarak böyle birşey:
Her menünün birde iconu olması lazım değil mi?
İconlar için buraya tıklayarak indirin Sonra iconları yerleştirip atına 1 px lik çizgi koyuyoruz. rengi yine gri
Evet şimdi başlık için 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/uploads/2011/03/20.jpg
Waow yüzdük yüzdük kuyruğa geldik ve en can alıcı nokta ve müşterinizin veya arkadaşlarınızın en dikkat ettiği noktadır burası çok önemli arkadaşlar buraya fotorafınızı koyacağız benim seçtiğim adam cuk oturmuş. Sizde bunungibi bi fotoğraf yapın. Sakın emoca, gözlüklü fotoğraflarınızı koymayın. Birazcık ingilizceniz varsa burayı ziyaret etmenizi öneririm.
http://www.weblebi.net/wp-content/uploads/2011/03/21.jpg
Altınada küçük bir açıklama attıkmıdı tam olur.
http://www.weblebi.net/wp-content/uploads/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/uploads/2011/03/23.jpg
Evet inanabiliyormusunuz sonunda bitti artık sizinde bir VCardınız oldu! Hadi bir nasıl olmuş göz gezdirelim.
Resim: http://www.weblebi.net/wp-content/uploads/2011/03/241.jpg
Artık sonuna geldik isterseniz javascript uygulamalarıyla siteyi dahada mükemmelleştirebilirsiniz şuan sitemiz bence süper oldu! Sizcede öyle değilmi?
PSD Dosyasını indir
Anlatım tamamen bana aittir.
Daha fazlası ve aslı için sitemizi ziyaret ediniz. www.weblebi.net
Birde 25 adet grafik sınırlaması saçmalık görüntüyü bozuyor.
Daha fazlası ve aslı için sitemizi ziyaret ediniz. www.weblebi.net
Birde 25 adet grafik sınırlaması saçmalık görüntüyü bozuyor.
