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 puedes diseñar el tuyo. Incluso agregaré una plantilla gratuita para que puedas comenzar de inmediato.
Plantilla gratis!
Antes de profundizar en el artículo, aquí hay una útil 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.
Toma tu PSD gratis: Haga click aquí para descargar.
Cómo usarlo
Para usar esta plantilla, simplemente reemplace la imagen de fondo. El grupo de capas UI está destinado a ayudarlo a obtener 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 fue 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 de perfil más reciente impulsa esta idea a través de flujos de fotos más prominentes y una nueva característica: el encabezado de 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, parece que Twitter se asoció con NBC, por lo que muchos de nuestros ejemplos provendrán de sus distintas cuentas (aún no todos los usuarios han actualizado).
En última instancia, esto no agrega un montón 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 de las que podría tener a medida que se acerca a la construcción de su imagen de encabezado de Twitter.
¿Cómo establecer su encabezado de perfil?
La primera pregunta que debes hacer es, ¿cómo enciendes esto? Si te diriges a tu perfil, parecerá que siempre lo hizo. 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 el? Diseño? pestaña en la barra de navegación del lado izquierdo.
Una vez que esté en la página de Diseño, desplácese hacia abajo hasta ¿Personalizar su propia? sección. Aquí verás un? Cambiar cabecera? botón. Simplemente haga clic en eso y cargue su imagen para establecer su encabezado.
¡Eso es todo al respecto! ¡Ahora solo tienes que decidir qué poner allí!
¿Qué tamaño?
La siguiente pregunta importante que debe hacer 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 desglosa en una proporción de 2: 1 de ancho a alto con un tamaño de carga máximo de 5 MB o 1252 píxeles por 626 píxeles.
Consejos y consideraciones de diseño
El tamaño de la imagen que subas ciertamente no es la única consideración que debes tener en cuenta. He notado algunas peculiaridades que definitivamente necesitas saber si vas a lograr un diseño exitoso.
Mira 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 haría el fondo abstracto perfecto. Aquí está el resultado:
Como puedes ver, es un visual bastante atractivo. Sin embargo, el problema es que está interfiriendo bastante con el texto, y soy una tuerca de legibilidad.
Obviamente, con el texto en blanco, querrás un fondo que esté decentemente oscuro. El mío 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, simplemente 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:
Tornillos de Twitter con su imagen
La gente de Twitter sabe que el truco que utilicé anteriormente, que oscurece la parte inferior de la imagen, es algo que tendrá que hacerse con muchas imágenes. De hecho, el sitio realmente lo hace automáticamente si lo desea o no.
Como prueba, tomé esta imagen y la preparé para el encabezado de Design Shack. Esto es lo que veo en Photoshop:
Ahora, si subo esa imagen como la ve arriba, aquí está el resultado tal como aparece en nuestra página de perfil:
¿Ver la diferencia? Se aplicó automáticamente un degradado de fondo, oscureciendo considerablemente los colores originales. Es un efecto sutil en la mayoría de las fotos, pero cuando te metes en algo con menos detalles, realmente se destaca.
Esto ciertamente no es algo malo, de hecho ayuda a que el texto se destaque, es algo que se debe tener en cuenta al preparar la imagen. Además, tenga en cuenta que Twitter está aplicando 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 en esta área para inspirarnos.
Integre su 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 de cabecera. Brillante. Usted puede esperar ver montones de usuarios que intentan lograr esto de diferentes maneras.
Mostrar su trabajo
Graham Smith, el diseñador de logos favorito de todos, aprovechó la oportunidad para actualizar su perfil de inmediato. Su idea es simple y efectiva: muestra su trabajo en una grilla de logos agradable y discreta.
Coinciden con el perfil de su perfil
Una cosa que debes tener en cuenta cuando estás trabajando en tu imagen de cabecera 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 del mundo rojo compuesto de 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 hace que para un buen aspecto coherente.
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 intenso.
Mantenlo simple
Si tiene problemas para encontrar una buena imagen de encabezado, recuerde tres palabras poderosas: sea sencillo. Incluso aparte de la imagen, hay mucho en este espacio y su objetivo es unirlo todo, no complicarlo demasiado.
En la propia familia extendida de Twitter vemos algunos ejemplos buenos y malos 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 bonito, simple y en realidad bastante llamativo. La mayoría de las imágenes son espacios en blanco (espacio negro en esta instancia), por lo que no hay mucho que interfiera con el texto. El contenido representa un evento cargado de emoción y maravilla para todos nosotros, lo que lo convierte en una experiencia memorable.
¡Muéstrenos el tuyo!
Ahí lo tiene, todo lo que necesita saber para crear la imagen de encabezado de Twitter perfecta. ¡Ahora que has leído mis consejos y has visto una gran inspiración, haz tu propia plantilla con nuestra plantilla gratuita!
Una vez que tengas la imagen de tu encabezado de Twitter lista para usar, deja un comentario debajo con un enlace para que podamos ver lo que se te ocurrió.