Gimp ile Web 2.0 Tasarım


Geçen Pazar günü itibariyle, daha önce okuduğum, notlar aldığım ve üzerinde gerçekten oldukça amatörce uğraştığım Gimp ile belirli şeyler oluşturma konusunda ciddi bir adım atmıştım. Yukarıda gördüğünüz gölgeli Murekkep.Org yazısını ve [tag]web 2.0[/tag] ile klasik haline gelen yıldız çerçeveli kısmı oluşturdum. Nihayet haftasonu geldi ve hafta boyunca yazmayı düşündüğüm bu yazıyı hayata geçirebilirim. Tabi ara teşvik olarak Volkan Karakuş’un photoshop üzerinde uygulayıp güzel bir makaleye dönüştürdüğü “Web 2.0 Sticker (etiket) Yapımı” yazısını unutmamak gerekir. Photoshop ile nasıl için faydalanabilirsiniz. Bayağı uzun bir yazı olacak, o yüzden başlayalım :

1. Arkaplan Oluşturma

Gimp’i açıyoruz. Yeni bir layer oluştur dedikten sonra aşağıdaki gibi genişliğini ve yüksekliğini belirtmemiz gereken yeni resim oluşturma kısmı geliyor. Burada ben header resmi olarak düşündüğüm için 980 genişlik ile 150 yükseklik verdim. Bunun dışında varsayılan gelen ayarlar dışında sadece “Advanced Options” içerisinde Fill with kısmını “White” olarak belirliyoruz.

Ve karşımıza arka planı beyaz olan 980×150 boyutunda bir layer çıkıyor.

Üstüne yazımızı yazmadan önce arkaplanı gradient editör ile istediğimiz şeffaflığa getireceğiz. Bunun için Gimp kanallarından gradient butonunu seçiyoruz. FG to BG (RGB) Foreground to Background geçiş şeklini seçtikten sonra alt kısımdan yeni gradient oluşturma butonuna basıyoruz ve karşımıza gradient editör çıkıyor.

Gimp burada oluşturduğumuz gradient için geçişlerin nasıl olacağını ve hangi renkleri kullanacağımızı belirlememizi istiyor. Açılan Gradient Editor’de önce bir isim verelim. Adı “Arkaplan Geçişi” olsun. Sonra resmin içerisinde bir yere sağ tıklayın ve “Split segments at midpoint” seçin. Bunu yaptıktan sonra alt kısımda 3 siyah 2 beyaz üçgen olduğunu göreceksiniz. Şimdi görmüş olduğunuz o iki beyaz üçgenden soldakine çift tıklayın ve seçtiğinize emin olun. Bu beyaz üçgene sağ tıklayın ve “Left Endpoint’s Color” seçin. Buradan sol kısım, sol taraf için geçiş renginizi belirleyin. Ben #CDEB8B seçtim. Şimdi aynı beyaz üçgene gene sağ tıklayın ve “Right Endpoint’s Color” seçin. Buradan da sol kısım, sağ taraf için renginizi belirleyin. Ben beyaz #FFFFFF seçtim. Aynı işlemi sağ taraftaki kısma da uygulayın. Yani sağ taraftaki beyaz üçgene çift tıklayın, sol ve sağ renkleri belirleyin. Ben sağ tarafı tamamen beyaz seçtim. Yani hem Left hem de Right Endpoint’s Color kısımlarına #FFFFFF verdim. Sonuçta resimdeki gibi bir durumun oluşması gerekiyor. Ancak burada renk seçimini belirli oynamalarla istediğiniz gibi belirliyorsunuz. Kaydet butonuna basıp Gradient Editör’den çıkın.

Bu aşamada elimizde Gimp’in hazır gradientleri dışında kendi renklerimiz ve geçişlerimizle oluşmuş bir gradient var. Bunu hazırladığımız 980×150 beyaz arkaplana uygulamak için Gimp butonlarının olduğu sol kısımdan gradient tool seçimini yapıyoruz.

Hemen alt kısımda, oluşturduğumuz gradientin renklerini göreceksiniz (reverse kutusunun yanı). Orada seçili olduğuna emin olun. Bu aşamada fareniz ile beyaz arkaplanın üzerine bu gradienti atıyorsunuz. Eğer benim istediğim gibi yukarıdan aşağı doğru gelmesini istiyorsanız, layerın orta kısmında üstten aşağı doğru bir seçim yapabilirsiniz.

Böyle bir seçim yaptığınızda sonuç aşağıdaki gibi olacaktır. Ancak tavsiyem ilk uğraşınızda elinizden geldiği kadar farklı yöntemler denemeniz olacaktır. Yani farenizi sol üstten sağ alta doğru çekebilirsiniz. Ya da daha farklı bölgede daha küçük bir alana uygulayabilirsiniz. Böylelikle gözünüze en hoş gelecek arkaplanı denemelerle oluşturabilirsiniz.

