Proposta Galeria de Tutoriais - Tutoriais

Bom... vou começar!!

Para iniciarmos vou postar um layout de um blog. Para faze-lo utilizarei o Fireworks CS3 rodando no Windows 7, é um trabalho simples e bonito :)

Na criação utilizei 2 fontes:

DAX Condensed e Calibri, caso não tenha estas fontes na internet ou usar uma que você ache interessante ;)

Vamos la!!

Este layout tem 1200px x 1300px e a cor do background é #232323.

Para a criação do layout usaremos apenas 4 cores: #232323, #333333, #7CA700 e #EEEEEE; usaremos também o preto para algumas sombras.

O topo é composto por um retângulo com 1200px x 80px e posicionado em x:0 e y:0. Utilizei um preenchimento gradiente radial para criar um efeito suave de luz partindo de #86B300 para #7CA700.

Para o topo também utilizei 2 ícones, um para Twitter e outro para o RSS que você pode baixar aqui.

A coluna esquerda é composta por 2 retângulos, o primeiro com 280px x 400px com background #EEEEEE e com sombra na cor preta em 270º. O segundo retângulo tem 280px x 260px com background na cor #333333 e sombra igual ao primeiro retângulo.

Alinhamento dos textos

O título você pode alinhar como quiser. O menu é alinhado à direita e fica à 35px da borda direita na fonte Calibri. O título de boas vindas e o subtitulo estão na fonte DAX Condensed e o texto esta na fonte Calibri. Ambos estão alinhados a 35px de cada margem.

A caixa de busca é um retângulo de 202px x 30px com bordas arredondadas em 35px. O ícone pode ser baixado aqui.

Para a área de posts foi usado um retângulo de 660px x 890px com background na cor #EEEEEE.

A fonte para os títulos, datas, comentários, botões "Artigo completo" e links para "Próxima página" e "Página anterior" é a DAX Condensed e a fonte para os textos é a Calibri.

O rodapé é um retângulo de 1200px x 280px com backrground na cor #333333. A área total das colunas é de 960px de largura. Os títulos estão na fonte DAX Condensed e os links na fonte Calibri.

Cada bloco tem largura de 290px e o espaçamento entre os blocos é de 40px.

É isso ai :) neste link vocês podem baixar todos os arquivos, inclusive o layout em PNG editável :)

Boa sorte!!!