E-postada animasyonlu GIF'ler için bir rehber

Bir e-posta pazarlamacısı olarak, her zaman kopya, tasarım ve görseller kullanarak kampanyalarınızı iyileştirmeye çalışıyorsunuz. Ancak abonelerin dikkatini çekmek için bu kadar çok rekabet varken, sizi farklı kılacak bir şey istemeniz şaşırtıcı değil - okuyucuları tıklamaya ve mesajınızı önemsemeye ikna etmek. Bunu yapmanın bir yolu? Hareketli GIF'ler.

Animasyon eklemek, abone etkileşimini artırmak için ihtiyacınız olan şey olabilir. Sizin gibi e-posta pazarlamacıları, bu ekstra ilgiyi sağlamak için e-postadaki hareketli GIF'lere giderek daha fazla yöneliyor. 2020 E-posta Durumu verilerimize göre, pazarlamacıların %51,28'i pazarlama e-postalarında en azından bazen animasyonlu GIF'ler kullandıklarını söyledi.

Peki bu harekete nasıl katılabilirsiniz? Bu blog gönderisinde şunları ele alacağız:

• GIF nedir
• Faydaları (ilham verici örneklerle birlikte)
• Animasyonlu GIF'lerin dezavantajları
• Animasyonlu GIF'ler nasıl yapılır
• E-posta istemci desteği ve yükleme süreleri

GIF nedir?

Grafik Değişim Biçimi anlamına gelen GIF, CompuServe tarafından 1987'de geliştirilen bir görüntü biçimidir. Tarayıcılar ve e-posta istemcileri arasındaki geniş destek nedeniyle, GIF'ler internetin ilk günlerinden beri popüler bir görüntü biçimi olmuştur.

Daha da önemlisi, GIF'ler canlandırılabilir. Bir flipbook'un çalışmasına benzer şekilde, GIF'ler hareket yanılsaması oluşturmak için hızla bir dizi görüntü görüntüler. İnternetin ilk yıllarında GIF'ler (ve seçim çerçevesi ve yanıp sönen etiketler), bir web sayfasına hareket eklemenin başlıca yöntemiydi.

1990'lardan bu yana çok şey değişti. Animasyonlu GIF'ler hem web'de hem de e-posta pazarlamasında bir rönesansın tadını çıkarıyor. “GIF”i nasıl telaffuz ettiğiniz konusunda hala bazı tartışmalar olsa da, çoğu kişi GIF'lerin mükemmel bir pazarlama aracı olabileceği konusunda hemfikir olacaktır.

E-postada animasyonlu GIF'lerin faydaları

İster sert bir "G" harfini tercih edin, ister GIF'i belirli bir marka fıstık ezmesiyle kafiyeli yapmayı seviyor olun, GIF'lerin e-postalarda neden bu kadar yararlı olduğuna bir göz atalım.

Bir GIF ile e-postanıza hareket eklemek, abonelerinizin dikkatini çekmenin, onları yapmalarını istediğiniz bir eyleme yönlendirmenin veya tüm mesajınızı aldıklarından emin olmak için onları kaydırmaya devam etmenin harika bir yoludur.

Google, abonelerini kutlamak için sevimli bir GIF kullanır.

Grammarly, tekliflerine daha da fazla dikkat çekmek için ince bir animasyon kullanır.

Xfinity, abonelerini çekmek ve onları kaydırmaya teşvik etmek için GIF'lerini e-postada daha aşağıya yerleştirir.

Videomuza dikkat çekmek ve abonelerin daha fazlasını görmek için tıklamaya ilgi duymasını sağlamak için sahte bir video GIF kullandık.

Ürün ve hizmetlerinizi sergileyin

Ürününüzün harika olduğunu biliyorsunuz. Abonelerinizin de bunu bildiğinden emin olun. Ürününüzün veya hizmetinizin nasıl çalıştığını göstermek için hareketli bir GIF gibisi yoktur.

ILIA Beauty, ürünlerini gerçek insanlarla çalışırken sergiliyor.

Webflow, ürünlerini çalışırken gösterir, böylece aboneler ne bekleyeceklerini bilir.

Magic Spoon, farklı lezzetlerini ve harika ambalaj tasarımını sergiliyor.

Karmaşık bir fikri basitleştirin

Bir resim bin kelimeye bedelse, o zaman hareketli bir resim muhtemelen daha da değerlidir. Karmaşık bir fikri göstermek için hareketli bir GIF kullanın veya abonelerinize işlerin düşündüklerinden daha kolay olduğunu gösterin.

Baggu, basit temizlik talimatlarını canlandırarak bir sonraki seviyeye taşıdı. Dört farklı animasyon yaparak, abonelerin tüm hikayeyi görmek için kaydırmaları gerekiyor.

Sakinliğinizi bulmak basit geliyor. Ancak geçtiğimiz yıl boyunca hepimiz bunun ne kadar zor olabileceğini anladık. Headspace, herhangi birinin kelimelerle açıklayabileceğinden daha iyi bir GIF ile sakinliğinizi nasıl bulacağınızı gösterir.

Yeni veya yakında gelecek bir şeyle alay edin

Yayınlamak üzere olduğunuz yeni bir içeriğiniz veya ürününüz var mı? Yakında harika bir teklif mi geliyor? Ürününüzle ilgili farkındalık veya ilgi oluşturmak için animasyonlu bir GIF kullanın ve abonelerin bir sonraki e-postanızı beklemesini sağlayın.

Apple, Black Friday indirimini uzatıyor ve aboneleri fırsatları kaçırmamak için alışveriş için "tarihleri ​​kaydetmeye" teşvik ediyor.

Bu e-postadaki gölgelerde Linus'un elektrikli bisikleti ima ediliyor. Abonelerin gerçek ürünü görmek için tıklamaları gerekecek.

Tinker, abonelerin daha fazla bilgi içeren bir sonraki e-postayı beklemesini sağlamak için bu animasyonlu GIF ile hem Kara Cuma indirimi hem de sınırlı sayıda bir saatle dalga geçiyor.

Animasyonlu GIF'lerin dezavantajları

Animasyonlu GIF'ler ne kadar harika olsa da, kusurları da yoktur.

Erişilebilirlik eksikliği

Animasyonlu GIF'ler çeşitli nedenlerle erişilebilirlik açısından sorun teşkil edebilir.

2 Hz ile 55 Hz arasındaki içerik yanıp sönme oranları, ışığa duyarlı epilepsili kullanıcılara zarar verebilir. Ayrıca, görme engelli kullanıcılar, animasyon değişmeden önce bir GIF'deki içeriği okumakta veya incelemekte zorluk çekebilir. Bu nedenle, animasyonlu GIF'lerinizin yumuşak geçişlere sahip olduğundan veya bir kareden diğerine yüksek hızda animasyon yapmadığından emin olun.

Ve GIF'ler görüntü dosyaları olduğundan, ekran okuyucular gibi yardımcı teknolojilere güvenen kullanıcılar için her zaman uygun alternatif metin eklemelisiniz. Görüntüler birçok insan için doğası gereği erişilemez, bu nedenle metin ve bağlam sağlamak, mesajınızı daha net anlamalarını sağlar.

Tüm aboneleriniz için erişilebilir, kapsayıcı e-postalar oluşturun Becerileri ne olursa olsun herkesin yararlanabileceği e-postalar yazmak, tasarlamak ve kodlamak için ihtiyaç duyduğunuz bilgileri ve adım adım tavsiyeleri alın. Nasıl yapılacağını öğrenin →

Kötü arka plan şeffaflığı

Animasyonlu içeriğinize daha fazla renk veya biraz arka plan şeffaflığı getirmeniz gerekiyorsa, animasyonlu bir GIF gitmenin yolu olmayabilir.

Saydam arka planlar söz konusu olduğunda GIF'ler zarif değildir. Ancak korkmayın, animasyonlu PNG (APNG) biçiminde e-postaya animasyonlu bir alternatif getirebilirsiniz. APNG'ler kilobayt (KB) üzerinde birikmeyi de sevdiğinden, bir sonraki paylaştığımız sıkıştırma ipuçlarını ve püf noktalarını not ettiğinizden emin olun.

Animasyonlu GIF'lere başka bir alternatif arıyorsanız, CSS animasyonlarını keşfetmek isteyebilirsiniz.

E-posta için animasyonlu GIF nasıl yapılır

GIF oluşturma birkaç yolla yapılabilir. Bir dizi fotoğrafı canlandırmanıza veya bir videoyu hareketli bir GIF'e dönüştürmenize izin veren çevrimiçi oluşturucuları kullanabilirsiniz. Veya özel tasarımları hareket ettirmek için Adobe Photoshop veya Adobe Animate gibi yazılımları kullanabilirsiniz.

Animasyonlu GIF'ler oluşturmak için tercih ettiğim yol, Adobe Animate içinde çalışmaktır. Bu, o zamanlar Flash'ta yıllarca çalışmaktan doğar. Flash kullanımdan kaldırıldığında, Adobe Animate devraldı ve Flash'ın bazı özelliklerini korurken HTML5, video ve animasyonlu GIF gibi daha fazla çıktı seçeneği getirdi.

Bu yüzden Adobe Animate'te nasıl animasyonlu GIF yapılacağına dalacağım.

Adobe Animate ile oluşturma

Adım 1: Yeni bir dosya oluşturun ve boyutları girin

Adobe Animate'te GIF oluşturmak için önce yeni bir dosya oluşturun ve olmasını istediğiniz boyutları girin. Profesyonel ipucu: Animasyonunuzu, tıpkı statik görüntüler için yaptığınız gibi, retina ekranı için iki katı boyutta oluşturun.

Adım 2: Canlandırılacak grafikleri içe aktarın

Yazılımın şekil ve çizim araçlarını kullanarak her öğe için bir katman oluşturarak animasyonunuzu doğrudan tuval üzerine tasarlayabilirsiniz. Animasyonunuz için tasarımı Adobe Illustrator'da oluşturduysanız, vektör grafiklerinizi kopyalayıp tuvalinize yapıştırmanız yeterlidir. Aksi takdirde, dosya > içe aktar > sahne alanına içe aktar seçeneğine giderek grafikleri Adobe Animate'e aktarabilirsiniz. Veya birden çok kez yeniden kullanılacak bir grafiği içe aktarıyorsanız, "kütüphaneye aktarabilirsiniz".

3. Adım: Animasyonunuzu oluşturun

Artık animasyonunuzu oluşturmak için zaman çizelgesini kullanabilirsiniz. Bunun gibi yazılımlarla ilgili birçok olasılık var ve bunların hepsine tek bir blog yazısında değinmek zor olurdu. Ancak, YouTube'da, Adobe'nin çevrimiçi eğitimlerinde ve yazılımın kendisinde birçok yararlı kılavuz içeren çok sayıda kaynak var.

Semboller, ara doldurma ve kolaylık ile ilgili içeriğe özellikle dikkat etmenizi tavsiye ederim. Yalnızca bu üç işlevle, dikkat çekmenize, mesajınızı iletmenize ve hedef kitlenizi memnun etmenize yardımcı olan son derece ilgi çekici animasyonlar oluşturabilirsiniz. Tüm bunlar, e-postalarınıza bir sürü marka kişiliği getirirken.

semboller

Sembol, bir kez oluşturduğunuz ve ardından kitaplıktan seçerek yeniden kullandığınız bir grafik, düğme veya film klibidir.

Bir sembol oluşturduktan sonra, onu animasyonunuzda yeniden kullanabilirsiniz; buna örnek denir. Rengi değiştirmek gibi sembolünüzü düzenlerseniz, bu değişiklik tüm örneklerde yapılır (e-posta bölümlerine benzer şekilde). Ancak bir örneği düzenlerseniz, değişikliğiniz yalnızca o örnek için geçerli olacaktır.

Animasyonlu GIF'ler için yalnızca tasarım öğelerinizi grafik sembollere dönüştürmenizi öneririm. Hem film kliplerinin hem de düğmelerin kendilerine bağlı kendi zaman çizelgesi vardır, böylece onları ana zaman çizelgesinden bağımsız olarak canlandırabilirsiniz. Ancak, animasyonunuzu bir GIF olarak dışa aktardığınızda ana zaman çizelgesinin dışında oluşturulan herhangi bir animasyon dikkate alınmadığından, yalnızca ana zaman çizelgesinde canlandırılan grafik sembollerine bağlı kalmak mantıklıdır.

Ara doldurma

Ara doldurma, bir durumdan diğerine nasıl canlandırdığınızdır. Şekil, hareket veya klasik araları kullanabilirsiniz.

Bir şekil arası , yalnızca tuvale veya AI içe aktarıcı tercihleri ​​kullanılarak içe aktarılan vektörlere (bitmap olarak değil) çizdiğiniz şekiller veya öğelerle kullanılabilir. Bunun nedeni, bir şekil arasının bir nesnenin şeklini değiştirmenize olanak sağlamasıdır. Örneğin: Zaman çizelgenizdeki bir ana kareye bir daire ekleyebilir, diğerine bir kare ekleyebilir, ardından dairenizi şekil arası ile karenize dönüştürebilirsiniz.

