Facebook Reklam Çalışması(154x154)

Facebook için reklam görseli nasıl hazırlanır?

Bildiğiniz gibi google AdWords'te olduğu gibi facebook'ta da ücretli reklamlar yayınlatabiliyorsunuz. Aynı AdWords reklamlarında olduğu gibi facebook reklamlarının da bazı kuralları var.

• Facebook reklam görselleriniz 100x72 ya da 154x154 piksel boyutlarında olmalıdır.
• Reklam metni kapladığı alan bakımından reklam görselinin %20'sini geçmemelidir. 

Yanda gördüğünüz resmi 154x154 piksel boyutunda hazırladım. İçerik olarak Samsung Galaxy S-4 Zoom'u kullandım.

Bu reklam çalışmasının psd dosyasını aşağıdaki bağlantıdan indirebilirsiniz.

DOWNLOAD

Ramazan Bayramı Banner

Grafik tasarıma ilk başladığım yıllarda bir e-ticaret sitesi için hazırladığım Ramazan Bayramı Temalı Banner(Afiş-Reklam) çalışması. Bu çalışmaya ait Photoshop(psd) dosyasını aşağıdaki linkten indirebilirsiniz.

Hepinizie İyi Bayramlar.... Ramazan Bayramınız Mübarek Olsun...

DOWNLOAD

Hazır Banner Tasarımı(600x310)

600x310 piksel boyutlarında hazır reklam bannerı şablonu. 

Bu tasarımda örnek ürün olarak LG marka televizyon kullandım. Tasarımı Photoshop'ta hazırladım.  E-ticaret sitelerinde çalışan grafiker arkadaşların tasarım ihtiyaçlarına cevap vermek istedim. Eğer e-ticaret sektöründe içerik yöneticisi ya da grafiker olarak çalışıyorsanız sıklıkla dar zamanlarda reklam grafikleri hazırlamak zorunda kalabilirsiniz. Benim tasarımım belki sizinkiler kadar iyi olmayabilir ancak en azından fikir vermesi açısından faydalı olabilir. Ayrıca grafik tasarıma yeni başlayan arkadaşlar için de yararlı olacağına inanıyorum.

Tasarımın şablonunu psd formatında aşağıdaki linkten indirip kullanabilirsiniz.

DOWNLOAD

E-ticaret Sitesi Şablonu-Pembe Tema

Ücretsiz E-ticaret Sitesi Şablonu

Web tasarıma yeni başlayanlar için uygulaması kolay, basit seviyede bir E-ticaret sitesi şablonu hazırladım. Tasarımı yaparken bayanlara özgü ürünler satan bir site hayal ettim. Bu yüzden sitenin genel renk paleti pembenin tonlarından oluşuyor. Pembe renklerin etkisini hafifletmek ve ürünleri belirginleştirmek vitrin arka plan rengini beyaz olarak seçtim. Ayrıca mavi ve bordonun tonlarını kullanarak pembe rengin tasarıma verdiği durgunluğun etkisini azaltmaya çalıştım.

Bu temanın psd dosyasını aşağıdaki linkten indirebilir, üzerinde istediğiniz değişikliği yapabilirsiniz. Temayı kullanmak tamamen serbest.

DOWNLOAD

HTML5 Canvas Slider

Tarayıcınız HTML5 canvas tag'ini desteklemiyor.

Basit ve kullanışlı bir HTML5 CANVAS slider örneği

 Bu gün sadece HTML5 canvas ve JavaScript kodlarıyla oluşturulmuş basit bir slider çalışması yaptım. Bu çalışmada slider'da yazdığım JavaScript fonsiyonu ile gösterilen resimler, "resimler" adındaki bir dizi değişkeninde saklanan  adresleri kullanılarak canvas nesnesine aktarılıyor. Resimlerin tarayıcıya teker teker yüklenmesini amaçladım.Bu sayede sayfa daha hızlı açılır ve bandwidthten de tasarruf edili diye umuyorum. Tabii bu konuda haklı olup olmadığımı uygulama gösterecek. Slider'ın kodlarını aşağıda kısaca açıklamaya çalıştım. ayrıca en alttaki Download likinden çalışır bir versiyonunu indirebilirsiniz. Bu slilderı Firefox, İnternet Explorer, Chrome ve Safari'de denedim. Hepsinde sorunsuz çalıştığına göre slider'ın cross browser  olduğunu söyleyebilirim. Sitenizde istediğiniz gibi kullanabilirsiniz. Kullanan arkadaşlar deneyimlerini yorum olarak yazarlarsa sevinirim.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Tarayıcınız HTML5 canvas tag'ini desteklemiyor.
</canvas>

<script>
var c=document.getElementById("myCanvas");//c adlı değişkenemyCanvas id'li HTML5 elemanı atanıyor.
var ctx=c.getContext("2d");// HTML5'in 2 boyutlu çizim metodları c değişkenine aktarılıyor ve oluşturulan nesne ctx değişkenine atanıyor

 var resimler= new Array("images/resim1.jpg","images/resim2.jpg","images/resim3.jpg","images/resim4.jpg");// resimlerin konumlarını tutan dizi değişkeni

adim = 0;// bilgisayarın hangi resimde olduğunu anlaması için değerini takip edeceği değişken
var pic = new Image(); // yeni bir Image nesnesi oluşturuluyor
function ciz(){// ciz fonksiyonu tanımlanıyor

pic.src=resimler[adim];//yukarıda oluşturulan değişkenin src paramatresine resimler dizisinden adim değişkeninin değeriyle aynı olan elemanın değeri atanıyor.
pic.addEventListener("load",function(){ctx.drawImage(pic,0,0,c.width,c.height),false});//ilgili resmi canvas'da gösteren fonksiyonu çalıştıran Javascript olay dinleyici

if(adim<resimler.length-1){// adim değişkeninin değerinin resimler dizisinin eleman sayısını geçmesine engel olan kontrol
adim++;
}else{
adim=0;
}
setTimeout("ciz()",3000);// ciz fonksiyonunu her 3 saniyede bir çalıştıran fonksiyon
}
window.addEventListener("load",ciz,false);// pencere yüklendiğinde ciz fonksiyonunu başlatan Javascript olay dinleyicisi
</script>
İsterseniz tüm dosyayı aşağıdaki linkten indirebilirsiniz.

DOWNLOAD

-->

PNG Download Icon

Basit bir Adobe Fireworks çalışması. PNG formatında hazırlanmış arka planı saydam download ikonu.

Basit Bir JavaScript Slider Örneği

JavaScript Slider Nasıl Yapılır:

Slider örneğimiz iki dosya ve 4 adet resimden oluşmaktadır.  slider.html ve slide.js dosyaları ile ilgili açıklamaları aşağıda verdim. Kodları basitçe açıklamaya çalıştım. Bu aslında temel seviyede bir slider örneğidir. kodlarken sadece HTML ve JavaScript kullandım. CSS kurallarını kendi web sayfanıza göre uyarlayarak sitenizde kullanabilirsiniz. Turuncu ile işaretli satırla açıklama içindir. Kullanırken isteğe başlı olarak bu satırları silebilirsiniz.

slider.html kodları:

<!DOCTYPE html>  <html>  <head> <script type="text/javascript" src="slide.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Basit Slider</title>  </head> <body onload="degistir()"> <img src="images/deniz-1.jpg" name="resim" width="400" height="300 " /> <!-- onload yerine burada script tagları açıp  <script type="text/javascript"> degistir(); </script> içine  yazarak da slder'ı çalıştırabilirisiniz-->   </body> </html>  slide.js kodları:   /*ilk önce Image() türünden değişkenler tanımlıyoruz bu değişkenler  Image() sınıfının src özelliğini kullanarak değişkenlere resimdosyalarının fiziksel adresleri yüklenecek siz bu adresler yerine kendi resminizi koyabilirsiniz. değişken sayısını istediğiniz kadar arttırabilirsiniz. */ var image1 = new Image(); image1.src="images/deniz-1.jpg"; var image2 = new Image(); image2.src="images/deniz-2.jpg"; var image3 = new Image(); image3.src="images/deniz-3.jpg"; var image4 = new Image(); image4.src="images/deniz-4.jpg";  //şimdi resimlerin sıra ile değişmesini sağlayan degistir() adlı fonksiyonumuzu oluşturalım. var adim =1;// tarayıcının kaçıncı resimde olduğunu anlamasını sağlayan değişken function degistir(){    document.images.resim.src=eval("image"+adim+".src");     /* dokuman içinde name değeri resim olan elemanı bulur ve bu elemanın     src değerine adim değişkeninin değerine karşılık gelen başta oluşturduğumuz image değerini atar*/     if(adim<4)// eğer adim 4 ten küçükse (başta 4 resim için 4 değişken tanımladık)    adim++;// adim değerini bir arttırır    else  // değilse      adim=1; // değeri 1 e eiştler    setTimeout("degistir()",3000); //degistir fonksiyonunu her 3000ms(3 saniye) de bir çalıştır       }

Slider'ın kodlarını aşağıdaki linkten indirebilirsiniz.

DOWNLOAD