25 Kas 2009

Photoshop’ta web buton yapımı

Author: admin | Filed under: Photoshop Dersleri

Ö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
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.
Ş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.
Åž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.
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
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
Åž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
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.
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.
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.
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

Tags: ,

Leave a Reply