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

Como fazer e colocar o Template

Olá pinguins! Gugalincon2 digitando.

Na enquete que fizemos, a opção de "Como fazer e colocar Template" ganhou, estou aqui para postar-la. Bom vamos começar a fazer o Cabeçalho. Primeiramente abra seu Fireworks e coloque as seguintes dimensões:

Width: 982

Height: 300

Agora iremos trabalhar com seu "Conteúdo". Primeiramente escolha a cor e o contorno do cabeçalho. Você pode escolher um efeito bem legal clicando em Texture. Veja:
 Após isso, coloque a Marca D'água de seu Blog (Se não sabe fazer, Clique Aqui). Pronto, seu cabeçalho já está feito. Veja o exemplo:

(Clique para Ampliar)

Depois do cabeçalho, eu costumo fazer a Sidebar. Faça sua sidebar nas seguintes dimensões:

Width: 982

Height: 260

Faça um retângulo na dimensão de: Width: 204, Copie e cole no outro lado. Você pode colocar uns puffles se quiser. Veja o exemplo:

(Clique para Ampliar)

Agora eu costumo fazer o fundo do blog, Clique Aqui e Saiba como Fazer.

Iremos fazer o Rodapé.  Para fazer o rodapé, clique em "New Document" e coloque as seguintes Dimensões:

Width: 982

Height: 100

Faça um retângulo e o personalize-o do jeito que quiser. Veja um exemplo de rodapé:

(Clique para Ampliar)

Pronto, agora só nos falta o Título da Sidebar. Sua Dimensão é:

Width: 208

Height: 35

Se quiser colocar uns efeitos de ondas, use o "Pen Tool", mas ainda iremos ensinar isso no Blog. 

Bom, agora iremos colocar as imagens que fizemos no Blog. Primeiramente iremos fazer Upload delas. Eu costumo usar o Imgur.com para fazer Upload delas pois dá para selecionar várias imagens de uma vez. 

Agora iremos colocar no blog, vá no seu Painel do Blogger >> Design >> Editar HTML. Exclua todo o HTML, clique aqui e coloque aquele HTML no seu blog.

Depois aperte CTRL + F 

• FUNDO DO DO BLOG - Coloque o Link do Fundo do Blog;
• CABEÇALHO DO BLOG - Coloque o link do Cabeçalho do Blog;
• RODAPÉ DO BLOG - Coloque o Link do Rodapé do Blog;
• TÍTULO DA SIDEBAR - Coloque o Link do Título da Sidebar;
• SIDEBAR - Coloque o Link da Sidebar.

Finalmente, terminei está longa e cansativa postagem!! (ALELUIAA) Espero não ter deixado nenhuma dúvida. Qualquer coisa comentem e responderei pelo comentário e não pelo chat. Vou ficando por aqui, até a próxima!
~Gugalincon2, Penguins Designer