Kolayca FlatUI icon hazırlama – Tutorial

Merhaba Arkadaşlar

Günümüzde flat dizayn dediğimiz soft renk ve düz tasarımlar moda. Bunların içinde FlatUI dediğimiz tarz oldukça populer hale geldi. Özellike de FlatUI gölgeli ikonları her yerde görmek mümkün. Kullanıldığı yerde çok şık duran ama aslında yapılması çok kolay olan bu ikonları herkes paketler halinde satıyor.

flat-0

Bugünkü  yazımda sizlere bu ikonları nasıl ücretsiz olarak hazırlayabileceğinizi gösteriyorum. Photoshop ve kolayca bulabileceğiniz basit ikonlarla çok harika grafikler hazırlayabilirsiniz.

Photoshopu açıp 200px X 200 px boyutunda bir yeni dosya açın

bir de kullanacağınız ikonu açıp işe başlayalım

1. adım

flat-1Seçim aracını kullanarak (M) daire seçimini seçip yeni resminizin ortasına Shift tuşuna basılı tutarak tam yuvarlak bir daire çizin

2. adım

flat-2Arkaplandan bağımsız olabilmek için yeni bir layer açıp bu seçtiğini alanı güzel bir flat renk ile boyayın. ben #ff3300 ile boyadım.

3. adım

flat-3açmış olduğumuz ikonu kopyala yapıştır yapıp çalıştığımız resmin içine yapıştırdık. Ctrl+T ile boyutunu ayarlayıp istediğimiz gibi ortaladık.

4. adım

 

flat-4Layer penceresinde bulunan küçük kareye Ctrl tuşunu basılı tatularak tıklarsak aktif olan layerdeki transparan olmayan alanları seçili hale getirecektir. Bu işlem ile resmime kopyaladığım twitter ikonunu seçili hale getirmiş oldum.

5. adım

flat-5Seçili alanı Ctrl+J tuşuna basarak klonlama yapıyorum. böylece twitterin orjinaline zarar vermemiş oluyorum. Şimdi tekrar yeni oluşan layerin karesine Ctrl ile tılayarak seçili hale getiriyorum. Artık gölge yapma vakti geldi. Ctrl + Alt tuşlarını basılı tutarken sol ok ve ardından aşağı ok tuşuna sırayla birer defa basıyorum. Aynı işlemi uygulamaya devam ettikçe twitter logom aşağı çapraza doğru iz çıkartmaya başlayacak. Dış yuvarlağı geçtiğimi düşündüğüm yerde ok tuşlarıyla oynamayı bırakıyorum.

6. adım

flat-6Gölge koyu renkli olacağı için öncelikle yaptığım aşağı doğru tekrarlama işleminin rengini değiştirmem lazım. Eğer sizin de ikonunuz benimki gibi beyaz renkli ise Ctrl+i tuşuna basarak renklerini ters çevirebilirsiniz. İlk yaptığım yuvarlak layerini seçili hale getirip, Select menüsünden inverti seçiyorum. Böylece yuvarlağın tersi olan alanlar aktif hale gelecek.

7. adım

flat-7Seçili alanı ters çevirdikten sonra delete tuşu ile dışında kalan alanları silebilirsiniz. Dikkat edin silmek istediğiniz layeri seçmiş olmanız gerekiyor. Yanlış layeri seçmişseniz yanlış şeyleri silebilirsiniz.

8. adım

flat-8

Fazlalıklarını sildikten sonra layerin görünürlük yüzdesini ksımamız yeterli. Ben %10 görünürlük (opacity) vererek gölgenin daha tatlı bir hal almasını sağladım. Bir de ikonun kendisinin gölgesinden bağımsız durması için ek bir gölge vermemiz gerekiyor. Orjinal beyaz twitter ikonunun olduğu layeri seçip Layer Effects kısmından drop shadow veriyorum. 120° yi seçip %10 opacity ile gölge efektimi tamamlıyorum.

9. adım

flatimage

Artık en başta oluşan beyaz arkaplanı silip resmi transparan hale getirebiliriz. Resmi PNG formatında kaydedersek artık istediğimiz gibi heryerde kullanabiliriz. Gerçekten çok güzel oldu. Hem de çok hızlı ve kolay bir yöntemle.

10. adım

Yapmış olduğumuz ikonu kullanırken gururla kendim yaptım diyebiliriz.

Okunma Sayısı : 1069

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrShare on LinkedIn

Pratik JQuery Dersleri 1

Biliyorsunuz günümüzün en populer web manipulasyon aracı jquery.

Her yerde web siteleri için çeşitli eklentiler slider , menu, grid vs. vs. görüyoruz.

