[Semana de Tutos} Cabeçalho em toda largura do blog + Como fazer esse estilo de cabeçalho

Hey Divas feat. Divos, como vocês estão? espero que estejam bem, quem viu o VMA ontem?? gente só tenho uma coisa a dizer Loucuras e Bizarrice. 

Resolvi fazer uma semana de tutoriais já como essa tag está desatualizada, e também o meu não anda muito e ainda tenho dois layouts para fazer, e os tutos além de ajudar a todos é mais prático pra mim. Esse primeiro tutorial na verdade foi um pedido na ask do blog (no finalzinho da sidebar) pediram um tutorial para fazer um cabeçalho parecido com o atual do blog (Adam Divo Lambert, que vai ser trocado mês que vem).

Go!



Primeiramente eu costumo dizer que esse cabeçalho é um "jogo" de HTML, é usada a mesma técnica de dois backgraunds no blog, primeiro vamos fazer o cabeçalho ok?

Abra seu editor de imagens (ava) no meu caso Photoshop cs6. Abra um documento transparente no tamanho 1400 x 450 é o que uso aqui, Irá ficar da seguinte forma.

(Clique nas imagens para ver em tamanho original)

No google pesquise por texturas, ou use alguma que já tem salva no PC, se for pegar no google é só copiar e colar, se for abrir do pc abra normalmente e traga para cima do novo documento aberto, duplicando a textura quantas vezes for necessaria até cobrir toda a imagem, e organize como se fossem apenas um imagem se precisar use a borracha. Nunca redimencione a textura pois a imagem não ficará com qualidade o melhor é duplicar mesmo, Ficara como a imagem a baixo.

Depois de utilizar a borracha (somente se for preciso)

A base do seu cabeçalho já esta pronta, agora abra qualquer recorte ou png a seu gosto e posicione na sua base também a seu gosto.Meu exemplo abaixo

Para não ficar tão "sem graça" você pode por outros brushes para enfeitar, ou por algum efeito no seu recorte/png. Eu usei o "Brilho Externo" 

Clique duas vezes em cima da cama do png >> Irá abrir uma janelinha>> Selecione a penultima opção (Brilho externo) configure a seu gosto e clique em ok. (Aplique mais efeitos a seu gosto)

Escreva o que quiser com a ferramenta de texto, mescle todas as camadas e salve em formato png (maior qualidade)

Meu resultado 

Agora é só hospedar a imagem em algum servidor, eu recomendo hospedar no próprio blogger pois ele deixa a imagem com as medidas exatas da sua imagem. 

Para por no blogger seu mais novo cabeçalho. Vá no seu HTML, Clique em alguma parte de código e tecle ctrl + f irá aparecer uma caixinha de busca.

Procure por body {

Irá achar algo mais ou menos assim 

body {font: $(body.font);color: $(body.text.color);background: $(body.background);}

Agora substitua por 

body, html {
height: 400px;margin: 0;padding: 0; }body {background: url("URL do cabeçalho") repeat; }
html {background: #cor; }

Coloque a url do seu cabeçalho onde se pede, height 400 é o tamanho da sua imagem em altura, que vc pode aumentar ou diminuir nossa base é  450, se quiser que sua imagem apareça toda altere para 450, ou o tamanho do seu cabeçalho e #cor é cor do seu bg altere e  salve.

Mas tia o nome do blog fica atrapalhando, e agora? agora faça uma imagem tranparente e coloque como cabeçalho pela opção layout ok? pode usar essa imagem, que vocês não estão vendo mais ela está aí.

Imagem ↓

Tchau, até o próximo post.