Gostaria de dedicar esta postagem a nobreza do início da internet,quando tudo era gratuito e a troca de informações era priorizada.Gostaria também de fazer uma homenagem ao Fireworks que encontra-se na sua última edição. Que pena!
Obrigada pessoal da MX STUDIO.
e segue o link de vcs em todos os tópicos.
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.
Nenhum comentário:
Postar um comentário