Web Banner Nasıl Tasarlanır?

Çevrimiçi bir tanıtım afişi genellikle bir kullanıcının bir web sitesini ziyaret ederken göreceği ilk şeydir. Bu büyük ekran boşluğu yığınının nasıl kullanıldığı bir web sitesi hakkında çok şey söyleyebilir. Pek çok web sitesi web sitesi başlıklarının önemine dikkat çeker ve bunları hızlı bir reklamdan başka bir şey olarak görmez, “sadece bir şeyler toparlar”.

Kötü tasarlanmış bir web banner sadece tembel görünmüyor, profesyonelliği kaybediyor. Bir web sitesi, caddenin karşısındaki dükkan önü gibidir. Tek pencereli ve lüks bir mobilya mağazasının, sprey boya ile yazılmış “şimdi satışta” olduğunu hayal edin.

Güzel görünen web banner’ları ve reklamları oluşturmak aslında hayal edebileceğinizden çok daha basit bir işlemdir. Bu yazımda Photoshop’ta basit ama etkili bir web banner’ı nasıl birkaç dakikada hazırladığımı göstereceğim. Ancak Photoshop kullanıyorum, bu teknikler yazılıma özgü değildir ve herhangi bir tasarım yazılımına aktarılabilir.

Bir demo oluşturmadan önce bir web bannerı, bir banner veya bir web sitesi için bir reklam yaparken dikkat edilmesi gereken birkaç noktaya bakmanıza izin verir.

Berraklık mı? Yaratıcılık mı?

Yaratıcılık ve netlik arasında doğru dengeyi bulmakla ilgili, içeriğimizin ilginç olmasını ve ekrandan atlamasını istiyoruz, ancak aynı zamanda insanların mesajımızı açıkça okuyup anlayabilmesini istiyoruz.

Doğru dengeyi bulmak, büyük oranda içeriğin içeriğine bağlıdır, örneğin: pastoral bir tatil kaçamağı yapmak istiyorsak, harika bir fotoğraf ile çekici görünmesini sağlamak için çok daha fazla dururuz ve metnin de fotoğrafı olmadan tamamlaması gerekir. “yüksek”.

Tersine, zaman sınırlı bir teklif gibi daha acil bir şey için bir reklam yapmak isteseydik, mesajın metni ve açıklığı stile çok önem verirdi, izleyicilerimize süslü resimlerle göz kamaştırmamız gerekmez.

Hedef kitlenizin yalnızca bir milisaniye görüntüyü görebildiğini ve kendinize ne hatırlayacaklarını sorabildiğini hayal etmeye çalışın.

Web sitesi bannerının boyutu nedir?

Tam boyutlar, web siteniz için yüklediğiniz temaya bağlı olarak değişir. Bir WordPress sitesi kullanıyorsanız bunu temanın belgelerinde bulabilirsiniz. Başlamadan önce görüntünün tam boyutlarını bilmemiz hayati önem taşır, bu görüntünün tüm kompozisyonunu belirleyecek ve tasarım sürecinde yaptığımız seçimleri yönetecektir. Yapmak istediğimiz en son şey, tasarımı bitirmek, gitmeye hazır olmasını sağlamak ve ardından tüm tasarımın potansiyelini bozan ve zaman harcayarak görüntünün bir kısmını kesmemiz gerektiğini fark etmektir.

Boyutları bilmek, aynı zamanda çok büyük olan içeriği dışa aktarmaya ihtiyacımız olmadığı anlamına gelir. İçerik yalnızca web sitesinin şablonuna uyacak şekilde küçültülür. Bu overkill ve dosya boyutlarını olması gerekenden daha büyük yapıyor ve bu da web sitesinin yükleme süresini artırıyor.

Boyut sınırı yoksa ve şablon görüntünün tam genişlikte duyarlı bir şekilde gerilmesini sağlar. Daha sonra izleyicilerinizi düşünmeniz gerekir. Örneğin, kullanıcılarınızın çoğu bir telefondan veya bir tabletten geliyor. Bu durumda, büyük bir 2000 + piksel görüntü muhtemelen gereksizdir.

Şahsen 1920 piksel genişliğinde güvenli bir sınır olduğunu düşünüyorum. Daha büyük resimler kullanabilirsiniz, ancak dosya boyutunun ve sıkıştırmanın farkında olmanız gerekir.

Sıkıştırma

Genel olarak konuşursak, kitleniz bir görüntünün sıkıştırılmasına dayanarak siteniz hakkında titizlik göstermeyecek ve karar vermeyecektir. Bununla birlikte, sitenizin yüklenmesi çok uzun sürerse, tüm fotoğraflarınızı tam kalitede almak istediğiniz için kitleniz sinirlenir.

