Criando Layout – Empresa de Tecnologia: Parte 1

CarlosHPS

Apresentação

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:

Download do Logotipo do Layout
(40,9 KiB, 311 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

Download dos ícones: Feed e Twiter
(20,2 KiB, 608 downloads)

(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”

Download da Imagem dos Computadores
(27,9 KiB, 421 downloads)

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.