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