2. Arkaplana Metin Ekleme

Arkaplanımızı oluşturduk. Şimdi arkaplan üzerine metin koyacağız. Bu gerçekten işin oldukça kolay kısımlarından birisi. Gimp butonlarından “T” şeklinde gözüken metin ekleme aracını seçin. Seçtiğiniz zaman alt kısımda yazıtipi, yazıtipi boyutu ve yazının rengini belirlemek için renk paletini göreceksiniz. Eminim daha güzel yazıtipleri vardır. Ben başlangıç için “Arial Bold” seçtim ve yazıtipi boyutunu “60” olarak belirledim. Rengini de Digg mavisi olan #356AA0 şeklinde belirledim.

Bu belirlemelerinizi yaptıktan sonra yukarıda oluşturduğumuz arkaplan üzerine tıklayın. Metin yazma kutusu karşınıza çıkacaktır. Metninizi yazarken arkaplanda gözükecektir. Metnin yeri konusunda endişelenmeyin. İstediğiniz her zaman yukarı uçları ok şeklinde artı butonuyla (move) yerini değiştirebilirsiniz. “Mürekkep.Org” yazdık. Aşağıdaki gibi bir görüntü oluştu.

Şimdi oluşturduğumuz bu metne gölgeleme vereceğiz. Bunun için öncelikle Gimp kanallarında görülen yeni metin kısmını “duplicate layer” yapıp bir kopyasını oluşturacağız. Bu bizim üzerinde gölgeleme çalışacağımız layerımız olacak. Aşağıdaki resimde “Mürekkep.Org” yazan kısma sağ tıklayıp duplicate layer yaptım. Soldaki resim önceki halini, sağdaki ise bir kopyasının oluşmuş halini gösteriyor.

Bu aşamadan sonra gölgeleme ile ilgili anlatacaklarım yeni oluşturduğumuz kopyalanmış layer üzerinden olacak. Şimdi bu şekilde seçiliyken arkaplan resmimizin menüsünden sırayla Layer > Transform > Flip Vertically seçiyoruz. Kopyalanmış metnin ters döndüğünü göreceksiniz. Burada soldaki butonlardan “move” butonunu seçip, ikinci ters dönmüş metni ana metnin alt kısmına doğru getiriyoruz. Harflerin uçlarının birbirine dokunduğundan ve tam denk geldiğinden emin olun.

Şimdi gimp kanallarında yeni kopyalanmış layer adının üzerine sağ tıklayın. “Add Layer Mask” seçin. Karşınıza ilk seçenek (White/Full Opacity) seçili gelecektir. Tamam diyip kapatmış olun. Bu aşamada Yukarıda Gradient butonunu seçerek nasıl fare ile geçiş verdiğimizden bahsetmiştik. Aynsını yapın. Yani gradient aracını seçin. Bu sefer yeni bir gradient oluşturmanıza gerek yok. Hazır Gimp gradientlerinden FG to Transparent seçili olsun ve siyah renki alın. Farenizi ters olan metin üzerinde aşağı yukarı oynatarak gölgelemeyi verin. Gölgeleme dozu size kalmış tabii ki. Sonuç olarak bende aşağıdaki gibi bir durum oluştu.

3.Etiket (Sticker) Ekleme

Arkaplanı hazırladık. Metnimizi ekledik. Şimdi [tag]web 2.0[/tag] ile görmeye başladığımız kenarı yıldızlı ve içerisinde beta gibi birşey yazacak etiketi oluşturmak. İşe koyulmadan önce Gimp kanallarından arkaplanı seçiyoruz ki tüm alan seçili olsun. Sonra sırasıyla Filters > Render > Gfig seçimini yapıyoruz. Karşımıza oluşturduğumuz arkaplan ve metin ile beraber çalışabileceğimiz bir alan çıkıyor. Üstteki ikonlardan yıldız olanı seçiyoruz. Seçimi yaptıktan sonra sağ kısımda yıldız için ayarlayabileceğimiz özellikler çıkacak. Önce sides kısmını 12 – 13 gibi bir değer ile değiştiriyoruz. Bu oluşacak yıldızın kenar sayısını ifade ediyor. Browse ile daha küçük bir nokta seçiyoruz. Renk olarak ise ben Flickr rengi olan #FF0084 pembesini seçtim. Fill kısmında “Color Fill” seçiyoruz. Böylelikle yıldızın kenarlarını da pembe yapacağız. Şimdi yıldızı metnin yanında oluşturun. Yer konusu olarak endişeniz olmasın, istediğiniz zaman yerini değiştirebilirsiniz. Yukarıdaki butonlarda yanyana iki tane buton bulunuyor. Bir tanesi “Move an object” diğeri ise “Move a single point“. Yıldızı bir obje olarak düşünün, objenin komple yer değiştirmesi için birinciyi, obje üzerindeki kısımlarla oynamak için ikinciyi kullanacaksınız. Önemli olan açıkçası ikinci olan “Move a single point”. Resimde de gördüğünüz gibi yıldız oluştuktan sonra üzerinde üç tane siyah nokta beliriyor. Her nokta ayrı bir amaca hizmet veriyor. Bir tanesi yıldız kenarlarını dik ya da yayvan yaparken, bir diğeri yıldızın çerçevesini küçültüyor. Burası tamamen size kalmış durumda. Bir miktar oynama ile beğeninize göre bir sonuç oluşacaktır. Aşağıda Gfig ekranından çıkmış haliyle arkaplan gözüküyor.

