Mockup para capa de Facebook
Thiago Souza
04 de junho de 2016
Você já passou por aquele problema de estar fazendo uma capa maravilhosa para sua fan page no facebook, mas na hora de colocar lá sempre fica descentralizada, com o nome em cima das informações, a foto está em cima de algo, sempre é um problema ter que ficar fazendo várias e várias ajeitações em cima de uma arte que já deveria estar pronta não é mesmo?
Já pensou em ter um mockup para fazer sua capa em cima onde contém todas as medidas e lugares onde você pode ou não colocar informações e inclusive ver como ficará no mobile e no desktop tudo na mesma hora?
Pois então, agora você pode ter, e o melhor, DE GRAÇA!
Nós da V4 precisamos, ao longo dos anos, fazer diversas capas, sempre nos deparamos com estes problemas na hora de criá-las, uma informação por trás da imagem, ou metade da informação cortada no mobile, uma chatisse só. Desenvolvemos um simples arquivo no photoshop onde mostra exatamente onde cada coisa padrão fica no mockup do Facebook!
Baixe ele aqui e já se prepare para aprender a usar, é bem simples!
Você perceberá que neste arquivo você tem o texto auxiliar, as linhas (ative por CTRL + 😉
1- Altura do perfil: A imagem de perfil está demarcada como 1, assim você sabe exatamente aonde que vai bater a linha do layout do Facebook na hora de fazer a sua capa
2- Limites Mobile: A capa no mobile ela tem um tamanho, horizontal, menor, o número 2 marca exatamente os limites do mobile, assim você sabe onde enquadrar suas informações para que as mesmas fiquem bem transmitidas em todas as plataformas.
3- Altura perfil mobile: Mesma ideia do número 1, só que para mobile
4 e 5: Lados dos perfis, no 1 você sabe aonde fica marcado a altura, no 4 e 5 você saberá onde marcam as laterias das fotos de perfil, desktop e mobile respectivamente.
6- Call to Action: Exata altura do botão de Call to Action na page do Facebook.
7 e 8- Exatas alturas dos nomes das pages, desktop e mobile respectivamente.
Agora que você sabe o que cada um significa, vamos entender como usar, é beeem simples! 😉
Ao abrir você verá as linhas demarcando, os números identificando cada uma e as legendas, tudo isso é auto-explicativo, porém, eu ainda coloquei várias camadas (que estarão invisíveis) para que você possa testar com a sua capa e sua page, todas elas tem o exato número que se encontra com a legenda.
Basta que você faça sua capa normalmente, recomendo que utilize o dobro da resolução do Facebook, ficando assim 851 x 315 * 2 = 1702 x 630, faça ela e depois apenas jogue para dentro do mockup aqui baixado para você ver se está tudo certo, isso lhe poupa um tempão de ter que ir dar upload e testar, podes também fazer direto em cima do muckup, que está feito nas resoluções acima citadas!
Acredito que a partir daqui você conseguirá seguir sozinho, qualquer dúvida entra em contato com a gente que teremos o maior prazer de explicar tudo!
Obrigado! 😉
Segue alguns links para recursos de design que podem lhe ajudar:
