Existem três tipos de cabeçalhos eu costumo ver usadas no ol’ internet — navegação cabeçalhos, cheio de fotos cabeçalhos e tapete de boas-vindas cabeçalhos. Se você estiver interessado em como fazer um cabeçalho de blog, você terá que conhecer os prós e contras de cada tipo antes de chegar ao âmago da questão da criação.

cabeçalhos de navegação

os cabeçalhos de navegação não são baseados em fotos. Por exemplo, no topo do meu site, tenho meu logotipo, além de links para páginas importantes ou formulários de inscrição. Ver.

cabeçalhos de navegação como esses são ideais se você é fã do Minimalismo e deseja que as pessoas realmente se concentrem em sua escrita sem se distrair com imagens.

também é um ótimo caminho a percorrer se você é novo, não descobriu sua marca ou só precisa se levantar e correr online.

o layout não está definido em pedra — os cabeçalhos de navegação podem ser definidos de todas as maneiras. Você provavelmente já viu alguns onde o logotipo está no centro acima de links de texto, ou pode ter apenas o logotipo Sem links (ou vice-versa).

este cabeçalho geralmente vive em harmonia com cabeçalhos de blog adicionais (meu site também tem outro cabeçalho abaixo dele), como cabeçalhos de fotos completos e tapetes de boas-vindas.

cabeçalhos de fotos

o estilo do cabeçalho da foto é muito atraente e realmente atrai você. Se você quiser um cabeçalho de foto em seu blog, pense em qual será o assunto. Será uma foto de uma pessoa? Como você, ou você e sua família, ou alguma representação do seu cliente ideal? Ou será uma foto com algum tipo de paisagem, padrão, desenho animado/ícones ou até mesmo um vídeo?

confira este exemplo de AlexTooby.com. Alex usa uma foto sua e um pouco da ideia do tapete de boas-vindas com um forte apelo à ação para se inscrever em seu curso.

a foto funciona, tanto para recém-chegados quanto para visitantes que retornam. Por quê? Porque ela usa alguns elementos visuais sutis (mais sobre estes mais tarde) que servem para reforçar a força deste cabeçalho. Ela está segurando o telefone, com a interface do Instagram zombada, e ela está olhando para o texto que ela quer que você leia. Seu olho é naturalmente atraído para o rosto dela, depois para as palavras, depois para o botão rosa brilhante para clicar. Isso seria menos eficaz se ela estivesse olhando para o lado esquerdo da tela.

Pro-Tip: Ter alguém enfrentando” in ” em direção à cópia ou botão é um truque de design ninja que você também pode usar.

cabeçalhos de fotos podem definir um clima e ajudar seus leitores a agir. Como os cabeçalhos das fotos são grandes, eles bloqueiam outras distrações na página e ajudam a concentrar os leitores exatamente no que você deseja que eles façam (como o botão “Iniciar Curso Gratuito” de Alex).

cabeçalhos de Esteira de boas-vindas

o típico “tapete de boas-vindas” que você pode ver na internet é uma aquisição em tela cheia, e existem ferramentas que ajudam você a fazer isso.

Ou, se você não quer assumir o seu página inteira, você também pode configurar uma parte para agir como um tapete de boas-vindas ou um formulário de inscrição para algum brinde que você está oferecendo. Não tenho certeza de como seria isso? Confira a imagem abaixo no meu site. Estou oferecendo um e-curso gratuito que quero que todos os visitantes vejam primeiro para que eu possa construir minha lista de E-mail com o público certo para futuros e-mails e promoções. Minhas entradas de blog aparecem abaixo disso para que os visitantes possam simplesmente rolar para baixo para ver minhas últimas postagens.

agora que você viu os três estilos diferentes, é hora de falar sobre a criação de um cabeçalho de blog para o seu site.

como fazer um cabeçalho de blog que parece marcado

eu sei que o termo “marca” soa oficial e intimidante, mas nunca tema! Na verdade, é muito fácil se você se concentrar apenas em algumas coisas importantes. Ou seja, cores (frequentemente encontradas em seu logotipo) e fontes.

Pro tip: Monte um guia de marca em uma pasta para que você possa acompanhar essas informações (junto com seu logotipo) para facilitar o acesso a qualquer momento.

