Medidas y tamaños de la portada de facebook, twitter y youtube en el 2015.
Como empresarios, Vlogers o Blogers la portada de nuestras redes sociales nos parece un elemento importante puesto que es en muchos casos lo primero que el prospecto ve de nuestra empresa. Por desgracia no siempre conocemos los tamaños óptimos ni cuidamos lo que se verá o no en las tablets, los celulares o las laptops. Si tu eres un empresario que se preocupa por tener una imagen profesional y sabes lo básico de Photoshop, este artículo será justo lo que estabas buscando.
[sociallocker id=3062]Descarga Adobe Photoshop CC (Versión 2015) dando clic aquí.[/sociallocker]
No te preocupes por los detalles, te voy a dar las guías en Photoshop y en png para que tu portada de facebook, youtube o twitter queden perfectas. Estas guías son de mi autoría y las puedes descargar gratis en el link que viene al final del párrafo de cada red social.
Como un plus, también te voy a dar las guías con los tamaños para tus imágenes en facebook y twitter.
Medidas para las imágenes de las redes sociales.
Cada red social tiene sus medidas para la portada. Youtube y twitter, por ejemplo, tienen aplicaciones para ser vistas en las smart tv, por lo que nuestra portada debe tener una medida suficientemente grande para que no se pixelee pero no tan grande como para que exceda el peso permitido.
Comencemos por el avatar. Primeramente aclaremos a qué me refiero con este término. El avatar es la imagen que te identifica, es la que las personas verán cuando interactúes, comentes o des like a algo. También se le llama foto de perfil. Generalmente es un cuadro o círculo y viene acompañado de tu nombre.
Interfaz gráfica de la app para treadtreaning, diseño por EsBrillante.
La medida ideal de la foto de perfil para facebook, twitter, google + y youtube es básicamente la misma, un cuadrado de unos 400px.
Estas son las medidas de la portada de facebook del 2015:
La zona en rojo es la zona segura para poner datos como el teléfono de contacto. Lo que pongas en esta zona se verá desde los smartphone, tablets, computadoras y laptops. En este caso el diseño se debió cambiar ya que el teléfono estaba fuera de la zona segura y no se veía bien en computadoras de escritorio.
Como podemos observar en las computadoras hay un espacio donde se pone el nombre de tu fanpage, con la zona segura podrás evitar que tus datos queden debajo de ese nombre.
Diseñado por: EsBrillante
Con el archivo que te proporciono para que lo descargues gratis ya no tendrás que preocuparte por la resolución.
Tip para que tu portada de facebook no se vea borrosa: Te recomiendo que tu imagen pese menos de 100kb para que facebook no le aplique compresión. Una forma sencilla de saber el peso y bajarlo en photoshop es oprimiendo crtl+alt+shift+s. Eso sí, el peso depende de los colores que tenga la imagen.
La guía del tamaño de la portada de facebook en png es esta:
Para darte una mejor idea de cómo usar la guía, te recomiendo compararla con la imagen de la pelirroja y la cafetera que está más arriba en este artículo.
[sociallocker id=3062]Descarga gratis la guía en photoshop para la portada de facebook y las demás redes dando clic aquí.[/sociallocker]
Te has preguntado ¿Cómo lograr que la portada de facebook coincida con la foto de perfil?
Para facebook adicionalmente compartimos la guía de coincidencia 😀 esta guía es muy especial porque sirve para que tu avatar y tu portada en facebook coincidan perfectamente.
A la hora de guardar tu portada, apaga la capa que tiene el avatar, recorta la imagen al tamaño de la portada, oprime crtl+alt+shift+s y trata que tu imagen pese menos de 100kb para que se vea nítida en facebook. El avatar también está en el tamaño real para que lo recortes, lo guardes y uses.
Observa cómo con la zona segura puedes tener la certeza de que los datos que quieres que las personas vean queden dentro de la pantalla de cualquier dispositivo (como en este caso la dirección de la página web):
Diseño por: EsBrillante
Como te dije al principio, tenemos un complemento especial. Esta es la medida de las imágenes para facebook. Te recomendamos unos 800x800px para que tus fotos sean nítidas tanto en la computadora como en el celular.
Estas son las medidas de la portada de twitter del 2015:
Esta imagen debe ser muy grande porque se puede ver en las smat tv. La zona en rojo intenso es la zona segura para poner datos como tu página web. Lo que pongas en esta zona se verá desde un smartphone, tablet, computadora o laptop sin ser cubierta por el avatar. Como puedes notar hay una zona roja mucho menos intensa, esto se debe a que toda esa zona es visible en cualquier dispositivo, sólo que queda debajo de la foto de perfil. Te recomiendo que aunque no pongas datos en esa parte del diseño, sí pongas alguna imagen o color para que tu portada de twitter no se vea vacía.
[sociallocker id=3062]Descarga gratis la guía en photoshop para la portada de twitter y las demás redes sociales dando clic aquí.[/sociallocker]
La guía de la medida de la portada de twitter en png es esta:
Usando esta guía, nuestra portada en computadoras de escritorio se ve de la siguiente manera:
En una smart tv el diseño se vería completo y nítido.
Tamaño de imágenes para twitter:
Si estás acostumbrado a compartir las mismas imágenes en twitter y en facebook, toma en cuenta que sólo será visible de primera mano la parte de en medio del diseño.
Imagen original con tamaño para facebook
Estas son las medidas de la portada de youtube del 2015:
Esta imagen es de gran tamaño para verse nítida desde las smat tv. La zona en rojo intenso es la zona segura para poner una promoción o algún texto. Lo que pongas en esta zona se verá en todos los dispositivos (smartphone, tablet, computadora, laptop, …). Esta vez pongo diferentes zonas rojas para diferentes dispositivos. Es muy importante que tengas imágenes en todas las zonas para que el diseño se luzca en cada dispositivo que lo vean, en especial si lo ven desde un televisor.
[sociallocker id=3062]
Descarga gratis la guía en photoshop para la portada de youtube y otros sitios sociales dando clic aquí.
[/sociallocker]
Esta es la guía de las medidas de la portada de youtube en png:
Siguiendo esa guía, la portada se ve de esta manera en una PC:
Y bien, esto ha sido todo, próximamente tendremos para ti un tutorial de cómo puedes hacer tu portada si no sabes usar photoshop, ¡suscríbete para que no se te pase! 😀
Ivan dice
Perfecto me sirvió de mucho 🙂
Melisa Carvantes Barrera dice
¡Qué bueno! Me alegra que te haya funcionado, tenemos más recursos para creativos en el blog 🙂
Usiel Vargas Reyes dice
Gracias, he diseñado algunas de manera rudimentaria pero siempre es bueno conocer lo que se esta haciendo, me refiero en cuanto a medidas especificas. Buen post, saludos. 🙂
Melisa Carvantes Barrera dice
Qué bien que te sirva 🙂
¡Gracias!