Photoshop ta Web siteler İçin İletişim Navbarı Photoshop ta Web siteler İçin İletişim Navbarı

13 Nis 2009, 13:31 Etiketler: , , , , ,

Bugünkü Photoshop dersimizde web siteleri için iletişim navbarı yapmayı öğreneceğiz.

25 Photoshop ta Web siteler İçin İletişim Navbarı

Öncelikle Photoshopta 500*500 boyutlarında yeni bir çalışma sayfası açıyoruz ve Rounded Ractangle Tool ile bir kare çiziyoruz ardından  Add Anchor Point tool aracını seçili hale getiriyoruz.

110 Photoshop ta Web siteler İçin İletişim Navbarı

Sonra karemiz seçili iken keremizin dört kanarınada Add Anchor Point Tool aracı ile kenarların tam ortasına gelecek şekilde birer defa tıklıyoruz bakınız aşağıdaki gibi.

23 Photoshop ta Web siteler İçin İletişim Navbarı

Bu işlemi bitirdikten sonra Direct Selection Tool aracını seçiyoruz.

33 Photoshop ta Web siteler İçin İletişim Navbarı

Şimdi karemizin kenarlarına tıklayarak oluşturduğumuz noktalardan Direct Selection Tool  ile tutarak çok hafif bir şekilde dışarı doğru çekiyoruz aynen aşağıdaki resimde olduğu gibi.

41 Photoshop ta Web siteler İçin İletişim Navbarı

Ardından karemizin olduğu layer ı sağ tıklayıp Blending Options a giriyoruz ve aşağıdaki resimdeki ayarları yapıyoruz.

61 Photoshop ta Web siteler İçin İletişim Navbarı
Outer Glow ayarını yaptıktan sonra Inner Glow a tıklıyoruz ve aşağıdaki resimde olduğu gibi ayarlıyoruz.

73 Photoshop ta Web siteler İçin İletişim Navbarı

Burdaki ayarımızıda yaptıktan sonra Gradient Overley ayarlarını yapıyoruz aşağıdaki resime bakınız.

82 Photoshop ta Web siteler İçin İletişim Navbarı

Buradaki ayarımızıda yaptıktan sonra son olarak Drop Shadow uyguluyoruz

aşağıdaki resime bakınız.

92 Photoshop ta Web siteler İçin İletişim Navbarı
Bu işlemden sonra Ok a basıp kaydediyoruz. Şimdi karemizin olduğu layer in üzerine sağ tıklayıp Duplicate Layer a tıklayarak karemizi kopyalıyoruz, ve Ctrl+T ye basıp Free Transform u etkinleştiriyoruz ve karemizin köşesinden tutup aynı anda Shift tuşuna basılı tutarak çok az karemizi küçültüyoruz aşağıdaki resime bakınız.

101 Photoshop ta Web siteler İçin İletişim Navbarı

Üstteki kare alttaki kareden küçük olacak. Şimdi üstteki karenin olduğu layer a sağ tıklayıp Blending Options a giriyoruz ve Gradient Overley uyguluyoruz aşağıdaki resime bakınız.

111 Photoshop ta Web siteler İçin İletişim Navbarı

Gradient Overley ayarlarını yaptıktan sonra Stroke ye tıklıyoruz ve ayarlarını aşağıdaki resime göre yapıyoruz.

121 Photoshop ta Web siteler İçin İletişim Navbarı

Şimdi Pen Tool aracını seçiyoruz.

131 Photoshop ta Web siteler İçin İletişim Navbarı

Ve resimdeki gibi bir şekil çiziyoruz.

142 Photoshop ta Web siteler İçin İletişim Navbarı

Şimdi yeni bir layer oluşturuyoruz ve layer penceresinin sağ tarafında olan Paths sekmesine tıklıyoruz (eğer sizde paths görünmüyor ise araç çubuğundan  Window>Paths a tıklayarak Pahts sekmesini etkin hale getirin.)

Paths penceresine girdikten sonra çizdiğimiz şekilin olduğu yeri sağ tıklıyıp Make selection a tıklıyoruz  ve tekrar layer penceresine gidiyoruz son açtığımız layer seçili iken Tools penceresinden Gradient Tool u seçiyoruz aşağıdaki gibi.

Gradient Tool u seçtikten sonra layer a sağ tıklayıp Blending Options a giriyoruz Gradient Overley sonrada Gradient Editor e tıklıyoruz ve Presets alanından Freground to Transparent e tıklıyoruz aşağıdaki resime bakınız.

152 Photoshop ta Web siteler İçin İletişim Navbarı

Gradient Tool aracımızla seçili olan alanın sol üst köşesinden sağ alt köşesine doğru basılı tutarak karemizin ortasına kadar çekiyoruz aşağıdaki resimdeki gidi olmalı.

161 Photoshop ta Web siteler İçin İletişim Navbarı

Bu işlemide bitirdikten sonra Custom Shape Tool aracını seçiyoruz.

171 Photoshop ta Web siteler İçin İletişim Navbarı

Sonra çalıma alanımızın herhangi bir yerine sağ tıklıyoruz çıkan pencereden mektup şeklini seçiyoruz.

181 Photoshop ta Web siteler İçin İletişim Navbarı

Ve karemizin içine bir mektup oluşturuyoruz oluşturduğumuz mektubu Ctrl+T  Free Transform ile sağ üst köşesinden tutup aşağıya doğru çeviriyoruz. Bu işlemide Bitirdikten sonra Rounded Rectangle Tool aracı ile bir dikdörtgen çiziyoruz aşağıdaki resime bakınız.

192 Photoshop ta Web siteler İçin İletişim Navbarı

Şimdi dikdörtgenimizin bulunduğu layer ın üzerine sağ tıklayıp Blending Options a giriyoruz, ve Outer Glow a tıklayıp ayarlarını aşağıdaki gibi yapıyoruz.

