Metalik Menü (Navigation) Tasarımı

Bu dersimizde web siteleriniz için size yol gösterici olacak bir menü tasarımı hazırladım, fakat kodlama kısmını malesef bundada anlatmayacağım öncelikle PS alt yapını öğrenmelisiniz diye düşünüyorum akabinde ilerleyen zamanlarda bu çalışmalaırmızın PS de bölümlenmesi ve CSS ile Html kodlarının nasıl işlendiğini anlatmaya çalışacağım, düşüncelerinizi derslerin sonunda yorum sayfasından paylaşırsanız sevinirim ayrıca çalışmalarınızı bititrdikten sonrada imageshack.us sitesine upload ederek burada paylaşırsanız dahada sevinirim, hadi başlayalım :)

Önizleme


Hazırsanız başlayalım öncelikle 500x300 px, 72 Resolution özelliklerinde yeni bir belge açalım bu arka planımız olacak ve aşağıdaki gibi Gradient Owerlay efektini verelim, ismini Background olarak değiştirelim





Backgorund


Şimdi U tuşuna basalım ve Rounded Rectangle Tool aracımızı seçelim arkasından aşağıdaki gibi bir şekil çizelim, ismini Menü BG olarak değiştirelim,



Aşağıdaki efektleri uygulayarak devam edelim,







Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi yeni bir layer oluşturalım ismini Menü Buton BG olarak değiştirelim ve klavyemizden M tuşuna basarak Rectanqular Marquee Tool Aracımızı seçelim ve aşağıdaki gibi bir seçim yapalım içini beyaz renkle dolduralım,



Aşağıdaki efektleri uygulayarak devam edelim,







Şimdi Polygonal Lasso Tool aracımız ile aşağıda görülen alanı seçelim ve içini beyaz renkle dolduralım, ismini Menü Kenar Sağ olarak değiştirelim,



Daha sonra aşağıdaki ayarları ile Gradient Efektimizi uygulayalım,





Aşağıdaki sonucu elde etmiş olmalıyız,



Bu Menü Kenar Sağ layerimizi CTRL+J ile çoğaltalım ve Edit/Transform/Rotate 90 CCW ile ters çevirelim ve diğer kenara düzgünce hizalayalım,



Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi ise yeni bir layer daha oluşturalım ve ismini Çizgi 1 olarak değiştirelim, daha sonra M tuşuna basalım ve Rectanqular Marquee Tool aracımız ile aşağıdaki gibi bir seçim yapalım ve içini herhangi bir renkle dolduralım (Gradient Owerlay uygulayacağımız için rengin önemi yok) renkle dolduralım arkasından aşağıda görüldüğü gibi Gradient Owerlay efektini verelim,







Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi bu Çizgi 1 lisimli layerimizi 4 adet daha çoğaltalım toplamda beş adet olacak ve aşağıdaki gibi 5 er pixel aralıklarla hizalayalım, daha sonra bu beş adet layerimizi CTRL+G ile Gruplayalım ve ismini Menü Çizgiler olarak değiştirelim,



Aşağıdaki sonucu elde etmiş olmalıyız.





Şimdi buradan indireceğiniz Customize Shape ile aşağıdaki gibi düzgünce ekleyelim arka plan rengi siyah.



Sıra geldi butonlarımızın isimlerini vermeye, ilk olarak aşağıdaki gibi beyaz bir yazı yazalım, (Site Menü) daha sonra layer menüsünden opacity değerini 15% e düşürelim,



Daha sonra bu site menü isimli layerimizi CTRL+J ile çoğaltalım ve rengini #212121 olarak değiştirelim arkasından Opacity değerini %15 ten 100% e çıkaralım, yine bu işlemin arkasından bu layerimizi yukarı ok tuşu ile bir kere yukarı taşıyalım (1 px) aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi bu iki yazı layerimizi CTRl+E ile birleştirelim (Merge) ve arkasından aynı işlemlerle aşağıdaki yazılarımızı girelim ve bu dersimizide bitirelim, Final Aşağıda.

Arkadaşlar dediğim gibi yorumalarınız ve önerileriniz hazırlayacağım dersler konusunda belirleyici etkendir, sizler fikirlerinizi belirtirseniz bende o doğrultuda sizlere yardımcı olmaya çalışırım, ayrıca buradaki derslerimizdeki çalışmalarınızı imageshack.us sitesine upload edip bizlerle paylaşırsanız ayrıca seviniriz herkese kolay gelsin iyi çalışmalar,

Not: Bu gibi Web tasarımları ile ilgili hazırladığım dersleri daha sonra kodları ile ile birlikte sitemize nasıl entegre edeceğimizide anlatmaya çalışacağım.

Final