Photoshop Kullanarak Bir Sonraki E-posta Pazarlama Kampanyanız İçin Hareketli GIF Nasıl Yapılır

E-posta Pazarlama için Photoshop Hareketli GIF

Kilit müşteri Closet52 ile çalışırken harika zaman geçiriyoruz. çevrimiçi elbise mağazası New York'ta köklü ve tanınmış bir moda şirketi için sıfırdan markalaştırdık ve inşa ettik. Liderlikleri, yürüttüğümüz bir sonraki kampanya veya strateji için işbirlikçi fikirler üzerinde her zaman bizimle birlikte çalışıyor. Uygulamalarının bir parçası olarak, Klaviyo için ShopifyPlus. Klaviyo, birçok Shopify Uygulamasının yanı sıra Shopify ile çok sıkı entegrasyona sahip, iyi bilinen bir pazarlama otomasyon platformudur.

En sevdiğim özelliğim onların A / B testi Klaviyo'da. Bir e-postanın farklı sürümlerini geliştirebilirsiniz ve Klaviyo bir örnekleme gönderir, yanıt bekler ve ardından kalan abonelere kazanan sürümü gönderir - hepsi otomatik olarak.

Müşterimiz sektördeki moda e-postalarına abone oldu ve ürün fotoğraflarından oluşan bir slayt gösterisiyle bazı e-postaları ne kadar beğendiklerini söylemeye devam etti. Bunu yapıp yapamayacağımızı sordular ve kabul ettim ve bir A/B testi içeren bir kampanya oluşturduk, burada 4 üründen oluşan bir animasyonlu sürüm ve tek, güzel, statik bir görüntü içeren bir sürüm gönderdik. Kampanya bir patlama içindir sonbahar elbiselerinin satışı çünkü yeni ürün grupları getiriyorlar.

Sürüm A: Hareketli GIF

elbise animasyonu 3

Sürüm B: Statik Görüntü

RB66117 1990 LS7

Fotoğraf kredisi şu adresteki yetenekli insanlara gidiyor: Zeelum.

Kampanya örneklemesi şu anda devam ediyor, ancak animasyonlu grafik içeren e-postanın statik görüntüden çok daha iyi performans gösterdiği oldukça açık… %7 açık oran… ama şaşırtıcı 3 kat tıklama oranı (TO)! Animasyonlu GIF'in abonenin önüne birkaç farklı stil koymasının çok daha fazla ziyaretçiye yol açtığını düşünüyorum.

Photoshop Kullanarak Animasyonlu GIF Nasıl Yapılır

Photoshop ile herhangi bir profesyonel değilim. Aslında, genellikle kullandığım tek zamanlar Adobe Creative Cloud'un Photoshop'u arka planları kaldırmak ve bir dizüstü bilgisayarın veya mobil cihazın üzerine ekran görüntüsü yerleştirmek gibi görüntüleri katmanlamak içindir. Ancak, internette biraz araştırma yaptım ve nasıl animasyon yapılacağını buldum. Bunun için kullanıcı arayüzü en kolayı değil, ancak 20 dakika içinde ve bazı öğreticileri okuduktan sonra onu devre dışı bırakabildim.

Kaynak görsellerimizi hazırlıyoruz:

  • boyutlar – Hareketli GIF'ler oldukça büyük olabilir, bu yüzden photoshop dosya boyutlarımı 600 piksel genişliğindeki e-posta şablonu genişliğimize tam olarak uyacak şekilde ayarladım.
  • Sıkıştırma – Orijinal görsellerimiz yüksek çözünürlüklü ve çok yüksek dosya boyutundaydı, bu yüzden onları yeniden boyutlandırdım ve sıkıştırdım. deniz canavarı çok daha küçük dosya boyutuna sahip JPG'lere.
  • Geçişler - Animasyon eklemek için cazip gelse de ikizleri (örneğin, solma geçişi), dosyanıza çok fazla boyut ekler, bu yüzden bunu yapmaktan kaçınırım.

Photoshop'ta animasyon oluşturmak için:

  1. Yeni bir dosya oluştur e-posta şablonunuza yerleştirdiğiniz boyutlarla tam olarak eşleşen boyutlarla.
  2. seçmek Pencere > Zaman Çizelgesi Photoshop'un temelindeki zaman çizelgesi görünümünü etkinleştirmek için.

Photoshop > Pencere > Zaman Çizelgesi

  1. Her birini ekleyin yeni bir katman olarak görüntü Photoshop'un içinde.

Photoshop > Görüntüleri Katman Olarak Ekle

  1. Tıkla Çerçeve Animasyonu OluşturZaman Çizelgesi Bölgesinde.
  2. Zaman Çizelgesi bölgesinin sağ tarafında hamburger menüsünü seçin ve Katmanlardan Çerçeveler Oluşturun.

Photoshop > Zaman Çizelgesi > Katmanlardan Kareler Oluşturun

  1. Zaman Çizelgesi bölgesi içinde şunları yapabilirsiniz: çerçeveleri sıraya sürükleyin görüntülerin görünmesini istediğinizi belirtin.
  2. 0 sn yazan her kareye tıklayın ve o karenin görüntülenmesini istediğiniz zamanı seçin. Seçtim çerçeve başına 2.0 saniye.
  3. Çerçevelerin altındaki açılır menüde, Sonsuza dek animasyon döngülerinin sürekli olmasını sağlamak için.
  4. Tıkla Oynatma düğmesi animasyonunuzu önizlemek için
  5. Tıkla Dosya > Dışa Aktar > Web için Kaydet (Eski).

Photoshop > Dosya > Dışa Aktar > Web için Kaydet (Eski)

  1. seçmek GIF Dışa Aktar ekranının sol üst kısmındaki seçeneklerden.
  2. Resimleriniz şeffaf değilse, işaretini kaldırın. Şeffaflık seçeneği.
  3. Tıkla İndirim ve dosyanızı dışa aktarın.

photoshop dışa aktarma animasyonlu gif

Bu kadar! Artık e-posta platformunuza yüklemek için animasyonlu GIF'e sahipsiniz.

Açıklama: dolap52 şirketimin bir müşterisi, Highbridge. Bu makale boyunca bağlı kuruluş bağlantılarını aşağıdakiler için kullanıyorum: kerpiç, Klaviyo, deniz canavarı, ve Shopify.