Construir layout completo no fireworks.

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.



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.



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.


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.


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.


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


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

Explore posts in the same categories: Uncategorized

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: