A criação de uma arte para envio de uma campanha de email marketing pode ser feita de várias formas, tem pessoas que enviam emails somente com textos, outros colam uma imagem no corpo do email ou até mesmo a envia em anexo, tem as campanhas enviadas em HTML, podendo ser mescladas entre imagem e texto ou somente em imagem, mas tudo por HTML.

Enviar as campanhas por HTML é uma das melhores formas para aumentar a taxa de abertura dos emails (CTRs), pois facilita para seu email não ser considerado SPAM, e também te permite fazer um email visualmente mais bonito sem se preocupar com o tamanho das imagens, uma vez que a imagem estará em um servidor e não no corpo do email, o que ajuda a aumentar a taxa de cliques, assim, nesse artigo decidi falar como fazer um email marketing em HTML usando o Photoshop.

Segue os passos para criação, lembrando que se você não é bom nessa área contrate alguém que seja ou se especialize, mas quando digo contratar, não me refiro a contratar o "primo" ou "sobrinho" para fazer, a não ser que ele seja um profissional da área.

Vamos aos passos:

1 - Definir o tamanho e o formato do email

Esse é um ponto importante por mais simples que parece, pois você deverá definir o tamanho do email marketing, mas sempre pensando que essa imagem será vista por pessoas que usam diferentes tipos de computadores e com telas de tamanhos variados, o interessante é usar um tamanho máximo de 600 px de largura para que não dê barra de rolagem.

2 - Criar o conteúdo do email

Essa etapa deve ser feita por quem entende da ferramenta photoshop e seja criativo para se ter um bom resultado. Abaixo um imagem da arte que criamos para ilustrar (somente para ilustração e não foi feita pensando no design rss)

3 - Cortar as imagens do email

Após feito a arte do email você deverá cortá-la. para depois inserirmos um hiperlink em cada imagem. Nessa fase você poderá direcionar cada parte do email para uma landing page, o que deve ser feito corretamente para não prejudicar toda a campanha, pois se, por exemplo, em uma parte do email estiver a imagem de um Celular e quando a pessoa clicar ser direcionada para uma página onde se vende TV provavelmente ele não irá procurar o celular que queria. As pessoas querem cada vez mais informações rápidas e que as ajudem a encontrar o que estão buscando. No exemplo fizemos dois cortes, conforme imagem abaixo:

Obs: Mesmo que toda a imagem seja direcionada para uma mesma landing page, o recomendável e que faça pelo menos um corte para para diminuir o tempo de carregamento do email quando aberto e para seu email não ser barrado pelas ferramentas anti-spam.

4 - Editar as imagens, inserir a url e a tag alt

Clicando com o botão direito em cada imagem cortada você deverá clicar em Edit slice options para editar o código das imagens.

Agora em cada corte feito devemos inserir a url de destino, tag alt do email, a forma de como será aberta a imagem. Assim, é só preencher os campos desejados, como name, url destino (ao clicar na imagem), target - se você colocar _blank, quando a pessoa clicar no email irá abrir uma nova página e se ficar em branco será aberto na mesma página - a mensagem do texto e a alt. Como no exemplo:

5 - Salvar a imagem para web

Agora é a hora de salvar a imagem para web. Basta ir em File e clicar em save for web & devices, onde aparecerá a forma como você irá salvar sua imagem em HTML, ai é só escolher a extensão a ser salva.

Dê nome para pasta e escolha o formato HTML and images. Salve e está pronto sua imagen em HTML, agora é só colocar essa pasta no servidor para que quando as pessoas, de qualquer local (computador), receber seu email marketing consiga ver a imagem.

6 - Código gerado e imagem no servidor

Note que no código de exemplo a imagem é direcionada para a pasta “images/Teste-.jpg” que está no seu computador local, por isso a necessidade de se colocar a imagem em um servidor.

<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>

</body>
</html>

Para que sua imagem seja vista de qualquer lugar você deverá hospedá-la em servidor, se quiser fazer um teste basta cadastrar em um servidor gratuito (atenção: após os testes o interessante é não usar servidores gratuitos e sim contratar um serviço de hospedagem ou uma empresa que presta esse serviço) e enviar as imagens para essa pasta, depois é só fazer uma mudança no código e chamar para o endereço onde está sua imagem. O que está em amarelo foi o que tive que inserir no código, outra forma seria ter usado uma tag para chamar a url. O código do email de exemplo já no servidor será:

<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>

</body>
</html>

7 – Monitorar a campanha pelo Google Analytics

Se quiser que a campanha seja monitorada pelo Google analytics basta ir para o endereço do criador de url do Google e criar um url com o código de acompanhamento. Segue os campos necessários de preenchimento:

Após criado é só alterar a url no código criado trocando pela url que foi gerada no gerador do Google Analytics. No exemplo as mudanças foram no endereço http://venderon.blogspot.com como segue abaixo:

O que era assim:

Ficou assim:

<a href="http://venderon.blogspot.com/?utm_source=boletim&utm_medium=cpc&utm_campaign=teste" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>

Para melhorar seu desempenho em email marketing leia esses artigos:

Marketing Digital | Vendas on-line

Como Fazer um Email marketing em HTML pelo Photoshop

1 - Definir o tamanho e o formato do email

2 - Criar o conteúdo do email

3 - Cortar as imagens do email

4 - Editar as imagens, inserir a url e a tag alt

5 - Salvar a imagem para web

6 - Código gerado e imagem no servidor

7 – Monitorar a campanha pelo Google Analytics

O que era assim:

Ficou assim:

5 passos a serem seguidos para o melhor desempenho do email marketing

E-mail marketing. Qual Mailing Usar?

11 Dicas para Melhorar sua Campanha de Email Marketing

Etapas a se percorrer em uma campanha de e-mail marketing

O que são Backlinks e como eles Ajudam o Site da sua Empresa?