Yumuşak köşeli kutucuk nasıl bişeydir, ne işe yarar?

Bu sitede gördüğünüz çoğu şey yumuşak köşelere sahip kutucuklar ile görüntülenmekte, bunun dışında butonlar ve üst menüde gördüğünüz tab şeklindeki menü de yumuşak köşelere sahip. Yumuşak köşeden kastım, dikdörtgen gibi sert köşeler yerine yuvarlatılmış dönüşlere sahip köşeli şekildir.
Bu dökümanda basit bir dikdörtgeni çeşitli yöntemlerle yumuşatıp köşelerini kuvarlatmayı göreceğiz.

Öncelikle boş bir çalışma belgesinde bir dikdörtgen seçim yapıp içerisini istediğimiz dolgu rengi ile dolduruyoruz.

Figür 1

Ardından seçimi kaldırıp bütün bunları tek bir katmanda topluyoruz.

Figür 2

Bu katmanı seçip resimde iken sağ tıklıyoruz, Filter / Blur / Gaussian Blur (IIR)'a tıklayıp kendi ayar panelini açıyoruz.

Figür 3

Burada yukarıdaki gibi, 10,10 değerleri verip ok diyoruz, imajdaki çizdiğimiz sert hatlı kutucuk bulanacaktır.

Figür 4

Şimdi bu bulanık hattı sertleştirelim, Resimde sağ tıklayıp, Layer / Colors / Levels'a tıklayıp levels penceresini açalım.

Figür 5

Yukardaki resimde görüldüğü gibi üst kısımdaki iki tuvarlak içerisine alınmış oku birbirine yaklaştırdığımızda uygulanacak olan katmandaki değişim hemen görülebilir şekilde sertleşmeye başlayacaktır. Resimin yumuşaklığını bozmamak için onları fazla yaklaştırmıyoruz. Biraz oynayarak uygun noktaları resime göre zaten bulabilirsiniz. Benim yaptığım yumuşaklık ayarı sonucu aşağıdaki gibi olacaktır.

Figür 6

Araç penceresinden resksel seçim ikonuna tıklayıp renge göre seç aracını seçelim. Resimde beyaz kısımlardan herhangi bir yere tıkladığımızda o renge ait belirli toleransa göre olan renklerin kapladığı kısımlar seçilecektir. Bu toleransı ne kadar düşürürsek seçim o kadar sert ama artık renk o kadar az oalcaktır. Araç ayarları panelinden bu toleransı ayarlayabilirsiniz. Burada kendinize ve o anda çalıştığınız resime göre bir denge bulmanız gerekir.

Figür 7

Seçimi temizleyelim ve katmanı yeni adla kaydedip yeni bir artalan katmanı oluşturalım.

Figür 8

Figür 9

Artalanı beyaz yaptığımzda daha önce elde ettiğimiz şekillerden birin elde ediyoruz ancak, bu sefer farklı katmanda.. :-)

Böylece yuvarlak hatlı bir kutucuk elde ettik, bunun farklı renklerdeki kombinasyonlarını, üzerine eklenecek ikonları ve farklı boyutlarını düşünürsek oldukça fazla alanda kullanabiliriz. İşte çok küçük değişimle birşeye benzettiğim versiyonu :

Figür 10

Hazırlayan : Mehmet Fatih YILDIZ

Perspektif aracı nedir, ne işe yarar?

Gimp ana penceresindeki perspektif aracı ikonuna tıkladığınızda çıkan araç perspektif aracıdır. Bu araç sayesinde yaptığımız yüzeyleri, çalıştığımız fotografları perspektif açıdan oynayabiliyoruz. Yani, bir yüzeyi gerçekte nasılsa öyle görünüm kazandırıp düzeltebiliyoruz. Bu dökümanda perspektif aracını kullanarak 3 boyutlu bir küp yapacağız.

3 boyutlu küp nasıl görünür?

Bir küp bilindiği gibi 6 kare yüzeyden oluşan bir cisimdir. Biz gerçekte bu cisimlerin en fazla 3 yüzeyini görebiliriz. Bir küp'e köşesinden baktığımızda ne görürüz? 3 tane perspektif görünümlü kare görürüz. Gimp'te yapacağımız tek şey kare ve dikdörtgenleri perspektif aracı ile kenarları eşleşecek biçimde ayarlamak olacaktır.

Öncelikle kendimize küpün yüzeyinde kullanacağımız bir efekt seçmemiz gerek. Bu bir desen, sade bir renk veya geçiş efekti verilmiş bir yüzey olabilir. Gölgelendirmenin gerçekliği açısından geçiş efekti verilmiş yüzey daha çarpıcı olacaktır. Şimdi geçiş efekti verilmiş bir yüzey'e sahip küp'ü yapmaya başlayalım.

