Como criar imagens que não são rejeitadas em anúncios FB.

Como criar Imagens para os seus Anúncios não serem rejeitados

Este é um assunto importante: criar imagens para que os seus anúncios não sejam rejeitados ou não tenham poucos cliques.

Como fui designer numa outra vida, tenho o know how para lhe poder ensinar isto.

Vou usar o Photoshop para lhe mostrar isto e ainda lhe vou dar templates grátis para fazer download.

Como criar imagens que não são rejeitadas em anúncios FB.

Como leitor deste blog, você já deve saber que o Facebook tinha a tal regra dos 20% de texto, em que os anúncios não podiam ter mais que 20% de texto na imagem (incluindo logótipos e slogans).

Quando há uns anos descobri essa regra, pensei “como é que sei se o texto cobre 20% da minha imagem? Tenho que andar com matemática para perceber isto ou quê?”

Então encontrei a ferramenta de sobreposição de texto do Facebook, que ajuda a saber quanto da sua imagem é que está coberta com texto.

É uma grelha de 5×5 que mostra a sobreposição de texto no design da sua imagem, e de acordo com o Facebook, o seu texto só deve preencher cinco desses retângulos.

Facebook sobreposição texto

No entanto, o Facebook “a modos que” alterou esta regra. Uma imagem usada num anúncio que tenha mais que 20% de texto não é rejeitada, mas o anúncio pode sair prejudicado (sendo apresentado menos vezes).

O próprio Facebook é ambíguo nisto. Segundo a página de ajuda deles:

Regra Facebook sobreposição de texto.

Portanto, anúncios com imagens contendo mais de 20% de texto não são rejeitados, mas serão apresentados menos vezes.

Mas voltando à grelha de 5×5.

A grelha é boa para caber o design da imagem para ir ao encontro dos requisitos do Facebook. O Facebook pode não rejeitar a imagem se tiver mais que 20% de texto, mas irá penalizá-la, e ninguém quer isso.

Portanto convém usar à mesma a grelha de sobreposição de texto para ter o mínimo de texto na imagem.

O texto tem de alinhar na grelha. Não pode olhar para o tamanho das 5 caixas e usar isso para colocar o texto à toa. O texto tem de assentar exatamente dentro das caixas desses retângulos.

Isto significa que se uma letra ou uma perna da letra fica de fora, o Facebook conta isso como uma caixa adicional.Facebook sobreposição texto 10 retangulos

Isto limita as opções do layout e torna-se chato. Se o Facebook tivesse uma grelha com mais quadrados, e mais pequenos, teríamos mais margem de manobra.

No entanto, após conhecer esta regra, fica a ter o conhecimento para criar um design que vai ao encontro da “preferência” de 20% de texto.

Porque o Photoshop é melhor que o Canva para os seus anúncios Facebook

O Photoshop é um programa poderoso, e uma ferramenta na cloud como o Canva não lhe chega aos calcanhares.

Até gosto do Canva, é gratuito (existe uma versão paga), e é fácil de usar. Uso-o ocasionalmente para mostrar aos meus estudantes como criar imagens e para ter inspiração tipográfica, mas para trabalho sério, uso o Photoshop.

Até nem é caro. Pode subscrever o Photoshop CC (Creative Cloud) e o Lightroom CC por apenas €12.29/mês no pacote de Fotografia para indivíduos. Se estiver na dúvida, pode experimentar o trial gratuito deles.

Se não vai fazer outsourcing do design das imagens dos seus anúncios, aconselho a investir tempo a aprender o Photoshop para tweaks simples como vou explicar de seguida. Quando cria as suas imagens no Canvas, elas normalmente ficam com um aspeto amador, e isso pode afetar os seus resultados. Invista num designer ou invista o seu tempo.

Quando tem o Photoshop, é fácil criar um novo ficheiro e ajustar as preferências para acrescentar uma grelha de 20% em cima do design da sua imagem.

Como criar uma grelha Facebook no Photoshop

Agora que percebe como funciona a grelha, vamos saber como criar a nossa própria grelha no Photoshop. É fácil, prometo.

Passo 1:

  • Abra um novo ficheiro Photoshop de 1200×628
  • Clique em “Edit” no menu no topo.
  • Depois clique “Preferences > Guides, Grid & Slices…”
  • (nota: se estiver em Mac, clique Photoshop > Preferences > Guides, Grid & Slices…)
  • Photoshop preferencias guias

Passo 2:

Isto abre a janela das preferências com Guides, Grid & Slices pré-selecionado na esquerda. Use as seguintes definições:

Photoshop preferencias guias 20%

Após clicar em OK, irá ter de volta ao seu ficheiro e as linhas da grelha provavelmente ainda não aparecem. Precisa de as definir como visíveis para elas aparecerem.

Passo 3:

  • Clique em “View” no menu de topo.
  • Faça scroll até “Show” e selecione “Grid.”

Photoshop ver linhas da grelha.

E voilá, a sua grelha aparece.

Photoshop ver linhas da grelha no documento.

Agora vamos aprender o básico do Photoshop

Para acrescentar uma imagem, só tem de arrastá-la para o seu background branco e alinhar os cantos para a redimensionar.

Verifique que está na ferramenta da seta (assinalado com círculo vermelho no canto superior esquerdo). Se não vê os cantos da caixa para redimensionar, vá a “Edit > Transform > Scale”.

Depois pegue no canto da imagem e arraste para redimensionar ao mesmo tempo que pressiona a tecla Shift para manter as proporções.Photoshop redimensionar imagem.

