Apresentação

Salve-salve Fireworkseiros de plantão! 

Vamos à conclusão deste layout?!

Pré-Requisitos

• Ter concluído a 1ª parte deste tutorial. Se não, clique aqui.
• Facilidade quanto ao manuseio do Fireworks CS3/CS4.

Objetivo

Concluir um layout para uma empresa de tecnologia utilizando o Fireworks.

Conteúdo

1º Passo – Barra de Separação

Observando bem o layout final da 1ª parte deste tutorial, é percebido a necessidade de criarmos uma divisória entre o conteúdo principal e o secundário. Podemos fazer de diversas maneiras: criando caixas com cores diferenciadas, gradientes, bordas…

Mas neste caso, utilizaremos uma simples e eficiente, barra de separação.

Então, vamos criar dois retângulos com as dimensões 940 x 1 pixel cada, nas cores de preenchimento, #FFFFFF e #D3DDE4.

Fig. 01: Barras divisórias

Aí você me pergunta:

“Mas Carlos, eu poderia ter criado duas linhas ao invés de dois retângulos?”

Sim, poderia, mas, por incrível que pareça, um arquivo/imagem fica mais “leve” quando utilizamos menos linhas, bordas para as artes gráficas. Aí vai uma dica que vale ouro….hehehe 

2º Passo – Criando o Blocos de Conteúdo

Lembram do wareframe criado no tutorial anterior?

Fig. 02: Wareframe do layout

Pois bem, existem 3 blocos de conteúdo. Então vamos lá!

Criemos 2 retângulos com as dimensões 240 x 143 px nos dois das extremidades, 1 retângulo de 245 x 143 px, no bloco do centro e os coloquemos de acordo com a imagem:

Fig. 02: Posicionamento dos blocos de conteúdo secundário no layout.

Observemos que o alinhamento através das linhas-guia são fundamentais para organizarmos e harmonizarmos os elementos e conteúdos do layout.

Sabendo destes posicionamentos, agora é só inserir o devido conteúdo:

Fig.03: Conteúdo dos blocos secundários

3º Passo – Rodapé

E para finalizarmos, basta inserirmos o copyright (direitos autorais) e, com a autorização prévia do cliente, nosso logotipo ou dizeres “desenvolvido por”. E eis o resultado final:

Fig. 04: Layout finalizado

CADASTRE-SE no blog e faça o download do arquivo final em PNG:

Download do Layout Final (formato PNG)

Um grande abraço e até a próxima.

CarlosHPS Webdesigner

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

Não deixem de me fazer uma visita:

• BLOG: www.carloshps.com.br/blog
• CURSOS ONLINE: www.carloshps.com.br/cursos
• PORTFÓLIO: www.carloshps.com.br/