Sosyal Medya Resimlerinizi/Tasarımlarınızı Geliştirmenin 11 Temel İlkesi

Markamız adına sosyal medyada düzenli paylaşımlar yapıyoruz. Ancak paylaşımlarda kullandığımız görselleri geliştirerek daha çok dönüş alabileceğimizi de biliyoruz.

Buffer adlı web sitesi bununla ilgili olarak 11 maddelik bir infografik (bilgilendirici görsel) hazırlamış. Görsel İngilizce ancak maddeleri Türkçe olarak aşağıya ekliyorum. Kendimden de bir kaç not ile yazıyı daha da zengin hale getirmeye çalışacağım.

Dilerim bundan sonraki paylaşımlarınızda bu hususlara dikkat ederek daha fazla etkileşim alabilirsiniz.

Önce infografik gelsin 🙂

1.Renk

  • Duyguları iletmek için kullanılır
  • Belirli bir kişiliği/karakteri destekler, ön plana çıkarır
  • Görselin ruh halini ve atmosferini belirler

Renkler ile ilgili bazı ipuçları verebiliriz. Mesela;

  • Kırmızı: Enerji ve aciliyet bildirir
  • Turuncu: Agresiflik
  • Sarı: İyimser ve gençlik
  • Yeşil: Zenginlik ve rahatlama
  • Mavi: Güven ve güvenlik
  • Pembe: Romantik ve kadınsı
  • Siyah: Güçlü ve şık
  • Mor: Yatıştırı ve sakin

2.Denge

  • Uyum hissi yaratır
  • Simetrik veya asimetrik olabilir
  • Her bir parçanın bir ağırlığı olur

Görsellerdeki denge çok önemlidir. Bunun için simetrik ögelerden faydalanılabileceği gibi, asimetrik ögeler de yeri geldiğinde mükemmel bir uyum ile görsel üzerinde denge sağlayabilir. Ya da ögelerin boyutu, renkleri, sıcaklık veya soğukluğu, gölgeleri bile bu dengeyi sağlamanıza yardımcı olur.

Simetrik bir gitlab çalışmasını buraya ekleyerek fikir sahibi olmanıza yardımcı olmak isterim.

Buffer’da paylaşılan ve asimetrik bir görsel ile de nasıl bir denge sağlanıldığını belirten görselimiz ise bir çoğumuzun belki de sosyal medyada karşısına çıkan okyanustaki kayık ve altından geçen balina fotoğrafıdır.

3.Çizgiler

  • Gözleri yönlendirmeye yardımcı olur
  • Düz çizgiler bir uyum oluşturmanıza yardımcı olur
  • Kıvrımlı çizgiler görsele hareket katmanıza yardımcı olur

Buradaki temel işlevimizin çizgilerimiz ile görsele bakan kişiyi istediğimiz tarafa yöneltmek olmalıdır.

4.Tipografi

Görselimizde yazı tipi kullanacak isek ne olursa olsun ilk önceliğimiz okunaklı olmasıdır. Özgün olmak adına okunaklı olmayan bir yazı tipi seçmeniz tamamen sizin zararınıza olacaktır.

  • Görselde kullanılacak yazı tipini en fazla 3 farklı tip olacak şekilde sınırlandırın.
  • Baskı için ‘serif’ yazı tiplerini, web siteleri için ‘san-serif’ yazı tiplerini tercih ediniz. Yazı tipleri ile ilgili olarak aşağıda ön izlemesi olan görseli inceleyebilirsiniz.
  • Büyük başlıklar için karakter aralığı kullanın.
Yazı Tipi Rehberi

5.Kontrast (Zıtlık/Karşıtlık)

  • Şekillerle, renklerle ve öge boyutlarıyla zıtlık ekleyiniz. Örneğin koyu zemin üzerine açık renk ile yazı yazdığımızda yazımız ön plana çıkarken görselimiz bu zıtlıkla dikkat çekiyor. İşte buna patlama deniliyor. Bazen duyarsınız, görsel patlıyor derler. İşte biz buna kontrast yani zıtlık/karşıtlık diyoruz.

