Adana Adıyaman Afyon Ağrı Aksaray Amasya Ankara Antalya Ardahan Artvin Aydın Balıkesir Bartın Batman Bayburt Bilecik Bingöl Bitlis Bolu Burdur Bursa Çanakkale Çankırı Çorum Denizli Diyarbakır Düzce Edirne Elazığ Erzincan Erzurum Eskişehir Gaziantep Giresun Gümüşhane Hakkari Hatay Iğdır Isparta İstanbul İzmir K.Maraş Karabük Karaman Kars Kastamonu Kayseri Kırıkkale Kırklareli Kırşehir Kilis Kocaeli Konya Kütahya Malatya Manisa Mardin Mersin Muğla Muş Nevşehir Niğde Ordu Osmaniye Rize Sakarya Samsun Siirt Sinop Sivas Şanlıurfa Şırnak Tekirdağ Tokat Trabzon Tunceli Uşak Van Yalova Yozgat Zonguldak
İstanbul 21°C
Parçalı Bulutlu

Photoshop – Site menüsü yapımı

29.12.2013
6.156
A+
A-
Photoshop – Site menüsü yapımı
Reklam
[instagram-feed]

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..

 

Instagram'dan @zdaylan kullanıcısını takip edin:

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

Sosyal ol, paylaş!

    0.00 avg. rating (0% score) - 0 votes
    Instagram'dan @zdaylan kullanıcısını takip edin:

    Reklam
    zdaylan
    zdaylan
    Yazar hakkında:  Mehmet Zübeyir Daylan - İstanbul, TR 1 Kasım 1990'da Bakırköy'de dünyaya geldim. Bahçelievler İlköğretim okulunda ilkokul (2002), Küçükçekmece Yeşilyuva İlkokul'da ortaokul (2005) eğitimini bitirdim. Liseyi 2007 yılında Okyanus Koleji'nde okurken bıraktım daha sonra düz lise olarak açıktan okumaya devam ettim. 2017 yılında liseden mezun olduktan sonra, eğitimde şu anki konumum olan Beykent Üniversitesi'nde Grafik Tasarım bölümünde eğitim almaya başladım. Daha önce BilgeAdam'da yani bir bilişim-dijital kursunda Grafik Tasarım, Web Tasarım, 3D modelleme, Bilgisayar Programcılığı, Sistem ve Ağ uzmanlığı, Microsoft Office,Yabancı Dil: İngilizce gibi birbirinden farklı derslerden eğitimimi tamamladım ve bazı sertifikalara sahip oldum. Video & film prodüksiyon ve animasyonda da belli bir yere kadar tecrübelerim bulunmaktadır.  Köpeğimi,bilgisayarları, teknolojiyi, havacılığı, gezmeyi, futbolu (özellikle Fenerbahçe'yi) severim.
    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ış.