Consejos y base PSD para configurar el nuevo header o encabezado de Twitter

———- ACTUALIZACIÓN ———-

Este método ya no es válido para el actual diseño de Twitter

———- FIN ACTUALIZACIÓN ———-

El 18 de septiembre, Twitter introdujo sin previo aviso los nuevos encabezados de perfiles, lo que en parte nos recuerda a las portadas de Facebook o de Google+. Pero… ¿qué directrices debemos tener en cuenta a la hora de diseñar nuestra nueva imagen de perfil?

Nota: Al final del artículo he dejado un PSD con la base sobre la cual trabajar, con guías de referencia para el avatar y capas de ayuda.

 

Medidas

A la hora de subir la imagen, Twitter nos recomienda que la resolución mínima es de 1252×626 y el peso máximo no puede superar los 5 Mb, pero no deberíamos olvidar otras recomendaciones menos evidentes.

 

Degradado superpuesto

Independientemente de la imagen que subamos, Twitter añadirá encima un degradado que pasa del transparente en su parte superior, a un gris #747474, por lo que siempre debemos contar con ello a la hora de diseñar cualquier tipo de imagen:

 

Web

En la web, la imagen que carga es un reescalado de la original, concretamente a resolución de 520×260 pixels, lo cual hace que si subimos texto o imágenes de alta definición, quede algo pequeño y no facilite su lectura.

 

iPad

Al ver ese mismo perfil desde un tablet iPad, la imagen se reescala a 626×313 pixels, lo cual sigue siendo un reescalado de la mitad del ancho, provocando de igual manera que un posible texto quede demasiado ilegible si en la imagen original tiene un tamaño ajustado.

 

Móvil

Cuando el perfil sea cargado desde un smartphone, el fondo se reescalará a unos reducidos 320×160 pixels, lo que imposibilitará enormemente la correcta visualización de una imagen si tiene muchos detalles, y mucho menos de cualquier texto.

 

¿Entonces?

Según me comenta @_mhiguera, el cree que la resolución mínima que nos pide Twitter a la hora de subir una imagen de cabecera puede deberse a que esté preparada para mostrarse en pantallas de alta resolución como las Retina de Apple. También sospecho que se mostrarán en grandes pantallas en un futuro, tras un futuro rediseño adaptativo de la web de Twitter.

 

Base PSD para cabecera

Con el fin de ayudaros en el diseño, os he dejado un PSD con la base de resolución mínima para un header, así como unas guías que delimitan dónde queda superpuesta la imagen del avatar, por si queréis utilizarlo como parte del diseño de la cabecera.

También os trae un par de capas útiles. Si activáis la capa «Base gris Twitter» y ésta se encuentra sobre vuestro diseño, veréis un previo de cómo quedaría una vez que la subáis a Twitter. Si activáis la capa «Gris opuesto» (con la capa «base gris Twitter» desactivada), se creará un efecto de «compensación» del gris que superpondrá Twitter, obteniendo un efecto de simetría:

 

Descargar PSD

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Ir arriba