Bahsettikleri şey, görüntüdeki karşıtlık. Kontrast, bir ögenin öne çıkmasını veya diğer ögelerden daha dikkat çekici olmasını sağlayarak ögeler arasında farklılaşmayı sağlar.

Bunun için aşağıdaki görseli inceleyebiliriz. Koyu yeşil zemin üzerine Gevheri’nin bir dizesini beyaz ve ‘sans-serif’ bir yazı fontu ile ekledim. Vermek istediğim mesajımı daha büyük bir şekilde yazdım.

6.Ölçek

  • Farklı ögeleri boyutlandırın
  • Bazı alanlara dikkat çekmenizi sağlar
  • Bir konsept oluşturmanıza yardımcı olur

Ölçeklendirmedeki temel amaç yine dikkat çekmektir. Örneğin yazı boyutları büyütülerek mesaja dikkat çekilirken, konsept uzaklaştırılır. Üstteki kullandığım görsel bir nebze bunu anlatabilir. Ancak aşağıdaki görsel tam anlamıyla bunu ifade etmektedir.

Bu görselde hedeflenen sizin önce büyük bir şekilde yazılmış olan yazıya dikkat çekmek, daha sonra balona yönlendirmek ve en son alt kısımda yer alan pembe yazıyı okumanızı sağlatmaktır.

7.Yakınlık

  • İlgili maddeleri birlikte gruplayın
  • Renkler, yazı tipleri ve şekilleri birbirine ilişkilendirin
  • Bazı ögelerin benzer şekilde algılanmasına yardımcı olur

Örneğin aşağıdaki görseli inceleyin. Renkler hariç dairelerin konumları aynı olmasına rağmen onları farklı olarak gruplandırdığınızı fark ettiniz mi?

8.Hiyerarşi (Aşamalı Sistem)

  • Önce en önemli ögeler gelir
  • Tasarımın amacına odaklanılır
  • Kıvrımlı çizgiler ile hareket kazandırılır.

9.Tekrarlama

  • Tutarlı bir marka olun.
  • Yazı tiplerine, renklere ve logolara odaklanın.
  • Tanınabilir bir görüntü oluşturun

Kendi renginizi, kendi fontunuzu ve tasarımınızı belirleyin ve sürekli buna vurgu yapın. Markalaşma aşamasındaki en önemli şeylerin temelinde bunlar yatar. Büyük markaların hepsi bu şekilde algı yaratmıştır.

10.Yön

  • İnsanlar “F”, “E” ve “Z” düzeninde okurlar
  • Anahtar bilgi için sol üst kısmı veya sol kısmı kullanın.
  • Tasarım akışınız hakkında bilgili olun.

İnsanların göz takipleri herkeste aynı olmasa da genel olarak kabul edilen “F, E ve Z” şeklinde hiza takip eder.

Sizler de tasarımlarınızda insanların bu göz takip sistemini dikkate almalısınız. Ayrıca yaptığınız tasarımlarda insanların sizin istediğiniz düzeni takip etmesini sağlamalısınız.

Yapılan araştırmalarda insanların web sitelerini gezerken %70 oranlarında sol tarafa odaklandıkları tespit edilmiştir.

11.Boşluk

  • Tasarımlarını oldukça basit tutun
  • Nesneleri öne çıkarmak için boşluk kullanın.
  • Ögeleri dışarı çıkarmaktan korkmayın.

Boşluk kullanımında ters boşluk kullanımı veya beyaz boşluk kullanımı oldukça etkilidir. Son zamanlarda bir çok tasarımda beyaz boşluk kullanımı oldukça yaygındır ve başarılıdır. Beyaz boşluk nesnelerin her birinin ortaya çıkmasını sağlar. Boşluk basitliktir. Aşağıdaki görsel beyaz boşluğun görsele kattığı gücü göstermeye en güzel örneklerden bir tanesidir.

Umarım sizlere faydalı olabilecek bilgiler aktarmışımdır.

