Como Criar Capas para Redes Sociais: Facebook

Série: Como Criar Capas para Redes Sociais

  1. Série: Como Criar Capas para Redes Sociais: Facebook

Nesta nova série de tutoriais, Como Criar Capas para Redes Sociais, mostrarei, passo a passo, desde a criação do wireframe no Photoshop, para que você tenha um template pronto para as próximas capas profissionais e personalizadas, até à arte final a ser publicada nas seguintes redes sociais/microblogs: Facebook, Twitter, Google+, Linked In, You Tube (perfil e capa).

Passo 1: Conhecendo as dimensões oficiais do Facebook

Primeiramente, vamos consultar quais são as dimensões oficiais, da foto do perfil e da capa “minha página”, do Facebook, através do link: Central de Ajuda > Informações Básicas.

Dimensões das fotos do perfil e capa do Facebook

Dimensões das fotos do perfil e capa do Facebook

Com base no material oficial e com as pequenas atualizações que ocorreram em 2016, fiz um resumo:

Dimensões da página do perfil pessoal do Facebook

Dimensões da página do perfil pessoal do Facebook

Veja algumas observações interessantes para você que, assim como eu, é perfeccionista demais e deseja criar uma capa perfeita para o Facebook.

Foto do perfil pessoal: por mais que as dimensões sejam 160 x 160 px, no momento do upload, o Facebook só aceita com as dimensões mínimas de 180 x 180 px. Outro detalhe é que, automaticamente, o Facebook inseri uma borda de 4px. São detalhes que devemos pensar na hora de criar capas para redes sociais, no caso, o “Face”. Outra informação é que, quando o perfil é exibido em smartphones e pequenos celulares, as dimensões variam de 140 x 140px e 50 x 50px, respecitivamente.

Nome/apelido e botões para ação: outro detalhe importante para quem vai criar capas para redes sociais, é observar itens e seções que compõe a página do perfil. No caso do Facebook, é possível inserir o nome principal e, logo abaixo, um apelido (cargo, função…). Além dos botões de ação como solicitar amizade, curtir, etc. E, para cada seção, existe uma delimitação para que o design siga seu curso com maior clareza e naturalidade.

Não esqueçamos das páginas de comunidades, empresarias e afins. As dimensões mudam um pouco, principalmente a foto do perfil que reduz para 88 x 88 px, mas o upload continua o mesmo, 180 x 180 px.

Dimensões das páginas de comunidade, business do Facebook

Dimensões das páginas de comunidade, business do Facebook

Passo 2: Criando o template da capa do perfil pessoal do Facebook no Photoshop

Agora que sabemos as dimensões das fotos e capas das páginas pessoais e comerciais do Facebook, criaremos 2 templates para que sirvam de moldes para futuros projetos.

Criando um novo arquivo

Com o Photoshop aberto (obviamente), crie um novo arquivo: File > New ou CTRL + N e configure como a imagem abaixo:

Criação do novo arquivo do template da capa do Facebook

Inserindo as linhas-guias

Para termos um trabalho perfeito e pensando nas criação das futuras capas para redes sociais, o uso das linhas-guias é essencial para a ação. Principalmente, se desejarmos criar capas criativas onde a foto do perfil se interaja com a foto da capa. Veja alguns exemplos bacanas:

Então, para inserirmos as guias, acessemos o menu View > New Guide…, e, nas janelas, coloquemos, uma a uma, o posicionamento horizontal:

Medidas das linhas-guias horizontais

Medidas das linhas-guias horizontais

E teremos o seguinte resultado:

Linhas-guias horizontais resultado

Linhas-guias horizontais resultado

Agora, as linhas-guias verticais:

Medidas das linhas-guias verticais

Medidas das linhas-guias verticais

Resultado:

Linhas-guias verticais resultado

Linhas-guias verticais resultado

Passo 4: Criando a capa do perfil pessoal do Facebook

Agora vem a parte mais fácil da série criar capas para redes sociais: montar as imagens =]

Primeiro, escolha uma imagem para a capa. No meu caso, escolhi no banco de imagens gratuitas do site Pixabay.

Desktop para capa do Facebook

Desktop para capa do Facebook

Com a imagem salva e o arquivo do template aberto, a arrastemos para dentro dele:

Arrastando imagem da capa do Facebook para o Photoshop

Arrastando imagem da capa do Facebook para o Photoshop

Imagem arrastada para dentro do wireframe do Facebook

Imagem arrastada para dentro do template da capa do Facebook

Perceba que a imagem ao ser inserida no Photoshop, possui alguma alças (quadrados pretos nas quinas e medianas da imagem) que, segurando ao tecla SHIFT, devemos escolher uma das quinas, segura-la e arrasta-la, proporcionalmente, até ocuparmos inteiramente o template. Caso as alças não apareçam, pressione CTRL+T sobre a imagem.

Alça de redimensionamento do Photoshop

Alça de redimensionamento do Photoshop

Com os devidos ajustes de posicionamento (após posicionar a imagem com as alças, pressione ENTER para confirmar), teremos o seguinte resultado:

