Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım. Öncelikle Photoshop üzerinde 500*500 px değerine sahip bir doküman açalım. Açacağımız dokümanın Resolution değerini 72 olarak belirleyelim.

Boş dokümanımız üzerinde Rounded Rectangle Tool’u (U kısayolu) seçerek yukarıda Radius değerini 4px olarak ayarlıyoruz. Renk seçimi önemli değil. Siyah veya başka bir renkte kullanabilirsiniz. Şimdi hemen hemen 470*40px değerlerine sahip olacak bir dörtgen çizeceğiz. Bunu siz göz kararı da ayarlayabilirsiniz. Ancak yukarıdaki örnekte ben tam bir piksel değeri uygulamadan göz kararı dörtgenimi çizdim. Şimdi dörtgen aşağıdaki şekle benziyor olmalı. (Rengi gözönünde bulundurmayalım)

Bu aşamada Layer penceremizde Shape 1 alanının belirlenmiş olması gerekiyor. Şimdi navigasyonumuzun arka alanını oluşturacak bu katmanın özelliklerini düzenleyeceğiz. Layer penceresinde Shape 1 üzerine iki kere tıklayarak Layer Style penceresini açın. Bu alanda yapacağımız değişimler ile navigasyon arkaplanımız şekillenecek. Aşağıdaki alanlarda ilgili değerleri uygulayalım ve işlemimize devam edelim.

Inner Glow >> Blend Mode: Screen | Opacity:%25 | Elements, Size: 12px
Gradient Overlay >> Blend Mode: Normal | Gradient Renkleri: 1. renk #23A8E4 2. renk #54C4F6 olacak şekilde ayarlayın.
Stroke >> Size: 1px | Color: #6DCBF5

Yukarıda yer alan değerleri uyguladıktan sonra şeklimiz aşağıdakine benzer olacak. Şayet aynı görüntüyü alamadıysanız önemli değil, makalemizin sonunda kaynak psd dosyasını indirip gözatabilirsiniz.

Bu aşamadan sonra makalemizin giriş resminde vermiş olduğumuz örneğe ulaşmak için aktif buton olan ANASAYFA butonunu hazırlayacağız.

Shape 1 üzerindeyken yine Rounded Rectangle Tool’u seçerek aynı Radius değeriyle navigasyonumuzun içine oturacak bir dörtgen daha çiziyoruz. Yine renk önemli değil. Çünkü yukarıdaki gibi renk ve dolgu değerlerini kendimiz şekillendireceğiz.

Bu seferde Shape 2 üzerine çift tıklayarak butonumuzun renk ve dolgu ayarlarını yapacağız. Shape 2 Layer Style penceresini açtıktan sonra aşağıdaki değerleri giriniz.

Inner Glow >> Blend Mode: Screen | Opacity: %10 | Color:#80D2F6 | Element Size: 15px
Gradient Overlay >> Blend Mode: Normal | Gradient 1. renk #333333 2. renk #727272

Uygulamamız yukarıdaki örneğe benzemiş olmalı. Bu aşamadan sonra menümüz üzerine yazılarımızı yazarak işlemimizi sonlandıracağız. Yazı tipi ve boyutu tamamen size kalmış ancak ben uygulamam da beyaz renk ve Arial yazı tipine sahip 11px büyüklüğünde bir yazı tercih ettim. Yazımı Shape 2 üzerinde iken yazarak Shape 1 üzerinde de görünmesini sağladım.

Gördüğünüz gibi sadece iki shape alanı oluşturduk. Bunlara Layer Style ile belli değerler atadık ve sonra menümüz üzerine yazılarımızı yazdık. Bu aşamada minimal bir çalışma sergilemiş olduk. Zira sitenizde kullanmak istediğiniz alana göre vermiş olduğumuz değerler değişiklik gösterebilir. Özellikle Shape 2 alanını çoğaltarak diğer menü başlıklarına da uygulayabilir veya farklı renk değerleri vererek navigasyonunuzu renklendirebilirsiniz.

Umarım sizler için faydalı olmuştur. Giriş resmindeki uygulamanın PSD dosyasını BURADAN indirebilirsiniz.