Bir görüntünün gerekli kalitesi, ne tür bir siteye sahip olduğunuza da bağlıdır. Fotoğraf sitesi mi? – kullanıcı biraz daha beklemeye istekli olabilir, çünkü fotoğraflar için oradalar. Bilgi tabanlı büyük bir site mi? – Kullanıcı güzel resimler için mutlaka orada değildir ve hızla sinirlenebilir.

Raporlarda, kullanıcıların bir web sitesinin 3 saniye içinde tam olarak yüklenmesini bekledikleri iddia ediliyor . Ve mobil kullanıcılar en sabırsız.

Yükleme süreleri web siteleri için çok önemlidir, insanlar internette gezinmek konusunda inanılmaz derecede sabırsızlar. Hepimiz bundan suçluyuz: bir siteye tıklarsınız ve sürüklenir, bir seferde rastgele bir bit yükler ve bıkmış ve geri dönersiniz.

Yavaş yüklenen bir web sayfasının birçok olası nedeni vardır, ancak en yaygın nedeni yüksek boyutlu ve az sıkıştırılmış görüntülerdir.

Web görüntüleri için en iyi dosya boyutu nedir?

Maalesef bu kadar basit değil: örneğin 500 × 500 piksel = 1mb. Tam dosya boyutu yalnızca boyutlardan değil, aynı zamanda görüntüdeki ayrıntı miktarından da etkilenir. Örneğin, bir fotoğrafımız olsaydı ve siyah beyaza dönüştürürsek, renkli sürümün dosya boyutu daha büyük olur. Bunun nedeni renkli fotoğrafta çok daha fazla veri bulunduğundan, resimlerinizi sıkıştırmaya başladığınızda bu farklar çok daha belirgindir.

Şahsen, mümkün olduğunca alçaktan sıkıştırdığım için çok sertim. 1200 x 400 piksellik bir ön sayfa reklamım varsa, 200kb’den daha düşük olmasını hedeflerdim ve detaydaki kayıp belirginleşinceye kadar devam ederdim.

Her resim farklıdır, bu nedenle önerilen dosya boyutu yoktur. Ayrıca sayfada kaç tane görüntünüz olduğunu göz önünde bulundurmanız gerekir. 5-6 görüntü içeren bir kaydırıcınız varsa, dosya boyutlarıyla daha kesin olmanız gerekir. Eğer sadece 2-3 fotoğrafınız olsaydı, biraz daha rahat hissedebilirsiniz.

DPI’dan ne haber?

Lütfen unutmayın – DPI (inç başına nokta sayısı) yalnızca baskı çözünürlüğünü etkiler. DPI’nın, piksel görüntüsünün çözünürlüğü üzerinde hiçbir etkisi yoktur. Sadece piksel boyutları hakkında endişelenmen gerekiyor.

Fotoğraflar & Kompozisyon

En iyi fotoğrafı kullanmak zorunda değiliz, bunun yerine “boş alan” olan bir fotoğraf aramalısınız. Bu, temel olarak, düz ve çok az kontrasta sahip olan herhangi bir fotoğraf, örneğin açık mavi bir gökyüzü anlamına gelir. Bu, metni mümkün olduğunca az dikkat dağıtıcılarla yerleştirmek için temiz bir alan sağlar, böylece mesajımızın okunmasının daha kolay olmasını sağlar.

Fotoğrafları her zaman büyük boş alanlarda kullanmak zorunda değilsiniz, ancak bu çok daha kolay ve daha iyi görünüyor. Metin için boş bir alanı olmayan bir fotoğrafınız varsa, metnin okunmasını kolaylaştırmak için her zaman bir kaplama ekleyebilirsiniz.

Fotoğrafları her zaman büyük boş alanlarda kullanmak zorunda değilsiniz, ancak bu çok daha kolay ve daha iyi görünüyor. Metin için boş bir alanı olmayan bir fotoğrafınız varsa, metnin okunmasını kolaylaştırmak için her zaman bir kaplama ekleyebilirsiniz.

Kılavuzlar

Kılavuzlar hayatınızı çok daha kolay hale getirir ve ayarlamak için yalnızca bir saniyenizi alırlar, kılavuzları kullanırız çünkü elemanları hizalamanın ve eşit şekilde boşluk bırakmanın çok daha kolay olmasını sağlar. Sitede, oklar ve sayfa numaraları gibi görüntünün üzerine binebilecek tüm gezinti öğelerinin planlanması da önemlidir.

Photoshop’un çoğu zaman işe yarayan hızlı bir yardımcı programı vardır, ancak çok sayıda katman ve nesneye sahip olduğumuzda işler biraz daha zorlaşabilir.
İçeriği kılavuzlara hizalamak ve yapıştırmak, elemanlarımızın doğru hizalandığından emin olmanın çok daha kolay ve daha güvenilir bir yoludur.