MXStudio » Fireworks » Maratona de Layouts parte 01

Maratona de Layouts parte 01

<br /> .texto {<br /> font-family: Tahoma;<br /> font-size: 11px;<br /> color: #000000;<br /> }<br /> .titulo_colunas {<br /> font-family: Tahoma;<br /> font-size: 11px;<br /> font-weight: bold;<br /> color: #3E6185;<br /> }<br /> .texto_azul {<br /> font-family: Tahoma;<br /> font-size: 11px;<br /> color: #3E6185;<br /> }<br /> .textodiferente {<br /> font-family: Tahoma;<br /> font-size: 11px;<br /> color: #6699FF;<br /> }<br /> .numerodacoluna<br /> {<br /> font-family: Tahoma;<br /> font-size: 11px;<br /> font-weight: bold;<br /> color: #3E6185;<br /> }<br />

Salve comunidade.

È com carinho que abro mais uma Maratona. Com o sucesso da Maratona
de Topos, nossa equipe descidiu completar esse pacote fazendo a Maratona
de Layout a comunidade MX Studio.
Nós da equipe de Fireworks ficamos feliz pelos elogios da comunidade
na Maratona de Topos, esperamos que tenham ajudado muito com idéias
e estilos de trabalho.Chega de falar e vamos ao que interessa por que tem muita gente na espectativa.

Vamos aos intens que irei usar nesse Layout:
Fontes:
-
FFF Galaxy – Menu
- xscale – Titulo dos Tópicos
Imagens:
Imagem
01

Imagem 02
Imagem 03

1. Vamos começar criando um documento no tamanho
de 776 X 580 Pixels, com o fundo na cor
#FFFFFF.

2. Crie no topo do documento, um retângulo no tamanho
de 776 x 20 Pixels,
adicione um preenchimento Linear com as propriedades abaixo:

imagem
01 File > Import (Ctrl+R). Deixe igual as propriedades
abaixo:

imagem
02 File > Import (Ctrl+R). Deixe igual as propriedades
abaixo:

imagem
03 File > Import (Ctrl+R). Teremos que recortar
o fundo da imagem.
Selecione a imagem importada, depois pegue a ferramenta Magic
Wand Tool (W)
. Deixe igual as propriedades abaixo:

776 x 60
Pixels, adicione um preenchimento Linear, igual a propriedade do
segundoo passo feito lá no começo.
Deixe o retângulo na seguinte propriedade:

(Home,
Novidades, Blog)
adicione um abaixo do outro, agrupe eles Modify
> Group (ctrl+g)
. Veja como deverá ficar:

(Release, Banda) – (Fotos, Audio) – (Shows, Fórum)
- (Contato, Contratante). Veja abaixo o modelo:

10. Como os links já foram escritos e adicionados
cada um em seu ponto X e Y. Agora falta a separação entre
ele por uma linha. Pegue a ferramenta Line Tool (N) faça
uma linha de cima para baixo no tamanho de W:1
e H:57 na cor #CCCCCC
. Veja abaixo:

X:240 e Y:192
2 linha - X:336 e Y:192
3 linhaX:422 e Y:192
4 linha - X:492 e Y:192
5 linhaX:566 e Y:192
6 linhaX:684 e Y:192

Deverá estar da seguinte maneira:

Newsletter
e adicione como as propriedades seguinte:

120 x 15
Pixels com a cor #FFFFFF e a cor
da broda #C0C0C0. Na frente do retângulo
criado escreva e-mail.
E crie outro retângulo no tamanho de 26
x 18 Pixels
com a cor #FFFFFF e
a cor da broda #C0C0C0. Em cima desse
retângulo criado escreva a palavra Ok. Veja abaixo como ficou a
parte Newsletter:

776
x 04 Pixels com a cor #066490.
E ponha na seguinte propriedade:
Ficará abaixo do retângulo do menu.


200 x 35 Pixels com o preenchimento Linear igual do retângulo
do menu. Veja abaixo:

200
x 35 Pixels com o preenchimento Linear como as propriedades abaixo:

Novidades,
posicione no ponto X:28 e Y:257

16. Crie um retângulo no tamanho de 200
x 219 Pixels
na cor #EAEAEA. Posicione
ele no ponto X:0
e Y:291
. Irá ficar abaixo da imagem mostrada acima. Veja
abaixo:

512
x 110 Pixels na cor #EAEAEA.
Posicione ele no ponto X:209 e Y:257.
Já no embalo de criar retangulo, copie o retângulo cinza
e azul agrupado posicione eles na posição X:207
e Y:377
.
Crie um retângulo no tamanho de 200
x 100 Pixels
na cor #EAEAEA.
Posicione ele no ponto X:209 e Y:411.
Irá ficar abaixo da imagem mostrada acima. Veja abaixo:

Fotos
posicione no ponto X:237 e Y:378. Veja
abaixo como deverá estar:

W:200 para W:360.Veja
a propriedade abaixo da largura e dos pontos
X
e Y:

Shows 2004,
posicione no ponto X:444 e Y:378.
Veja abaixo como deverá estar:

30 x 100
Pixels na cor #EAEAEA. Posicione
ele no ponto X:413
e Y:411
. Irá ficar abaixo do retângulo criado acima.
Veja abaixo:

776 x 04 Pixels com a cor
#066490. E ponha na seguinte propriedade:

H:60
e deixa H:40. E ponha no ponto X
e Y da propriedade abaixo:

Todos os
Direitos Reservados – © Copyright 2004 – detonautasMX.com
“.
Posicione no ponto X e Y
da propriedade abaixo:


Clique Aqui


Ufa chegamos ao fim. Espero que gostem do estilo do Layout que trouxe
a vocês.
Um pouco complicado explicar esse Tema, mas espero que dê para entender
e ajuda-los.
Desejo a todos um Feliz Natal e Um prospero Ano novo. Que 2005 seja muito
bom.
Até a próxima coluna.

Autor: Marco
Antonio
– Colunista e Moderador de Fireworks
do MX Studio

Qualquer dúvida envie um email para
mantonio@mxstudio.com.br
ou acesse o nosso
fórum
.


Assine o nosso Feed
1.404 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Marcoantonio

Últimos Artigos do Autor