sábado, 3 de novembro de 2012

Tutorial- Como fazer um cabeçalho para seu blog.


Heeeeeeeey boys and girls. Tudo bem? Estou para ensinar vocês à criarem um cabeçalho liindo para o seu blog. Você pode criá-lo no Photoshop ou no Photoscape mas como poucas pessoas tem o Photoshop eu vou ensinar à fazer pelo Photoscape. Caso você não tenha o Photoscape, baixe-o aqui.

Vamos ao tutorial:

Abra o Photoscape>Editor

Clique em Menu>Nova foto. Deixe na cor branca e 1000x800
Vai ficar assim:




Agora escreva o nome do seu blog, use a ferramenta: 

Exemplo:


Nesse exemplo eu usei a fonte Gabriola. Usei um rosa clarinho com contorno marrom para destacar. Use a  fonte e a cor de sua preferência, adicione contorno se você quiser.

Agora use a ferramenta abaixo para fazer uma caixa em volta do nome do seu blog. Escolha um tipo de linha(pontilhado ou linha comum). Coloque a cor que preferir, a espessura é 3 e o redondo é 12.



Exemplo:




No exemplo à cima eu usei a linha pontilhada e na mesma cor que a letra.

Agora vamos personalizar o cabeçalho com brushes. Vá em Objeto, Fotografia (montanha com sol), Foto...  e escolha o brushe que você quiser. Trouxe alguns brushes que eu gostei para vocês, podem usá-los se quiserem:








































Aqui como o meu ficou:




Se estiver sobrando algum espaço em branco, corte-o. Exemplo:




Seu cabeçalho está prontinho. veja como o meu ficou:




Colocar no blog.

Vá no seu blog, layout, onde está escrito "Nome do seu blog(Cabeçalho), vá em Editar, se o seu blog já tiver imagem vá em Remover imagem, se não tiver pule pra próxima etapa. Marque a opção Em vez de título e descrição e vá em Escolher arquivo. Procure sua imagem, clique nela e em abrir. Espere carregar, vá em Salvar. Ai a janelhinha vai fechar e você vai em Salvar alterações.

Centralizar o cabeçalho.

Vá em Modelo, Editar HTML, Prosseguir, clique em Expandir modelos de widgets. Agora dê um CTRL + V e procure pelo código:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Antes do ínicio desse código cole <center> e no final coloque </center>. O código completo vai ficar assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

Visualize e se tudo tiver certo, salve- o! Prontoo, até que enfim o tutorial acabou. Longo mas vale a pena, e aí gostaram? Beijos e até o próximo post.

Créditos: Chocolovers








0 Comments:

Postar um comentário