Web Tasarımında Sinemagraflar
Bu yılın başlarında ortaya çıkan sayısız web tasarım eğilimi raporunu okursanız büyük olasılıkla, her yerde ana sayfalarda öne çıkan, büyük boyutlu, kahramana ait sinema filmlerinin sözünü okursunuz. Peki neredeler?
Bazı moda-ileri şirketler onları kendi web sitelerinde kullanırken, sinemagraf büyük ölçüde yuvarlak makaleler ve reddit sayfaları sergilemek için düşürülmüştür.
Ben de yeterli olduğunu söylüyorum. Sinemaseverlerin, yükselmeye heveslendiği web sayfası herosları olarak doğru yerlerine çıkıp, yerlerini aldıkları zaman.
Neden sinemagraflar çalışır?
Bir web tasarım trendini takip etme fikri basitçe tahmin edildiği için beni gerçekten heyecanlandırmadı. Ama ya böyle bir eğilime öncülük edebilecek olsaydın? Ya gerçekten bir amaca sahip olsaydı ve aynı zamanda bir problem çözdüyse?
İnsan gözü hareketi sever.
Sinemagraflarına gelince, yukarıdaki tüm ifadeler doğrudur. Her ne kadar tartışılmış olsa da (web tasarımında bir trend olarak öngörülse de), çok az sayıda web sitesi bunları kullanıyor. Sonuç olarak, kritik bir kitleye ulaşmaya bile yaklaşamadılar, bu yüzden çoğu web kullanıcısı için hala büyüleyici oluyorlar.
Oldukça bir fotoğraf değil, tam bir video değil, sinemaseverler doğal bir şekilde göz kamaştırıcıdır çünkü izleyiciyi ikinci bir bakış atmaya yetecek kadar kandırırlar. ADD çağında bugün yaşıyoruz, bir kullanıcı için duraklama yapmak için kullanabileceğiniz her şey - sadece bir an için bile - çok önemli bir nedenden dolayı küçük bir kazanç olarak sayılır:
Onların dikkatini çekiyorsun.
Bir web sitesinde biraz dikkat çekmenin özellikle etkili bir yolu her zaman video olmuştur. İnsan gözü hareketi sever. Ama büyük bir kahraman videosu (hatta kısa bir tane) çok hantaldır . Tabii ki, hayatının bir inçte sıkıştırabilirsiniz, ama sonra sadece… sıkıştırılmış görünüyor. Ya da yalnız bırakabilir ve yavaş yükleme web sayfasının sonuçlarına katlanabilirsiniz.
Ancak bir sinemagraf kullanarak, hareket ihtiyacını karşılarken hala çok fazla bant genişliği kaydedebilirsiniz. Aslında, ante'yi havaya uçuruyorsunuz çünkü bir sinemagrafın yenilik yönünden faydalanabilirsiniz - İnsanlar sadece onları çok sık görmüyor ve yaptıkları zaman etkileniyorlar.
Yani şimdi sinema filmlerinin web üzerinde neden bir yeri hakettiğini biliyorsunuz, hadi nasıl hayata getirileceğine dair üst düzey bir görüş alalım.
Glendevon Motorları Bir ruh halini taşımak ve rakipleri arasında bir “premium marka” olarak öne çıkmak için kahraman alanında bir sinemagraf kullanır.
Seçenek 1: önceden mevcut bir sinemagraf kullanın
Hazır bir CG'nin tedarik edilmesinin kabul edilebilir olduğu, hatta kendi haline getirilmesinde bile tercih edildiği birçok durum vardır. İhtiyacınız olanı bulabilirseniz ve bunun hakkını almak için bütçenizde olduğunu söylerseniz, o zaman işte bu yoldur. Tek soru şudur: Nerede buluyorsunuz?
İyi haber, seçeneklerin var. Büyük ölçüde bütçeniz tarafından belirlenirler (veya müşteriniz), ancak orada birçok kaynak var. Birkaç tane bile var ücretsiz olanlar ndan şeçmek. Ancak, harcayabileceğiniz seksen paranız varsa, Shutterstock yüksek tanımlı CG'lerin oldukça iyi bir seçimine sahiptir.
(İpucu: Tek başına bir sinemagraf bölümüne sahip değiller, bu yüzden "sinemagraf" terimini aramanız gerekecek, "video çekimi" bölümündeki diğer arama terimleriniz de dahil.)
Ne düşündüğünüzü bulmayı başarabilirseniz, muhtemelen dosyayı bir dereceye kadar sıkıştırmak isteyeceksiniz. Biraz daha fazla.
2. Seçenek: Kendi Yapın
Bir video yerine bir CG kullanmanın tüm amacı, bunun bir akıl-hilesi olduğu anlamına gelmesidir.
Belki de resmini gördüğünüzü bulamadın. Ya da belki sadece ölümsüz bir DIY'er sensin ve ben sana saygı duyuyorum. Peki bir sinematografı tam olarak nasıl yapıyor?
İlk olarak, doğru ekipmana ve bir plana sahip olmanıza yardımcı olur. Başlamak için önerdiğim şey:
- Video çekebilen kamera
- Bir tripod
- Bir model ve / veya herhangi bir gerekli sahne
- Bir bilgisayar
- Bir video düzenleme programına erişim (isteğe bağlı)
- Adobe Photoshop'a veya flixel gibi daha özel bir sinemagraf düzenleme yazılımına erişim
Bir sinema filmi yapmak için ihtiyacınız olan şey budur. Ancak bunu etkili hale getirmek için harika bir fikre ihtiyacınız olacak.
Büyük Hero Cinemagraph'ı Neler Yapar?
CG'nizin genel teması büyük ölçüde web sitesinin kendisinin niş tarafından belirlenirken, sahneyi ayarlarken akılda tutulması gereken bazı evrensel noktalar vardır. Emin olun:
- İnce düşünün: Bir video yerine bir CG kullanmanın tüm amacı, bir akıl-oyunun bir parçası olması anlamına geliyor. En iyi CG'lerden bazıları hala çok iyi görünüyor, ardından izleyiciyi ince bir hareketle şaşırtıyorlar. İncelikten bahsetmişken, metin ve üst üste bir CTA yerleştiriyorsanız, genel bileşimin aşırı meşgul veya parlak renkli olmadığından emin olun. Unutmayın, CG bu unsurları çalmalı, onlardan uzak durmamalıdır. Konuşmak istediğim…
- Gerçek kahraman için odadan çıkın: Başlığı, alt başlığı ve CTA düğmesini sinemagrafında nereye gitmek istediğinizi bildiğinizden emin olun. Bu, ana eylemi kompozisyona yerleştirdiğiniz yeri etkileyecektir.
- Bağlantılı tutun: Elbette, bir CG'nin bazı hareketleri vardır, ancak sahnenin genel olarak hareketi doğru bir şekilde kontrastlamak için hala çok iyi olması gerekir. Bir tripod arka plan hareketi ve kamera kararlılığı ile yardımcı olmalıdır. Modelinizin gözleri bir taraftan diğerine geçiyorsa, başını hala aynı anda tuttuğundan emin olun.
- Döngüleri mümkün kılın: Dosyanın nispeten küçük olmasını istediğinizden, eylemi döngülendirmeniz gerekecek ve böylelikle olabildiğince sorunsuz tekrarlanacaktır. Sahneyi ayarlarken bunu planlayın. İdeal olarak, ilk konum, son konumu, döngüyü kapatarak çok yakın olmalıdır.
- Mümkünse bir kişi kullanın: Çalışmalar göstermiştir İçlerindeki insanlarla, insanların dikkatini, insanların dikkatini olmayanlardan daha fazla korurlar. Bu aynı zamanda CG'ler için de geçerlidir. Modelinizi CTA yönüne bakmayı başarabiliyorsanız ekstra puanlar. Bu gösterildi kullanıcının gözünü oraya çekmek için.
Tüm öğeleriniz elinize geçtikten sonra, yaklaşık 20-30 saniyelik bir video çekmeye çalışın ve istenen hareketi birkaç kez tekrarlayarak yaklaşık 5 saniyelik bir şeyleri tam olarak aralarında saklayın. Bu, göz alıcı bir sinemaya dönüşmek için yeterli ham görüntü vermelidir.
Bir araya getirmek
Bir videoyu bir sinemaya dönüştürmek için adım adım ilerlemeye devam etmese de, size birçok seçenek sunulabilir. Özel bir sinemagraf tasarım programını kullanmak için 299 dolar ödünç alabilirsiniz, ancak birlikte güzel bir CG koyabilirsiniz Photoshop kullanarak (ki zaten kullandığınızı tahmin ediyorum.)
Dosya sıkıştırılıyor
CG'nizi sıfırdan oluşturmuş veya mevcut bir kaynaktan almış olsanız da, hızlı bir şekilde yüklendiğinden emin olmak istersiniz. Son çıktı dosyanızın bir gif veya video (hangisini tavsiye ederim) olsun, sıkıştırmanız iki ayrı faktöre dayanacaktır:
- Kalite
- uzunluk
Kişisel olarak, herhangi bir geniş formatlı kahraman imajında, videoda veya sinemada mümkün olan en yüksek kaliteye gitmeye çalışıyorum. Benim düşünceme göre, böyle bir görsel etki yaratmayı amaçlayan herhangi bir dosyanın kalitesini feda etmek bir utançtır. Bunu dengelemek için sinemagraf döngüsümüzü mümkün olduğunca kısa hale getirmeye çalışıyorum.
Eylem, döngünün ne kadar kısa olabileceği üzerinde bir etkiye sahip olacaktır - çok hızlı bir şekilde tekrarlanırsa biraz spastik görülebilen yavaş, kasıtlı bir göz bakışından çok daha kısa bir mesafe olabilir. Aşağıdaki örneği web ajansından alın Derin Son . Burada ihtiyaç duyulan her şey, bir tren arabasının, oldukça kesintisiz bir döngü için sıradakiyle eşleşmesi gerektiğinden, bunu bir saniyeliğine düşürmeyi başardım.
İşlemi son derece kısa tutmayı başarmış olmama rağmen, dosya boyutunu daha hızlı bir yük için azaltabileceğini biliyordum. Adlı ücretsiz bir çevrimiçi video kompresörü kullanarak sona erdi ClipChamp . Videoyu birkaç megabayttan bir svelte 319 KB'ye sıkıştırmayı başardım. Unutmayın, çoğu kullanıcı beklemekten sadece üç saniye sonra sitenizden geri dönecektir. Bu nedenle, hızlı olmak için ödeme yapar.
Ve eğer son sonucunuz aşırı sıkıştırmadan arta kalanlarla kalıyorsa, her zaman kusurlu kahraman videolarında kullanılan denenmiş ve gerçek bir hile uygulayabilirsiniz. desenli kaplama .
Başkalarının sinema görüntülerini kahraman görüntüleri olarak nasıl kullandığını görmek ister misiniz? İyi haberlerim var, ve kötü - Gösterilecek çok fazla şey yok, bu kötü haber. Ama iyi haber şu ki, bu planı eyleme geçirecekseniz, oldukça büyük bir trend olmaya söz vermenin öncüsü olursunuz.
İşte web'de bulmayı başardığım birkaç tane var:
Yaldızlı Lezzet [Editörün notu: Bu site kapatıldı.]
Son düşünceler
Bir sinematografi sadece sıkıcı bir web sitesi projesini sadece birkaç çentik oluşturamaz, aynı zamanda başarısını da etkileyebilir. Bir katil başlığı ve etkileyici harekete geçirme ifadesiyle birleştirirseniz, kullanıcıların dikkatini çekebilirsiniz. Bu dikkatle yaptığınız şey size kalmış.