Criando Layout – Empresa de Tecnologia: Parte 1
Salve-salve Fireworkseiros de plantão! 
Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.
Pré-Requisitos
Facilidade quanto ao manuseio do Fireworks CS3/CS4
Objetivo
Criar um layout para uma empresa de tecnologia utilizando o Fireworks
Conteúdo
1º Passo – Definindo a Estrutura do Site
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
2º Passo – Utilizando Modelo do 960 Grid System
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
3º Passo – Criação do Topo – Tarja
Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”
:
-
Fig. 03 - Criação da tarja do topo
4º Passo – Criação do Topo – Barra de Menu
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
5º Passo – Criação do Topo – Logotipo, Feed e Twiter
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
6º Passo – Criação do Topo – Barra de Menu
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
7º Passo – Criação do Background
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
8º Passo – Inserindo Imagem dos Computadores
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
9º Passo – Lista de Serviços – Textos
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
10º Passo – Lista de Serviços – Ícone
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
11º Passo – Lista de Serviços – Botões
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:
- BLOG: www.carloshps.com.br/blog
- CURSOS ONLINE: www.carloshps.com.br/cursos
- PORTFÓLIO: www.carloshps.com.br/
Escrito por CarlosHPS Webdesigner
on julho 5, 2009. Arquivado em Fireworks.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Parabéns pelo tutorial, mesmo sem saber quase nada de fireworks, consegui desenrolar.
Muito vou esperar as proximas partes x)
Muitobom vou esperar as proximas partes x)
Gente, parabéns!
Muito bom o tutorial. Fácil e objetivo.