Gimpte Yansımalı Yazı Yapmak 2 (Make reflection text effect) Temel Dersler -2- (Basic lessons 2 )

Web Banner Yapalım [Resimli Ders] (Let’ s make web banner)

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.

Gimp Yeni Layer

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

Yeni Layer

Yeni Gradient Ü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. Gradient Editor 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.

Gradient Tool

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.

Blend

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.

Yeni Blend

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.

Metin ekleme

Ş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.

Duplicate Layer

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.

Metnin Son Durumu

3.Etiket (Sticker) Ekleme

GfigArkaplanı 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.

GfigSon

Region SelectŞ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.

Layer Yıldız

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.Yazı Döndürme 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.

Mürekkep

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. www.murekkep.org



9 Yorum to “Web Banner Yapalım [Resimli Ders] (Let’ s make web banner)”

  1. murat Diyor ki:

    ben bu programı indire bilirmiyim

  2. admin Diyor ki:

    Tabiki indirebilirsiniz. Sayfa üstündeki menü butonlarından “Gimp Yükle” kısmından yükleyebilrsiniz.

  3. Tunahan Diyor ki:

    Süper Prog. Sağolun! Emeginiz için :)Tesekkurler

  4. danger Diyor ki:

    s.a
    ALLAH(C.C) razı olsun bende gimp i merak etmeye başlamıştım. iyi bir site
    ALLAH(C.C) yardımcınız olsun.

  5. ahmet Diyor ki:

    bendeki ingilizce zor oluyor neden türkçe anlatmadınız ki :D saoalsın.

  6. deadthless Diyor ki:

    evet buda çok güzel program yalnız benim istediğim gibi değil ben şöyle bir şey istiyorum resimli bundada resim var ama benim istediğim gibi yerleştiremiyoruz….size bir kaç site banner varmek istiyorum o linklerde resimlere bakarsanız anlarsınız…

    http://www.paramoretr.com/forums/ima…wer/banner.jpg
    http://img236.imageshack.us/img236/6…za298a1wo1.gif
    http://img61.imageshack.us/img61/2908/hayley2ej7jt8.png
    Lütfen bana yardımcı olun cevap bekliyorum…:S

  7. admin Diyor ki:

    Merhaba deadthless. Gönderdiğin linklerden en alttakini inceledim. (diğerleri açılmadı eskik girilmiş sanırım.) Çok basit bir yapıma sahip. “Gimp video” ve “Gimp & Web” kategorisinde bununla ilgili çok güzel örnekler var. Biraz emek ve zaman harcayıp izlemeni tavsiye ederim. Bu zaman sonunda istediğin herşeyi mükemmeliyle yapabileceksin.

  8. cem Diyor ki:

    “…………….Yorumlara dikkat edelim……………”
    Siteye gelince site cok gusel mukemmel hatta cunku bılınmeyen bı program ben duuyordum ama mrk edıordum burayı buldum denk gelısıne programın neler yapabıldıgını gorunce hemen ındırdım burdan vs. ızledım bır kac vıdeo falan cok gusel anlatanada bravo bırde sunu solemek ısterım gimp baslangıc falan yazılmıs ama baslangıctan ıtıbaren programa genel bakıs falan bısı yok dırekt konuya gırılmıs programda toolları bı acıklasanız ıyı olrdu ws. ws.

  9. admin Diyor ki:

    Sayın cembey insanları inancından dolayı eleştirmeyiniz burası bir eğitim sitesi. Herkes istediği bilgiyi alıp gider. İnancı hangi tarz olursa olsun ilgili arkadaş kendine göre iyi bir temenni ve dilek sunmak istemiştir. O da onun tarzıdır. Konumuza dönersek..
    Site ile ilgili eleştrilirenize gelince gimp başlangıç kısmında genelde temel sayılabilecek işlemlere yer verdim. Fakat bu videoları index lemek lazım. Yani 1. Kurulum, 2. Araçlar vs. vs. Bunlar en kısa zamanda düzenleyeceğim. Tavsiyeniz için teşekkür ederim. İyi seyirler.

Cevap Gönder