koddostu facebook koddostu google+ koddostu twitter
Paylaş Share

Talha İşbitirici

Photoshopta Kişisel Web Sayfası

Photoshopta Kişisel Web Sayfası

   Evet arkadaşlar görselimizde sayfamız gayet güzel gözüküyor. Şimdi bu sayfayı adım adım yapalım. Çoğunuzun işine yarayacağını düşündüğüm kişisel web sayfası.

   Yeni çalışma sayfamızı oluşturalım. File>New diyelim, width 770px - height 750px ve çözünürlüğümüzü 72 dpi olarak ayarlayıp OK diyelim. Layers penceresinden yeni bir katman oluşturalım. Araç kutusunda Rectangle Tool (U) aracını seçerek çizim üzerinde kenarlarda boşluk kalacak çekilde çizelim.
   Bu katmanın özelliklerine girelim (sağ tuş Blending Options). Aşağıdaki ayarları yapalım. Ben sayfada gri tonlarını kullanacağım.
   Ana görselimizi koyacağımız karemizi oluşturalım. Araç kutusundan foreground rengimizi beyaz yapalım ve aşağı resimdeki adımları uygulayın.
   Tekrar blending options u açalım ve aşağıdaki ayarları yapalım.
   Şimdi site sahibinin fotoğrafını ekleyelim. Fotoğrafı beyaz çerçevelere oturacak şekilde ayarlayın. Ctrl tuşuna basılı tutarak beyaz çerçeve katmanına tıklayın fotoğrafın alttaki gibi seçildiğini göreceksiniz. Delete tuşuna basarak çerçevenin dışında kalan fotoğraf parçalarını silin.
   Fotoğrafımıza filitre ekleyelim. Siyah beyaz fotoğraf olduğu için çok karanlık düşmesin. Aşağıdaki resimde adımlandı.
   Şimdi bir fırça paketi indirelim = Fırça Paketi Bu dosyayı aktif etmek için zipin içinden çıkarın, photoshopta  Brush Tool(B) yi seçin üst seçeneklerine gelin fırça seçenekleri penceresini açın. Pencerenin sağında yer alan ileri ok tuşunu tıklayın ve load brush diyin. açılan pencereden fırça paketimizi seçelim ve yükleyelim.
   Yeni bir katman oluşturalım. Fırça rengimizi beyaz, opacity değerini %10 yapıp istediğimiz şekilleri istediğimiz yere uygulayalım.
   Bittikten sonra yeni bir katman daha oluşturalım ve bu fırçanın opacity sini %20 yapıp daha fazla süsleyelim. Aşağıdaki resimde açık renkli yuvarlaklar %10 koyu renkliler %20 opacity değerleri ila yapılmıştır.
 
   Siz istediğiniz fırça tiplerini kullanarak süsleme yapabilirsiniz. Şimdi site başlığımızı yazalım. Benim yazacağım 2 kelimeden oluştuğu için ben 2 ayrı katmanda yazıyorum. Ve birinci yani "Fatih" yazan katmanımı aşağıdaki gibi blending optionunu düzenliyorum.
 
   Şimdi "Demirbaş" yazan katmanı seçiyorum ve sadece outher glow ayarını diğeriyle aynı yapıp OK liyorum. Şimdi butonlara geçeceğiz. 2 tip buton olacak birisi o anda gösterilen sayfa ve diğer sayfalara geçiş butonları. Rectangle Tool ile siteme uygun bir dikdörtgen çiziyorum. Bu katmanı çoğaltarak 5 tane yapıyorum ve resmin altına döşüyorum.
   Soldan birinci butonun o anda açık olan butonum olsun. Şimdi bu butonun blending options ına girelim ve aşağıdaki ayarları yapalım.

   Şimdi diğer butonlara uygulayacağınız ayarlar aşağıdaki gibidir.


   Bu ayarları isterseniz tekbir butona yapıp o butonu çoğaltırsanız daha kolay olur.
   İsterseniz sarı renkteki butonun üzerine kendi uzunluğunda 4px yüksekliğinde beyaz bir dikdörtgen çizebilirsiniz.
 
   Şimdi gelelim butonların yazısını yazmaya. Ekleyeceğiniz sayfaya göre sayfa isimlerini yazınız. Yazı tipi olarak Tahoma ve 14pt olarak ayarlayıp yazılarımı yazıyorum. Ana sayfayı beyaz diğer yazıları açık gri yapıyorum. Yazılarımı yazdıktan sonra Layers penceresinden ait oldukları butonlarla birleştiriyorum ve fırça ile başlarına küçük ok çiziyorum.
 
   Fotoğrafın olduğu küçük kutucuğun altına #564f47 rengi ile rectangle tool aracını kullanarak bir dikdörtgen çiziyorum. İçinede #b9b9b9 rengi ile Pencil tool aracını kullanarak ana sayfa,site haritası,e-mail ve Rss ikonları yapıyorum.
   Yeni bir katman oluşturun. foreground rengimizi #2a251f yapın. Ctrl tuşu basılı iken fotoğrafımızın olduğu katmanın küçük resmine tıklayın. Çalışma üzerinde seçimin çıktığını göreceksiniz. Bu dikdörtgeni Shift tuşuna basılı tutarak aşağıya doğru kaydırın ve araç kutusundan Paint Bucket Tool aracını seçip içini boyayın.
 
 
   Sıralama olarak da önceden yaptığımız yuvarlak katmanının altına sürükleyin. Şimdi bu katmanın Blending Options una girelim ve aşağıdaki ayarları yapalım.
   Yeni bir katman açalım. Foregound rengimizi #39332d yapalım. Rectangle Tool aracını seçelim ve son çalışmalar başlığımız için alt resimde gözükdüğü gibi bir dikdörtgen çizelim.
   Yeni bir katman daha açalım. Foreground rengimizi #1f1e1d yapalım. Ve alt resimde gözüktüğü gibi 2 kare daha çizelim.
   Ana başlığımızda kullandığımız yazı tipini kullanarak bu çizdiğimiz küçük dikdörtgenlerin içini aynı stilde ama puntoları 18pt olarak dolduralım. Yazıların stilleri ve yerleri aşağıdaki gibi gözükecektir. Dikkat Outher glow yapmayın.
   Birde 20pt ile hoş geldiniz yazısı yazalım. Aşağıda gözüktüğü gibi görsel çerçeveleri ekleyelim.
   Bu çerçevelerin Blending Options una girerek aşağıdaki ayarlamaları yapalım.
   Arkadaşlar bu karelere göre sitenin içeriğini taşıyacak görselleri yerleştiriniz. Son çalışmalar penceresine bir kaydırma çubuğu çizelim. Yeni bir çalışma sayfası açın Width 1px - Height 2px, foreground rengini #363331 yapın. araç kutusundan Pencil Tool u seçin ve alt resimdeki gibi üst noktayı karalayın. Dikkat arkaplan transparan olması lazım.
 
   Bu çalışmayı pattern olarak kaydedeceğiz. bunun için Edit>Define Pattern e tıklayıp isim veriyoruz ve OK liyoruz. Şimdi ana çalışmamıza dönelim. Yeni bir katman oluşturalım. Foreground rengimizi #38322c yapalım. Line Tool aracını seçelim ve kaydırma çubuğunun rayını yukarıdan aşağıya çizelim. Shift tuşu basılı çekerseniz dik olur. Şimdi bu çizginin blending options una girelim ve aşağıdaki ayarları yapalım.
   Şimdi foreground renngimizi #67584a yapalım. yeni bir katman açalım ve rectangle tool umuzu seçip kaydırma çubuğu için bir dikdörtgen çizelim.
   Şimdi son olarak yazılarımızı ekleyelim. Başlılar için beyaz, içerik için #5e574f ve linkler için ise altı çizili #f6a824 renklerini kullanıp içeriğimizi 12pt ile yazalım.
   30 adımda kolayca kişisel web sitemizin ana sayfasını oluşturduk. Buradaki kriterlere uyarak diğer sayfaları da yapabilirsiniz. Photoshopta kesip de yapılandırma ve Dreamveawer programında düzenleme işinide sonraki derslerimizde göreceğiz.
   Sayfamızın bitmiş hali en üstteki görseldir. Tıklayıp büyüterek inceleyiniz. Herkese kolay gelsin.


Google PageRank Checker Powered by  MyPagerank.Net
talhaisbitirici.tr.gg
Tüm hakları saklıdır.Copyright © 2012 - 2013
Çizen: Muhammed Talha İŞBİTİRİCİ , HTML&CSS Döken: Muhammed Talha İŞBİTİRİCİ
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol