Vista tarzı menü yapımı resimli anlatım

[B Rh (-)]

Vistalanmış menü yapımı, işimiz bitince aşağıdaki gibi bir görüntü elde edeceğiz, ünlü yabancı psd tutorial sitesinden çevirmiştim bir süre önce ama adresi hatırlamıyorum şimdi bulunca yazarım

1.   Adım

600*335 px boyutunda yeni bir sayfa açalım ve view menüsünden Rulers a tıklayarak cetveli gösterelim.

View menüsünden New Guide a gelerek 285 px de Horizontal bir klavuz oluşturalım. Aynısından bir de 310 px de oluşturalım.

*cetvelimiz px ölçekli değilse, Edit menüsü Preferences a gelerek Units & Rulers kısmından px i seçelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

2.   Adım

Şimdi yeni bir layer oluşturalım (Layer-New-Layer) ve adına altbar diyelim. Araçlar bölümünden dikdörtgeni seçip (Rectangle) klavuzlarla oluşturduğumuz çubuklardan alttakinin sınırlarında bir dikdörtgen çizelim. Sonra layers penceresinden (F7) altbarın üstünde sağ tıklayıp Blending Options u seçelim. Açılan Layer Styles penceresinden Gradient Overlay bölümüne gelerek açıyı 90 dereceye ayarlayıp #000000 ile #0c0c0c arasında bir gradient belirleyelim.

Yeni bir layer açıp adına üstbar diyelim. Ve bunda da #35393d ile #787b7d arasında bir gradient oluşturalım.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

İki layerın da Blending Options tan Opacity değerini %90 yapalım, etkisi ileride görülecek.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

3.   Adım

Şimdi Line Tool u kullanarak parlaklık ekleyeceğiz. Araçlarden Line Tool u seçelim ve Weight değerini 2 px yapalım.

Yeni bir layer açıp adına altvurgu diyelim ve oluşturduğumuz dikdörtgenlerin tam üstüne boydan #9fa2a4 renk bir çizgi çizelim.

Bir layer daha oluşturup adına ustvurgu deyip öncekinin üstüne #484b4d ile bir çizgi daha çizelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Layer penceresinde oluşturduğumuz 4 layer ı  ctrl ye basılı tutarak seçelim ve sağ tıklayarak Group into New Smart Object e tıklayıp gruplayalım adını bar yapalım.

4.   Adım

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

 Evet menu barımızı tamamladık. Şimdi menüler arasındaki çizgileri ekleyeceğiz. Ustayrac isimli bir layer oluşturalım. Ve ayracımızın üst tarafını yukarda resimdeki gibi çizelim. Yine Blending Options tan Gradient Overlay a gelerek çizginin gradientini #676a6d ile #afb1b2 arasında oluşturalım.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Ayracın alt tarafı için altayrac isimli layer oluşturarak #43474b renk ile çizgimizi çizelim. Ve bu ayraç layerlarını seçip ayrac ismi ile gruplayalım.

5.   Adım

Menü isimlerini oluşturalım şimdi de. Beyaz rengi seçerek 16 pt ile ister Vista arayüzünde kullanılan font Segoe UI ile isterseniz Arial yazı tipi ile isimleri verelim ve aralıklarla yerleştirelim. Ayraç layerına tıklayarak Ctrl + J ile çoğaltıp menüler arasına yerleştirebiliriz.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Yazı layerlarını yine Ctrl ye basılı tutarak seçelim ve linkler ismiyle gruplayalım.

6.   Adım

Menümüz artık bitti. Şimdi arkaplanımızı ekleyeceğiz. Seçime kalmış örnekte kullandığımızı font ile birlikte verdik yukarıda indirebilirsiniz. Ekledikten sonra bu layer a arkaplan ismini verelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

*arkaplanı layer sıralamasında en alta getirelim ve daha sonra etkisini göreceğimizi söylemiştik menü barının Opacity değerinin %90 olması hoş bir görünüm sağlıyor.

7.   Adım

Şimdi bulanık ve yuvarlak köşeli dikdörtgeni ekleyeceğiz. Vistada sık kullanılan bir efekt. Arkaplan layerına tıklayalım ve ctrl + J ile çoğaltalım.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Sonra Rounded Rectangle Tool u seçerek resimdeki gibi iki köşesi tuvalde olacak şekilde bir dikdörtgen çizelim. Radius değerini 20 px yapalım ki köşeleri biraz daha yuvarlak olsun. Burası önemli, dikdörtgeni çizdikten sonra resimdeki gibi layerın üzerine gelip Rasterize Layer diyoruz ve Magic Wand Tool u seçerek dikdörtgene tıklayıp rengi siliyoruz sadece çerçeve kalıyor seçili olarak.

Çoğalttığımız arkaplan layerına tıklayalım ve Crtl + X e basarak seçili bölümü keselim ve yeni bir layer oluşturup Ctrl + V ile buraya yapıştıralım, şeklimizi sol tarafa yaslayalım. Fazladan duran Shape ve kopya arkaplan layerlarını silelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Bulanık layerına tıklayarak Filter menüsünden Blur a gelip Gaussian Blur’ a tıklayalım.Değeri 4 px yapıp tamam diyelim. Sonra yine bulanık layerın Blending Options ayarlarına gelip gölge değerlerini aşaıdaki resimdeki gibi belirleyip tamam diyelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

8.   Adım

Şimdi bulanık alana yazımızı ekleyelim, yine Segoe UI ile istediğimiz boyutlarda ve renklerde bazı yerlerde kalın yazı tipini kullanarak ve isteğe göre aşağıdaki resimlerdeki gibi gölge ve gradient ekleyebilirsiniz.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Buradan sonra menüyü uygulamaya geçirecekler için menü üzerine gelince ışık efekti vermek var sırada.

9.   Adım

Yeni bir layer oluşturalım, Ellipse Tool ile #5c94c5 rengi seçerek şekildeki gibi bir yuvarlak çizelim ve Blur menüsünden Gaussian blur u seçerek 10 px lik bir bulanıklık verelim.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Sonra da tam ayraçlara denk gelecek şekilde Rectangular Marquee Tool ile bulanıklığın etrafını temizleyelim. bitti 

 Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.

Linkler görüntülenemiyor.
Değerli ziyaretçimiz linki görebilmek için Lütfen üye olun veya Üye iseniz giriş yapın.