Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Photoshop Dersleri: Web 2.0 Stilinde RSS Logo Tasarımı.

AnıL Karahan

🏅Acemi Tasarımcı🏅
Katılım
20 Eki 2007
Mesajlar
60
Tepkime puanı
1
Web sitesi
www.adobedestek.net
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.
kare.JPG

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.
tutoria01.png

Şeklimize bir çeper görünümü eklemek için 1 piksel genişliğinde daha koyu bir kırmızı alttaki gibi ekledim.
tutoria03.png

Kenarlarına da beyaz çizgiler ekleyerek uclarından Marquee Tool -Feather 30 iken biraz silerek alttaki görseli elde edelim
tutoria010.png

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

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

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

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

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

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

Ali Emre

👑Efsanevi Grafiker👑
Katılım
30 Tem 2007
Mesajlar
2,141
Tepkime puanı
85
Web sitesi
gncart.com
Paylaşım için teşekkür ederiz.Bu tür butonlar hazırlamayı çok seviyorum.
 

mavisland

🏅Acemi Tasarımcı🏅
Katılım
1 Ocak 2008
Mesajlar
60
Tepkime puanı
0
Web sitesi
tanjuyildiz.com
Anıl Karahan, verdiğin bilgiler için teşekkürler. Bu Gloss butonlar Web 2.0 ile iyice hayatımıza yerleşti. Ve seninde bunun yapımını dile getirmen güzel olmuş. Kolay gelsin.
 

WebCodeR

🌱Yeni Üye🌱
Katılım
26 Nis 2008
Mesajlar
5
Tepkime puanı
0
Şeklimize bir çeper görünümü eklemek için 1 piksel genişliğinde daha koyu bir kırmızı alttaki gibi ekledim

Bunu anlamadım yardımcı olabilir misiniz ?
 

chaqal

🏅Acemi Tasarımcı🏅
Katılım
28 Kas 2007
Mesajlar
43
Tepkime puanı
0
gaussion bluri hangi layera uyguluyoruz. daha açık anlatsaydın keşke...
 

silmarillion

🏅Acemi Tasarımcı🏅
Katılım
20 Şub 2008
Mesajlar
49
Tepkime puanı
0
Çok teşekkür ederim arkadaşım ve ellerine sağlık.Yeni bir teknik daha öğrendim sayende.

Ek : Şimdi denedim fakat 2 yeri anlamadım yarım kaldı.
1.si "Gradient seçip #BC0000 ve #DE0002 olarak verin." bu renkleri nasıl veriyoruz.2 rengi aynı anda girebileceğim bir yer bulamadım.
2.si Blending Options Overlay nerede?
Hevesim kursağımda kaldı : )
 
Son düzenleme:

foxmuld3r

🏅Acemi Tasarımcı🏅
Katılım
8 May 2008
Mesajlar
89
Tepkime puanı
5
Web sitesi
www.epsilos.com
Ben bunu çok daha uzun bir yoldan yapıyordum :) nasıl düşünememişim. Teşekkürler
 

gogo70

🌱Yeni Üye🌱
Katılım
19 Mar 2008
Mesajlar
3
Tepkime puanı
0
Bu Stiller çok göze hoş gelior ya
güzel paylaşım emeğine sağlık
 

zkursatt

🏅Acemi Tasarımcı🏅
Katılım
8 Ocak 2009
Mesajlar
84
Tepkime puanı
1
Cok güzel bir paylaşım teşekkürler zamanında cok aradığım bir paylaşım dı ama zorlanarak üzerinde gelmiştim böyle bir konuyu günler ce aramıstım ama bulamamıştım . Hayal et ve çiz bir arkadaşımda senin imzanda yazanı bana söyledi hayal ettim ve iğrenç bir yaratık cıktı ortaya ama zamanla gelişti .. hayal et ve çiz herşey zamanla... olarak düzeltelim istersen bunu ... teşekkürler tekrardan paylaşım için ...
 
Üst