mesmo se você não fizer algum guia impresso extravagante, você pode anotar esta informação em uma nota pegajosa e mantê-la em seu monitor. Isso economizará muito tempo a longo prazo! Agora, vamos quebrar alguns elementos de design.

Escolha suas cores

você pode ter algumas cores que escolheu usar para sua marca, mas um bom lugar para começar é com seu logotipo. A(S) Cor (s) do (s) Seu (s) logotipo (S) são ótimos para usar em seu site, marca e cabeçalho do blog. A consistência é fundamental – se você apresenta um rosa quente, então talvez suas fotos tenham um elemento de rosa para elas ou um elenco rosa geral, ou talvez você use preto e branco e puxe a cor de outras maneiras.

Aby de YouBabyMeMummy.com faz isso lindamente inserindo uma versão linda e colorida sobre seu logotipo como uma sobreposição em uma foto em preto e branco de si mesma com sua filha. Este cabeçalho de foto realmente puxa você para a história dela de uma forma ousada e envolvente. Clique em torno de seu site se você quiser ver mais exemplos de impressionantes, imagens em tela cheia.

e se você ainda está tentando descobrir quais cores usar em sua marca, este artigo sobre psicologia da cor é muito revelador!

selecione uma fonte

incorporar uma fonte elegante ou de marca diretamente no seu cabeçalho pode ser uma maneira realmente relevante e rápida de transmitir sua mensagem. Como nesta imagem única e atraente de Luci em diante ByLucinda.co.uk.

esta seascape se encaixa perfeitamente com sua marca, que incorpora muitos elementos naturais e mostra sua vibração elegante, mas atrevida. Não há Times New Roman para esta senhora! Ela também tem uma maneira inteligente de mostrar seus links de mídia social no lado direito em uma faixa retangular verde clara. Ele conecta a navegação superior com a grande foto em negrito e ajuda a puxar o olho para baixo da página de uma forma intencional.

você pode encontrar algumas fontes realmente divertidas e gratuitas online de lugares como Font Squirrel e Dafont. Muitas dessas fontes gratuitas são construídas diretamente em programas como Canva e PicMonkey. No entanto, como eles são gratuitos, há uma chance maior de que outra pessoa (até mesmo um concorrente) possa estar usando o que você deseja.

se você quiser usar fontes mais sofisticadas no corpo ou nas manchetes do seu site (ou seja, não em uma imagem), então você deve levar algum tempo para aprender sobre o Google Fonts. E para orientação sobre quais fontes usar para web design, confira esses três mandamentos.

incorpore elementos visuais

ao compor o cabeçalho do seu blog de marca, você deve pensar sobre quais elementos visuais deseja incluir. Analisamos exemplos usando um logotipo, uma foto e um grande botão claro.

Jen de ToastMeetsJam.com faz exatamente isso. Ela não apenas caiu em uma mesa como você teria em uma planilha chata — ela usou fontes artísticas e ótimas junto com seus campos de formulário e um botão circular “GO”.

veja como ela incorpora perfeitamente sua inscrição de E-mail no design? Ela não só está envolvendo você com a foto de si mesma parecendo animada e amigável, mas também está aproveitando um fundo limpo e cinza para mantê-lo focado no texto e no formulário. Não há padrões de distração ou imagens para atraí-lo para longe da tarefa-chave de preencher esse formulário e seguir em frente. Não poderia estar mais claro o que você precisa fazer para obter seu curso gratuito de cinco dias.

prepare-se para projetar

você já viu alguns exemplos de ótimos cabeçalhos de blog, mas o que você faz a seguir? Para começar seu próprio cabeçalho de blog, você precisará reunir algumas ferramentas de design e informações sobre o tamanho da imagem.

Ferramentas de Design

as ferramentas de design essenciais para fazer seu próprio cabeçalho de blog personalizado não precisam ser difíceis de usar ou caras. Experimente alguns e veja com o que você se sente confortável, então vá em frente! Não se preocupe se eles se sentirem estranhos no início — você ficará melhor quanto mais você os usar. Aqui estão alguns que você pode começar a explorar, em ordem do mais fácil ao mais difícil.

Canva. Este é provavelmente o mais fácil do mercado, e é grátis! Existe uma versão paga chamada Canva for Work se você quiser mergulhar mais fundo, mas a versão gratuita é realmente divertida e fácil de aprender. É uma ferramenta de design baseada na web, então você acabou de fazer login no site e usá-lo diretamente no seu navegador.

