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.



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. Kaynak dosyayı indirmek için tıklayın