Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak)

Önce 400 x 400 piksellik boş bir sayfa açın ve arka fonuna istediğiniz bir rengi verin. Ben beyaz bıraktım. Yeni bir layer oluşturun. (Nasıl yapıldığını bildiğinizi varsayıyorum) Sayfanızın istediğiniz bir alanını seçin. Ben yandaki resimde olduğu gibi bir seçim yaptım

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 2-4

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 2-4

Köşeleri yuvarlak olmasını istediyorum. Bunun için renk kanallarının bulunduğu Channels sekmesine geçiyorum ve yeni bir kanal yaratıyorum. Renk paletlerimi sıfırlamak için D tuşuna basıyorum. Böylece üst rengim siyah alt rengimde beyaz oluyor. Sıra bu seçtiğimi alan boyamaya geliyor. İster boya kovasını kullanarak isterseniz de Ctrl + Backspace tuşları ile seçtiğimiz alanın içini boyayabilirsiniz.

Not : Ctrl + Backspace tuşları o anda seçili olan arka zemin rengini seçili alanı doldurmak için kullanılır.

Şimdi Ctrl + D ile seçimi kaldırıyoruz ve Filter>Blur>Guassian Blur ile 3.5 değerinde blur veriyoruz. Sonra Image>Adjust>Levels a gidiyor ve alttaki okları keskin bir görüntü yakalayana kadar ortaya yaklaştırıyoruz. Şimdi kenarları oval bir butonumuz oldu. Ctrl tuşu ile birlikte "Alpha 1" isimli bu yeni kanalımıza tıklayıp butonumuzu seçili yapıyoruz ve Layers sekmesini tıklayıp channel dan çıkıyoruz.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 3-3

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 3-3

Şimdi layers sekmesindeki boş layerımızda seçili alanı istediğimiz bir renk ile dolduruyoruz. Bunun için önce rengimizi değiştiriyoruz. Ben R:255 G:126 B:0 değerlerini seçip yandaki turuncu rengi kullandım. Şeklimizi boyadıktan sonra Ctrl + D ile seçimi kapatıyoruz.

Yandaki gibi alta doğru daralan bir butonunuz olmasını istiyorsanız. Edit>Transform>Perspective i seçin ve fareniz ile istediğiniz şekli verin.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 4-4

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 4-4

Şimdi sıra geldi pırıltıları vermeye. Hemen yeni bir layer açın. Photoshop kullanıyorsanız layerlar ile dost olmalısınız. Yapacağınız her işlem için yeni bir layer kullanmak detay gerektiren çalışmalarınızda sizin için daha büyük kolaylık sağlayacaktır. Freeform pen kullanarak yandaki gibi bir şekil çizin ve çizime sağ tıklayarak "Make Selection" diyerek çiziminizi seçili hale getirin. Tekrar sağ tıklayarak bu seferde "Turn off path" ile çizim aracımızı kapatıyoruz. Şimdi yeni yaptığımız layerı bu seçili olan alanımız ile beyaz renkle dolduruyoruz.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 5-3

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 5-3

Ctrl tuşu ile birlikte "Layer 1" i tıklayıp alanı seçin. Select>Modify>Contract ile 1 değerini girin ve Select>Inverse seçeneği ile seçiminizi ters çevirin. Şimdi de "Layer 2" yi bir kez tıklayıp o layera geçin ve delete tuşu ile fazlalıkları silin. 3-4 kez daha DELETE tuşuna basıp köşeleri keskinleştirin. Alanımızın hala seçili olmasına dikkat edin

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 6-3

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 6-3

D tuşuna basarak renklerimizi sıfırlayalım. Linear Grident ile "Foreground to transparent" seçeneğini seçili alanımıza uygulayacağız. Böylece Beyazdan şeffafa doğru bir geçiş yapmış olacağız

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 7-1

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 7-1

Şimdi de sıra geldi pırıltıyı dengelemeye. Bunun için butonumuzun altına hafif bir karartma yapmamız gerekiyor. Beyaz için yaptığımız işlemi bu seferde butonun altına siyah renk için yapıyoruz. Önce kalem ile alanımızı seçiyoruz. Sağ tıklayıp "Make selection" diyoruz. Ardından "Turn off path" ile kalemimizi kapatıyoruz

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 8-2

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 8-2

Unutmamamız gereken en önemli şey siyah renk vereceğimiz alan için yeni bir layer oluşturmak olacaktır. Sonra bu yeni layerı siyah ile boyuyoruz. "Layer 1" i Ctrl ile seçerek seçili hale getiriyoruz ve Select>Modify>Contract 1 değerini veriyoruz. Select>Inverse ile seçimi tersine çeviriyoruz ve 3-4 defa DELETE tuşuna basarak etrafını temizliyoruz.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 9-2

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 9-2

Siyah rengi seçin ve Linear Grident kullanarak seçili alanı yukarıdan aşağıya doğru renklendirin. Ctrl + D ile seçimi kapatın. Filter>Blur>Gaussion Blur ile siyah alanı biraz yumşatın. Ben 3 değerini verdim ve Opacity değerini 42 ye indirip geçirgenliğini arttırdım. Son olarak "layer 1" i seçip Layer>Effects>Drop shadow ile butonumuza gölge verebiliriz.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 10-2

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 10-2

Butonumuz henüz bitmedi. Bu buton neyin butonu ? Bunun için üzerine text aracımız uygun bir renkte yazımızı yazıyoruz ve butonumuzu tamamlıyoruz.

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 11-1

Photoshop'ta Parlak Metal Buton Yapımı(Web tasarımcılarının işine çok yarayacak) 11-1

Yaptığımız buton ile sınırlı kalmayın. Sizde yaratıcılığınızı kullanarak değişik renk ve şekillerde butonlar yapabilirsiniz.

Alıntıdır..