Photoshop – Site menüsü yapımı

29.12.2013
2.648
A+
A-
Photoshop – Site menüsü yapımı

Photoshop’ta basit bir menü tasarımı nasıl yapılır? neler gereklidir?

Evet arkadaşlar bugünkü derste nasıl menü oluşturacağınızı öğreteceğim .

Ben burada biraz farklı göstermişim ister istemez.. Yani aşağıdaki görsellerde Rectangular Marquee Tool‘u açıp 800 x 50 px‘de çizim yapmak yerine File -> New..  diyip 800 x 50 boyutunda sayfa açmanızla bir farkı yok her ikisinide deneyebilirsiniz ama bu görseldeki anlattığım Rectagular Marquee Tool‘un Fixed size yapıp belli bir pixelle çizmeyi daha önce öğrenmemişseniz bu anlatımda öğrenmiş olacaksınız bunu öğrenmeniz bu yöntemleri kullanmak ileride işinize yarayabilir. Ama bilenler istediği gibi yapsın 🙂

 

Her neyse başlayalım 🙂 şimdi bir Rectangular Marquee Tool seçiyoruz..

 

menu1

Rectangular Marquee Tool‘u seçtikten hemen sonra görseldeki gibi Style’ını Fixed Size olarak seçelim.

menu2

Fixed Size seçtikten sonra Width (Genişlik) 800px – Height (Yükseklik) 50px yapalım.

menu3

Şimdi (Rectangular Marquee Tool aracı seçili olarak) sayfanın her hangi bir bölgesine tıklıyoruz otomatik olarak W 800px – H 50px boyutunda bir dikdörtgen alan çizmiş oluyoruz.

menu4

Araçlardan Crop tool‘u seçiyoruz ya da C tuşuna basabilirsiniz. Crop Tool otomatik olarak çizdiğimiz 800px – 50px etrafını sarıyor biz de Enter a basıp onaylıyoruz sayfa boyutu menümüzün boyutu (800px – 50px’e dönüştürüyor)

menu5

Şimdi sayfanın tüm köşesini seçili tutmak için CTRL + A (Select All – Tümünü seç) yapıyoruz hemen ardından CTRL + Shift + N ile yeni bir Layer oluşturuyoruz.

menu6

Layer‘a bir isim veriyoruz ben MenuBar yazdım siz dilediğinizi yazabilirsiniz herkes özgürdür :))

menu7

İsim vermiş olduğumuz Layer‘ın üzerine daha doğrusu işaretlenen bölgeye çift tıklıyoruz..

menu9

Layer Style penceresi karşımıza geldi şimdi sol taraftaki Gradient Overlay‘ın üzerine tıklıyoruz (işaretlemiyoruz sadece yazının üzerine tıklayın)

menu10

Gradient Overlay penceresinde ise Gradient ayarlarına gidelim. Menümüzün renklerini belirleyelim.

menu11

Evet burada görselde net bir şekilde belirlediğimi düşünüyorum bu adımı bilmeyenler diğer ki adımlarda daha rahat anlayacaklardır. Görseldeki yazıları iyi okuyun ve anlamaya çalışın.

menu12

Görselde göstemiş olduğum gibi adımları yapmaya devam edin.

menu13 menu14 menu15

Ortadakine de renk verelim hemen hemen diğer rengin aynısı ama daha koyu bir renk verelim.

menu16

Görselde anlattığım gibi devam edelim.

menu166

menu17

Layer‘ın içine bir şey doldurmamış olduğumuz için Gradient‘ten gelen ayarlar uygulanamıyor bunun için ALT + Backspace yapıyoruz her hangi bir rengi doldursak yeterli fark eden bir şey yok ve böyle yapınca Gradient ayarlarımız görselimizde uygulanmış oluyor.

 

menu18

Gradient ayarlarımız görselimizde uygulandı.

menu19

Şimdi bir yazı ekleyelim menüdeki yazılar..  Text‘i açıyoruz kafanıza göre bir menü yazın.

menu20

Evet gördüğünüz gibi.. Menü yazılarını yazdık elbette bunu Dreamweaver‘da halledersiniz burada gösterdiğim önemli şey bir menünün tasarlanmasıdır. Yazı kısmını kendiniz halledersiniz.

menu22

Menümüzün üstünden ışık efekti verelim.. Eliptical Marquee Tool açın.

menu23

Bu şekilde üzerinden bir oval çizin.

menu24

CTRL + Shift + N ile ışık vermek için layerımızı açalım. Bir isim belirleyin.

menu26

Shift + F6 ile Feather penceresini açın Feather Radius‘u 5 olarak tamamlayın ve OK‘a basın.

menu27

Ön renk olarak beyaz seçin ve ALT+ENTER yapın. Not: Eğer bir değişiklik görülmezse ışık katmanınız altlarda kalmış olabilir ışık katmanınızı en üstte getirirseniz sorun düzelir.

menu28

Ekrana ışık görüntüsü geldi ancak ışık çok yüksek, biraz düşürelim. Saydamlığı düşürmek için sağda Opacity‘den ayarlayabilirsiniz.

menu29

Seçimi kaldırmak için: CTRL + D

Ve menümüz hazır.. Bu bir örnekti dilediğiniz renkten yapabilirsiniz hepsi size bağlı dilerseniz Layer ayarlarından Inner Shadow, Outter Shadow, Stroke vs.. kurcalayıp menünüzü daha da özelleştirebilirsiniz.

Opacity‘yi 47 yaptım böyle uygun buldum siz dilediğiniz gibi ayarlayabilirsiniz ama önemli olan profesyonel ve yaratıcı bir menü olmasıdır. %47’lik saydamlığı uygun buldum.

Sonuç:

menu30

0.00 avg. rating (0% score) - 0 votes

Yazarı instagram'da takip edin

zdaylan.com yapımı ve güvencesiyle, GrafikBu.com hizmetinize açılmıştır.


Web Tasarım - Blog hizmetleri - E-Ticaret Sitesi - 3D Modelleme - Logo Tasarım - Video Prodüksiyon - Kurumsal Kimlik gibi, daha çok grafik tasarım ağırlıklı ürünlerimize göz atabilirsiniz.

GrafikBu.com'u ziyaret etmek için tıklayın >>

zdaylan
Grafik Tasarım - Beykent Üniversitesi - 1990 doğumlu, grafik tasarım, 3D modelleme, yazılım ve animasyonla ilgilenir. Ayrıca Grafikbu.com'da grafik tasarım hizmetleri verir.
YAZARA AİT TÜM YAZILAR
BİR YORUM YAZIN

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.