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