Como criar um cabeçalho personalizado e exclusivo para o blog? - * Blog Elaine Gaspareto *

Como criar um cabeçalho personalizado e exclusivo para o blog?

Publicado em 10/10/2018

Tempo de leitura:

Como criar um cabeçalho personalizado e exclusivo para o blog?
Hoje trago pra ti, querido leitor, mais um tutorial que sempre me pedem e eu venho adiando há tempos...
Na verdade são basicamente umas dicas simples e bem fáceis que vão te ajudar a criar um cabeçalho personalizado para seu blog usando o editor de imagens gratuito Photoscape.
Este tutorial é bem básico e simples, para quem quer aprender mesmo. Se você usa editores mais avançados ou tem mais vivência com edição de imagens talvez o que vou mostrar a seguir seja demasiado simples; mas se você é iniciante, vai aproveitar com certeza!
Vamos trabalhar?

Como criar um cabeçalho personalizado para o blog?


Antes de mais nada é preciso que você tenha o Photoscape instalado em seu computador.
Claro que pode ser outro editor de imagens, mas eu escolhi o Photoscape, pela simplicidade, funcionalidade e por ser gratuito.
O tutorial será todo baseado nele, tá?


Além do Photoscape é preciso que você tenha boas fontes instaladas em seu computador.
Eu vou deixar abaixo o link de alguns posts meus com fontes gratuitas para baixar e usar, além de ter um tutorial que ensina como instalar as fontes baixadas da internet.


Programa instalado? Fontes lindas instaladas? O que falta?
As imagens, claro!

Uma dica boa é usar imagens vetoriais pois assim a gente consegue boas imagens, com fundo transparente. E isso facilita muito a vida na hora de montar os cabeçalhos.
Minha dica para baixar vetores de graça é o site Freepik.
E para descompactar os vetores eu uso o Inkscape, que é gratuito e muito fácil de usar.


Outra dica boa para encontrar imagens com fundo transparente é pesquisar no Google Imagens.
Vamos supor que eu queira uma imagem de flores aquarela sem fundo. Eu pesquiso watercolor flowers png, exatamente assim, em inglês pois os resultados costumam ser melhores.
Tenha atenção apenas ao direito de uso da imagem, tá?

Também vale a pena buscar imagens em sites de imagens gratuitas; meu cabeçalho atual, por exemplo, é todo feito de recortes de imagens de sites de imagens free.


Além das opções todas que existem em sites que fornecem imagens gratuitas vou disponibilizar um pack com algumas dezenas de imagens.
Assim você pode começar agora o tutorial, já com uma base de imagens sua.
Aos poucos você vai baixando outras, descompactando vetores e formando seu próprio banco de imagens.
Clique no botão e faça o download do pack de imagens que estou te dando de presente:


Baixar pacote de imagens


Para baixar as imagens clique na setinha que aparecerá na pasta Freebies do Google Drive. A seguir clique em Fazer download e baixe as imagens.


Então, recapitulando:
1- Instale o Photoscape caso ainda não tenha;
2- Instale fontes diversas e lindas para ter opções;
3- Crie uma pasta em seu computador com imagens para serem usadas; separe imagens com fundo transparente em uma subpasta para facilitar na hora de localizar as imagens salvas;


Criar cabeçalho que ocupe a largura total da página


Criar cabeçalho que ocupe a largura total da página
Agora vamos para à parte prática do tutorial!
Abra seu Photoscape. Clique em Editor.
Carregue a imagem com fundo transparente que disponibilizei na pasta de imagens.
Esse fundo transparente mede 1600px de largura e 500px de altura e será a base do plano de fundo; a seguir clique na aba Objeto.
Clique então no 1º ícone, que parece uma montanha.
Abrirá a opção Foto; clique nela.
Aparecerão as pastas que tiver em seu computador; localize a pasta onde estão suas imagens, o seu banco de imagens conforme sugeri acima.
Achou a pasta?

Clique na primeira imagem que deseja carregar.
Ajuste o tamanho dela clicando em Redimensionar.
Mantenha marcada a caixinha Preservar aspecto de proporção.
Defina o tamanho que deseja testar (isso pode ser alterado quantas vezes precisar) e posicione a imagem.
Faça isso com cada imagem que desejar inserir em seu cabeçalho.

Note que, nesse caso, não há como eu te ensinar.
Tem que ser feito de acordo com seu gosto, usando as imagens que desejar/tiver mas o essencial que posso dar como dica é: respeite a proporção das imagens.
Tem que ficar bonito, ter harmonia, ficar bem feito, bem acabado e com imagens boas, de boa resolução.
Arte pronta?
Salve na pasta que preferir.
Para manter a transparência salve em formato png. Eu recomendo.
Olha o meu exemplo, que fui montando enquanto criava esse tutorial:

Em breve teremos série nova ensinando a fazer esse template, e depois ele estará disponível pra baixar e usar, de graça! Me aguarde!

