Newsletter escalável

Neste tutorial usaremos o programa Fireworks. Com foco em um layout inteligente e escalável, considerando o peso dos elementos principais, vamos fazer um e-mail que poderá se destacar em qualquer caixa de entrada, independentemente do tipo do gerenciador de e-mails.

Wireframe – Logo no início, abra o arquivo Wireframe.png. No painel Properties, defina a cor de fundo, como #210000 e desenhe um retângulo de 1000px de largura e 365px de altura. Em seguida, defina sua cor como #300000, e posicione o retângulo no topo da página.

news-escalavel0

2 – Cabeçalho – Usando a ferramenta Pen, desenhe duas linhas com 1px de expessura e 1000px de comprimento. Posicione-as uma sobre a outra e as deixe sobre a primeira guia horizontal. Defina a cor da linha como preto  e a de baixo como branco, com 10% de opacidade. Agrupe as linhas.

news-escalavel01

3 – Logo – O canto superior esquerdo é geralmente a primeira parte do e-mail vista pelo destinatário. Por isso, ela é reservada para a marca. Abra o arquivo da marca LoveBarista.png, posicione-a a 22px do topo e alinhe-a na guia vertical a 150px.

news-escalavel1

4 – Data – No canto superior direito, desenhe um retângulo com um gradiente short linear. Deixe a cor inicial como #BF0202 e a final como #F70000. Dentro do retângulo crie uma caixa de texto e digite a data em caixa alta. Escolha a fonte e coloque a cor branco e o tamanho 19px.

news-escalavel2

5 – Mídias sociais – Desenhe uma caixa de texto logo abaixo da data, e em caixa alta digite seus links par amídias sociais e outros links externos. Defina o tamanho da fonte para #451A1A, e permita um espaçamento de 17px entre cada. Adicione divisores de 10px de altura com a ferramenta Pen e defina a cor do traço como #451A1A.

news-escalavel3

6 – Destaque – Todas as newsletters precisam de um item de destaque. O espaço acima da guia horizontal de 365px pode ser usado para que os clientes incluam uma foto principal ou promoção. Abra a imagem PromoBanner.png e posicione-a no centro da guia de 365px. O texto relacionado virá abaixo.

news-escalavel4

7 – Informações – Na guia horizontal de 385px, desenhe e centralize um retângulo de 700x215px, inclua um gradiente linear com a cor inicial de #452929 e final de #301C1C . Faça outro retângulo para a caixa de título com 40px de altura e a largura que preferir. Deixe-a a 33px do topo da guia 385px.

news-escalavel5

8 – Adicione conteúdo – Desenhe uma caixa de texto na guia de espaçamento de 20px no retângulo do título. Insira seu título em caixa alta, tamanho 24px e cor branca. Faça outra caixa de texto com 500px de largura a 20px abaixo do título. Insira algum texto branco, com 16px, e altura de linha de 140%.

news-escalavel6

9 – Mais detalhes – Repita o passo 2 com a largura alterada para 700px. Posicione as linhas abaixo da caixa de informações do destaque. O espaço vazio na caixa pode ser usado para imagens extras relacionadas ao artigo principal. Abra a ilustração Packshot.png e alinhe-a à direita com a guia de espaçamento de 20px.

news-escalavel7

10 – Notícias – Duplique o retângulo do passo 7. Posicione-o abaixo da caixa Feature Info e mude sua altura para 499px. Feito isso, faça um retângulo medindo 215x194px, defina sua cor para #3A2625, alinhe-o na guia de 20px e mova-o a 33px da caixa informações do destaque.

news-escalavel8

11 – Máscara de imagem – Desenhe um retângulo branco de 195px x 174px e centralize-o no retângulo do passo 10. Abra a imagem Article01.jpg e posicione-a abaixo do retângulo branco, tanto no painel layers como na tela. Selecione ambos os itens e crie uma máscara acessando Modify > Mask > Group as Mask.

news-escalavel9

12 – Texto do artigo – Duplique a caixa de título dos passos 7 e 8. Defina sua largura como 445px, e alinhe-a no topo da imagem do artigo e sobre a guia vertical de 850px. Crie uma nova caixa de texto abaixo do título com 410px de largura, e texto branco com 13px de tamanho. Insira 5 linhas de loren ipsum.

news-escalavel10

13 – Chamada à ação – Desenhe uma caixa de texto abaixo do texto do artigo e digite uma pequena chamada à ação em caixa alta. Mude a cor do texto para #700000 e seu tamanho para 17px. Abra as imagens fblike.png e tweet.png – para ícones de mídias sociais. Alinhe-as com 10 px de espaçamento.

news-escalavel11

14 – Outro artigo – Crie um divisor de artigo ao duplicar as linhas agrupadas do passo 9. Feito isso, mova-as a 25px abaixo da caixa de imagem. Em seguida, duplique os nove itens mais recentes no painel layers e os posicione na tela 25px abaixo da linha divisória.

15 – Novo conteúdo – Remova a máscara da imagem do artigo para revelar o quadrado branco.  Apague a imagem e abra o arquivo Article02.png. Repita o processo de máscara do passo 11 e mude o título e chamada à ação. O layout mostra dois artigos, mas você pode criar quantos quiser.

news-escalavel12

16 – Rodapé – Agora, faça um retângulo de 100x57px e defina sua cor para #3A2625. Duplique a marca do passo 3 e reduza-a para 73x17px. Em seguida, alinhe a marca à esquerda na guia vertical de 150px e permita um espaçamento de 15px do topo do rodapé.

news-escalavel13

17 – Links importantes – Algumas newletters podem ser muitos grandes. Por isso, é uma boa prática reintroduzir os tópicos importantes no final. Faça uma caixa de texto junto com a marca para incluir seus links de mídias sociais. Defina sua cor para #9F8C83 e o tamanho para 13px.

news-escalavel14

18 – Texto com sombras – A propriedade CSS3 text-shadow é suportada por muitos clientes de e-mail, por isso vamos usa-la. Selecione os títulos principais e, no painel Properties, escolha Shadow and Glow e Drop Shadow, aplicando esses atibutos: Distance=1, Opacity=35%, Colours=#000000, Blur=0, Angle=90 graus.

19 – Término – Dê uma perspectiva à newsletter ao deslocar as caixas de título. Para o título do artigo principal, leve a borda da caixa para a esquerda em 3px. Já para os títulos dos artigos, mova as caixas para a direita em 3px. O layout agora está completo e pronto para ser usado.

news-escalavel15

Matéria publicada na Revista W nº 140, pgs 58 a 60, de autoria de James Parker – www.j-parker.co.uk 

Para fazer o download dos arquivos utilizados nesse tutorial, clique AQUI.

afiliado-zen3

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.