PicMonkey. Se você realmente gosta de editar fotos e brincar com filtros, vale a pena tentar o PicMonkey. Existem muitos efeitos divertidos embutidos. Como o Canva, o PicMonkey é baseado na web e tem uma versão gratuita mais uma paga com funcionalidade adicional.

Photoshop. Você não pode mencionar o software de design e não abrir o Photoshop! É uma potência de um programa e pode fazer muito mais do que apenas fazer um cabeçalho de blog, mas é definitivamente ótimo para isso. É um aplicativo que você baixa e pagará por assinatura mensal (um teste gratuito também está disponível).

como designer profissional, tenho usado o Photoshop por toda a minha carreira e adoro. A maioria dos meus leitores acha que o Photoshop é intimidante no início, mas é completamente factível quando você aprende alguns conceitos básicos. Tenho que dizer, porém, desde que descobri o Canva, costumo usar uma combinação de Photoshop e Canva para fazer meus gráficos. Canva é tão divertido!

Dica Pro: Se você pegar o plano de fotografia da Adobe, poderá obter o Photoshop + Lightroom por um custo mensal bastante baixo. Não muito pobre.

WordSwag. Se você gosta de fazer gráficos no seu telefone, isso é para você. Este aplicativo móvel não é gratuito, mas é apenas alguns dólares e tem uma versão iOS e Android. Além disso, ele está ligado a um site gratuito creative commons Stock photo, assim você nunca está em uma perda de opções de imagem no cabeçalho do seu blog. Tem todos os tipos de cores, texturas e fontes para escolher. Tudo o que você precisa fazer é salvar seu gráfico final em “a nuvem” ou conectá-lo ao seu computador para que você possa enviá-lo para o seu site.

tamanhos de imagem

quando você está criando o cabeçalho do seu blog, você precisa considerar o tamanho da imagem em relação à plataforma do seu site. O tamanho do seu tema WordPress pode ser diferente da página Squarespace da próxima pessoa ou do Criador de sites GoDaddy GoCentral. Aqui estão algumas coisas a ter em mente:

dimensões do Pixel. Os tamanhos são geralmente listados como alguns números de largura por algum Número de altura e em dimensões de pixel. Por exemplo: 1000×400 (ou 1000px x 400px) significa que sua imagem tem 1000 pixels de largura por 400 pixels de altura.

resolução. Para a internet, sua resolução é fácil – é sempre 72! Resoluções mais altas, como 300, 600 ou mais, são para impressão. As resoluções de tela para monitores são sempre apenas 72. Portanto, usando nossas dimensões de exemplo de cima, sua imagem final teria 1000px de largura por 400px de altura, 72 dpi (ou ppi).

tipo de arquivo. Os arquivos PNG nunca perdem qualidade, não importa quantas vezes você os salve, mas são maiores no tamanho MB (megabyte). Os arquivos JPG (jpeg) podem ser salvos em diferentes níveis de qualidade para que você possa manter o tamanho do arquivo (MB) pequeno, mas cada vez que você os salva, eles perdem um pouco de qualidade. A.o arquivo jpg que é salvo duas vezes parece bom, mas depois de salvá-lo cinco ou 10 vezes, ele começará a parecer pixelado e granulado.

otimizar significa salvá-los para serem mais compactos em um tamanho de arquivo menor, mas com cuidado para que você não perca a qualidade. Você pode fazer isso facilmente usando um site gratuito chamado TinyPNG. Assista o panda bonito comprimir suas imagens de uma forma que os mantém olhando fabuloso, mas economiza megabytes!

como fazer um cabeçalho de blog no Canva

1. Inscreva-se para uma conta.

2. use dimensões personalizadas.

3. selecione uma foto gratuita.

4. adicionar texto personalizado.

5. Personalize seu design.

6. adicione um logotipo.

7. baixe o cabeçalho do seu blog.

agora para a parte divertida! Vamos nos aprofundar em fazer um cabeçalho de blog personalizado do zero usando o Canva. Estou usando recursos que estão disponíveis gratuitamente, para que você possa fazer isso por conta própria junto comigo. Basta se inscrever para uma conta gratuita e você está pronto para ir.

