Proposta Galeria de Tutoriais - Tutoriais

[João Prado 64]

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!!!

[João Batista Neto 448]

ou utilizar outras

 

Bom, utilizei apenas uma fonte e não foi nenhuma das citadas.

 

Utilizei a Liberation, que é free e distribuída livremente pela Red Hat, possui uma variação da licença GPL.

 

Este arquivo deve ter 1200px x 1300px e a cor do background deve ser #232323.

 

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

 

Crie um retângulo com a ferramenta retângulo com 1200px x 80px e posicione em x:0 e y:0. Utilize um preenchimento gradiente radial para criar um efeito suave de luz partindo de #86B300 para #7CA700.

 

Para replicar o layout, utilizei o Inkscape, um software de desenho vetorial, free e open-source.

 

Toda a diagramação e ferramentas são bastante parecidas e o processo é basicamente o mesmo.

 

A grande diferença está no ponto de referência, o ponto 0,0 é a base no lado esquerdo e não no topo. Sendo assim, a posição 0,0 no fireworks é a 1300,0 no inkscape;

 

[camila cavalcanti 0]

Eu queria que você postasse como colocar essa caixa de pesquisa personalisada!

porque ja tentei colocar uma personalisada, mas nao consegui obter resultados com a pesquisa, apenas com a aparencia!

Estou aguardando!

beijos