Posicionamento final da foto da capa do Facebook

Posicionamento final da foto da capa do Facebook

O próximo passo é inserirmos a foto do perfil na área delimitada pelas linhas-guias:

Posicionamento correto da foto do perfil no Facebook com as linhas-guias

Posicionamento correto da foto do perfil no Facebook com as linhas-guias

Com o local correto identificado, insiramos a foto do perfil da mesma forma que fizemos anteriormente, arrastando para dentro do arquivo:

Foto do perfil do Facebook posicionada no wireframe do Photoshop

Foto do perfil do Facebook posicionada no wireframe do Photoshop

Caso queira aplicar alguns filtros na foto, acesse o menu Filter > Filter Galery…  No caso, utilizei as configurações do Brush Strokes:

Aplicação do filtro Brush Strokes

Aplicação do filtro Brush Strokes

E o resultado final deve ser aproximadamente igual a este:

Resultado final da capa do Facebook criado no Photoshop

Resultado final da capa do Facebook criado no Photoshop

Vale lembrar que existem infinitas maneiras de se trabalhar e tratar fotos, imagens, montagens e afins. Está é uma bem simples, rápida e direta, para quem não tem tempo a perder e que otimizar o trabalho de criação.

Passo 5: Exportando as fotos do perfil e da capa para o Facebook

Bem, pessoal, estamos chegando quase ao fim desta primeira parte da série Como Criar Capas para Redes Sociais. Veremos como exportar as imagens para inserirmos no Facebook.

Com a ferramenta Crop Tool… (C), delimitaremos, com base nas linhas-guias, a imagem que comporá a capa do Facebook, com as dimensões 851 x 315 px:

Aplicação da ferramenta Crop Tool na capa do Facebook

Aplicação da ferramenta Crop Tool na capa do Facebook

Quando ajustarmos exatamente as dimensões com a Crop Tool, pressionemos o ENTER para confirmarmos a seleção, obtendo o resultado acima.

Em seguida, vamos salvar a imagem pelo menu File > Save for Web… (ALT + SHIFT + CTRL + S):

Salvando capa do Facebook

Salvando capa do Facebook

Capa “salva”, pressionemos CTRL + ALT + Z para desfazermos o corte feito anteriormente e realizarmos um novo recorte com a foto do perfil, com as dimensões 160 x 160 px:

Recorte da foto do perfil do Facebook

Recorte da foto do perfil do Facebook

Lembremo que após selecionarmos a área com a ferramenta de recorte, devemos pressionar a tecla ENTER para confirmar a seleção.

Salvemos como fizemos com a capa, mas com cuidado de alterarmos as dimensões para 180 x 180 px, que são as dimensões mínimas exigidas pelo Facebook para fotos de perfil:

Salvando foto do perfil do Facebook

Salvando foto do perfil do Facebook

E, ao enviarmos as duas imagens para o Facebook, obteremos o seguinte resultado final:

Capa para Facebook - Resultado Final by CarlosHPS Webdesigner

Capa para Facebook – Resultado Final by CarlosHPS Webdesigner

Passo 6: Criando o template da capa do perfil business do Facebook no Photoshop

Vimos até aqui, como criarmos um template para o perfil pessoal do Facebook. Como os procedimentos e técnicas são as mesmas, serei mais breve, ok?!

Podemos aproveitar o arquivo anterior, salvando-o com outro nome, claro, ou criarmos um novo com as dimensões: 828 x 315 px, linhas-guias horizontais: 0 px, 209 px, 297 px e 315 px; linhas-guias verticais: 0px, 16 px, 104 px, 120 px e 828 px, obtendo o seguinte resultado:

Linhas-guias verticais e horizontais do template

Linhas-guias verticais e horizontais do template

Pronto, agora é só montar a capa para o Facebook:

Capa da página do Facebook CarlosHPS Blog

Capa da página do Facebook CarlosHPS Blog

Para salvar as imagens, separadamente, a técnica de recortar é a mesma. Não esquecendo do detalhe para a imagem do perfil, que, apesar de 88 x 88 px, deve ser salva como 180 x 180 px:

Recorte da foto do perfil da página do Facebook do CarlosHPS Blog

Recorte da foto do perfil da página do Facebook do CarlosHPS Blog

E, como resultado final, teremos:

Página do Facebook do CarlosHPS Blog

Página do Facebook do CarlosHPS Blog

Conclusão do Post: Como Criar Capas para Redes Sociais

Agora que você concluiu este post, você tem em mãos, dois arquivos poderosos para criar com facilidade, capas para as páginas do Facebook.

E, a próxima postagem da série: Como Criar Capas para Redes Sociais, veremos a do Twitter.

Até lá.

CarlosHPS Webdesigner 8)

Série: Como Criar Capas para Redes Sociais

  1. Série: Como Criar Capas para Redes Sociais: Facebook
Item review

Posts Relacionados
Deixe uma resposta
Captcha Clique para atualizar o código