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.

Rastgele Yazılar