Önizleme
Hazırsanız hemen başlayalım ve ilk olarak bir 980x100 px 72 dpi ölçülerinde bir belge açalım, arka plan rengini #F4F4F4, isminide Background olarak değiştirelim, hemen arkasından U tuşuna basarak Rounded Rectangle Tool aracımızı seçelim ve aşağıdaki gibi menü arka planımızı oluşturalım, (Foreground rengi Siyah olursa beyaz rengin üzerinde neler yaptığımızı görebiliriz)
Daha sonra menü arka planımızın layeri seçili iken CTRL+T tuşuna basalım görümü %300 arttıralım ve aşağıdaki gibi menünün sol ucundan ALT tuşuna basılı iken bir px kadar sola çekerek kenarlardaki fazla yuvarlak olan kısımların bir bölümünü dışarı atmış olalım, (ALT tuşuna basmak aynı anda sağ tarafıda hareket ettirir)
Şimdi bu Menü Arka Planımıza aşağıdaki efektleri uygulayalım,
Arkasından aşağıdaki değerlerde menü isimlerini yazalım,
Şimdi bu yazılarımızın hepsini CTRL yardımı ile seçelim ve CTRL+G ile gruplayalım, isminide Menü Text olarak değiştirelim, hemen arkasından ilk yazımıza Bevel efekti uygulayalım, örneğin Store isimli yazımız.
Bu efektimizi her yazımıza ayrı ayrı uygulamak yerine böyle durumlarda her zamanki gibi efekti uyguladığımız layerimize sağ tıklıoruz ve Copy Layer Style dedikten sonra diğer efekti uygulayacağımız tüm layerlerimizin hepsini seçtikten sorna herhangi birisinin üzerine sağ tıklayarak Paste Layer Style diyoruz,
Bunu yaptığımızda o efekti seçili tüm layerlerimize aktarmış oluyoruz, bunun sonucunda aldığımız sonuç aşağıdaki gibi olmalıdır.
Şimdi ekranımızı %800 büyütelim ve M tuşuna basarak Rectanqular Marquee Tool ile aşağıdaki gibi 1 px genişliğinde bir alan seçelim içerisini #A8A8A8 rengi ile dolduralım, aşağıdaki şemadan bakabilirsiniz.
Şimdi bu çizgimize aşağıdaki efektleri uygulayalım,
Şimdi ise bu çizgi 1 isimli layerimizi CTRL+J ile toplam 7 adet olmak üzere çoğaltalım ve aşağıdaki gibi hizalayalım, devamında layerlerimizin bulunduğu çalışma alanımızda rahat çalışabilmek için bu 7 adet çizgi layerlerimizide seçelim ve gruplayalım, grup isminide çizgiler olarak değiştirelim.
Sıra geldi arama kutumuzu oluşturmaya, bunun için U tuşuna basalım Rounded Rectangle Tool aracımızı seçelim ve aşağıdaki gibi bir seçim yapalım, Foreground rengi beyaz olması gerekiyor,
İsmini Arama Kutusu olarak değiştirdikten sonra bu layerimizide CTRL+G ile Gruplayalım ve onunda ismini Arama Kutusu olarak değiştirelim, devamından aşağıdaki gibi Bevel efekti uygulayalım,
Hemen içine yazımızı #838383 renginde yazarak devam edelim,
Arama Kutusu işlemimizin son aşaması olan büyüteçini ekleyelim, burada gerekli olan büyüteç Shapesi buradan indirebilirsiniz, indirip yükledikten sonra U tuşuna basalım ve Customize Shapes modunu aktif edelim ve aşağıda resimde görülen yerden seçelim ve uygun biçimde ekleyelim, Foreground rengi #656565 olmalı)
Devamında Menümüzün son işlemi olan Apple logosunu (Elma) yani PNG resmini buradan indirelim ve aşağıdaki gibi ekleyelim, Not: Aslında Apple logosunu elma şekli çizip arkasından Gradient Owerlay ile çok iyi yapardık ama nedense bugün fazla keyfim yok dersi hazırlarken bi an önce bitsin diye bakıyorum sabah şu an 07:25 ve ben hala uyumadım :)
Extra olarak Hover (Maus ile üzerine Gelince Rengi değişen menü) menüsünüde yapalım, bunun içinde Menü Text isimli Grubumuzdan Store isimli layerimizi CTRL+J ile Dublicate edelim ve yeni bir Grup oluşturarak ismini Hover Buton olarak değiştirelim, arkasından Dublicate ettiğimiz (Çoğalttığımız) Store isimli layerimizi bu gruba taşıyalım, yalnız menüdeki yerini değiştirmeyelim çünkü aynı yerde olması gerekiyor, bu işlemleride yaptıktan sonra M tuşuna basalım ve aşağıdaki bigi seçim yapalım, içinide herhangi bir renk ile dolduralım, herhangi bir renk dedim çünkü Gradient Owerlay uygulayacağımız için farketmeyecek.
Şimdi aşağıdaki gibi Gradient Owerlay efetimizi uygulayarak bu işide bitirelim başka derslere bakalım, saat şu an 07:43 ve ben yatmaya gidiyorum tabi bu resimleri upload ettikten sonra :)
Neyse değerleri aşağıdaki gibi ekleyelim ve dersimizi bitirelim, bir sonraki derste görüşmek üzere arkadaşlar iyi çalışmalar size.
Final
Teşekkürler
Merhabalar, Elinize sağlık..
Peki biz fareyi hangi menünün üzerinde tutarsak o koyu gri mi olacak? orasını tam çözemedim.
Şimdi şöyle söyleyim, şu an PS de görsel aşamasını anlattım, söylediğiniz hover efekti, mausumuzu butonların üzerinde gezdirdiğimizde koyu rengi alacak, bunun için bölümlenmesi dahil CSS ve Html kodlarınıda anlatacağım, tabi ilerleyen zamanlarda, sebebi PS ye yeni başlayan arkadaşlarımızın kafasını fazla karıştırmak istemediğimden için sırasıyla gitmeye çalışıyorum tabi vaktim olduğu sürece.
Ne zmn anlatcaksınız acaba?
Diğer kısımları anlatmaya başladığımda hepsini birden ele almayı düşünüyorum yani daha önce dersini hazırladığım diğer menü ve web sitesinden bahsediyorum, şu an elimde dersini hazırlamayı düşündüğüm bir iki çalışmam daha var onlarıda hazırladıktan sonra olabilir.
Teşekkürler yorumunuz için dikkate alacağımdan emin olabilirsiniz.