Web 2.0 Stilinde RSS Logo Tasarımı

Merhaba arkadaşlar ;
Artık internette sık sık gördüğümüz Web 2.0 stilinde logolar , bannerlar aslında temelinde bir yansıma ve saydam bir şeritten ibaret. Adım adım bir RSS logosunu bu şekilde tasarlamanın mantığını burada göstereceğim siz de kendi logolarınıza bu adımları uygulayabilirsiniz.

Adobe Photoshop'ta 500 - 500 piksel beyaz arkaplanlı bir dosya açın.Köşeleri yuvarlanmış(rounded rectangle tool) ile radius 8 px iken shift tuşuna basılı alttaki gibi bir kare çizin ve renklerini de daha sonra Gradient seçip #BC0000 ve #DE0002 olarak verin.

Bu layerı daha sonra Duplicate Layer diyerek çoğaltın. Çoğalttığınız layerın adını cam olarak atayın ve üstte alın. Bu layerın Blending Options Overlay den rengini #FFFFFF olarak verelim ve opacity %50 getirelim. Daha sonra alttaki rengi elde etmeniz gerekte , square marquee tool ile alttaki gibi bir seçim yapın ve Delete tuşuna basarak o kısmı silin.
Red square
Şeklimize bir çeper görünümü eklemek için 1 piksel genişliğinde daha koyu bir kırmızı alttaki gibi ekledim.
Expand selection
Kenarlarına da beyaz çizgiler ekleyerek uclarından Marquee Tool -Feather 30 iken biraz silerek alttaki görseli elde edelim.

Şimdi RSS ikonu için gerekli beyaz şeritleri AutoShapes kısmından bularak ekleyelim. Daire ve parantezleri kullanın.

Görselimiz tamam şimdi yansımayı tamamlayacağız. Gaussian Blur 1 pks olarak alttaki gibi verelim.
Gaussian blur

Daha sonra görselin 1e 1 kopyasını aşağı basmak için Layerı duplicate edelim ve Flip Vertical diyelim.

Aynı şekilde Marquee tool ile feather 30 iken 2-3 kere delete tuşuna basalım.

Alttaki yansıma layerının Opacity sini çokaz düşürürseniz alttaki şekli elde edersiniz.

Bu örneği çeşitli renkler ve logolara alttaki gibi uygulayabilirsiniz.

Cool glassy icon Photoshop created


Referans : 9Tutorials



7 yorum:

by_r4z0r!!! dedi ki...

öncelikle teşekkürler.
bu dersi çok beğendim ama biraz anlatımda darlıklar var (belki ben amatör olduğum için öyle gelmiştir)
mesela autoshapes kontrolü belirtilmemiş
ve #BC0000 #DE0002 renkleri yeşil derste kırmızı gösterilmiş...yardımcı olursanız sevinirim...

NebulaTurk dedi ki...

Çok işime yaradı gerçekten eline sağlık

KucuKCocuK dedi ki...

Benimde bir sorunum var. Amatör olduğum için bir türlü beceremedim. Sorunuda anlayamadım. Şöyle anlatmaya çalışayım.

"...den rengini #FFFFFF olarak verelim ve opacity %50 getirelim. Daha sonra alttaki rengi elde etmeniz gerekte , square marquee tool ile alttaki gibi bir seçim yapın ve Delete tuşuna basarak o kısmı silin."

square marquee tool ile seçim yapıyorum ve delete tuşuna bastığımda seçtiğim kısmı değil Shape in tamamını siliyor.

ilk başta kareyi çizdiğimdede bir layer değil "shape 1" diye birşey oluşuyor(Belki bu normaldir ! Bilmiyorum).

Yardım ederseniz sevinirim.

Turgay Berberoglu dedi ki...

Arkadaşlar birinci adımda kırmızı kareyi çizerken yeni bir layer açarsanız ve bunu linkli resimde göstediğim gibi Fill Pixels'i seçerek çizerseniz renklendirmede problem yaşamazsınız. Gradient vermek istediğinizdede Layerı önizleme penceresinden Ctrl ile seçerseniz gradient uygulanacak alanı kare ile sınırlandırmış olursunuz...

http://img442.imageshack.us/img442/4491/redkutujz2.jpg

snefe dedi ki...

Galiba tam yerine geldim, eline sağlık devamını sabırsızlıkla bekliyoruz...

in_the_End dedi ki...

ben baya acemiyim heralde :D

rounded rectangle tool bunu bir türlü bulamadım nerde bu

ekolik dedi ki...

Çok Teşekkürler ancak burda tüm efektlere bir karaye uygulamışsınız ben burdan yola çıkarak bunları bir yazıya uyarlayamadım müsait bir vaktinizde web 2.0 tarzında bir yazı yazmanızı diliyorum yani efektler yansımalar vb yazıda olsun istiyorum şimdiden teşekkürler blogunuzu merakla takip ediyorum. veya yardımcı olabilecekseniz msninizide ekleyebilirim