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…
Photoshop-TR.com Forumlarında tartışın, sorunlarınızı paylaşın, Photoshop'u etkili kullanın.
”path ile bir yay oluşturuyoruz.” denmiş ama ben ayıptır sölemesi path hangisi bilmiyorum
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…
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.
yuvarlağı çiziyorum ama layer vermiyor yardımcı olursanız sevinirim.çalışmalarınız tek kelimeyle harika böyle devam edin
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.
sağolun teşekkürler
Teşekkürler
Ben herhangi bir .png dosyasının
web 2.0 kalitesinde nasıl icon – simge yapıldıgını
ögrenmek istiyorum.
Güzel Birsey Mis
Arkadaşlar Bende Henüz Photoshop Programı Bile Yok İndiriyorum Olmuyor Yardımcı Olursanız Çok Mutlu Olurum…
Teşekkür Ederim…
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…
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.
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
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.
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…
yha ben make selectiona tıklıyorum sonra raidusu 0 yapıyorum çizgi kayboluyo kesilmiyo lutfen cwp yazım yardım edın
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
teşekkürler
Ya bu kalemi kullanmak nekadar zor böyle sinir oldum :S:S
gerçekten oldu yaptım
ve işime yarayacak bir sürü şey öğrendim çok saolun.
Bilgi icin teşekkürler güzel paylaşımlar da bulunmuşsunuz…
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.
arkadaşım ellerine sağlık aradığım şey buydu
anlatımınız harikaydı. emeginize saglık, teşekkürler
çok teşekkürler