Işıklı web2.0 buton yapımı (tarzan değildir :D)

Photoshop Dersleri - Işıklı web2.0 buton yapımı (tarzan değildir :D) ...

Cevapla
Işıklı web2.0 buton yapımı (tarzan değildir :D)
streetgm isimli Üye şimdilik offline konumundadır

streetgm

Grafiker / İzmir

Standart

Işıklı web2.0 buton yapımı (tarzan değildir :D)

Alt 27-02-2009 #1
Sponsorlu Bağlantılar

Yeni sitelerde sıklıkla görmeye başladığımız ışıldayan bir web 2.0 butonlarını sizde kolayca yapabilirsiniz. Resimdeki bir button yapmak için aşağıdaki yönergeleri takip etmeniz yeterlidir.
Işıklı web2.0 buton yapımı (tarzan değildir :D)

1. Yeni bir sayfa oluşturma

Adobe Photoshopta yeni bir sayfa açın (ctrl+N) Resimdeki sarı alanları isteğinize göre değiştirebilirsiniz.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Açılan sayfada yeni bir layer oluşturun ve button adını verin.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Button layerı seçildikten sonra Rounded rectangle tool seçilir
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Radius değeri 7-8 olarak ayarlıyın. Bu değer çizimini yaptığınız dikdörtgenin köşelerinin yuvarlaklık değerini belirler.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Ayarlamayı yaptıktan sonra boş sayamıza resimdeki gibi bir dikdörtgen çizin.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
2.Buton yapımı

Button layerımıza sağ tıklayıp Blending options a girin.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Aşağıdaki resimlerdeki ayarlamaları sırasıyla yapın.
a: Drop shadow

Işıklı web2.0 buton yapımı (tarzan değildir :D)
b: Bevel and Emboss

Işıklı web2.0 buton yapımı (tarzan değildir :D)
c: Gradiant overlay

Işıklı web2.0 buton yapımı (tarzan değildir :D)
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Simdi buttonunuz aşağıdaki resimdeki gibi gözüküyor olması lazım.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
3: Üzerine birazda parlaklk verelim

