Criando Layout – Empresa de Tecnologia: Parte 2/2

Criando Layout para Empresa de Tecnologia: Parte 2/2

Criando Layout para Empresa de Tecnologia: Parte #2

 

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

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 wireframe criado no tutorial anterior?

Wireframe do layout da empresa de tecnologia

Fig. 01: Wireframe do layout da empresa de tecnologia

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: Wireframe do layout

Fig. 02: Wireframe do 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: Posicionamento dos blocos de conteúdo secundário no layout.

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

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 empresa de tecnologia

Fig. 04: Layout finalizado empresa de tecnologia

Download do Layout da Empresa de Teconolgia

[wpdm_file id=9 title=”true” desc=”true” ]

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

CarlosHPS Webdesigner 8)


Posts Relacionados
Comentários ( 3 )
  1. Naing
    20 de agosto de 2014 at 15:18
    Responder

    Mandei uma mensagem para você. Obrigado, Aguardo resposta.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      30 de novembro de 2014 at 13:16
      Responder

      Respondido ^^

Deixe uma resposta
Captcha Clique para atualizar o código