Photoshop ile Web 2.0 Butonları Tasarlamak

Merhaba arkadaşlar,

Bu ilk dersimde sizlere, Web 2.0 anlayışı ile gelişen görsel unsrulardan buton yapımını anlatacağım. Kısaca Web 2.0 için web tasarımının modern hali diyebiliriz.

Bu tarz buton ve görsel unsurların yapımı aslında çok basit olmasına rağmen, gelen şikayetler hep istenilen şekilde olmadığı doğrultusundadır. Bunun püf noktası ise sadece renkler.

Ek bilgi olarak bir başka dersde, Web 2.0 için uygun renk paletini içeren dosyaları da yine photoshop-tr‘de bulabileceksiniz.

Öncelikle istediğimiz boyutta bir çalışma sayfası açıyor ve Elliptical Marquee Tool yardımıyla düzgün bir daire alanı belirliyoruz. Ben çalışma sayfa alanı olarak yani Canvas için 250×250 boyutunu ve şekil olarak daireyi seçtim. Siz istediğiniz boyutlarda ve şekillerde çalışabilirsiniz.

NOT: Burada tam bir daire çizebilmek için Shift tuşuna basılı tutarak istediğim boyutta bir daire alanı tanımladım. Bu işlemi daha sonra Selection bölümünden de yapabilirsiniz.

Dairemizin bulunduğu layer’da sağ klikleyerek Blending Options > Gradient Overlay seçeneklerinden aşağıdaki ayarları yapıp, ardından Paint Bucket ile dolduruyoruz… Aşağıdaki imajda renk kodlarını da görebilirsiniz, ancak siz aynı mantıkla dilediğiniz renk kombinasyonunu kullanabilirsiniz.

Bu adıma geçmeden önce Ctrl + D yaparak seçili alanımızı Deselect yapmış oluyoruz. Şimdi imajımızın bulunduğu layer’da, tekrar sağ tıklayıp Blending Options menüsünü açıyor ve Stroke sekmesinden aşağıdaki ayarları yapıyoruz.

Stroke işlemini de gerçekleştirdikten sonra tekrar Blending Options menüsünden Inner Glow sekmesine gidiyor ve aşağıdaki ayarları yapıyoruz.

Bundan sonraki adımlar biraz daha ileri seviye.

Öncelikle imajımızın bulunduğu layer’ı seçiyor, ardından Ctrl tuşuna basılı tutarken, mouse ile layer’ın hemen en başındaki görünteye sol tıklıyoruz. Böylelikle imajımızın seçili hale geldiğini görüyoruz. Toolbar‘dan Pen Tool‘u seçerek aşağıdaki ayarların kurulu olduğundan emin oluyoruz.

Ardından imajımızın dışından bir nokta seçiyor, 2. noktayı dairenin iç kısımlarında bir yerlerde işaretliyor ve işaretlediğimiz yeri sanki tutup çekermişcesine path ile bir yay oluşturuyoruz. Bu işlemi yine dairenin dışında işaretlediğimiz bir 3. nokta için de gerçekleştiriyoruz.

Şeklin içinde bir yay oluşturduktan sonra Path‘i kapatmak için çalışma alanını dışında noktalar belirliyor ve ilk noktaya ulaşarak Path‘i kapatıyoruz.

Path‘i kapattıktan sonra imaj içinde path üstünde bir noktaya fare ile sağ tıkladığımızda bir menü açılacaktır. Bu menüden Make Selection… sekmesini işaretleyip çıkan pencerede Radius‘u 0(sıfır) olarak ayarladıktan sonra tamam diyoruz. Böylelikle imajımızın seçili alanı, belirlediğimiz yay ile kesilmiş olacaktır.

Hemen yeni bir layer oluşturuyor ve bu yeni layer seçiliyken Select > Modify > Contract sekmelerini takip ederek Radius‘u 4 olarak ayarlıyoruz. Bu şekilde eskisinde 4 pixel daha küçük bir seçim alanı oluşacak. Oluşan yeni seçim alanı, butonumuzun parlaklık efekti için kullanılacak. Seçimimizi kaldırmadan ilk önce renk paletimizi D‘ye basarak resetliyoruz. Ardından X‘e basarak renk paletini terse çeviriyoruz ve Gradient Tool‘u seçerek Foreground to Transparent ile seçimimizi alttan yukarı doğru grade ediyoruz.

Butonumuz bitmek üzere. Ancak ben biraz daha canlılık katmak için butonun üstüne küçük bir parlaklık daha koymak istiyorum. İmajımızın alt tarafına yaptığımız parlaklık efekti için gerçekleştirdiğimiz adımları bu defa daha küçük bir alan için yapıyoruz.

Bu defa alanımızın içini Gradient ile değil opak beyaz (düz beyaz) ile renklendiriyoruz.

Son olarak da dilerseniz buton içine harf veya şekiller ekleyerek imajımızı tamamlamış oluyoruz.

Çalışmanın son hali için tıklayınız…

Elbette bundan sonrası tamamıyle sizin hayal gücünüze kalmış. İstediğiniz renk, boyut, parlaklık değerleri ve şekillerde çalışabilirsiniz. İsterseniz imajınızın arkasına bir arkaplan ile zemin hazırlayabilir ya da farklı efektler ile değiştirebilirsiniz.

Kolay gelsin…

Bir önceki çalışmamızda Photoshop ile Renklendirme Efektleri dersini anlatmıştık,  okumak için lütfen tıklayın.