Öncelikle beyaz artalanlı boş bir çalışma belgesi açalım.
Ardından kare bir seçim yaparak buraya geçiş efekti uygulayalım.

Figür 1

Geçiş efektini uyguladıktan sonra hemen seçimi sıfırlamıyoruz; perspektif aracını seçiyoruz ve seçili alana tıkladığımızda klavuz ızgarası çıkacak. Bu ızgarayı küp'ün görünen yan parçası şekline sokuyoruz. Aşağıdaki gibi yani..

Figür 2

Perspektif aracının penceresinde Transform butonu var, ona tıkladığımızda eskiden seçili alana bu perspektif görünüm uygulanacaktır. Daha önce seçili olan alan Background katmanına ait olduğu için Background katmanının o kısmı silinmiş gibi olacaktır.

Figür 3

Şu an perspektif hale getirdiğimiz alan seçili durumda, bunun nedeni transform edilmiş bu katman daha bir katmana oturtulmadı. Biz bunu yeni bir katmana oturtacağız. Bunun için katman (layer) panelindeki Transformation yazan katmana çift tıklayıp istediğimiz ismi gireceğiz. Bu katmana yan adını verelim.

Figür 4

Şimdi Background katmanını tekrar tamamen beyaz ile dolduralım ve yan katmanını biraz sola taşıyalım.

Figür 5

Gelelim önde görünecek yüzeye. Aslında aynı işlemleri yapacağız.. Öncelikle yan katmanının sağındaki boş alana tekrar bi kare seçimi yapıyoruz.

Figür 6

Seçtiğimiz alana geçiş efekti veriyoruz.

Figür 7

Seçimi sıfırlamadan perspektif aracı ile daha önce yaptığımız yan yüzeye yapıştırarak uygun görünümü ve perspektifi veriyoruz.

Figür 8

Perspektif aracının penceresinden transform ile perspektifliği uygulatıyoruz. İşlem Background katmanı üzerinde yapıldığı için o kısım silinmiş gibi oluyor,

Figür 9

Katman penceresinden Transformation'u çift tıklayıp ön adını veriyoruz. Background katmanını tamamen beyaz ile dolduruyoruz.

Figür 10

Tekrar aynı işlemlerle de üst yüzeyi yapacağız. Bu katmanları kitleyip biraz alta taşıdık böylece daha rahat çalışabileceğiz. Üstteki boşluğa dikdörtgen seçim yapıp geçiş efekti veriyoruz.

Figür 11

Seçimi perspektif aracı ile daha önce yaptığımız iki yüzeye uyduruyoruz.

Figür 12

Uygulayıp katman adını verip Background'u beyazla kalayıp işlemimizi bitirmiş oluyoruz. Sonuç :

Figür 13

İşte mükemmel bir küp, artalanı transparan yapıp png export edildiğinde çok güzel bir ikon olabilir :-)
Kenarlardaki küçük hataları hangi yüzeyler arasında ise o yüzeylerden birini tekrar perspektif düzenleyerek birbirine daha uyumlu hale getirebilir, bu küp şeklinin maskesinin izdüşüm gölgesini alıp yerde duruyormuş efekti verebilirsiniz...


Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

php apache kurulum html html5 javascript form input mobile icon ikon grafik download css xhtml rss workspace screen konsol terminal nedir mfyz wireless share player license lisans browsers table less compile compiler macosx windows linux app on-the-fly htaccess route router mod_rewrite facebook api opengraph fql optimization firefox js ie browser kontrol yapıları if switch wanda digital graph social twitter calendar media tool apple ipad iphone itunes tebrik banner logo meta bootstrap css3 laptop notebook blog url network db database service free object job developer ios app store store in-app purchase purchase subscription verification storekit itunes connect lifestream proje dokuman portfolio mootools jquery pharma hack wordpress framework plugin session date tarih sitemap seo google ide editor phpstorm jetbrains deployment version control svn git login mysql mdb2 pear sql injection cache ipucu statistics istatistik insanlar xml query assets imza signature mail code support örnek kod nasıl iOS subversion xmlhttprequest ajax auth pgsql mssql ruffles doritos development parse webkit web app music search coding gimp widget select integration kitap ui design open source cms box export textarea cookie language style applications ubuntu http prepare execute chart osx link connect ux fstab ntfs internet explorer while newsletter startups server spam sosyal medya radio zaman regex diff optimizasyon analyse procedure button kampanya tytz www subdomain redirect crossdomain oyun howto icons internet generator