Apresentação

Criando Layout – Empresa de Tecnologia: Parte 2Salve-salve Fireworkseiros de plantão!   Big Grin

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

Fig. 01: Barras divisórias

Aí você me pergunta:

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

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 Wink

2º Passo – Criando o Blocos de Conteúdo

Lembram do wareframe criado no tutorial anterior?

Fig. 02: Wareframe do layout

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.

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

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

Fig. 04: Layout finalizado

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

  Layout Final (formato PNG)
(368,6 KiB, 849 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

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

CarlosHPS Webdesigner 8)

Blog Widget by LinkWithin