Bu yazıyı

Bu konuda toplam 32 yorum var. Siz de yorum yapın, sorularınızı hemen yanıtlayalım

  1. hüseyin yıldırım
    1

    daha detaylı anlatabilirdin takıldıgımız yerler oldu.sağol

  2. sagolun çok teşekkür ederim

  3. tşk hocam güzel anlatım

  4. Çok teşekkürler şu alt kısım boyama olayını yapamadım ama yinede yuvarlağın içine anahtar deliği gibi değişik saçma şeyler yaptım 😀

  5. Güzel bir anlatım olmuş elinize sağlık

  6. çok teşekkürler

  7. anlatımınız harikaydı. emeginize saglık, teşekkürler

  8. arkadaşım ellerine sağlık aradığım şey buydu

  9. yaa bn photoshop cs 3 ü Türkçe yamasıya kullanıyorum ve anlattıklarınız hiç birini yapamıyorum

    • Bu programı İngilizce kullanmanızı tavsiye ederiz, zira programın orijinal dili İngilizce olmakla birlikte, bütün güncellemeler İngilizce olarak geliştiriliyor.

  10. Bilgi icin teşekkürler güzel paylaşımlar da bulunmuşsunuz…

  11. gerçekten oldu yaptım 🙂
    ve işime yarayacak bir sürü şey öğrendim çok saolun.

  12. Ya bu kalemi kullanmak nekadar zor böyle sinir oldum :S:S

  13. teşekkürler

  14. kamuran birer
    15

    abi burdaki photoshop un sürümü ne,bende cs2 versiyon 9.0.2 var ve burdaki ikonlarla alakası yok.birebir birşeyler yapalım dedik,birşey çıkmadı ortaya

  15. yha ben make selectiona tıklıyorum sonra raidusu 0 yapıyorum çizgi kayboluyo kesilmiyo lutfen cwp yazım yardım edın

  16. Offf. Hiç cevap yazmayın. Gereksiz yere siteyi meşgul ettiğim için özür dilerim. Sadece biraz daha dikkatli bakmak gerekiyormuş araçlara. Blending options’u arıyordum buldum. Tekrar iyi çalışmalar…

  17. Merhaba. İyi çalışmalar. Photoshop öğrenmeye bugün başladım. Aslında corel kullanıyorum, o yüzden photoshop öğrenmenin benim için çok zor olmayacağını düşünmüştüm. Fakat burada yazılanları anlamıyorum. Mesela blending olayı corelde çoğaltmakla alakalı. photoshop cs2 kurdum siz hangi versiyonu kullanıyorsunuz. Versiyonlar arasında çok mu fark oluyor. Bu programı öğrenmek için 1 hafta sürem var. Sizce bunu başarabilir miyim.

  18. ahmet Ugur
    19

    Ellerine Sağlık Çok güzel bir çalışma PS’de merak ettiğim bir konuydu ve sayende öğrendim 🙂 çok teşekkürler emeğine sağlık
    saygılar

  19. death_korsan
    20

    Güzel bi çalışma ellerine sağlık…
    Uğur yeni başlıyorsan bu derslerden önce başlangıç seviyesindeki derslere baksan bence senin için daha yararlı olur.

  20. path i kapadktan sonra make selection 0 seçip yay seçili alan görüntüdeki gibi çıkmıyo. nasıl yapacağız deteylı anlatırmısın…

  21. Arkadaşlar Bende Henüz Photoshop Programı Bile Yok İndiriyorum Olmuyor Yardımcı Olursanız Çok Mutlu Olurum…

    Teşekkür Ederim…

  22. Güzel Birsey Mis

  23. Ben herhangi bir .png dosyasının
    web 2.0 kalitesinde nasıl icon – simge yapıldıgını
    ögrenmek istiyorum.

  24. Teşekkürler

  25. sağolun teşekkürler

  26. Herhangi bir seçimi layer yapmak için seçim aracı aktif iken (yani araç kutusunda M veya W araçlarından herhangi biri aktif durumda olmalıdır!) seçimin üstüne gelerek sağ tıklayın ve Layer via Copy (seçimi kopyasını alarak layer yapmak anlamına gelir) veya Layer via Cut (seçimi keserek layer yapar) komutunu verin.Yanlız dikkat etmeniz gereken önemli birşey var ki;hangi layerdan seçimlik alan almak istiyorsanız o layerın aktif durumda olması gerekmektedir.

  27. yuvarlağı çiziyorum ama layer vermiyor yardımcı olursanız sevinirim.çalışmalarınız tek kelimeyle harika böyle devam edin

  28. Path pen (P) aracı ile çizilen vektörel çizgilerdir.Photoshopta genel olarak dekupaj işlemi için kullanılır fakat uzmanlık anlamında daha birçok işlevi vardır.

  29. vlla billa bende bilmiyo.path ne abi?
    bide şey var bu yuvarlağın alt kısmını açık renge boyadık ya… ben onu boyadığımda bende dışarı taştı boyalar…(O kesikli çizgilerin dışına)
    onu nasıl düzeltecez onu bulamadım…

  30. ”path ile bir yay oluşturuyoruz.” denmiş ama ben ayıptır sölemesi path hangisi bilmiyorum 😀

Yorum yapın

Bu konuya aşağıdaki sayfalar gibi siz de link verebilirsiniz.
Sağ tıkla > Bağlantı Adresi Kopyala >> Photoshop ile Web 2.0 Butonları Tasarlamak

  1. 1