Template 1 sidebar

Olá pinguins, Luksthere aqui, com mais um tutorial para vocês, hoje, venho trazendo um tutorial de como fazer um layout com 1 sidebar. Muitos queriam o HTML para um lay assim, mas como não havia sido postado no blog ainda, resolvi posta-lo agora. Primeiramente vamos dividir em 3 etapas.

• Criar as imagens.
• Hospedar as imagens.
• Montar elas no HTML.

1ª Etapa.

1-Cabeçalho: Vamos começar criando as imagens, abra seu Fireworks ou seu Photoshop e crie um arquivo de 982px e a altura fica a gosto de vocês. Usem sua criatividade para fazer o cabeçalho, adicione efeitos, pinguins e o que mais desejar.

Exemplo:

(Imagem reduzida)

2- Sidebar: A sidebar é a barra lateral do blog, como esse lay só tem 1 sidebar, você pode escolher o lado que quer a sidebar, com tanto que encaixe com o cabeçalho. O tamanho do arquivo é 982 px de largura e 200px de altura, já o tamanho da sidebar fica a gosto do designer.

Exemplo:

(Imagem reduzida)
Nessa imagem a sidebar tem 275px de largura.

3- Rodapé: Para criar o rodapé, crie um arquivo de 982px de largura e a altura novamente fica a gosto do designer. Em alguns casos, o xat fica dentro do rodapé, para isso precisamos de um rodapé maior e com as regras de xat. Use bastante efeitos e sua criatividade. Ele também deve encaixar com a sidebar.

Exemplo:

(Imagem reduzida)
Nesse exemplo, o xat fica dentro do rodapé, como podem ver, há um espaço para o xat e as regras de xat.

4- Title gadget: O Title gadget é o fundo do titulo das gadgets. Primeiramente crie um arquivo da largura de sua sidebar e da altura que desejar. Use efeitos e se quiser, recomendo do máximo 1 pinguim ou outro objeto.

Exemplo:

 

(Imagem em tamanho real)
Nesse exemplo usei somente 1 pinguim (recomendado)

5- Fundo: O fundo do blog é o mais simples, você apenas deve procurar uma imagem grande de uma paisagem.

Exemplo:

(Imagem muito reduzida)
Fundo simples, bastante usado.

2ª Etapa:

Para hospedar as imagens, você deve entrar em tinypic.com ou em imgur.com, esses 2 sites são usados para hospedar imagens. Basta escolher o arquivo e clicar em upload, o link que você deve usar é o direct link.

3ª Etapa:

Segue abaixo o link do html que vocês devem usar:

http://pastebin.com/XGdHLNTE

Legenda:

• Link do fundo do blog.
• Altura do cabeçalho.
• Link do cabeçalho.
• Link da sidebar.
• Largura da sidebar.
• Lado da sidebar (right ou left).
• Margem direita da sidebar.
• Margem esquerda da sidebar.
• Largura da area de postagem.
• Lado da area de postagem (oposto ao lado da sidebar).
• Cor de contorno do template.
• Cor clara do template (para fundos).
• Link do title gadget.
• Link do rodapé.
• Altura do rodapé.

Bom, é isso pessoal, espero que tenham gostado e que os ajudem em seus layouts.

Vou ficando por aqui... Até a próxima jovens designers!

~Luksthere