Agora vamos adicionar uma forma (shape) para colocar texto em cima dela. Não tem de fazer este passo, mas já que a imagem tem muitos elementos coloridos, o texto seria difícil de ler sem algum tipo de caixinha de cor por trás.

Na sua barra de ferramentas clique no ícone que está por cima da mãozinha. Por prédefinição o ícone é a ferramenta do retângulo.

Clique e pressione esse ícone até aparecer um menuzinho com mais opções. Selecione a Elipse (oval). Agora no menu em cima escolha a cor de preenchimento em “Fill” (eu escolhi preto). O strone (contorno) pode ficar a branco com aquela linha vermelha riscada. Depois desenhe a sua shape e coloque-a onde quer na imagem.

Photoshop elipse tool

Se precisa redimensionar a shape após a colocar, é só transformá-la como fizemos num dos passos anterior. Pode ir a Edit > Transform > Scale, e usar a sua ferramenta da seta para arrastar o canto da shape como desejado.

Photoshop redimensionar elipse.

Agora está na altura do texto. Clique na ferramenta de texto no menu da esquerda (parece um T), depois clique no seu ecrã.

Pode clicar dentro da elipse que criou, mas às vezes isso tem resultados estranhos no texto.

Em vez disso sugiro, clicar noutro sítio (que não na elipse) e comece a escrever. Depois use a ferramenta da seta para arrastar o texto para cima da shape e continuar a editar a partir daí.

Vai notar que há uma opção no topo do menu para escolher o alinhamento do texto. Eu escolhi alinhamento ao centro para caber no círculo.

Quando quiser escrever ou editar texto, use então a ferramenta de texto, clique dentro do texto e um grande cursor irá aparecer, e pode logo começar a escrever.

Photoshop texto por cima da elipse.

Para mudar o tipo de letra, clique no topo do menu onde as fontes estão listadas. Há uma seta branca pequenina à direita que ao clicar mostra uma lista de todas as fontes instaladas no seu computador, que pode selecionar.

Se sabe de antemão qual o tipo de letra que quer usar, pode escrever o nome dela na caixa que ela aparece.Photoshop mudar tipo de letra.

Criar um design espetacular dentro da grelha

Agora que a sua grelha está preparada e sabe o básico do Photoshop, pode facilmente começar a criar imagens dentro da recomendação do Facebook dos 20% de texto.

Está na altura de pensar o que fazer com o texto a nível de design. As possibilidades são imensas, mas há algumas técnicas que recomendo:

  • Texto por cima duma shape
  • Um apelo à ação (um botão)
  • Uma face virada para o apelo à ação

Opção 1: Texto por cima duma shape

No exemplo do monge a meditar, coloquei um círculo preto por trás de texto a amarelo. Isto ajuda a dar destaque ao texto numa imagem que tem muitos elementos de background, e que se poderia perder na feed de notícias do utilizador de outra forma.

Imagem monge a meditar.

Ao seguir a orientação da grelha, consegui com que o meu título principal ocupasse só quatro retângulos, com espaço para adicionar o endereço do meu site no canto inferior esquerdo para mais um retângulo (para um total de 5 retângulos usados, fazendo os tais 20% de texto).

Texto da imagem ocupa cinco retangulos.

Opção 2: Um apelo à ação (um botão)

Neste exemplo temos uma imagem dum fornecedor de marketing automation com o logótipo da empresa, um título e um botão para a demonstração do produto.

Anúncio Infusionsoft.

A nível da grelha, temos o logótipo em cima, que ocupa um retângulo, o título ao centro, que ocupa três retângulos, e o botão azul com texto que ocupa um retângulo, para um total de cinco retângulos ocupados.

Anúncio Infusionsoft com grelha.

Opção 3: Uma face virada para o apelo à ação

Isto significa que temos algum elemento (pessoa, animal) na nossa imagem que está a olhar para o apelo à ação, que pode ser um botão ou texto a apelar à ação.

Como os olhos da pessoa estão a olhar para o apelo à ação, o utilizador irá olhar para onde a pessoa no anúncio está a olhar.

Nesta imagem de exemplo que criei, temos uma rapariga a olhar para o apelo à ação (botão verde), para a oferta fictícia dum guia para escolher chapéus.

Imagem para anúncio fictício de guia.

A nível da grelha, o título, subtítulo, e apelo à ação ocupam quatro retângulos, o que me deixou ainda um retângulo para colocar o endereço web do meu site no canto inferior esquerdo, para um total de 5 retângulos (os tais 20% de regra de texto).

Imagem para anúncio fictício de guia com grelha.


Espero que agora se sinta melhor em usar o Photoshop para criar imagens para anúncios Facebook que passam o teste dos 20% de texto.

O meu desejo é que tenha um grande sucesso com os seus designs, e por isso criei um template grátis para si.

Este template é um ficheiro PNG com uma grelha já feita à medida, que pode simplesmente arrastar para uma imagem que esteja a trabalhar e a grelha sobrepõe-se por cima da imagem. Aí é só contar os retângulos que o seu texto ocupa. (Pode usar esta imagem mesmo que não tenha a visualização da grelha ativada)

Clique aqui para fazer download do template da grelha.

NOTA: Quando guardar a sua imagem no Photoshop, tire a visibilidade dessa layer (camada) porque senão grava com a grelha por cima.

Visibilidade da layer (camada) no Photoshop.

Seja social e partilheShare on FacebookShare on LinkedInTweet about this on Twitter

2 comentários sobre “Como criar Imagens para os seus Anúncios não serem rejeitados

    • Olá José, obrigado por esse recurso adicional que com certeza dará jeito para os leitores. Apareça mais vezes.

Deixe um comentário