Tutorial Construir 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. 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:

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:

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:

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.

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:

Veja como ficou:

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:

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é.

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.

2 comentários a "Tutorial Construir layout completo no fireworks"

  1. Natalia | às | Responder

    Pode salva o layout quando estiver terminado ?

  2. Gostei, funcionou super bem…

Comentar

O seu endereço de email não será publicado.


*


 

Tutorial Construir layout completo no fireworks - TutorZone