Como criar um logo para meu blog?

Agora vamos criar o seu logo, que nada mais é do que o nome do blog. Como no exemplo acima...
Abra outra aba do Photoscape e carregue de novo a base transparente.
Deixe na medida 1130px de largura, altura 400px.
Clique na aba Objeto/Foto e escolha a arte de cabeçalho que acabou de criar.
Carregue-a e em Redimensionar digite o tamanho real dela na caixinha Largura.
Escolha posiciona-la Acima, centralizada.
Sim, vai ficar de fora da base, não tem problema.
Isso é importante para que ao criar o logo você tenha essa guia de onde exatamente ele ficará ao ser inserido no blog, sobre o plano de fundo.

Agora clique na aba Objeto e a seguir no ícone T, que vai abrir a guia Texto.
Escreva o nome de seu blog, escolha uma fonte bonita, selecione a cor, ou as cores que preferir.
Vá fazendo testes, mexa no tamanho da fonte, na cor, troque a fonte até achar a que melhor se adapta ao que você deseja.

Terminou? Logo pronto? Retire a sua arte do cabeçalho, exclua-a.
Clique em Foto+Objetos para juntar tudo.
Clique em Cortar e corte seu logo, excluindo tudo que for espaço vazio.
Mantenha somente o logo.
Salve em formato png na pasta que desejar.


Como colocar plano de fundo e logo no blog?


Agora vá ao painel do seu blog (preferencialmente de testes, sempre) e insira logo e o plano de fundo.

Como inserir o plano de fundo no blog:
Clique em Tema, no painel administrativo do blog. Aí clique em Personalizar.
Vai abrir o painel de edição, clique em Plano de fundo.
Caso já exista uma imagem aí clique para exclui-la. Se não tiver nenhuma imagem clique dentro do quadradinho Imagem de plano de fundo, depois clique em Fazer upload da imagem.
Localize a imagem do plano de fundo que vai usar (a que criou no passo acima e pedi pra salvar), espere-a carregar.
Centralize a imagem, marque a caixinha Rolar com a página e defina para Não dividir em blocos. Salve a alteração.
E está pronta essa parte!

Como inserir o logo no blog:
Clique na aba Layout/Editar no Gadget Cabeçalho de página.
Clique em Escolher arquivo, marque a opção Em vez de título e descrição, selecione a imagem (logo) que deseja usar, espere a imagem carregar.
Deixe desmarcada a caixinha Reduzir para ajustar.
Salve, e salve a alteração do Layout.

Esse processo pode ser feito tantas vezes quantas forem necessárias até que tudo fique como você deseja.
Mexa, teste, refaça, tente de novo.
Até conseguir!

Cabeçalho simples com logo para blog


Vamos supor que sua intenção não é ter um plano de fundo que faça as vezes de cabeçalho, mas sim ter um header que já seja também um logo.
Assim, por exemplo:


Nesse caso faça tudo como expliquei acima, redimensione a base transparente para a largura de seu blog (ou use as medidas "seguras, 1130px de largura) e monte sua arte como desejar.
Acrescente o nome do blog, tudo na mesma base e aí, depois de tudo pronto, clique em Foto+Objetos.

Recorte para retirar espaços vazios caso existam e insira em seu blog clicando na aba Layout/Editar no Gadget Cabeçalho de página.
Clique em Escolher arquivo, marque a opção Em vez de título e descrição, espere a imagem carregar.
Deixe desmarcada a caixinha Reduzir para ajustar.
Salve, e salve a alteração do Layout.
E tá feito!


Sei que o tutorial ficou longo mas é que gosto de ser o mais clara possível.
Deu trabalho pra criar, então não tenha preguiça de ler; leia com cuidado, busque aprender, releia se precisar.
E se tiver qualquer pergunta diga nos comentários e eu ajudo se for possível.
Aproveite!

Sempre devemos aproveitar quando temos a chance de aprender ou acrescentar algo ao nosso conhecimento.
Saber, gente querida, não ocupa espaço e nos faz crescer.
Não é?

Aqui, de novo, o link para baixar as imagens.
Aproveita!

Baixar pacote de imagens





3 comentários via Blogger
comentários via Facebook

3 comentários:

  1. Eu já fiz um cabeçalho personalizado é bem bonito mas dá muito trabalho rsrs ficava mudando toda hora e testando umas coisinhas novas, mas nunca chegava no que realmente me agradava... quem sabe quando reformar eu precise aprender a fazer de novo. Amo os em aquarelas!

    Apenas eu, Day

    ResponderExcluir
    Respostas
    1. Dayane, dá trabalho mesmo, por isso muitas vezes é mais prático pagar alguém, é mega trabalhoso editar e preparar imagens, e depois elaborar a arte.
      Mas eu gosto, embora seja trabalhoso eu acho divertido :)
      bjssss

      Excluir
  2. Adorei as dicas! Vou tentar mexer no meu aqui bjo

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…