Como facer un GIF animado para a túa próxima campaña de marketing por correo electrónico usando Photoshop

GIF animado de Photoshop para marketing por correo electrónico

Estamos pasando un rato incrible traballando co cliente clave Closet52, an tenda de vestidos en liña que marcamos e construímos desde cero para unha empresa de moda establecida e coñecida en Nova York. O seu liderado sempre está a traballar connosco en ideas colaborativas para a próxima campaña ou estratexia que esteamos a executar. Como parte da súa implementación, despregamos Klaviyo para ShopifyPlus. Klaviyo é unha plataforma de automatización de mercadotecnia coñecida cunha integración moi estreita con Shopify e con moitas aplicacións de Shopify.

Unha das miñas características favoritas é a súa A proba A / B en Klaviyo. Podes desenvolver diferentes versións dun correo electrónico e Klaviyo enviará unha mostra, agardará unha resposta e, a continuación, enviará aos subscritores restantes a versión gañadora, todo automaticamente.

O noso cliente subscríbese a correos electrónicos de moda na industria e continuou comentando o moito que lle gustaron algúns correos electrónicos cunha presentación de fotos de produtos. Preguntáronme se podíamos facelo e aceptei e construín unha campaña cunha proba A/B onde enviamos unha versión cunha animación de 4 produtos e outra cunha única imaxe estática, bonita. A campaña é para un estoupido venda dos seus vestidos de outono xa que están traendo novas liñas de produtos.

Versión A: GIF animado

animación de vestido 3

Versión B: Imaxe estática

RB66117 1990 LS7

O crédito da foto é para a xente talentosa de Zeelum.

A mostraxe da campaña aínda está en execución agora mesmo, pero está bastante claro que o correo electrónico co gráfico animado supera con creces á imaxe estática... aproximadamente unha taxa de apertura do 7%.... pero sorprendente 3 veces a taxa de clics (CTR)! Creo que o feito de que o GIF animado poña varios estilos diferentes diante do subscritor levou a moitos máis visitantes.

Como facer un GIF animado usando Photoshop

Non son ningún tipo de profesional con Photoshop. De feito, as únicas veces que adoito usar Photoshop de Adobe Creative Cloud son para eliminar fondos e poñer imaxes en capas, como colocar unha captura de pantalla encima dun portátil ou dun dispositivo móbil. Non obstante, busquei en liña e descubrín como facer unha animación. A interface de usuario para isto non é a máis sinxela, pero en 20 minutos e despois de ler algúns titoriais, puiden eliminalo.

Preparando as nosas imaxes de orixe:

  • dimensións – Os GIF animados poden ser bastante grandes, polo que me asegurei de configurar as dimensións do meu ficheiro de Photoshop para que coincidan exactamente co noso modelo de correo electrónico de 600 píxeles de ancho.
  • Compresión – As nosas imaxes orixinais tiñan unha alta resolución e un tamaño de ficheiro moi alto, polo que as cambiei de tamaño e comprimiunas Kraken a JPG cun tamaño de ficheiro moito menor.
  • Transicións – Aínda que poidas estar tentado a engadir animación preadolescentes (por exemplo, transición esvaecida) entre cadros, que engade moito tamaño ao teu ficheiro polo que evitaría facelo.

Para crear a animación en Photoshop:

  1. Crea un novo ficheiro coas dimensións que coincidan coas dimensións exactas que estás colocando no teu modelo de correo electrónico.
  2. seleccionar Ventá > Cronoloxía para activar a vista da liña de tempo na base de Photoshop.

Photoshop > Ventá > Liña de tempo

  1. Engade cada un imaxe como unha nova capa dentro de Photoshop.

Photoshop > Engadir imaxes como capas

  1. prema Crear marco Animación na rexión Timeline.
  2. Na parte dereita da rexión Timeline, selecciona o menú de hamburguesas e selecciona Facer cadros a partir de capas.

Photoshop > Cronoloxía > Crear marcos a partir de capas

  1. Dentro da rexión Timeline, podes arrastra os cadros na orde no que desexa que aparezan as imaxes.
  2. Fai clic en cada fotograma onde di 0 segundos e selecciona o tempo que desexas que se mostre. escollín 2.0 segundos por fotograma.
  3. No menú despregable debaixo dos marcos, seleccione Para sempre para garantir os bucles de animación continuamente.
  4. Prema na Botón Reproducir para previsualizar a súa animación.
  5. prema Ficheiro > Exportar > Gardar para a web (herdado).

Photoshop > Ficheiro > Exportar > Gardar para a web (herdado)

  1. seleccionar GIF das opcións da parte superior esquerda da pantalla Exportar.
  2. Se as túas imaxes non son transparentes, desmarca a opción Transparencia opción.
  3. prema gardar e exporta o teu ficheiro.

gif animado para exportar photoshop

Iso é! Agora tes o GIF animado para cargalo na túa plataforma de correo electrónico.

Divulgación: Armario 52 é cliente da miña empresa, Highbridge. Estou usando ligazóns de afiliados ao longo deste artigo para Adobe, Klaviyo, Krakene Shopify.