Kaynak: https://buffer.com/library/social-media-design-tips

Online Yüz Tasarlama

Bir çok blogger sitesinde logoda kullanmak üzere bir insan karakteri olsun ister ve kimi zamanda bu karakterin kendi yüzüne benzemesini talep eder. Ancak bunu yapmak çoğu kişi için zordur. Grafik bilgisi olmayanlar zaten bunu başkasına yaptırırlar yada hazır olanları kullanırlar. Yada bugün rastladım daha böyle bir siteye, buraya girip kendi yüzlerine benzer bir insan karakteri yapabilirler.

Site: Face Your Manga burada en üst menüden Create yazan yere tıklıyorsunuz ve başlayın yüzünüzü yapmaya. Başarılı şeyler ortaya çıkarabilirsiniz. Ben kendim hızlı bir şekilde şu sağ tarafta gördüğünüz gözlüklü karakteri yaptım. Keçi sakalım var diye o şekilde bir sakala başvurdum. Ancak aşağıdaki karakterlere baktığınızda birilerine ne kadar benzediğini göreceksiniz ve bence kendinizi ortaya çıkarmak için daha çok çaba sarf edeceksiniz.

Photoshop Pürüzsüz Cilt Yapımı – 2

Daha önce bu konu ile ilgili bir yazı yazmıştım ancak bu seferki çalışmamız bir photoshop eklentisi ile olacak. Öncelikle photoshop için gerekli olan şu eklentiyi indirelim. Şunu da belirtmek isterim ki eklenti ücretli ve siz şu an için deneme sürümünü indirip kurabilirsiniz. Eklentiyi full isteyen arkadaşlar yazının altına yorum yazdıklarında, yazmış oldukları mail adresine serialin de bulunduğu eklenti adresini yollayabilirim.

Eklenti adresi: http://www.imagenomic.com/pt.aspx

Eklentiyi indirip kurduktan sonra öncelikle düzenlemek istediğimiz fotoğrafımızı photoshop ile açıyoruz. Ben netten bir fotoğraf buldum. Adriana Lima’nın makyaksız haliymiş sanırım 🙂 Neyse işlem çok basit olduğu için ben yazıda biraz karakter fazlalığı olsun istiyorum diye böyle boş boş konuşuyorum 🙂

Yapılması gereken şey: Filter > Imagenomic > Portraiture yolunu izlemek.

Ekrana lisans penceresi gelirse accept diyerek bunu kabul ediyoruz. Ekrana yeni bir pencere gelecek ve bu pencerenin sol tarafındaki alandan gerekli ayarları yapıyoruz.

Sonra Ok deyip çıkıyor ve resmimizi kaydediyoruz. İşlem bu kadar.

Sonuç:

WordPress Tema Şablonu

Geçenlerde blogger arkadaşların sayfalarında gezinirken, bir çoğunun tema yapımına dair notları da gözüme çarptı. Kodlamaya dökemeyebilirim ancak belki dedim bir şablon oluşturup gerekli olumlu tepkileri alırsam da bu iş için birilerini bulabilirim diye düşündüm. Öncelikle etkilendiğim blogger arkadaşlar kimler.

Gülşah Semiz.. http://gulsah.in/

Beyazıt Kölemen.. http://anarschi.com

İsmail Usluer.. http://usluer.net

Ahmet Orhan.. http://aorhan.com

Ahmet Orhan’ın bir grafiğini aldım hakkını helal eder inşallah. Neyse geleyim şimdi temadan bahsetmeye. Gülşah Semiz’in web sayfasındaki gibi 3 kolonlu bir tasarım gözümde canlandı. Daha sonra da Beyaz’ın gri teması, Usluer’in video alanlarını da düşünürken. Aşağıdaki gibi bir ana sayfa şablonu çıkardım. Tabi daha her şey bitmiş değil, daha yapılacak çok iş var. Gerekli tepkileri alırsam da temayı dökmesi için bir arkadaşımla irtibata da geçebilirim veya bu işi ücretli yapacak birilerini de bulabilirim. İnşallah beğenirsiniz.

