Criando Layout – Empresa de Tecnologia: Parte 2

Publicado por CarlosHPS Webdesigner em 23/07/2009

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

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

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:

Download do Layout Final (formato PNG)

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

CarlosHPS Webdesigner 8)

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

Não deixem de me fazer uma visita:


Assine o nosso Feed
1.326 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

CarlosHPS Webdesigner

Atualmente é graduando do curso Sistemas para Internet pelo Instituto Federal de Educação Tecnológica - IF Goiano - Campus Morrinhos. Atua em projetos web desde 1999; ministrou diversos treinamentos e palestras pela Microlins, Sebrae e Senac; Cursou Engª Civil pela Universidade Federal do Ceará e Administração pela Universidade Estadual de Goiás, mas sua paixão sempre foi design para web. Atualmente é acadêmico do curso Sistemas para Internet no Instituto Federal Tecnológico de Goiás, na cidade de Morrinhos.Atuou como coordenador de cursos profissionalizantes pela Microlins, inclusive em Webdesign; atualmente trabalha como freelancer e possui cursos on-line na área de Webdesign, Criação Gráfica e Mercado de Trabalho pelo site www.carloshps.com.br

4 usuário comentou em " Criando Layout – Empresa de Tecnologia: Parte 2 "

Assine o Feed de Comtentários ou URL de Trackback

mario valle disse,
Enviado em 24-07-2009 às 8:41 pm

muito bom o tuto, mas o link para download está quebrado!!!

CarlosHPS Webdesigner disse,
Enviado em 31-07-2009 às 9:15 am

Olá, Mario
O link não está quebrado.
Acesse: http://www.carloshps.com.br/blog/criando-layout-empresa-de-tecnologia-parte-2/
E cadastre-se para fazer o download.
Abraços.

CarlosHPS Webdesigner 8)

Karin disse,
Enviado em 17-12-2009 às 9:44 am

Uma perguntinha..
Entendi o que vc fez nesse tuto..
Mas como faco pra colocar no dreanweaver?
minha maior duvida esta ai?
desculpe o transtorno
obrigada
Karin

elton disse,
Enviado em 07-01-2010 às 4:21 pm

Muito bom seus trabalhos!!
Ficaria mais legal se tivese uma versão para impressão do tutorial.

Deixe o seu comentário abaixo...

 Username (*required)

 Email Address (*private)

 Website (*optional)

 

MXStudio © 2003-2010. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.