Yeni bir layer oluşturup adınıda glass verelim
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Şimdi Retangular marquee tool u seçip CTRL ile beraber button layerımıza tıklayalım, buttonumuz seçili hale gelmiş olması gerekiyor. Şimdi glass layerımıza tıklayalım, ALT tuşuna basılı tutarak buttonumuzun parlaklık vereceğimiz yeri seçiyoruz. İşlemi resimdeki gibi yapınız.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Seçili alanı beyaz renge boyayınız (#ffffff)
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Glass layerımızın opacity değerini %18 - 20 olarak ayarlıyın.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Artık buttonumuz aşağıdaki şekilde gözüküyor olması lazım.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
4: Desen oluşturma

Glass ve button layerlarımızın arasına pattern adında yeni bir layer oluşturun.
Pattern layerımıza sağ tıklayıp blending options a girin.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Pattern Overlay e girin. Burda 5 px kalınlığında yatık çizgi kullanılmıştır. İstediğiniz pattern i kullanabilirsiniz. Yeni pattern oluşturmak için buradan faydalanabilirsiniz (İngilizce)
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Rectangular Marquee tool seçilip CTRL basılı tutulup button layerına tıklayınız. Daha sonra pattern layerını seçriniz. Pattern layerını Paint Bucket tool ( kova) ile boyayınız. Opacity ayarını % 5 olarak ayarlayınız.
5: Yazı Ekleme

Butonumuzun üzerine istediğiniz yazıyı beyaz renk ile yazınız (#ffffff). Yazımızın ayarlarını aşağıdaki gibi ayarlayınız.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Son olarak yazımıza blending options dan resimdeki gibi drop shadow efekti vereli.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Buttonumuzun artık son halini almiştır. Yukardaki anlatımıda sarı ile işaretlenmiş yerleri değiştirerek farklı sonuşlar elde edebilirsiniz.
Işıklı web2.0 buton yapımı (tarzan değildir :D)
Bu anlatım Photoshop CS2 baz alınarak anlatılmıştır, versiyona göre bazı farklılıklar olabilir.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

el_chancho isimli Üye şimdilik offline konumundadır

el_chancho(29)

Hiç Biri / Kocaeli

Standart
Alt 27-02-2009 #2
                             Sponsorlu Bağlantılar
güzel anlatım
Bu mesajdan alıntı yap
blueden isimli Üye şimdilik offline konumundadır

blueden

Hiç Biri / Konya

Standart
Alt 27-02-2009 #3
Emeğinize sağlık. Birde resimlerin üstüne opacity düşürerek, sitemizin logosunu ya da rumuzunu koysanızda; herhangi bir çalıntıya engel olsa, daha iyi olur değil mi? Işıklı web2.0 buton yapımı (tarzan değildir :D)

Elinize sağlık.
Bu mesajdan alıntı yap
çiçocadı isimli Üye şimdilik offline konumundadır

çiçocadı(33)

Yrd. Grafiker / İstanbul

Standart
Alt 27-02-2009 #4
çok teşekkür ederim bilgileri paylaşmak çok güzel...
Bu mesajdan alıntı yap
çiçocadı isimli Üye şimdilik offline konumundadır

çiçocadı(33)

Yrd. Grafiker / İstanbul

Standart
Alt 27-02-2009 #5
çok teşekkürler...
Bu mesajdan alıntı yap
streetgm isimli Üye şimdilik offline konumundadır

streetgm

Grafiker / İzmir

Standart
Alt 28-02-2009 #6
Emeğinize sağlık. Birde resimlerin üstüne opacity düşürerek, sitemizin logosunu ya da rumuzunu koysanızda; herhangi bir çalıntıya engel olsa, daha iyi olur değil mi? Işıklı web2.0 buton yapımı (tarzan değildir :D)

Elinize sağlık.
evet doğru dediniz bidahakine koyacam Işıklı web2.0 buton yapımı (tarzan değildir :D)
Bu mesajdan alıntı yap
UFB16 isimli Üye şimdilik offline konumundadır

UFB16

Öğrenci (Diğer) / Bursa

Standart
Alt 15-03-2009 #7
Çok teşekkürler çok faydalı olduIşıklı web2.0 buton yapımı (tarzan değildir :D)
Bu mesajdan alıntı yap
turgay347 isimli Üye şimdilik offline konumundadır

turgay347

Öğrenci (Diğer) / Çankırı

Standart
Alt 14-11-2011 #8
Elinize Sağlık Yaptım Süper oldu Işıklı web2.0 buton yapımı (tarzan değildir :D)..
Bu mesajdan alıntı yap
scanman isimli Üye şimdilik offline konumundadır

scanman

Hiç Biri / Malatya

Standart
Alt 14-11-2011 #9
teşekkürler güzel anlatım ben bile yaptım. sanırım oldu

Işıklı web2.0 buton yapımı (tarzan değildir :D)
Bu mesajdan alıntı yap
serdardalbul isimli Üye şimdilik offline konumundadır

serdardalbul

Öğrenci (Diğer) / Elazığ

Standart
Alt 14-11-2011 #10
elinize sağlık çok faydalı oldu Işıklı web2.0 buton yapımı (tarzan değildir :D)
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Şeffaf Buton Yapımı Levoero Photoshop Dersleri 4 6 Gün önce 14:21:48
Buton Yapımı darkdevil85 Photoshop Dersleri 5 28-04-2011 23:31:12
buton yapımı hakkında serkan187 Flash 10 01-09-2010 12:08:33
Yanıp Sönen Işıklı Yazı Yapımı anqelgirl Photoshop Dersleri 5 17-09-2009 11:52:40
buton yapımı naklov Photoshop 11 26-10-2007 21:33:26

Kapat
Şifremi Unuttum?