Cómo diseñar la imagen perfecta de encabezado de Twitter
Twitter lanzó recientemente un diseño actualizado para las páginas de perfil, que le permite insertar una nueva "foto de encabezado" que se encuentra en la parte superior de su feed, al igual que la imagen de portada de la línea de tiempo de Facebook.
Hoy vamos a sumergirnos y ver algunos ejemplos de buenas imágenes de perfil de Twitter y discutir cómo puede diseñar el suyo propio. Incluso agregaré una plantilla gratuita para que pueda comenzar de inmediato.
Explore los elementos de Envato
Plantilla gratis!
Antes de sumergirnos en el artículo, aquí hay una práctica plantilla gratuita que puede usar para diseñar su propia imagen de encabezado de Twitter. El archivo proporcionado es un PSD creado en Photoshop CS6.
Tome su PSD gratis: haga clic aquí para descargar.
Cómo usarlo
Para usar esta plantilla, simplemente reemplace la imagen de fondo. El grupo de capas de la interfaz de usuario está destinado a ayudarlo a tener una buena idea de cómo se verá la imagen una vez que se implemente en el sitio. Oculta las capas agrupadas antes de guardar.
Conoce el nuevo perfil de Twitter
Érase una vez, Twitter era un servicio centrado en el texto. En estos días, buscan constantemente mejorar la experiencia visual mediante la integración de funciones y soporte multimedia.
El rediseño más reciente del perfil impulsa esta idea a través de transmisiones de fotos más destacadas y una característica completamente nueva: el encabezado del perfil de Twitter.
Como puede ver, esta nueva imagen se encuentra en la parte superior de sus tweets recientes y contiene su imagen de perfil, así como un breve texto sobre usted. Para ayudar a lanzar los nuevos perfiles, Twitter parece haberse asociado con NBC, por lo que muchos de nuestros ejemplos serán de sus diversas cuentas (no todos los usuarios se han actualizado todavía).
En última instancia, esto no agrega una tonelada de trabajo de diseño a su perfil, es simplemente una imagen adicional. Sin embargo, incluso una pequeña imagen puede traer muchas preguntas, así que estoy aquí para responder algunas que pueda tener a medida que se acerca a construir su imagen de encabezado de Twitter.
¿Cómo se configura el encabezado de su perfil?
La primera pregunta que seguramente te harás es, ¿cómo enciendes esto? Si te diriges a tu perfil, se verá como siempre. Actualmente, los usuarios que no hayan configurado una imagen de encabezado conservarán el diseño anterior.
Para actualizar su perfil, haga clic en el engranaje de Configuración en la parte superior derecha de la página. Desde aquí, haga clic en la pestaña "Diseño" en la barra de navegación del lado izquierdo.
Una vez que esté en la página Diseño, desplácese hacia abajo hasta la sección "Personalice su propio". Aquí verá un botón "Cambiar encabezado". Simplemente haga clic en eso y cargue su imagen para configurar su encabezado.
¡Eso es todo al respecto! ¡Ahora solo tienes que decidir qué poner allí!
¿Qué tamaño?
La siguiente pregunta importante que debe hacerse al diseñar el encabezado de su perfil es: "¿Qué tamaño?" Si echamos un vistazo a las imágenes de NBC que Twitter sin duda ayudó personalmente a configurar, vemos que el tamaño es de 520 px de ancho por 260 px de alto.
En última instancia, esto se descompone en una relación 2: 1 de ancho a alto con un tamaño máximo de carga de 5 MB o 1252 píxeles por 626 píxeles.
Consejos de diseño y consideraciones
El tamaño de la imagen que cargue ciertamente no es la única consideración que debe tener en cuenta. He notado algunas peculiaridades que definitivamente debes saber si vas a lograr un diseño exitoso.
Cuida tu legibilidad
Para experimentar con el espacio en mi cuenta personal, tomé una foto al azar que tomé de una pantalla digital en la ciudad de Nueva York. Parecía que sería el fondo abstracto perfecto. Aquí está el resultado:
Como puede ver, es una imagen bastante atractiva. Sin embargo, el problema es que está interfiriendo bastante con el texto, y soy un loco de legibilidad.
Obviamente, con el texto blanco, querrás un fondo que sea bastante oscuro. La mía se ajusta a esta descripción, pero las luces sirven como puntos brillantes que reducen el contraste entre las letras y el fondo y agregan demasiadas distracciones.
La solución aquí es bastante simple, solo oscurecí ese fondo donde se encuentra el texto para que las luces no interfieran tanto. El resultado no es tan bueno visualmente, pero es mucho más legible:
Twitter se mete con tu imagen
La gente de Twitter sabe que el truco que utilicé anteriormente, oscurecer la parte inferior de la imagen, es algo que tendrá que hacerse en muchas imágenes. De hecho, el sitio lo hace automáticamente, lo desee o no.
Como prueba, tomé esta imagen y la preparé para el encabezado Design Shack. Esto es lo que veo en Photoshop:
Ahora, si subo esa imagen como la ves arriba, aquí está el resultado tal como aparece en nuestra página de perfil:
¿Ver la diferencia? Se ha aplicado automáticamente un degradado de fondo, oscureciendo considerablemente los colores originales. Es un efecto sutil en la mayoría de las fotos, pero cuando entras en algo con menos detalles, realmente se destaca.
Esto ciertamente no es algo malo, de hecho ayuda a que el texto se destaque, es solo algo a tener en cuenta al preparar su imagen. Además, tenga en cuenta que Twitter aplica automáticamente esquinas redondeadas tanto al perfil como a la imagen del encabezado.
Consejos de diseño
Ahora que sabemos todo sobre cómo crear y aplicar nuestra imagen, echemos un vistazo y veamos qué están haciendo los demás con esta área para inspirarse.
Integra tu imagen de perfil
Uno de los mejores que he visto hasta ahora es el de Ryan Seacrest. Me encanta la integración de la foto de perfil en la imagen del encabezado. Brillante. Puede esperar ver toneladas de usuarios tratando de lograr esto de diferentes maneras.
Muestra tu trabajo
Graham Smith, el diseñador de logotipos favorito de todos, aprovechó la oportunidad para actualizar su perfil de inmediato. Su idea es simple y efectiva: muestra su trabajo en una cuadrícula de logotipos agradable y discreta.
Coincide con su fondo de perfil
Una cosa a tener en cuenta cuando trabajas en tu imagen de encabezado es que en realidad es parte de un diseño mayor y debería ir bien con tu imagen de fondo.
Vemos esto bien hecho en la cuenta de noticias de última hora a continuación. La imagen del encabezado es un mapa mundial rojo formado por píxeles.
Esta es en realidad la misma imagen que usaron en el fondo de la página, solo que más pequeña y en un color diferente. Esto lo convierte en un aspecto agradable y consistente.
Me encanta cómo el fondo grande es la versión más sutil, mientras que la imagen del encabezado realmente llama tu atención con un color llamativo.
Mantenlo simple
Si tiene problemas para encontrar una buena imagen de encabezado, recuerde tres palabras poderosas: que sea simple. Incluso aparte de la imagen, están sucediendo muchas cosas en este espacio y su objetivo es unir todo, no complicarlo demasiado.
En la propia familia extendida de Twitter vemos algunos buenos y malos ejemplos de esto. El cofundador de Twitter Evan Williams definitivamente ha elegido mal con un gráfico que está demasiado ocupado para este espacio.
Compare esto con la imagen utilizada por el creador de Twitter Bootstrap, Mark Otto. Su elección es mucho mejor:
Esto es agradable, simple y en realidad bastante sorprendente. La mayor parte de la imagen es un espacio en blanco (espacio negro en este caso), por lo que no hay mucho que interfiera con el texto. Sin embargo, el contenido representa un evento cargado de emoción y asombro para todos nosotros, lo que lo convierte en una experiencia memorable.
¡Muéstranos la tuya!
Ahí lo tienes, todo lo que necesitas saber para crear la imagen de encabezado de Twitter perfecta. Ahora que ha leído mis consejos y ha visto una gran inspiración, ¡vaya a hacer los suyos con nuestra plantilla gratuita!
Una vez que tenga su imagen de encabezado de Twitter lista para usar, deje un comentario a continuación con un enlace para que podamos ver qué se le ocurrió.