Ara hareketler, ilk ve son kareler arasında farklı değerler belirterek animasyon hareketleri oluşturmak için kullanılır. Bu tür bir ara ile, bir nesnenin özelliklerini (konum, boyut, renk, efektler, filtreler ve döndürme dahil) değiştirebilirsiniz.

Klasik ara , ara hareketle çok benzer. Flash'tan taşındı ve ek bir seçenek olarak Animate'te tutuldu. Hareket yumuşatma tekniklerinin (aşağıda tartışılan) uygulanması biraz daha kolay olduğundan, bu benim tercih ettiğim yoldur.

Kolaylaştırmak

Hareket hızı, ara doldurma ile el ele gider. Bir nesneyi zaman çizelgesini kullanarak bir konumdan diğerine taşımak kek ise, o zaman yumuşama buzlanmadır!

Animate'in kolaylık işlevini kullanarak, aranın başında veya sonunda hızlanmasını veya yavaşlamasını sağlayabilirsiniz. Veya ara tamamlandığında biraz sıçrama ekleyin. Bu, animasyonunuza biraz kişilik kazandırmanıza gerçekten yardımcı olur.

Bu araya uygulanan hareket hızı animasyonu hızlı bir şekilde başlatır ve sonunda yavaşlar.

Burada, ara işlemime bir sıçrama kolaylığı uyguladım.

Hareket hızının nasıl uygulanacağı hakkında bilgi için YouTube'daki bu videoyu izleyin.

4. Adım: Animasyonlu GIF'inizi dışa aktarın

Animasyonunuzu Adobe Animate'ten GIF olarak kaydetmek güzel ve basittir. Dosya > Dışa Aktar > Animasyonlu GIF'i Dışa Aktar'a gidin.

Dosya boyutunuzu küçük tutmak

Adobe Animate veya başka bir şeyle animasyonlu GIF'inizi nasıl oluşturduğunuzdan bağımsız olarak, dosya boyutunuzu küçük tutmak e-posta için çok önemlidir. Animasyonlarınızı olabildiğince hafif tutmanıza yardımcı olacak birkaç şey göz önünde bulundurulmalıdır.

Sıkıştırma

Animate ve Photoshop gibi araçların GIF'ler için sınırlı sıkıştırma seçenekleri vardır; sıkıştırma yerine harici yazılım kullanmak genellikle daha iyidir. Dosya boyutunuzu optimum ağırlığa indirmek için ücretsiz olarak indirilebilen ImageOptim'i veya ücretsiz bir çevrimiçi GIF optimizasyon aracı olan EZgif'i öneririm. Şahsen, benimkini 1 megabaytın (MB) altında tutmayı seviyorum, ancak en uygun dosya boyutu değişecek ve bu blog yazısında daha sonra tartışacağımız e-posta yükleme süresine bağlı.

düz renk

Animasyonunuza fotoğraf veya degradeler eklemek, bunların içerdiği renk ve gölge miktarı nedeniyle ağırlık ekler. Bir GIF, 16 milyondan fazla renk içerebilen bir JPEG ile karşılaştırıldığında, yalnızca 256 renk içerebilir ve bu da genellikle kalitenin isabet almasına neden olur. Bu yüzden işleri basit tutmak anahtardır.

Sınırlı çerçeveler

Animasyon ne kadar kısa olursa o kadar iyidir. Animasyonunuzun içerdiği her kare GIF'e ağırlık katar. Bir animasyonun gerçekten kopyanıza iltifat etmekle ilgili olması gerektiğinden, animasyonunuzun ne kadar süreyle oynatılacağını sınırlamak ve okuyucuları e-postayı aşağı kaydırmaya teşvik etmek mantıklıdır.

Kaydettikten ve sıkıştırdıktan sonra GIF'inizin biraz fazla ağırlık taşıdığını fark ederseniz, Photoshop veya EZgif kullanarak çerçeveleri kaldırabilirsiniz.

Animasyonlu GIF'inizin provasını yapmak

Artık GIF'inizi tamamladığınıza göre, e-postanıza yerleştirmeden önce geri bildirim veya onay almak isteyebilirsiniz. Litmus Proof gibi gerçek zamanlı bir işbirliği aracıyla herkesin yorumlarını ve onaylarını merkezileştirebilirsiniz.

E-postada animasyonlu GIF'ler uygulama

GIF'inizi kullanıma hazır hale getirdikten sonra, diğer herhangi bir resim dosyasını ekler gibi e-postanıza ekleyebilirsiniz: