Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.
Facilidade quanto ao manuseio do Fireworks CS3/CS4
Criar um layout para uma empresa de tecnologia utilizando o Fireworks
Como mencionei no tutorial Criando um Site Passo-a-Passo: Parte 5, a utlização de um Wireframe, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:
Fig. 01 - Wareframe - Estrutura do website
Grande parte dos layouts desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 Grid. Portanto, façamos o download no site oficial – 960.gs e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).
E qual deles usar?
Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01″), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um layout com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.
Então, ao abrirmos o arquivo 960_grid_12_col.png, teremos:
Fig. 02: 960 Grid System - 12 Colunas
Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”
:
Fig. 03 - Criação da tarja do topo
Criemos outro retângulo de dimensões 940 x 30 pixel, com a mesma cor da tarja e posicionamento X: 40 e Y: 70:
Fig. 04: Barra de menu
Realizando os downloads do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:
LOGOTIPO | ÍCONES
(desenvolvedor, o Dry Icons)
Fig. 05: Posicionamento do logotipo
Fig. 06: Ícones, Feed, Twiter e links do topo
Vejamos o resultado até aqui:
Fig. 07: Resultado até aqui
E concluindo o topo, utilizando a fonte Arial Narrow, tamanho 13 e cor #D7E1E8, posicionemos os itens como na imagem a seguir:
Fig. 08: Barra de menu - links
Passemos agora para a criação do background do site. Façamos um retângulo com as dimensões 940 x 350 pixel. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:
Fig. 09: Criação do background
De acordo com a imagem abaixo, após realizarmos o download dos computadores, posicionemos nas coordenadas – X: 379 | Y: 71. E Complementemos com o slogan da empresa: “Empresa Especializada em Tecnologia WEB”
Fig. 10: Inserção do slogan da empresa e imagem ilustrativa
Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.
Posicionemos os textos conforme a imagem abaixo:
Fig. 11: Lista de serviços da empresa
Agora, criaremos os ícones para cada item da lista.
Primeiramente, façamos um círculo na cor branca e com as dimensões 14 x 14 px. Depois uma estrela que se transformará num triângulo de 7 x 6 px.
Fig. 12: Criação do ícone
E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”
Fig. 13: Criação do botão
O mesmo processo deverá ser aplicada para a criação do outro botão.
Vejamos o resultado até aqui:
Fig. 14: Resultado parcial da primeira parte do tutorial
Bom, pessoal
No próximo tutorial, concluiremos o layout.
Até lá.
CarlosHPS Webdesigner 
Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO
Não deixem de me fazer uma visita:
Assine o Feed de Comtentários ou URL de Trackback
