ATENÇÃO ESSE TUTORIAL É PARA LAYOUT DO BLOGGER (blogspot).

Primeiramente você terá que ter estalado no seu pc o Photoshop ou o Photofiltre para a edição do design do seu lay e o FrontPage para mexer nos códigos HTML.

Bom, vamos começar com a parte Gráfica.

1º Passo

Abra uma imagem em branco com o tamanho de 780 x 450 e coloque o fundo que quizer.
Eu vou usar esse aqui .




2º Passo

Depois de ter arrumado o seu fundo todo lindo, vamos ás colunas onde ficarão o Perfil e os posts.

Com a ferramenta de seleção Retângulo desenhe um retângulo do tamanho que quizer desenhando as duas colunas. Com o balde de tinta pinte da cor que quizer.




3º Passo

Agora vamos escrever o nome do seu Blog na imagem, escrever perfil e post nas colunas e dar uma enfeitada pra ficar bonitinho. :)

vamos lá . Clique no botão de texto e escreva o nome do seu blog. Depois pra dar mais uma graça no seu Título clique em Converter Seleção, daí concerte a seleção direitinho pra ficar exatamente emcima do texto.



Depois vá em filtro/Estilizar/contorno Progressivo.



Ajuste o tamanho e a opacidade de acordo com o seu gosto. Eu usei desse jeito.



Faça o mesmo no Perfil e no Post se quizer.

Agora pegue aquela sua imagem preferida para colocarmos no seu lay. Abra a imagem e com a borracha ou com a ferramenta de Varinha Mágica, vá apagando o fundo da imagem, pra ficar o fundo transparente.



Depois de tudo apagado arrume a imagem onde voce quer que ela fique posicionada. Mais ta muito sem graça ainda não ? Vamos dar um efeito transparência nessa imagem. Clique em Camada/Transparência/Degradê eu coloquei da Direita pra Esquerda, você escolhe o que fica melhor pra você ;)
Use também os seus shapes e Brushes para enfeitar como voce quizer !



Estamos quase lá. Agora junte as camadas shift+enter novamente com a ferramenta de seleção retângulo selecione a parte inferior da imagem.



Depois de selecionado Pressione crtl+c para copiar e depois shift+crtl+v para colar a imagem copiada como nova imagem.

Salve as duas imagens a grande com o nome de TOPO e a menor com o nome de BACKGROUND (fundo).

Pronto ! A parte gráfica do layout está pronta . Agora vamos aos códigos.

1º Passo

Abra o frontPage clique com o botão direito do mouse e vá em Propriedades de página, na aba Formatação selecione o ícone imagem de plano de fundo e selecione a imagem que salvou com o nome de Background na aba Avançado coloque ZERO nas margens Esquerda e Superior e clique em ok.



2º Passo

Feito isso, vá em inserir/imagem/do arquivo e selecione a imagem com o nome de TOPO.
você vai notar que a ''base'' do nosso lay já está pronta. Agora é só aplicar os códigos do perfil e do Post. Clique no botão para inserir uma nova camada. Escreva Perfil dentro dessa camada.



clique na aba Código localize a palavra PERFIL apague ela e cole o seguinte código no lugar .

CLIQUE AQUI E BAIXE O CÓDIGO DO PERFIL .

Baixe o arquivo, extraia e abra o arquivo para copiar o código.



Depois repita a operação mais escreva Post dentro da camada !
e cole o seguinte código dentro das tags .

CLIQUE AQUI E BAIXE O CÓDIGO DO POST .

E PRONTO ! seu layout está pronto !

Aliás .. QUASE pronto . Falta hospedar as imagens background e topo em algum site de hospedagem, se não elas não vão aparecer quando voce colar o código no blog, porque vão estar com o endereço do seu pc .

www.tinypic.com Hospede as 2 imagens e subistitua elas no layout.

Postado pela, Moderadora Thata 19:10

0 Comments

<< Home