Cómo hacer un GIF animado para su próxima campaña de marketing por correo electrónico con Photoshop

GIF animado de Photoshop para marketing por correo electrónico

Nos lo estamos pasando genial trabajando con el cliente clave Closet52, un tienda de vestidos en línea que marcamos y construimos desde cero para una empresa de moda establecida y conocida en Nueva York. Su liderazgo siempre está trabajando con nosotros en ideas de colaboración para la próxima campaña o estrategia que estamos ejecutando. Como parte de su implementación, implementamos Klaviyo por Shopify Plus. Klaviyo es una conocida plataforma de automatización de marketing con una integración muy estrecha con Shopify, así como con muchas aplicaciones de Shopify.

Una de mis características favoritas es su pruebas A/B en Klaviyo. Puede desarrollar diferentes versiones de un correo electrónico, y Klaviyo enviará una muestra, esperará una respuesta y luego enviará a los suscriptores restantes la versión ganadora, todo automáticamente.

Nuestro cliente se suscribe a correos electrónicos de moda en la industria y continuó comentando cuánto les gustaron algunos correos electrónicos con una presentación de diapositivas de fotos de productos. Me preguntaron si podíamos hacer eso y acepté y construí una campaña con una prueba A/B donde enviamos una versión con una animación de 4 productos y otra con una sola imagen estática y hermosa. La campaña es para un reventón. venta de sus vestidos de otoño ya que están incorporando nuevas líneas de productos.

Versión A: GIF animado

vestido de animación 3

Versión B: Imagen estática

RB66117 1990 LS7

El crédito de la foto es para la gente talentosa de Zeelum.

El muestreo de la campaña aún se está ejecutando en este momento, pero está bastante claro que el correo electrónico con el gráfico animado está superando con creces a la imagen estática... por aproximadamente una tasa de apertura del 7%… pero un asombroso 3 veces la tasa de clics (CTR)! Creo que el hecho de que el GIF animado pusiera varios estilos diferentes frente al suscriptor generó muchos más visitantes.

Cómo hacer un GIF animado usando Photoshop

No soy ningún tipo de profesional con Photoshop. De hecho, las únicas veces que normalmente uso Photoshop de Adobe Creative Cloud son para eliminar fondos y superponer imágenes, como colocar una captura de pantalla encima de una computadora portátil o dispositivo móvil. Sin embargo, investigué un poco en línea y descubrí cómo hacer una animación. La interfaz de usuario para esto no es la más fácil, pero en 20 minutos y después de leer algunos tutoriales, pude eliminarlo.

Preparando nuestras imágenes fuente:

  • Dimensiones – Los GIF animados pueden ser bastante grandes, así que me aseguré de configurar las dimensiones de mi archivo de Photoshop para que coincidieran exactamente con el ancho de nuestra plantilla de correo electrónico de 600 px de ancho.
  • Compresión – Nuestras imágenes originales eran de alta resolución y tamaño de archivo muy alto, así que las redimensioné y las comprimí con Kraken a JPG con un tamaño de archivo mucho más pequeño.
  • Transiciones – Si bien puede sentirse tentado a agregar animación tweens (por ejemplo, transición de desvanecimiento) entre cuadros, eso agrega mucho tamaño a su archivo, así que evitaría hacer eso.

Para construir la animación en Photoshop:

  1. Crear un nuevo archivo con las dimensiones que coincidan con las dimensiones exactas que está colocando en su plantilla de correo electrónico.
  2. Selecciona Ventana > Línea de tiempo para habilitar la vista de línea de tiempo en la base de Photoshop.

Photoshop > Ventana > Línea de tiempo

  1. Agregar cada uno imagen como una nueva capa dentro de Photoshop.

Photoshop > Agregar imágenes como capas

  1. Presione Crear cuadro de animación en la región de la línea de tiempo.
  2. En el lado derecho de la región de la línea de tiempo, seleccione el menú de hamburguesas y seleccione Hacer marcos a partir de capas.

Photoshop > Línea de tiempo > Crear fotogramas a partir de capas

  1. Dentro de la región de la línea de tiempo, puede arrastre los marcos en el orden en el que le gustaría que aparecieran las imágenes.
  2. Haga clic en cada cuadro donde dice 0 segundos y seleccione la hora en que desea que se muestre ese cuadro. Elegí 2.0 segundos por cuadro.
  3. En el menú desplegable debajo de los marcos, seleccione Por sienpre para garantizar que la animación se repite continuamente.
  4. Haga clic en el Botón de play para obtener una vista previa de su animación.
  5. Presione Archivo > Exportar > Guardar para web (heredado).

Photoshop > Archivo > Exportar > Guardar para web (heredado)

  1. Selecciona GIF de las opciones en la parte superior izquierda de la pantalla Exportar.
  2. Si sus imágenes no son transparentes, desactive la casilla Transparencia .
  3. Presione Guardar y exportar su archivo.

Gif animado de exportación de Photoshop

¡Eso es! Ahora tiene el GIF animado para cargarlo en su plataforma de correo electrónico.

Divulgación: armario52 es cliente de mi firma, Highbridge. Estoy usando enlaces de afiliados a lo largo de este artículo para adobe, Klaviyo, Krakeny Shopify.