[Tutorial] Criando um layout completo com Fireworks

[João Prado 64]

[table=Apresentação][/table]

Ola, hoje estarei dando inicio a uma série de tutoriais onde irei ensina-los a criar um layout completo utilizando o Fireworks CS3.

Você pode utilizar outra versão do fireworks, no caso de uma versão anterior pode ser que algumas ferramentas que utilizarei não estejam disponíveis, neste caso você precisará achar outra forma de criar a imagem ou efeito.

 

Pela extensão do tutorial estarei dividindo o mesmo em 3 estágios, apresentação, desenvolvimento e finalização. Cada estágio será divido em partes para que haja um melhor entendimento do tutorial.

Abaixo a disposição dos estágios e suas partes e uma breve explicação sobre cada um:

 

Apresentação:

- Apresentação da série e amostra do resultado final;

 

Desenvolvimento:

- Topo: criação do topo do site juntamente com a barra de pesquisa;

- Menu: criação do menu do site;

- Logo: criação do logotipo;

- Títulos: criação dos boxes de títulos;

- Quadro Últimos trabalhos: Criação do quadro últimos trabalhos;

- Quadros centrais: criação dos quadros centrais (web, multimídia e impressos);

- Box Parceiros: criação do box parceiros;

- Rodapé: criação do rodapé;

 

Finalização:

- Apresentação do projeto final e considerações finais;

 

Estas serão as partes do tutorial. Gostaria de ressaltar que não vou postar tudo de uma vez, vou postar uma parte e aguardarei comentários e dúvidas do pessoal, depois postarei a segunda parte, e assim por diante.

Abaixo um preview do resultado final:

 

 

[table=1ª Parte - Criação do Topo][/table]

 

Vamos começar!

 

Primeiramente crie um novo documento com 900px de largura por 1000px de altura com fundo branco (#FFFFFF).

 

Com a ferramenta Rectangle tool (U) crie um retângulo com 880px de largura, 100px de altura e rectangle roundness: 20. Posicione-o com 10px de distância do topo e da margem esquerda.

Em cor, selecione Gradient > Linear e coloque as cores #FFFFFF e #C8C8C8 de cima pra baixo e borda 1px na cor #CCCCCC.

Coloque também uma sombra. Para isso vá em Filters > Shadow and Glow > Drop Shadow com cor #333333 e com as seguintes configurações:

 

Sua imagem deve estar assim:

 

Feito isso vamos finalizar nosso topo fazendo uma barra de pesquisa.

Crie um retângulo com 330px de largura e 40px de altura e com os cantos inferiores arredondados em 5px com borda de 1px na cor #CCCCCC e cor Gradient > Linear #FFFFFF e #EBEBEB de cima pra baixo.

Sua imagem deve estar assim:

 

Feito o fundo da barra de pesquisa vamos criar a caixa de texto. Para isso, com a ferramenta Rectangle tool (U) crie um retângulo com 250px de largura e 25px de altura e defina a propriedade Rectangle Roundness com valor 30 com fundo branco e bordas na cor #CCCCCC.

Sua imagem deve estar assim:

 

Agora vamos fazer o botão onde o usuário ira clicar para fazer a busca. Faça um retângulo com 50px de largura e 25px de altura e defina a propriedade Rectangle Roundness com valor 30 com fundo branco e bordas na cor #CCCCCC.

Com a ferramenta Text tool (T) digite Busca com letra Arial tamanho 15 e na cor #666666.

Sua imagem deve estar assim:

 

Finalizamos nosso topo. Você pode trabalhar melhor com cores e formas e deixar o topo cada vez melhor, ai vai da criatividade de cada um.

 

 

[table=2ª Parte - Criação do Menu][/table]

 

Finalizado nosso topo vamos criar o menu.

 

Crie um retângulo, com 110px de largura por 35px de altura, com as bordas inferiores arredondadas. Utilize preenchimento Gradient > Linear nas cores #D1D1D1 e #FFFFFF e bordas na cor #CCCCCC.

Aplique uma sombra indo em Filters > Shadow and Glow > Drop Shadow na cor #333333 com as seguintes propriedades:

 

Seu botão deve estar assim:

 

Agora duplique seu botão 4 vezes criando 4 novos botões. Posicione-os ao lado do primeiro formando nosso menu:

 

Insira os textos respectivos de cada botão:

 

 

Nosso menu esta finalizado.

 

[table=3ª Parte - Criação do Logo][/table]

Dando continuidade ao nosso tutorial, hoje vamos aprender a criar o logo. Para isso você precisará ter a fonte KZ GRAVItY instalada em seu computador.

 

Download

 

 

Após instalar a fonte vamos começar a produção do logo. Caso tenha instalado a fonte com o Fireworks aberto feche-o e abra-o novamente para que ele reconheça a nova fonte.

 

Abra o arquivo que você já tem salvo onde tem o topo e o menu. Com a ferramenta text-tool (t) e digite seu nome ou o nome de seu site, no meu caso digitei PrAdO WeB com letra tamanho 80.

Sua imagem deve estar parecida com esta:

http://img199.imageshack.us/img199/2817/imagem1rl.png

 

Agora vamos transformar o nome no logo colocando efeitos nele. Primeiramente transforme o nome em curvas, para isso, selecione-o e vá em Text > Convert to paths ou utilize os atalhos do teclado Ctrl+Shift+P. Feito isso agrupe todas as letras em um único Path selecionando todas as letras e indo em Modify > Combine Paths > Union, ou apenas utilizando o atalho do teclado Ctrl+Alt+U.

Nosso logo está pronto para ser estilizado e vamos começar mudando o preenchimento. Aplique um preenchimento gradiente linear nas cores #FFFFFF para #999999 de cima para baixo e bordas de 1px na cor #666666.

Sua imagem deve estar assim:

http://img441.imageshack.us/img441/9757/imagem2.png

 

Seguindo nosso tutorial vamos duplicar o logo e posiciona-lo em um outro lugar qualquer. Para isso selecione-o e clique com o botão direito, vá em Edit > Duplicate ou utilize as teclas de atalho Ctrl+Shift+D.

http://img20.imageshack.us/img20/2512/imagem3kt.png

 

Agora utilizando a ferramenta Pen Tool(p) crie uma imagem em cima do 2º logo cobrindo uma parte do mesmo:

http://img9.imageshack.us/img9/8424/imagem4rw.png

 

Selecione a imagem criada e o 2º logo e vá em Modify > Combine Paths > Punch. Sua imagem deve estar assim:

http://img130.imageshack.us/img130/9093/imagem5gn.png

 

Agora posicione a imagem criada exatamente em cima do logo e altere seu preenchimento para gradiente linear nas cores #FFFFFF para #666666 de baixo para cima sem borda.

 

Nosso logo esta pronto, se quiser pode alterar as cores ou o tipo de preenchimento para chegar a outro efeito, tudo dependerá de sua criatividade.

 

Logo final:

http://img253.imageshack.us/img253/6082/imagem6h.png

 

Finalizamos toda a parte do topo, agora ensinarei a criar os boxes de títulos.

 

[table=4ª Parte - Criação dos Boxes Títulos][/table]

 

Agora irei ensinar a fazer os Boxes de títulos (imagem abaixo).

http://img294.imageshack.us/img294/984/imagem1qr.png

 

Vamos lá!

 

Primeiramente crie um retângulo no tamanho de 214x20px e defina a propriedade Rectangle Roundness (imagem abaixo) em 70.

http://img707.imageshack.us/img707/6439/imagem2g.png

 

Altere o preenchimento para gradiente linear nas cores #CCCCCC para #FFFFFF de cima para baixo e posicione as paletas conforme a imagem abaixo:

http://img253.imageshack.us/img253/6461/imagem3u.png

 

Sua imagem deve estar assim:

http://img707.imageshack.us/img707/9268/imagem4g.png

 

Agora vamos cria as bolas verdes. Usando a ferramenta Ellipse Tool (U) crie um circulo com as dimensões de 5x5px com preenchimento gradiente radial nas cores #00FF00 para #006600 de dentro pra fora:

http://img255.imageshack.us/img255/406/imagem5q.png

 

Agora duplique este circulo e aumente o tamanho do novo em 2px de altura e largura ficando com um tamanho de 7x7px. Posicione-o exatamente ao lado do primeiro:

http://img255.imageshack.us/img255/7641/imagem6z.png

 

Agora duplique este segundo circulo e novamente aumente seu tamanho em 2px deixando-o com as dimensões de 9x9px e novamente posicione-o exatamente ao lado do anterior:

http://img80.imageshack.us/img80/3964/imagem7m.png

 

Nosso box esta finalizado, agora quando formos usar em outra posição não precisamos criar um novo, é só copiar e colar http://forum.imasters.com.br/public/style_emoticons/default/smile.gif

 

Lembrando que o texto digitado, para ficar de acordo com o tema proposto por mim, tem que ser em letra Tahoma, tamanho 12 e na cor #666666.

 

Agora ensinarei a fazer o Box Últimos trabalhos.

 

[table=5ª Parte - Criação do Box Últimos trabalhos][/table]

Dando continuidade agora vamos criar o Box Últimos Trabalhos.

 

Primeiramente crie, com a ferramenta Rectangle Tool (U) um retângulo nas dimensões 880x235px com preenchimento gradiente linear nas cores #CCCCCC e #FFFFFF de cima para baixo. Defina a propriedade Rectangle Roundness em 8. Defina também uma sombra para o quadro seguindo as seguintes propriedades:

http://img690.imageshack.us/img690/2664/imagem2c.png

 

Sua imagem deve estar assim:

http://img189.imageshack.us/img189/6606/imagem1md.png

 

O Box em si está criado, agora precisamos criar a barra de rolagem.

Novamente com a ferramenta Rectangle Tool (U) crie um retângulo agora com dimensões de 16x187px e preenchimento gradiente linear nas cores #CCCCCC e #FFFFFF da esquerda para a direita. Defina bordas de 1px na cor #666666 e defina também a propriedade Rectangle Roundness para 30.

http://img51.imageshack.us/img51/4122/imagem3x.png

 

Agora trace duas linhas da esquerda para a direita utilizando a ferramenta Line Tool (N) e posicione-as da seguinte forma:

http://img12.imageshack.us/img12/2517/imagem4pc.png

 

Utilizando a ferramenta Rectangle Tool (U), crie dois quadrados (utilize shift para criar um quadrado perfeito) com preenchimento gradiente radial nas cores #333333 e #666666 de dentro para fora, selecione uma das pontas com a ferramenta Subselection Tool (A,1) e delete-as tornando a forma de um triângulo. Posicione-os da seguinte maneira:

http://img189.imageshack.us/img189/9449/imagem5p.png

 

Agora para finalizar nossa barra de rolagem, novamente utilizando a ferramenta Rectangle Tool (U) crie um retângulo de 14x42px com preenchimento gradiente linear nas cores #666666, #999999 e #999999 posicionando-as respectivamente na esquerda, centro e direita. Defina a propriedade Rectangle Roundness para 50. Nossa barra de rolagem esta pronta:

http://img189.imageshack.us/img189/7641/imagem6z.png

 

Agora basta apenas você pegar imagens de seus trabalhos e inserir no box. No caso do tutorial eu utilizei a parte superior do site iMasters mas você pode fazer do jeito que quiser e achar melhor.

 

 

Imagem Final:

http://img12.imageshack.us/img12/9012/imagem7u.png

 

[table=6ª Parte - Criação dos Boxes Centrais][/table]

 

A criação dos quadros centrais será mais fácil, pois os passos são basicamente os mesmos do quadro últimos trabalhos então não terá dificuldade.

 

Vamos lá!

 

 

Primeiramente, crie um quadro nas dimensões de 280x251px utilizando a ferramenta Rectangle Tool (U) e defina seu preenchimento para gradiente liner nas cores #E1E1E1 e #FFFFFF de cima para baixo. Defina a propriedade Rectangle Roundness em 5. Defina bordas de 1px na cor #999999 e defina uma sombra com as seguintes propriedades:

http://img686.imageshack.us/img686/1504/imagem1cn.png

 

Sua imagem deve estar assim:

http://img6.imageshack.us/img6/8739/imagem2nq.png

 

Nosso quadro esta pronto, agora você só precisa duplica-lo e posiciona-lo de forma simétrica ao lado do primeiro. Duplique também a barra de títulos do quadro últimos trabalhos e posicione no topo dos novos quadros. Agora é só inserir os títulos nos padrões explicados anteriormente. Insira também o conteúdo de forma a fica bem objetivo e que convide o visitante a querer ver mais.

 

Sua imagem final deve ficar parecida com esta:

http://img686.imageshack.us/img686/8871/imagem3v.png

 

[table=7ª Parte - Criação do Box Parceiros][/table]

 

Agora vamos criar o quadro de parceiros. Esta será uma parte consideravelmente simples pois boa parte do quadro será copiado dos anteriores.

 

Selecione o Box últimos trabalhos e seu quadro de titulo e duplique-o utilizando as teclas de atalho Ctrl+Alt+D. Feito isso posicione-o abaixo dos quadros centrais e troque o título para Parceiros como mostra a imagem abaixo:

http://img101.imageshack.us/img101/4691/imagem1in.png

 

Agora vamos criar o quadro que ficará como fundo dos banners dos parceiros.

Utilizando a ferramenta Rectangle Tool (U) crie um quadrado com as dimensões de 180x180px e defina seu preenchimento para gradiente radial nas cores #CCCCCC e #999999 do canto inferior esquerdo para o canto superior direito. Defina bordas de 1px na cor #CCCCCC e defina a propriedade Rectangle Roundness para 15. No menu Filters > Shadow and Glow clique na propriedade Drop Shadow, para inserir uma sombra no quadro. Siga as imagem abaixo para configurar o efeito:

http://img101.imageshack.us/img101/7674/imagem2p.png

 

Sua imagem deve estar assim:

http://img14.imageshack.us/img14/9371/imagem3onw.png

 

Agora basta duplicar o quadro 3 vezes e posicionar os novos simetricamente ao lado, depois é só inserir os banners e logotipos de seus parceiros.

 

Dica: Utilizando uma linguagem Server-side como PHP ou ASP você pode fazer o gerenciamento destes quadros, inserindo assim quantos quiser mas aparecendo só 4 por vez para uma melhor aparência do site.

 

Sua imagem final deve ficar parecida com esta:

http://img682.imageshack.us/img682/2721/imagem4n.png

 

[table=8ª Parte - Criação do Rodapé][/table]

 

O rodapé é um tanto quanto simples de se fazer, tudo será baseado em linha.

 

Primeiramente copie somente o quadro Parceiros (não utilizaremos o titulo nesta parte) e cole logo abaixo. Utilizando a ferramenta Rectangle Tool (U) crie um retângulo de 1px de largura por 151px de altura e defina se preenchimento para gradiente radial e insira as cores conforme mostrado abaixo:

http://img121.imageshack.us/img121/5835/imagem1bv.png

Na imagem o número 1 representa a cor #FFFFFF enquanto o número 2 representa a cor #999999

 

Duplique-o mais duas vezes e posicione cada um dentro do quadro de forma a separá-lo em 4 partes como mostra a imagem abaixo:

http://img691.imageshack.us/img691/3103/imagem2yq.png

 

Utilizando a mesma técnica crie um quadrado agora na horizontal de 700x1px e posicione-o exatamente ao centro do rodapé logo abaixo das linhas separadoras. Utilizando a ferramenta Text Tool (T) digite em cada parte separada um título de sua preferência, no meu caso coloquei respectivamente: Contrate nossos serviços, Parceiros, Trabalhos realizados e Políticas de empresa. Defina a cor do texto para #666666 e coloque-o sublinhado. Novamente com a ferramenta Text Tool (T) digite: Copyright©2009 Seu Site. Todos os direitos reservados e posicione abaixo da linha horizontal.

Sua imagem deve estar assim:

http://img696.imageshack.us/img696/7641/imagem3h.png

 

Nosso rodapé está finalizado.

 

[table=Considerações Finais][/table]

 

Assim finalizamos nosso layout. Este tutorial chegou ao fim e aqui vou deixar minhas considerações finais.

Primeiramente, tudo é questão de criatividade. Tendo criatividade você pode fazer de tudo. A questão da técnica vem logo depois, mas com o tempo todos conseguem aprender.

Este layout foi criado apenas com o intuito de ensinar, se fosse o caso de um layout comercial acredito que a inserção de mais uma cor seria interessante para não ficar naquele marasmo de prata.

 

O logo também não precisa ser feito desta maneira, esta foi apenas uma solução simples que achei mas você pode desenvolver de inúmeras outras formas conforme sua criatividade mandar.

 

No mais é isso. Aguardo comentários do pessoal e caso tenham dúvidas postem também, irei adorar responde-los http://forum.imasters.com.br/public/style_emoticons/default/smile.gif

 

 

Abraços e fiquem com Deus

 

[table=Layout Final][/table]

http://img163.imageshack.us/img163/8696/layoutpf.jpg

[Jackson Dias 68]

Ficarei no aguardo do inicio da prática.

[João Prado 64]

logo postarei

[Jackson Dias 68]

Estou gostando...

Fico no aguardo de novas postagens.

[leomarriel 7]

muito bom, aqui encontramos agora variedades de resoluções, eu costumo mais desenvolver em 775, ou 779 na horizontal. para se adaptar facilmente a qualquer resolução.. mais cada trampo tem seu propósito!..

Grande abraço, continue postando!

[João Prado 64]

sim com certeza, este é mais para aprendizado e acredito que neste tamanho fique melhor.

 

Se o cara quiser pode fazer de outros tamanhos, nao precisar seguir o tuto a risca

é apenas uma base

[leomarriel 7]

esta ficando muito bom, no final de tudo, para facilitar para os usuarios, eu irei mesclar os posts.

 

Grande abraço!

[João Prado 64]

beleza, eu ia pedir isso mesmo hehehe

[Jackson Dias 68]

Está ficando muito bom mesmo.

Sem dúvidas estará ajudando muita gente que deseja fazer um layout bonito usando o fireworks.

[João Prado 64]

essa semana posto mais uma para dar continuidade

[Jackson Dias 68]

Estou gostando eim...

Muito bom esse topo.

[leomarriel 7]

Muito baum!!! estou acompanhando de perto este processo! muito bem explicado!

 

vai ajudar muita gente!!!!!

[João Prado 64]

vlw leozin em breve posto mais

[Jackson Dias 68]

é isso ai garoto.

está uma maravilha.

 

off: quando terminar tudo vou fazer um layout com base no seu tutorial!

 

muito bom!

[João Prado 64]

vlw lung

 

off: quando terminar tudo vou fazer um layout com base no seu tutorial!

legal, quero só ver heim kkk

[leomarriel 7]

ta quase finalizando neh!!!

 

muito bom.. grande abraço.

[João Prado 64]

sim falta pouco

 

em breve estará completo

 

vlw leo

[leomarriel 7]

Boa. Pedro, uma questão é explicar pra galera o lançe de sobrepor objetos acima do outro através do quadro camadas, pois algum iniciante poderá ter dificuldades em colocar os titulos sobre os quadros, se tratando de criar o quadro após o titulo, sua camada estará por cima.

 

Off: Para aqueles que encontrarem esse problema segue a solução: Selecione o objeto que queira colocar acima do outro, pressione(e permanece pressionado) a telca "Ctrl" e com as teclas de direção (com as setinhas) você move-a para cima e para baixo, colocando-a sobre outros objetos.

 

Sem mais, está ficando muito bom.!

 

Grande abraço, fique com Deus.

[João Prado 64]

opa vlw a dica leo

 

só complementando se quiser que fica sobreposta a tudo só usar as teclas de atalho ctrl+shift+ com as setinhas indicar se quer sobreposta a tudo ou em baixo de tudo

 

 

quase acabando o tuto

vo ve se acelero aqui pra acabar antes do natal

faltam só 3 partes

[Jackson Dias 68]

Detonando Jaum!

Ótimo!