aqui está o cabeçalho do blog que faremos:

1. Inscreva-se para uma conta.

uma vez que você se inscrever para uma conta no Canva, você vai chegar a um criar uma página de design onde você vai querer clicar em usar dimensões personalizadas no canto superior direito.

Use dimensões personalizadas.

preencha a largura e a altura desejadas nos campos que aparecem e selecione “px” para pixels. Depois disso, clique no Design! botao.

um novo projeto aparece com uma tela em branco e a guia Layouts selecionada à esquerda. Observe que o nome do projeto não foi especificado, então ele se nomeia “1000px x 400px — Design Sem título” na parte superior ao lado do botão Compartilhar.

selecione uma foto gratuita.

clique em elementos e escolha uma foto gratuita entre as fornecidas. Todos os gratuitos dizem “grátis” no canto inferior. Você também pode enviar sua própria foto, mas para o nosso tutorial vamos trabalhar com uma dessas fotos gratuitas.

depois de clicar na foto, ela aparece instantaneamente na área de design do seu projeto. Vamos em frente e renomear este projeto enquanto estamos nisso. Clique no nome temporário ao lado do botão Compartilhar e digite um novo. Estou chamando isso de” diários de viagem ” para o meu blog de viagens fingidas.

depois que sua imagem estiver sentada na área de design, você pode aumentá-la arrastando os círculos nos cantos. Vá em frente e redimensione esta imagem para caber no documento.

adicionar texto personalizado.

ótimo! Agora precisamos de algum texto. Clique na guia Texto na coluna da esquerda e você verá algumas opções para escolher. Você pode clicar em arranjos de texto pré-projetados na seção inferior dessa janela ou em linhas individuais de texto na parte superior. Vá em frente e clique em Adicionar título. Este texto aparece na imagem, padronizado para preto.

agora para se divertir! Vamos escolher uma fonte diferente. Navegue pelas opções de fontes e escolha qualquer coisa que lhe agrade. Eu escolhi um estilo de pincel. É difícil ver em preto em cima dessa imagem, então vamos mudar para branco. Clique na caixa colorida na parte superior para abrir Opções de cores e escolha o quadrado branco. Eu também ajustei o tamanho para 104.

em seguida, vá em frente e arraste esse título para o lugar na imagem para que fique mais centrado.

Personalize seu design.

é um pouco difícil de ler e se concentrar no texto sobre este fundo ocupado, então vamos adicionar um efeito de desfoque. Basta clicar na foto de fundo para selecioná-la, escolher filtro e clicar em Opções Avançadas.

a janela de filtro se expande para mostrar algumas outras coisas que você pode fazer. Você pode jogar com saturação, coloração de cores, adicionar uma vinheta e muito mais.

clique no ponto preto na seção desfoque e arraste-o para a direita. Eu escolhi +22 na escala de desfoque.

adicione um logotipo.

agora clique fora dessa janela para ver o seu design. Boa aparência! Agora vamos marcá-lo adicionando um logotipo. Você pode carregar seu logotipo clicando na guia Uploads à esquerda e, em seguida, no grande botão verde carregar suas próprias imagens.

escolha um transparente .versão png do seu logotipo para que não seja achatado em uma cor sólida (a menos que o estilo do seu logotipo esteja dentro de um retângulo branco ou algo assim).

quando for carregado, você o verá na área abaixo do botão verde. Ele permanece lá para você usar em projetos futuros. Acessível! Eu já tinha meu logotipo falso carregado, então acabei de rolar para baixo para encontrá-lo.

clique no logotipo e ele aparecerá no seu design.

Agora você pode redimensioná-lo, movê-lo e até ficar extravagante e brincar com a transparência, se quiser.

baixe o cabeçalho do seu blog.

Sim! Agora seu design está pronto, então tudo o que resta é baixá-lo. Clique no botão Download na parte superior da tela e escolha seu tipo de arquivo. Eu costumo ir com o tipo PNG recomendado.

uma vez que seu design é baixado para o seu computador, você pode abri-lo e admirá-lo, em seguida, carregá-lo para o seu blog.

e isso é tudo o que há para isso! Espero que você tenha um bom controle sobre como fazer um cabeçalho de blog e a importância de uma imagem estelar. Agora, você pode adicionar um ao seu blog. Feliz branding!