Como fazer um GIF animado para sua próxima campanha de email marketing usando o Photoshop

GIF animado do Photoshop para e-mail marketing

Estamos nos divertindo muito trabalhando com o cliente chave Closet52, um loja de vestidos online que marcamos e construímos desde o início para uma empresa de moda estabelecida e bem conhecida em Nova York. A liderança deles está sempre trabalhando conosco em ideias colaborativas para a próxima campanha ou estratégia que estamos executando. Como parte de sua implementação, implantamos Klaviyo por Shopify Plus. Klaviyo é uma plataforma de automação de marketing bem conhecida com integração muito forte com Shopify, bem como muitos Shopify Apps.

Uma característica minha favorita é a sua Teste A / B Exemplo: crie XNUMX textos de email > XNUMX pessoas na sua lista, XNUMX receberao XNUMX email e XNUMX receberão outro e veja qual email converteu mais em Klaviyo. Você pode desenvolver diferentes versões de um e-mail, e Klaviyo enviará uma amostra, aguardará uma resposta e enviará aos assinantes restantes a versão vencedora – tudo automaticamente.

Nosso cliente assina e-mails de moda do setor e continuou comentando o quanto gostou de alguns e-mails com uma apresentação de slides de fotos de produtos. Eles perguntaram se poderíamos fazer isso e eu concordei e construí uma campanha com um teste A/B onde enviamos uma versão com uma animação de 4 produtos e outra com uma única imagem estática bonita. A campanha é para um estouro venda de seus vestidos de outono como eles estão trazendo novas linhas de produtos.

Versão A: GIF animado

animação de vestido 3

Versão B: Imagem estática

RB66117 1990 LS7

O crédito da foto vai para o pessoal talentoso da Zeelum.

A amostragem da campanha ainda está em execução, mas está bem claro que o e-mail com o gráfico animado está superando em muito a imagem estática... em cerca de uma taxa de abertura de 7%… mas surpreendente 3 vezes a taxa de cliques (CTR)! Acho que o fato de o GIF animado colocar vários estilos diferentes na frente do assinante levou a muito mais visitantes.

Como fazer um GIF animado usando o Photoshop

Eu não sou nenhum tipo de profissional com Photoshop. Na verdade, as únicas vezes que eu normalmente uso Photoshop da Adobe Creative Cloud são remover fundos e colocar imagens em camadas, como colocar uma captura de tela em cima de um laptop ou dispositivo móvel. No entanto, fiz algumas pesquisas on-line e descobri como fazer uma animação. A interface do usuário para isso não é a mais fácil, mas em 20 minutos e depois de ler alguns tutoriais, consegui derrubá-la.

Preparando nossas imagens de origem:

  • Dimensões – GIFs animados podem ser bem grandes, então eu certifiquei-me de definir as dimensões do meu arquivo de photoshop para corresponder exatamente à largura do nosso modelo de e-mail de 600px.
  • Compressão – Nossas imagens originais eram de alta resolução e tamanho de arquivo muito alto, então eu as redimensionei e as comprimi com Kraken para JPGs com um tamanho de arquivo muito menor.
  • Transições – Embora você possa ficar tentado a adicionar animação pré-adolescentes (por exemplo, transição de desvanecimento) entre quadros, isso adiciona muito tamanho ao seu arquivo, então eu evitaria fazer isso.

Para construir a animação no Photoshop:

  1. Crie um novo arquivo com as dimensões que correspondem às dimensões exatas que você está colocando em seu modelo de email.
  2. Selecionar Janela > Linha do tempo para habilitar a visualização da linha do tempo na base do Photoshop.

Photoshop > Janela > Linha do tempo

  1. Adicione cada imagem como uma nova camada dentro do Photoshop.

Photoshop > Adicionar imagens como camadas

  1. Clique Criar Animação de Quadrona Região da Linha do Tempo.
  2. No lado direito da região Timeline, selecione o menu de hambúrguer e selecione Faça quadros a partir de camadas.

Photoshop > Linha do tempo > Criar quadros a partir de camadas

  1. Dentro da região Timeline, você pode arraste os quadros na ordem em que você deseja que as imagens apareçam.
  2. Clique em cada quadro onde ele diz 0 seg. e selecione o tempo que você gostaria que esse quadro fosse exibido. Eu escolhi 2.0 segundos por quadro.
  3. Na lista suspensa abaixo dos quadros, selecione Para sempre para garantir que os loops de animação sejam contínuos.
  4. Clique na Botão Play para visualizar sua animação.
  5. Clique Arquivo > Exportar > Salvar para a Web (herdado).

Photoshop > Arquivo > Exportar > Salvar para a Web (Legado)

  1. Selecionar GIF das opções no canto superior esquerdo da tela Exportar.
  2. Se suas imagens não forem transparentes, desmarque a Transparência opção.
  3. Clique Salvar e exporte seu arquivo.

gif animado de exportação do photoshop

É isso! Agora você tem o GIF animado para enviar para sua plataforma de e-mail.

Divulgação: Armário 52 é cliente da minha empresa, Highbridge. Estou usando links de afiliados ao longo deste artigo para adobe, Klaviyo, Krakene Shopify.