Şimdi önce Gimp butonlarından belirli bölgeyi seçme butonunu seçiyoruz. Ve bununla oluşan yıldızın üzerine tıklayıp seçili olmasını sağlıyoruz. Yıldızın iç kısmına gradient ile gölge atacağız. Bunu yukarıda anlatmıştım. Aynı işlemi yıldız içerisine uyguluyoruz. İç kısmın rengini gene pembe seçiyorum. Sonra seçili haldeyken komple yıldıza gölge vermek için Script-Fu > Shadow > Drop Shadow kısmından varsayılan gelen değerleri dikkate alıp tamam diyorum. Burada alt,üst gölge ve gölge rengini siz belirleyebilirsiniz. Gölge rengi siyah gelmişti aynı şekilde kullandım. Son gelinen nokta aşağıdaki gibi gözüküyor.

Yapılacak fazla bir iş kalmadı Yıldızın içine birşeyler yazmak lazım. Ben çok moda olan Beta yazısını yazmayacağım. Onun yerine Yeni yazacağım. Yukarıda belirttiğim şekilde “T” butonu ile metin ekleme yapıp, boyutunu ayarlayıp yıldız içerisine yazmak istediğiniz metni ekliyorsunuz. Burada yapacağımız tek ek işlem, eklenen yazının çaprazlama şekilde yerleşmesi olacaktır. Metni ekledikten sonra Rotate butonu ile yazıyı döndürebilirsiniz. Böylelike oluşturmak istediğimiz çalışmanın son hali aşağıdaki gibi oluşuyor.

Evet, bitti. Biraz uzun oldu belki ama en azından benim gibi nasıl yapabilirim diye etrafa bakan arkadaşlara faydası dokunacaktır. Buraya eklediğim resimler olsun, anlatım şekli olsun, eğer hatalı gördüğünüz ya da eklemek istediğiniz kısımlar varsa mutlaka belirtiniz. Benim de ilk defa denediğim birşey olduğundan sürç-i lisan ettiysek affola / Alper.

http://www.gimp.org/


Feedback

  Comments: 9


  1. teşekürler kardeş allah razı olsun tam avam lisanıyla anlatmışın ben gimp i ilkez kullanan biri olarak hiç zorlanmadan yaptımm sağol


  2. Harika bir anlatım bir yandan okuyup bir yandan yaptım ve bi baktım bitmiş bu kadar kolay mı dedim :D o kadar çok işime yaradı ki çok teşekkürler!


  3. Rica ederim. Faydalı olmasına sevindim.


  4. Teşekkür ederim güzel yazı. Oldukça uğrastığım fakat anlamak ta zorluk çektiğim bi bölümdü sanırım bundan sonrası kendim yapabilirim. İlk adımı çok net ve açıklayıcı bir dilde yazmışsınız. Tekrar Teşekkürler.


  5. Benim için önemli olan yıldız yapmak değil de Gimp kullanmak çünkü 2 gün önce Pardus kullanmaya başladım ve hala Photoshop’taki alışkanlıklarımdan kurtulmaya çalışıyorum. Ayrıca php ve ruby’yi kurmayı yeni bitirdim :) Linux hoşuma gitmeye başladı ;)

    Makale için teşekkürler, oldukça güzel ve açıklayıcı olmuş…


  6. Eline sağlık Alper, çok güzel bir yazı bundan sonra bende Gimp’e geçeyim diyorum. Yeterince oyalandım Photoshopla. :)

    Yahu @mastermax web 2.0’a bu kadar takılmanın manası yok, bak adam uğraşmış ve yapmış onun yaptığı şeyi sen daha da geliştirerek web 2.0 değil web 4.0 bile yaparsın.


  7. Oluşturduğun logoda pek web 2.0 havası yok ama güzel olmuş.


  8. Güzel bir yazı olmuş Alper abi. Elline sağlık. Deniyeceğim birazdan bir yıldız yapabilecek miyiz bakalım :)


  9. Gerçekten çok yalın bir dille ve ayrıntılı anlatmışsınız. Elinize ve sabrınıza sağlık. 3-4 yıldır amatör olarak Gimp kullanıyorum ve yazınızdan öğrendiğim yeni şeyler de oldu.Paylaşım için teşekkürler.

Your feedback