Photoshop ile Fotoğraf Kesme

Uzun bir aradan sonra abimin sorusu üzerine bir video çektim ve fotoğraf  nasıl kesilir göstermeye çalıştım. Tabi ben 3 dakikada yaptım ve model olarak kendime de küçük yeğenim Arda’yı seçtim..

Öncelikle kesilecek olan fotoğrafımızı açalım.. Layer > New Layer > Layer New Background ile resmimizi katman haline getiriyoruz bu işlemi Layer penceresinden background’u iki kez tıklayarak da yapabiliriz.

Ardından Quick Selection Tool aracımızı seçiyoruz.. Dikkat etmemiz gereken şey ise aşağıdaki resimde göreceğiniz “+” ve “-” quick selection tool araçlarıdır.

+ Resmimizde sileceğimiz alanı büyütmek için

– Resmimizde silmek istediğimiz alan dışına çıkarsak orada küçültme yapmak ve düzenleme yapmak için kullanacağımız aracımızdır.

Daha sonra resmimizde keseceğimiz alanı bu şekilde seçmeye başlıyoruz.. Çok fazla seçersek de dediğim gibi eksi ile geri alıyoruz.. Örnekte olduğu gibi

Resmimizi bu şekilde kesiyoruz resmimizde ufak tefek silinmeyen yerler olabilir onları da Eraser aracımız ile yapabiliriz zaten.. Tabi resme yakınlaşarak bunları daha düzgün bir şekilde yapmak daha sağlık bir görüntü elde etmemiz için bize olanak sağlar. Eğer resmimizde gözümüze hoş gelmeyen keskinlikler varsa bunları da Blur Tool aracı ile yumuşata biliriz.

Daha sonra resmimizi her hangi bir manzara resminin üzerine koyup gerekli ayarları yapabiliriz.. Eğer manzara resminize, kestiğiniz resim çok büyük gelirse CTRL+T yaparak resmi küçültebilirsiniz..

Eğer resminizi şeffaf bir hale getirmek isterseniz de resmin opacity değerini düşürün veya hazır opacity seçeneklerini deneyin.. Videoda ben denedim hiç birini beğenmedim ve kendim yaptım opacity değerini.. Resimde görünmesini istemediğim yerleri de Eraser tool aracı ile sildim..

Sonuç:

Biliyorum çok hızlı bir anlatım oldu ama Üniversiteye çıkmam gerekli.. Sorunlarınızı buradan yazabilirsiniz.. Daha detaylı bilgi verebilirim..

Yazı Stili Bulmak

Bugün hazırlayacağım bir kaç grafik için değişik yazı fontları ararken myfonts.com’a girdim. İlk defa girdiğim için neler var yok diye inceleme fırsatımda oldu biraz. Dikkatimi “What The Font” yazısı çekti ve girdim baktım. Burası grafikerler için güzel bir fırsat doğurmuş. Artık ismini bilmediğimiz fontları bulmak kolaylaşmış. Öncelikle yapmamız gereken beğendiğimiz bir fontu gördüğüm yerden resmini çekmek ve bu siteye yüklemek. Daha sonra bizden hangi karakterleri görmek istediğimizi isteyecek. Karakterleri yazmamızın ardından bize sonuçları çıkaracak ve bizde ona göre o fontu veya benzerlerini bulacağız. Tabi %100 aynı fontu her zaman bulacağınızı söylemek doğru olmaz. Çünkü ben denedim bazı fontları bulamadı. Ancak bulduğunu dair de bir kanıt şu şekilde resimdeki gibi görebilirsiniz.

Gördüğünüz gibi Neo Sans ile yüklediğim resim birebir aynısı ve biz böylece fontumuzu bulmuş olduk. Birde “i” karakterini çoğu kez görmüyor 🙂

Dipnot: Burda bulduğunuz fontları indirmek paralı. O yüzden fontlarınızı diğer free font sitelerinde veya google amcada arayınız.

Siteye Git: http://new.myfonts.com/WhatTheFont/