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



26 de agosto de 2013



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.


16 comentários:

  1. Achei bem interessante,gostei muito desse modelo de cabeçalho pois fica grandão e preenche tudo, quase não vê blogs usando assim.Não troca o lay do Adam não,tá tão bonito.Deixa mais uns 10 anos,kkk.
    Perfeito!!Boa segunda para você.
    Beijos
    sckittyworld.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu adoro esse estilo de cabeçalho eu acho bem bonito mesmo, tem que trocar né amor tá com tempo já kkk

      Obrigada pela visita

      Excluir
  2. Estou adorando essa semana de tutos o3o
    Ótimo tutorial, provavelmente vou usar ^^

    ResponderExcluir
    Respostas
    1. Que bom que gostou Amor :3

      Excluir
  3. Adorei o cabeçalho! *u* Fica muito legal mesmo!
    *~Kissus
    http://garota-differente-laiih.blogspot.com

    ResponderExcluir
    Respostas
    1. Fica demais mesmo querida XD

      Obrigada pela visita!

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Fica bem legal mesmo :3

      Obrigada pela visita

      Excluir
  5. Que legal que você vai trocar de lay, se este esta perfeito, mal posso esperar para ver o outro ~tensão, super tensão no ar~

    Gente, eu adorei esse tuto >< quando eu precisar de cabeçalhos assim vou vir aqui sausauhas.

    Beijos :3

    ResponderExcluir
    Respostas
    1. Fala serio né Rafah esse se zoar todo mundo já enjoou -dd Vai demorar um pouco mas vou trocar. Eu adoro esse tipo de cabeçalho kk

      Obrigada pela visita

      Excluir
  6. que lindoo, adorei o tutorial o; muito pratico e fácil o/
    acervo-de-livros.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *0* Realmente é super lindo e prático que bom que gostou amor.

      Obrigada pela visita!

      Excluir
  7. Sempre uso cabeçalhos assim *-* Otimo Tuto *-*

    Meu Mundo, Meu Estilo

    ResponderExcluir
    Respostas
    1. Fica demais né? *-*

      Obrigada pela visita amore

      Excluir
  8. Anônimo14:08

    Adorei o tutorial, já fiz o meu e tô usando dá uma olhadinha lá.
    http://aurea-feminina.blogspot.com.br/

    ResponderExcluir
  9. Anônimo14:32

    oi olha eu de novo, queria saber porque as colunas do meu blog ficam mais acima no cromo e nos outros navegadores fica normal? se puder me ajudar. obrigada.
    http://aurea-feminina.blogspot.com.br/

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo