Tutorial Fireworks : Criando layout - empresa de tecnologia: parte 1
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:
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:
3º Passo – Criação do Topo – Tarja
Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”:
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:
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, 255 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, 403 downloads)
(desenvolvedor, o Dry Icons)
Vejamos o 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:
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:
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, 306 downloads)
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:
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.
11º Passo – Lista de Serviços – Botões
E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”
O mesmo processo deverá ser aplicada para a criação do outro botão.
Vejamos o resultado até aqui:
Bom, pessoal
No próximo tutorial, concluiremos o layout.
Até lá.
0 comentários:
Postar um comentário