Primeiras aulas do curso Email marketing: design do seu email

Email marketing: design do seu email

Briefing - Vídeo 1

A proposta desse curso é criar um e-mail marketing desde sua arte até finalizar o html.

O objetivo é que o e-mail marketing contenha imagens recortadas e algumas áreas com texto html.

Vamos aprender desde a interpretação do Briefing até algumas questões práticas do uso do Photoshop. Como importação de guias, importação de arquivos, imagens, organização das camadas e boas práticas de criação de imagens. Também aprenderemos a finalizar o arquivo html para que ele rode da melhor forma possível nos navegadores e leitores de e-mail da Internet.

Briefing - Vídeo 2

Vamos começar a produzir o e-mail marketing!

Primeiro, vamos analisar o Briefing. Na pasta "_materiais" estão reunidos todos os materiais necessários: o logotipo, ícones e uma série de outros conteúdos.

O Briefing traz diversas instruções sobre o que o e-mail deve conter:

Agora que fizemos uma leitura do briefing e sabemos o que deve vir primeiro, começaremos a elaboração do e-mail marketing.

Todos os ícones e imagens citados estão na pasta "_materiais".

Briefing - Vídeo 3

Depois da leitura do Briefing, vamos criar um arquivo para trabalhar no Photoshop.

Primeiro, abrimos o programa e vamos em "File > New", na janela que abre começamos a preencher as lacunas. Nomearemos o arquivo como mail_marketing_audioshop e classificamos o "Document Type" como Web. A largura (Width) vamos deixar com a medida de 600 pixels. Esse tamanho é baseado no espaço de leitura disponível em um e-mail. Normalmente, o e-mail não ocupa a tela inteira, ele é apenas uma parte da tela. A altura nós vamos colocar como sendo 900 pixels, tamanho que chegamos por meio de aproximação. calculando a soma dos elementos de um e-mail.

Se necessário, é possível modificar as medidas posteriormente.

Após preencher essas informações basta dar um "Ok".

Assim, o arquivo é criado! O fundo do Photoshop pode ser alterado, basta clicar com o botão direito sobre ele e escolher a cor com a qual se deseja trabalhar, nós optaremos por Dark Gray tornando a área de trabalho bem visível.

Vamos começar a trabalhar?

O primeiro pedido do Briefing era:

O logotipo deve ocupar a parte superior do arquivo e estar situado à esquerda. A leitura na língua portuguesa ocorre da esquerda para a direita, portanto, ao situar o ícone à esquerda, essa será a primeira informação visualizada.

Para utilizar o logo basta buscar na pasta enviada pelo cliente, o "_materiais". Para inserir o objeto em nosso arquivo, basta arrastar da pasta a tela do documento.

Assim que inserimos o logotipo no arquivo, ele fica envolvido por pontos e contorno preto, basta clicar em cima desse elemento e posicioná-lo no local desejado.

Para confirmar as modificações que fizemos - de inserção e reposicionamento do logo - clicamos no botão de Commit transform ou utilizamos o atalho "Enter":

mostrando a localização do botão de Commit

Conforme o pedido do Briefing é preciso inserir também os ícones. Encontramos eles na pasta "_material": o ico_desconto e ico_frete. Basta selecioná-los e arrastá-los para o arquivo. Ao fazer isso pode ser que apareça uma janela, basta dar "Ok" nela e as figuras serão colocadas.

Lembrando de confirmar a importação das imagens por meio de "Enter" ou "Commit transform".

Ambas as imagens nós vamos deixar no topo do arquivo. Porém, é essencial que elas não sejam dispostas de qualquer maneira, mas que respeitem margens. Para facilitar na disposição dos elementos, vamos inserir guias.

Antes existia apenas a possibilidade de fazer isso indo em "View > New Guide". Ao fazer isso era exibida uma janela com a possibilidade de escolher entre linhas horizontais e verticais e em qual posição elas devem estar, por exemplo, nos 200 px.

Para facilitar vamos em " View > New Guide Layout..." que oferece um layout pré pronto de guias. Basta configurar como desejamos que elas sejam exibidas. No caso, deixaremos 2 colunas, Gutter de 20 px e a margem com dimensões "20 px", "20 px", "20 px", "20 px" e "20 px".

Ao fazer essas configurações, criamos as guias que vão nos auxiliar a distribuir os elementos e elas já estão com as medidas das margens que desejamos respeitar!

mostrando as guias

Sobre o curso Email marketing: design do seu email

O curso Email marketing: design do seu email possui 169 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana