Web 2.0 Etiket Yapalım (Badge)

Artık onu her yerde görüyorsunuz. Web 2.0 tabanlı olan olsun, olmayan olsun, neredeyse tüm sitelerde bu tür bir çalışma görmek mümkün. Dikkat çekiyor, bulunduğu yazının önemini gayet net yansıtıyor. Biz de gelin bu dersimizde bu çalışmayı en basit şekilde yapabilmeyi deneyelim.

Artık onu her yerde görüyorsunuz. Web 2.0 tabanlı olan olsun, olmayan olsun, neredeyse tüm sitelerde bu tür bir çalışma görmek mümkün. Dikkat çekiyor, bulunduğu yazının önemini gayet net yansıtıyor. Biz de gelin bu dersimizde bu çalışmayı en basit şekilde yapabilmeyi deneyelim.

Photoshop'ta yeni bir dosya açın ve yeni bir layer oluşturun. İsmini "badge" olarak belirleyin. Sonra Shape Tool'u seçin ve mevcut şekiller arasından 8 köşeli yıldızı bulup tıklayın.



Not: Eğer bu şekilde sizde görünmüyorsa, yüklemeniz gerekiyor. Zaten Photoshop'la birlikte geliyor, ayrıca bir yerde aramanıza gerek yok. Şekiller açıldığında kutucuğun sağ üstündeki ok işaretine tıklayın ve gelen menüden "Web"i seçin. (Bu CS4 için, eski sürümlerde "web" yerine "append" olabilir.)

Şimdi, şeklimizi seçtik, istediğimiz boyutta bir şekil çizelim. SHIFT tuşuna basarak çizerseniz orantılı büyüklükte çizmiş olursunuz. Şekli oluştururken pixel ya da path olarak oluşturun, vector shape layer olmamasın dikkat edin. Mesela ben path kullanacağım.

Sonra, Path panelinde iken Ctrl tuşuna basılı tutarken paneldeki şekil üzerine bir kez tıklayın. Ekrandaki şekil seçili hale gelecek. Sonra bunu bir renk ile dolgu yapın. Rengin ne olduğu şu an için çok mühim değil.



Sonra, Layer paneline geçin ve Ctrl+J'ye basın. Böylece aynı layer'dan bir tane daha elde etmiş olacaksınız. Şimdi Edit > Transform > Rotate menüsüne gidin. Şeklin kenarlarında tutamaçlar oluşacaktır, üstteki açı ayarları kısmına 23 rakamını girin. İsterseni el ile de çevirebilirsiniz. Böylece yapmak istediğimiz görünümü elde etmiş olduk. Şimdi bu iki şekli birleştirmemiz gerekiyor, bunun için Ctrl tuşuna basarak Layers panelindeki iki şekle de tıklıyarak seçiyoruz ve Ctrl+E tuşlarına basıyoruz, böylece iki şeklimiz tek bir şekil haline dönüşüyor.



Şimdi son oluşan layer seçili iken Layers panelinden üstteki "Lock Transparent Pixel" ikonuna tıklayın. Renk dolgu kısmından önrengi (foreground) #ff8400, arkaplan rengini (background) ise # ff4900 olarak ayarlayın. Şimdi Gradient Tool'u kullanarak şeklin sağ altından sol üstüne doğru çekerek dolgu yapın. Yine SHIFT tuşuna basılı olarak çekerseniz, tam bir 45 derecelik açı yakalarsınız.



Şimdi biraz efekt ekleyeceğiz. Layer üzerine çift tıklayın ve açılan pencerelerde aşağıdaki gibi ayarlamalar yapın:









Şimdi "Ok" deyip burayı kapatın. Yeni bir layer oluşturun ve ona "aydınlatma" ismini verin. Daire seçim aracını (Circular Marque Tool) kullanarak az önceki şeklimizin üzerinde yeteri büyüklükte bir alanı seçin ve içine beyaz renkte bir dolgu yapın. Böylece etiketimizin üst kısmı beyaz renkte olacaktır. Şimdi Layer paletinde iken "badge" layeri ile "aydınlatma" layerinin tam arasına Alt tuşuna basarak tıklayın. Birlikte guruplandırmış olacaksınız. Şimdi son layer'ın saydamlık (opacity) ayarını 30 yapın.



Şimdi "aydınlatma" layeri için mask ikonuna tıklayın. Gradient aracını seçin ve siyahtan beyaza gradient ile sağ alttan sol üste doğru çekin. Aşağıdaki gibi bir sonuç çıkacak:



Güzel oldu sanırım. Şimdi de üzerine bir yazı ekleyelim. Şu sıralar çok kullanılan bir web 2.0 fontu ile bir yazı yazıyorum.



Yazıya da bir iki efekt uygularsak çok daha iyi görünecek. Bunun için Layer üzerine çift tıklayın ve gelen pencerede aşağıdaki ayarları yapın.



Web siteniz için bir etiket oluşturmuş oldunuz. Daha da geliştirebilirsiniz tabi. Kolay gelsin.


  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Teşekkürler, yabancı sitelerden hazırın indirip kullanmaktan çok daha mantıklı biz çözüm!
Bunları bi de SK için yaptığını görebilseydik makbule geçecekti, burhan bakacaktı... :)
Bakınız: Yakında Geliyor. Sanalkurs 7. Sezon Bölüm 1, merak etme Abdullah, kahramanımız ölmüyor, aynen rolüne devam ediyor. Tasarım bittikten sonra da artık benim de söyleyeceğim şeyler olacak. :gul:
SYLAR öldü, oynatacak başka adam mı bulsak ?
iki nokta etıket ne demek analamadım normal gıysılerımızdekı etıketmı bu
o font'u nereden bulacağız?
Vag isimli bir font arkadaşlar. Google'dan arayın, bulabilirsiniz.
çok saol aydınlık yapmayı şimdi daha iyi öğrendim

Yukarı Git