?> navigation bar menü - photoders
Site » Image Ready

navigation bar menü

[ 20 Tem 2007 | 7 Yorum ]

Header menü

500X200 px çalışma sayfası açalım. Rectangle Tool (U) aracı ile siyah dikdörtgen alan belirleyelim


layer üzerinde sağ tuş clik [ Resterize Layer ].

Polygonal lasso tool (L) seçim Aracı ile resimdeki seçimi gerçekleştiriyoruz


Seçli alanı delete tuşu yolu ile siliyoruz

Layers->Blending options Drop Shoadow Bevel, Gradient Overlay uyguluyoruz



Sahnedeki görüntümüz

Geldik butonlarımızı yapmaya new layer yeni layer açalım rectangle tool (U) color to #21a9e2. (isteğinize bağlı renk seçebilirsiniz)

Görüntümüz

Buton layeri nav bar menünün altına alalım
photoders
Buton için Style Bevel and Emboss
null
Görüntümüz

Buton layerimizi duplacite layer diyerek çoğaltalım
null
Nav menü layer a [ Rectangular marquee tool (M) ] aracı ile örnek uygulamaları yapıyoruz isterseniz yapabilirsiniz. Seçimi yapıp delete derseniz silinir seçili kısımlar silmeden copya yapın daha sonra edit paste diyoruz şimdi yeni layer oldu sildiğimiz yerleri doldurdum örnek resimler

Eklediğim küçük butonları duplacite ederek çoğalttım ve değişik renklerini değiştim

ilk butonumuzu duplacite layer diyerek çoğaltalım yazımızı yazalım yazımızıda çoğaltalım şimdi ilk butonumuz 2 adet yaptık 2 adet yazımızda oldu kopyaladığımız buton layerini sağ clik select layer seçili hale getirelim reng olarak renk seçip kova aracı ile doldurun yazıdığımız ve kopya yaparak 2 adet yaptığımız yazılatrı butonlarımız ile birleştirelim Merge Down seçeneği üsteki yazıyı alttaki butonla birleştirir. Örnek resimde

Bu 2 şer adet neden yaptık onu anlatmaya çalışayım web düzeninde ower mause efekti vereceğiz bu yüzden bir butunun oluşumunu yaptık siz diğerlerine de uygulayarak yaptığınız diğer butonlarıda aynı şek,ilde yapabilirsiniz şimdi size anlatığım kadarı ile image ready geçiyoruz

Daha önce Rollover Buttons konulu dersimde bu konuyu anlatmıştım fakat bu çalışmada butonumuz tek değil gördüğünüz gibi yani daha farklı uygulama gerekmekte Slice Tool aracını kullanarak yapmamız gerekmekte size şunu belirtmek isterimki bu konuyu beceren arkadaşların kendi web sitesin menü veya butonlarını kendilerine özgü hazırlamaları mümkün olacaktır. Türk ders sitelerinde ilk kez ( photoders.com) tarafında verilen bir ders olduğunu sizlere diyebilirim.

Resim üzerinde yazarak sizlere konuyu anlatmayı daha uygun gördüm İmage ready geçmiştik sanırım
Anlatımı resmi tıklayarak Internet Explorer üzerinden büyük olarak görebilir okuyabilirsiniz.

Resmi büyütmek için tıklayın

İlk olarak Slice Tool aracı kullanarak diğer butonlarımızda ayn anlatığım şekle uygulayalım bu işlemler tamamlandıktan sonra Rollover yani masuue üzerine gelince değişimi gerçekleştireceğiz url yolu vereceğiz


Resmi büyütmek için tıklayın

Bu işlemleri ben tek buton üzerinde anlattım siz bu iki uygulamauı diğer butonlarınıza aynı yöntemi devam ederek yapabilirsiniz.
Çalışma tamamlandıktan sonra kayıt etme işlemini daha önce sizlere anlatığım ( Rollover Buttons) konulu dersimizde olduğu şekilde yapabilirsiniz

Çalışmayı izlemek için tıklayın

Etiket:

7 Yorum »

  • baris diyor'ki:
    14 Haz 2008 saat 20:56

    hocam çok sağolun ya =) süpersiniz… bu arada yptım gzl oldu tkrar sağolun…

  • baris diyor'ki:
    14 Haz 2008 saat 21:05

    hocam birde ne olarak kaydetces söylerseniz… =(

  • admin (author) diyor'ki:
    14 Haz 2008 saat 23:15

    çalışma sonunda kayıt etmek için save as yani farklı kaydet dediğiniz yere kendisi images klasörü oluşturarak kayıt etmekte çalışmada ekli butonları images içinde oluşturmakta

  • baris diyor'ki:
    15 Haz 2008 saat 12:33

    tmm hocam sğln..

  • mujdatakilli diyor'ki:
    25 Ağu 2008 saat 21:06

    oncelıkle elınıze saglık hocam cok guzel olmus flasha gerek kalmadan gayet guzel bır yontem ama ben herseyı yaptım imagesreadye gectıkten sonra bır turlu gerısı gelmedı bırazdaha detaylı anlatma sansınız varsa hocam sımdıden tesekkur ederım bırde hocam sızden 1 rıcam daha olacak mesela sılınen yazı donen yazı vs.. gıbı banner ıcın gereklı bu tur yontemler bılıyosanız paylasırsanız cok sevınırım tesekkurler hocam

  • admin (author) diyor'ki:
    25 Ağu 2008 saat 21:54

    image ready olarak ekli resimleri büyülterek inceleyebilirsin image ready çalışmasında hazırladığınız photoshop çalışmamızı Slice Tool kullanarak parçalıyor daha sonra linkleri veriyoruz kayıt işleminde kendisi images klasörü oluşturuyor oraya resmi parçalanmış olarak kayıt ediyor web tasarım sayfa hazırlamada bu şekilde olmaktadır kısaca öztlemeye çalıştım

  • yasir13 diyor'ki:
    04 Şub 2009 saat 00:58

    eyvallah abi

Yorum Yazın

Konuyla ilgili yorumlarınızı aşağıya yazabilir diğer okuyucularla paylaşabilirsiniz, yazıdan alıntı yapacak olursanız geribildirim yapmayı unutmayın.. Yazıdaki yorumları RSS olarak takip etmek için tıklayınız .

Yorum yazarken dikkat etmeniz gereken hususlar;

  • Spam ve reklam içerikli yorumlar silinecektir.
  • Yorumlar onay gerektirdiğinden birden fazla kez aynı yorumu yazmayınız.
  • Yorumlarınızın konu ile alakalı olmasına özen gösteriniz.
  • Küfür, hakaret etmenizin kimseye faydası olmadığını unutmayın.
  • Yorum yapmanız, onaylanacağı anlamına gelmemektedir. Buradaki hususlara dikkat etmeniz, onaylanma şansını artıracaktır.

    • Güvenlik Kodunun Resmi
    *

    Kapat
    E-posta ile paylaş