Tutorial Criando um Layout Completo com Fireworks

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:


1ª Parte - Criação do Topo
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:
https://2img.net/r/ihimizer/img32/5229/imagem1ux.png

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.

2ª Parte - Criação do Menu
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.

3ª Parte - Criação do Logo
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:

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:

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.


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


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


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:


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


4ª Parte - Criação dos Boxes Títulos

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

Vamos lá!

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


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


Sua imagem deve estar assim:


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:


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:


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:

Nosso box esta finalizado, agora quando formos usar em outra posição não precisamos criar um novo, é só copiar e colar

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.


5ª Parte - Criação do Box Últimos trabalhos

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:


Sua imagem deve estar assim:

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.


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


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:

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:

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.


6ª Parte - Criação dos Boxes Centrais
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:

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.

7ª Parte - Criação do Box Parceiros
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.
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:

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.

8ª Parte - Criação do Rodapé
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:

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.
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.
Nosso rodapé está finalizado.

Considerações Finais

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.