20 Photoshop ta Web siteler İçin İletişim Navbarı

Sonra Inner Glow ayarlarını resimdeki gibi yapıyoruz.

211 Photoshop ta Web siteler İçin İletişim Navbarı

Sonra Gradient Overley ayarlarını  resimdeki gibi yapıyoruz.

221 Photoshop ta Web siteler İçin İletişim Navbarı

>Şimdi Stroke ayarlarını yapıyoruz aşağıdaki resime bakınız.

Son olarak Drop Shadow uyguluyoruz.

24 Photoshop ta Web siteler İçin İletişim Navbarı

Bittikten sonra Ok a basıp kaydediyoruz, son olarak dikdörtgenimizin içine yazı yazacağız ben İletişim Autocad Hocası İletişim Servisi yazdım sizde istediğiniz yazıyı yazabilirsiniz.

25 Photoshop ta Web siteler İçin İletişim Navbarı

Bu yazıyı beğendiyseniz RSS ye abone olabilirsiniz!
sayfa içi reklam alanı

Yorumlarınız Değerlidir

“Photoshop ta Web siteler İçin İletişim Navbarı” için 11 yorum bulunuyor

Kullanıcı girişi yaparak ya da zorunlu olan * alanlarını doldurarak yorum yapabilirsiniz.

İsminiz *

Email adresiniz *

Web siteniz

Mesajınızı buraya yazabilirsiniz:


Toplam 11 yorum var.

  1. huseyin | 13 Nis 2009, 19:29
    1

    abi süper olmuş yaa

  2. 101bilge.com | 19 Nis 2009, 22:21
    2

    Photoshop Dersleri 19…

    Web siteleri iin iletiim navbar yapm anlatlyor….

  3. oylabunu.com | 19 Nis 2009, 22:22
    3

    Photoshop Dersleri 19…

    Web siteleri için iletişim navbarı yapımı anlatılıyor….

  4. oyyla.com | 19 Nis 2009, 22:23
    4

    Photoshop Dersleri 19…

    Web siteleri için iletişim navbarı yapımı anlatılıyor….

  5. siteimle.com | 19 Nis 2009, 22:30
    5

    Photoshop Dersleri 19…

    Web siteleri için iletişim navbarı yapımı anlatılıyor….

  6. imlerim.com | 19 Nis 2009, 22:34
    6

    Photoshop Dersleri 19…

    Web siteleri için iletişim navbarı yapımı anlatılıyor….

  7. 100puan.com | 19 Nis 2009, 22:40
    7

    Photoshop Dersleri 19…

    Web siteleri için iletişim navbarı yapımı anlatılıyor….

  8. evden eve nakliyat | 21 Haz 2009, 11:00
    8

    super olmus birde web2.0 daki gibi yazıyı kopyalayıp ters cevırıp alta alıp soldurma işlemi var onuda gösterirseniz..

  9. evden eve nakliyat | 28 Eki 2009, 18:29
    9

    thanksss

  10. Estetik | 14 Oca 2010, 18:05
    10

    Walla güzel anlatılmış. hiç üşenmeden. işte budur ya. sagolun.

  11. nakliyat | 06 Eki 2011, 11:58
    11

    elinize sağlık çok güzel olmuş teşekkürler



  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • AutoCAD Dersleri
  • Yapılan Son Yorumlar
  • GÜLŞAH: Merhaba, Son birkaç günden beri autocad hatch...
  • herbalife ürünleri: kesinlikle bu anlatımla proje çizimi...
  • jasdef: arka plana image den reesim seçicem fakat resim...
  • nakliyat: elinize sağlık çok güzel olmuş teşekkürler
  • kazancrehberim.net: çok güzel bir eklenti tavsiye ederim
  • En Çok Yorum Alan Yazılar
  • AutoCADHocasi.com 8 GB U3 Bellek Hediye Ediyor !
  • AutoCADHocasi.com Ödüllü Yorum Yarışması
  • AutoCADHocasi.com Yarışması
  • AutoCAD 2009 Geliyor (Yeni Arayüz, Yeni Özellik ve Komutlarla AutoCAD 2009)
  • AutoCAD’de 3 Boyutlu Araba Yapmak !!!
  • AutoCAD ile Pırlanta Yapımı
  • Üye Girişi

Botacad: Hoşgeldiniz. Bana AutoCAD hakkında öğrenmek istediklerinizi sorabilirsiniz. Henüz yapım aşamasındayım, eksik veya hatalar olabilir.

Seo Hocası

AutoCAD Sözlüğü

AutoCAD indir, Dersleri, Eğitimi

Bağlantılar

AutoCAD Download photoshop tutorial Bilgisayar eğitiminin adresi Yeşersin

staricad autocad reklam alanı
AutoCADHocasi.com Kaan Gülten tarafından oluşturulmuş, Dersler veren sitedir.
Destek Ol
Seo Danışmanlığı
Önem Verilen Kelimeler
  • AutoCAD Kursu
  • indir
  • AutoCAD ironman
  • Download
  • Dersleri
Özel Yazılar
  • Kurs Projesi
  • 3 Boyutlu Araba Çizimi
  • 3 Boyutlu Havuz Çizimi
  • Sweep Komutu 3
  • Sweep Komutu 4
Özel Yazılar 2
  • Projeksiyon Görüntüsü Oluşturma
  • Buzlu Cam Yapımı
  • Anipath - Yol Animasyonu
  • Işıklı Kalem Çizimi
  • Divide ile Yol üzerinde ilerleyen yazı
Google Site Map | AutoCAD Hocası | AutoCAD | AutoCAD | Google

Powered by 2008 - 2010 AutoCADHocasi.com