10 Nisan 2012 Salı

Navigation Menu Yapımı (Resimli)


Bugün size Photoshop programını kullanarak menü tasarımının yapım aşamalarını anlatacağım inş.
1- İlk olarak 540’a 440 px boyutlarında ve arka plan rengi  #1b1b1b renk formatında olacak şekilde bir sayfa açıyoruz.

2 -
 Sonra yeni bir layer oluşturuyoruz  ve oluşturduğumuz bu yeni layer da 250’e 300 px boyutlarında Rectangular Marquee Tool aracını kullanarak bir seçim alanı oluşturuyoruz.

3-
  Daha sonra bu seçim alanını Gradient Tool aracınının renk geçişleri özelliğini  # 184b27 tonundan  #478b29 tonuna geçiş yapacak şekilde ayarlıyoruz. ve Gradient Toolun özelliğinide Radial Gradient yapıp seçim alanımızı bu renk geçişiyle dolduruyoruz.
  

 

4-
  Daha sonra Gradient tool aracını kullanarak doldurduğumuz seçim alanının yer aldığı bu layer ın Blending Option ayarlarını aşağıdaki gibi yapıyoruz ve elde edilen görünüm de bu şekilde oluyor.

 

5-
 Text Tool aracını seçtikten sonra  “Menü” yazısını  istenilen  yazı tipi ve büyüklüğünü ayarladıktan sonra yazıyoruz.

 

6-
 Rounded Rectangle  Tool aracını kullanarak yeşil renk tonuyla doldurduğumuz alanın içine  
# 111111   renk  tonunu kullanarak şekli kenarlardan 10 px boşluk kalacak şekilde çiziyoruz ve aşağıdaki görüntüyü elde ediyoruz.

 

7-
 Yeni bir layer açıp bu layer ın içine kenarlardan yaklaşık 10 px boşluk kalacak şekilde Rectangular  Marquee Tool aracı ile bir seçim alanı oluşturuyoruz. Ve bu seçim alanını Gradient Tool aracını kullanarak  tepe değeri  
#ffffff  (beyaz)  alt değeride #00000 (siyah)  olacak şekilde ayarlayıp   Radial Gradient yapıp  renk geçiş efektini veriyoruz. Bu renk geçiş efektini verdikten sonra da bulunduğumuz layer ın  opacity değerini  %5’ e kadar düşürüyoruz ve aşağıdaki görüntüyü elde ediyoruz.

 

8-
  İç tarafa vermiş olduğumuz hafif transparanlık efektinden sonra linklerimizi ekliyoruz. Benim  kullanmış olduğum renk kodu   # 5a5a5a  dır. Mouse üzerine geldiğinde ise kullandığım renk kodu : #ffffff (beyaz) dır. Bu işlemler sonucunda elde etmiş olduğum tasarım görünümü aşağıdaki gibidir.

 

9-
 Linkleri yazdıktan sonra yeni bir layer açıp, Rectangular Marquee  Tool aracını kullanarak 200 px genişliğinde 1 px yüksekliğinde bir seçim alanı oluşturuyoruz. (Bu aracı seçtikten sonra Style özelliğini Fixed Size  yaptığınızda istedğiniz boyuta seçim aracınızı ayarlayabiliyorsunuz.) Bu seçim alanını da  # 343434 renk koduyla içiniPaint Bucket Tool  aracını kullanarak dolduruyorum. Ve bu işlem sonucunda oluşturmuş olduğum 1 px yüksekliğinde ki çizgiyi kopyalayıp 5 kere çoğaltıyorum. Her bir çizginin bulunduğu  layer  Opacity değerini  %60 a kadar düşürüyorum. Bu işlem sonucunda elde etmiş olduğum ekran görüntüsü aşağıdaki gibi olmaktadır.

 
10- Kendi tercihinize kalmış lakin ben Mouse un üzerine geldiğimiz linkin arkaplan renginde de değişiklik yapmak istedim. Rectangular Marquee Tool  aracının Fixed Sizeözelliğinden  200 px genişliğinde ve 25 px yüksekliğinde ayarlamalar yaptıktan sonra yeni bir seçim alanı oluşturdum. Tabi bu seçim alanını yeni bir layer da yapıyoruz. Bu seçim alanını da  #343434  renk kodunu kullanarak Paint Bucket  Tool aracıyla dolduruyorum. Sonra da Layer ın Opacity değerini % e kadar düşürüyorum. Sonunda elde etmiş olduğum görüntü aşağıda ki gibi olmaktadır.


 
Sonuç :  Gördüğünüz üzere Photoshop Eğitimi Linkinin arka planı farklı renk tonuyla kaplanmış olarak görünmektedir. Buda tasarımınıza farklı bir görünüm kazandırmıştır.

0 yorum:

Yorum Gönder