AnaSayfa arrow Web Tasarım arrow Güzel Menü Örneği (Navigation)
Güzel Menü Örneği (Navigation) PDF Yazdır E-posta
Yazar Filiz Gr.   
Pazar, 03 Eylül 2006

Güzel Menü Örneği (Navigation)1. Yeni bir döküman yaratalım. Ölçüleri 400*100 pixel olsun.

2. Şimdi yeni bir layer yaratalım.  Rectangular Marque aracını seçin, aşağıdaki resimdeki gibi seçili alan yaratalım.

3. Seçili alanın içini istediğiniz bir renk ile doldurun. Ben siyah ile doldurdum.

4. Layer panelden, şu anda bulunduğunuz layer'ın üstüne mouse ile sağ tıklayın, blending seçeneklerinden (Blending Options), Gradient Overlay seçin ve aşağıdaki resimdeki gibi ayarlamalarınızı yapın.

5. Şimdi yeni bir layer yaratın. Aşağıdaki örnekteki gibi grafiğimizin altına çok ince dikdörtgen şekil çizin. İstediğiniz rengi seçebilirsiniz. Ben turuncu seçtim. Rectangle shape ile dikdörtgeni çizin, daha sonra istediğiniz renk ile doldurun.

6. Şimdi yeni bir layer yaratın. Burada menulerin alan çizgilerini yapacağız. Line aracını (Line Tool) seçerek ve pixel genişliğini 1 'e ayarlayarak dikey çizginizi çizin.

Şimdi ilk çizginizi çizdiniz, ama diğerlerini de aynı paralelde aynı uzunlukta yapmanız lazım. Kolay bir yolu var. İlk çizginizin bulundugu layer'a mouse ile sağa tıklayın, oradan Duplicate Layer (Layer'ın ikizini yaratır) ile ilk çizginizin kopyalarını yapın ve belirli aralıklar vererek aşağıdaki örnek resimdeki gibi çizgilerinizi düzenleyin.

Şimdi ise çizgilerimizi tek bir layer'da toplayacağız. Yani çizgilerimiz ayrı ayrı layerlardan alıp tek bir layer içinde toplayacağız. Neden mi? Daha temiz çalışmak için.

Layer panelde, bütün layerların yanında "Göz" işareti vardır. Çizgilerimizin gözleri yanık dursun, diğer bütün layerların "Göz" lerinin üstüne bir defa tıklayarak onları kapatalım. Şimdi sadece çizgilerimiz görünüyor değil mi? Şimdi layer panelden "Merge Visible" seçeneğini seçerek çizgilerimizin bulunduğu layerları tek bir layera toplayalım. Yapabildik mi? Olmuştur sanırım.

7. Şimdi çizgilerimizin üstündeki bölümleri biraz yumuşatacağız. Karizmatik bir görüntü vereceğiz. Şu anda kalas gibi duruyorlar değil mi?

Rectangular Marque aracını seçin, Feather'ı 20 yapın. Örnek resim size yardımcı olacaktır.

Aşağıdaki örnek resimdeki gibi seçim işleminizi gerçekleştirin.

Not: Şimdiki bölüme geçmeden önce çizgilerimizin bulunduğu layerları tek bir layerda topladığımızdan emin olalım. Yoksa yanlış yaparsınız.

Yukarıdaki örnekteki gibi seçim yaptıktan sonra, Delete tuşuna 2 defa basalım. Şimdi çizgilerimizin üst kısımları biraz yumuşadı.

8. Şimdi gri çizgilerimizin kenarlarını belirginleştirmek için, çizgilerimizin her iki yanına beyaz çizgiler çizeceğiz. 4 çizgimiz olduguna göre 8 beyaz çizgi çizeceğiz.

Yeni bir layer yaratalım. Line aracı ile (Line Tool) gri çizgilerimizin her iki yanına 1 pixel genişliğinde beyaz çizgilerimizi çizelim. Aşağıda büyültülmüş örnek resim size yardımcı olacaktır.

İlk çizgimizi çizdikten sonra diğer 7 çizgiyi, altıncı adımda yaptığımız gibi Duplicate Layer seçeneğini kullanarak çoğaltalım ve düzenlemesini de ayarlayalım.

9. Beyaz çizgilerimizin bulunduğu layerları da altıncı adımda yaptığımız gibi "Merge Visible" seçeneğini kullanarak tek bir layer da toplayalım. Şimdi gri çizgilerde yaptığımız gibi, beyaz çizgilerimizin de üst bölümlerini yumuşatacağız. Rectangular Marque aracını seçerek aşağıdaki örnek resimdeki gibi seçiminizi yapın ve bir defa "Delete" tuşuna basarak beyaz çizgilerinizin üstünü yumuşatın.

Harika, çalışmamızın bütün adımlarını tamamladık.

Biraz daha detaya inecek olursak:

Ben menülerin sınırlarını biraz daha belirginleştirmek adına, aşağıdaki örnekte de görebileceğiniz gibi, turuncu uzun çizgimizi bölerek ayrımları derinleştirdim. Rectangular Marque aracı ve "Delete" tuşu ile bunu kolayca yapabilirsiniz.

Evet, elbetteki menülerimizin yazılarını da yazmayı unutmuyoruz. Biz sitemizin içeriğine bağlı olarak menümüzü oluşturduk, sizde amacınıza uygun menü yazılarınızı uyarlayabilirsiniz. Yazılarınıza Drop Shadow ve benzeri efektleri uygulayarak derinlik kazandırabilirsiniz.

Not: Menü yazılarında FONT önemlidir. Her font menü yazısı olamaz. Buna da özen göstermenizi tavsiye ederim.

Umarım döküman faydalı olmuştur. Başardığınızı umarım(!?)

Son Güncelleme ( Pazar, 03 Eylül 2006 )
 
< Önceki   Sonraki >

Sponsor

Webmaster Buluşma Noktası