Construindo um Layout completo no fireworks.

Tutorial: Layout completo no fireworks.
Nível: Médio.
Ao som de: The Killers - Somebody Told Me
Comentário: Bem pessoal, o tutorial continua o mesmo, o que mudou foi só a organização. Ele estava meio bagunçado. Decidi então reorganizá-lo. Espero que tenham gostado.
Obs: Toda e qualquer divulgação sobre devidos show e lançamentos de cd é fictícia.. ambas foram inventadas só para exemplos na confecçao do layoult

1° passo

1. Então chega de blá blá blá e vamos ao trabalho! Inicie um novo documento com tamanho de 780 x 600 pixels e fundo branco.
2. Faça um retângulo de 780 de largura por 25 de altura, escolha um gradiente “linear” nas cores: da direita “FF0000″ e a da esquerda “550000″, ponha o traçado do gradiente como mostra a figura abaixo e pelo painel alinha ponha esse retangulo centralizado no topo do layoult. Veja abaixo:

Imagem

2° passo

Agora, clique nesse retangulo já posicionado no topo e dê um control + c para copiar e em seguida dê um control + v para colar. Pronto você acabou de fazer uma cópia.. em seguida araste essa cópia para a posição: X: 0 e Y: 157. Veja abaixo:

Imagem

3° passo

agora, crie um retângulo na cor 000000 (preto) com o tamanho de 780 de comprimento e 134 de altura e alinhe com essa posição: X: 0 e Y: 24. Em seguida, duplique outra vez o primeiro retângulo que nós fizemos e diminua sua altura para 20 e pelo painel align o alinhe no pé da página (abaixo), para servir de rodapé do layoult. Veja abaixo:

Imagem

4° passo

Bem galera, até agora foi passo a passo na montagem.. mas esse passo 5 é mais pra cada um usar o designer que agradar.. então não preciso ficar passo a passo. Vou numerar na imagem e vocês vêem o que eu fiz okz?
1. coloquei um campo de newsletter.
2. coloquei o nome do site (no caso “Fã clube do red hot..”) junto com um logo que vetorizei.(akele logo vermelho)
3. Recortei uma imagem deles pelo photoshop (não tá dos melhores recortes mais fiz na pressa pra fazer o tuto) importei pro fire e useu o efeito: Commands / creative / fade image e usei o assombreamento central pra imagem ir sumindo nas pontas.

Imagem

5° passo

Vamos agora aos botões! Faça seus botões assim como na figura abaixo e faça um traço com a ferramenta line toll (N) para serapar cada botão. ai vcs dizem pô helder os traços não ficaram que nem o seu tipo afundado no retângulo.. ai que está.. o macete é simples, depois que você fizer o traço clique nele e dê um efeito do tipo: vá em filters / bevel and emboss / insert emboss e configure como mostra abaixo:

Imagem

Veja como ficou:

Imagem

6° passo

Bem galera, estamos quase no fim. Vamos agora por as caixas onde ficarão os textos e as imagens amais do layoult. Mais uma vez duplique o primeiro retângulo para usarmos com a caixa de testo e diminua o tamanho que lhe interessar montar seu layoult. Depois de duplicado, crie um outro retângulo com quase o mesmo comprimento só apenas aumentado uns 3 pixels para ficar como uma margem e largura a que vc preferiri para montagem de seu layoutl. agora ponha o retangulo vermelhor que duplicamos no topo desse retangulo preto deixando umas diferença de 1 pixels como disse para parecer uma margem. Tenta deixar algo parecido com a imagem abaixo:

Imagem

7° passo

Bom, agora vocês já sabem como fazer o resto das caixas de texto. Dê a cada uma delas seus títulos. Agora, usem suas criatividades e modifiquem a seus gostos. vejam como fiz esse:

Obs: Deixem mais ou menos 1 ou 2 pixels de espaço entre as caixas, o menu e o rodapé.

Imagem

FIM

Bem galera, enfim acabou! agora só falta por as imagens, os textos e pronto. lembre-se, usem a criatividade de vocês. Veja como o meu layoult ficou agora pronto.

Imagem