Desenvolvendo uma Newsletter

• Tweet
• Sharebar

• Tweet

Coluna Fireworks – Desenvolvendo uma Newsletter

Olá, sejam muito bem vindos a mais uma coluna de Fireworks. Nesta coluna, daremos continuidade ao tema Newsletter, no qual foi mostrado pelos colunistas Marcelo Ariatti e Fábio Ricotta em seu artigo o uso de uma Newsletter, seus benefícios entre mas detalhes sobre o mesmo.
Se você ainda não viu o artigo: Newsletter – Introdução.
Espero que gostem e aproveitem bem essa coluna e bom aprendizado a vocês!

---

Desenvolvendo o Layout:

Um layout de uma Newsletter é basicamente dividido em três partes. São elas:
Topo: onde está localizado o nome do site ou o assunto principal da newsletter.
Corpo: onde etá localizado todo os assuntos da newsletter.
Rodapé: seria o final da newsletter,
onde se localiza, geralmente, um link para o site, etc.

Neste tutorial será mostrado como fazer um layout para uma Newsletter. Veja como será:

O primeiro passo será desenvolver o fundo para esse newsletter. Para isso, crie um retângulo do tamanho de sua preferência, no nosso caso será de 570 x 520 pixels e coloque o preenchimento Linear nas seguintes cores:

Com o fundo desenvolvido, vamos agora desenvolver o topo. Para isso, crie um retângulo no tamanho de 570 x 127 pixels com preenchimento Linear nas seguintes cores:

Para incrementar esse topo, vamos criar um retângulo do tamanho de 570 x 70 pixels na cor #0E88BD com transparência de 10% e formatá-lo com a ferramenta Pen tool (P), de modo que fique da seguinte maneira:

Esse processo pode ser repetido, de modo que um sobreponha o outro, veja:

No título que colocaremos no topo, NEWSLETTER, vamos fazer o seguinte:
Crie um campo de texto e digite newsletter, depois no preenchimento clique em Fill Options… e escolha lá a opção Linear, e coloque da seguinte maneira:

Ficará da seguinte maneira:

Para completar, crie uma linha embaixo da palavra newsletter na cor #0E88BD com a largura 4 e em Stroke category, escolha a opção Dotted com Edge: 5:

Ficará da seguinte maneira:

---

Finalizado a parte do topo, vamos trabalhar o corpo da newsletter. O corpo de nossa newsletter será dividido em duas colunas, a da esquerda será colocado as novidades do novo Studio 8 e a da direita, será colocado as colunas mais recentes do site.
Na parte da esquerda, para dar um maior destaque além de dar um efeito muito legal a nossa newsletter, vamos criar retângulos que serão utilizados para inserir o conteúdo de cada produto no novo Studio 8 (no caso do exemplo de nossa coluna).
Crie um retângulo com 294 x 65 pixels, com borda na cor #666666 e aplique a textura Line-Diag 1 nessa borda, como mostra a imagem abaixo:

No preenchimento, aplique o efeito Linear com as seguintes propriedades:

Nosso retângulo ficará da seguinte maneira:

No lado direito do corpo, vamos trabalhar somente sobre o fundo, apenas aplicando os textos.

---

Para finalizar, vamos criar o rodapé. Para isso, vamos criar um retângulo no tamanho de 570 x 13 pixels, com borda na cor #FFFFFF e preenchimento sólido na cor #F1F1F1. Sobrepondo esse retângulo, crie um outro 568 x 6 pixels, com preenchimento sólido na cor #0E88BD e com transparência de 10%. Vejá como irá ficar:

Após finalizada toda a estrutura da newsletter, vamos adicionar os texto e outros pequenos efeito, vejá como ficará:

Vale lembrar, que esse layout dessa newsletter é apenas um modelo, para mostrar como é possível contruir um bom layout usando a criatividade e as ferramentas do Fireworks. A idéia de uma layout para uma newsletter não é criar algo pesado, e sim algo que chame a atenção do usuário para visitar seu site.

---

Chegamos ao fim de mais uma coluna, espero que tenham gostado e aprendido muito com ela. Até a próxima!

Autor: Rafael Luiz E. Ferreira – Colunista e Moderador de Fireworks do MX Studio

Qualquer dúvida envie um email para
href=”mailto:neo@mxstudio.com.br”>neo@mxstudio.com.br ou acesse o nosso
href=”http://forum.mxstudio.com.br” target=forum>Fórum.