Eğer iyi kullanırsanız web siteniz üstünde yapamayacağınız şey yok gibi. Zaten bu nedenle de google cdn hizmetine dahil edildi. Dünyanın en çok kullanılan js dosyası olan jquery.min.js dosyasına doğrudan google cdn hizmetinden erişebilirsiniz.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> ( hangi versiyonu kullanmak istiyorsanız adres satırındaki 1.10.2 yerine o versiyonu yazabilirsiniz örn. 1.4.0 ya da 2.0.3)

Sitenizde jquery kullanacaksanız dosyayı kendi sunucunuzda tutmaya gerek yok. Dünyanın en hızlı sunucuzu zaten jquery yi size servis etmeye dünden razı. Hatta yakın dönemde google chrome un içinde doğrudan gelebilir. Onu da res://jquery:1.10.2 gibi bir şekilde kullanırsak şaşırmayalım.

 

Gelelim şimdi jquery ile ilgili birkaç pratik bilgiye. Bu bilgiler genel olarak koduna müdahale edemediğiniz durumları dışarıdan yapmaya yarayacaklar. Örneğin bir wordpress siteniz var ve koda karışmadan sayfaya müdahale etmek istiyorsunuz.

Herhangi bir nesneye tıklandığında birşey yaptırmak istiyorsunuz. Mesela logoya tıklandığında sitenin bir önceki sayfaya geri gitmesini istiyorsunuz

$(“.logo”).bind({
click: function() {
javascript:back(-1)
}});

yazarsanız kod içinde class=”logo” geçen yere tıklama özelliği ekler. click fonksiyonunun ne yapacağını da kodun içinde javascript:back(-1) yazarak belirledik. siz tabiyki tıklandığında başka birşey yapmasını da sağlayabilirsiniz.

 

Diğer örneğimiz de formlardaki nesneleri zorunlu hale getirmek

diyelim ki elinizde bir iletişim formu var ve siz cep telefonu zorunlu olsun istiyorsunuz.

<script type=”text/javascript”>
$(document).ready(function() {
$(“#cep_telefonu”).attr(“required”,”required”);
});
</script>

yukarıdaki kod ne yapar. id=”cep_telefonu” yazan form nesnesini zorunlu hale getirir. eğer nesnenizde bir id değeri yoksa class tanımlıysa kodun içindeki “#cep_telefonu” yerini  “.cep_telefonu” şeklinde düzeltirsiniz

 

Okunma Sayısı : 744

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrShare on LinkedIn

Platinmarket Google Eticarette Başarı Semineri

Merhaba Arkadaşlar,

Geçen hafta PlatinMarket olarak Google ile birlikte bir eticarette başarı semineri yaptık.

Davetimizi kırmadan bizleri dinlemeye gelen Platinmarket müşterileri ve ziyaretçilerimize teşekkür etmek isterim. Sayelerinde çok keyifli bir etkinlik oldu

Google Türkiye ofisi tekfen plazada gerçekleşen etkinlik programı şöyleydi

Açılış Konuşması – Fatih Balkan (Platinmarket Genel Müdürü)

Eticaretin Parlak Geleceği – Mahir Erkan (Google Türkiye Sektör Yöneticisi)

Eticarette Başarının Yapıtaşları – Emre Gülas (Platinmarket İstanbul Bölge Müdürü)

Eticaret ve Google Ürünleri – Özgür Aydın (Dijital Statejist ve Pazarlama Uzmanı)

Adwords ve Fırsatlar – Armağan Bengi (Profaj – Google Adwords Hesap Uzmanı)

Başarı Hikayeleri – Soru Cevap (Dağhan Akdağ – Cafemarkt.com, Tuğba Öztürk –  Keramikashop.com, Muhsin Erbaş – Sadecenotebook.com)

Birçok müşterimizle yüzyüze tanışma fırsatı bulduk. Genel olarak Çorlu’da olduğum için müşteriler ile yüzyüze tanışma şansımız pek fazla olmuyor. Tüm müşteriler ile telefondan görüşüyoruz.

Etkinliğin ana teması, eticarete girmenin çok kolay olduğu ama sadece eticaret paketi alarak siteyi kurup beklememek gerektiği ile ilgiliydi. Kendinizi tanıtmanın yolları, reklam ve pazarlamada doğru mecraların kullanımı, ilişkisel pazarlamanın faydaları ve yaşanmış çeşitli örnekler. Ziyaretçi çekmenin ve ziyaretçiyi tutmanın yolları, müşteri sadakatini ölçme ve fırsata çevirme yöntemleri.

Umarım katılan herkes için faydalı olmuştur.

Etkinliklerimiz devam edecek. Platinmarket.com u sık sık ziyaret etmeyi unutmayın

Okunma Sayısı : 1597

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrShare on LinkedIn