El uso de combinaciones de texto e imágenes es mucho más habitual de lo que puede parecer. Lo primero que nos llega a la cabeza pueden ser los típicos banner de publicidad de productos, pero va mucho más allá. Puede servir para posicionar tu logotipo en la cabecera de tu web con tu fotografía favorita. O para enviar un mensaje de una forma más visual a tus usuarios o clientes.
Y aunque en un primer momento pueda parecer algo sencillo, para que realmente funcione hay que tener en cuenta diferentes variables. Porque un mal uso de esta combinación puede hacer que nuestro logo no sea legible. O que el mensaje que queramos trasmitir no llegue de forma correcta. Aparte de que, si entramos en el aspecto visual, queramos conseguir una disposición de imagen y texto agradable a la vista.
Por estos motivos, nos lanzamos a hacer este artículo. Porque seguro que habéis visto combinaciones de texto y fotografías que no cumplían su función. Con todo lo que ello supone para nuestra marca personal, o para nuestra empresa.
Además de los consejos que queremos enseñaros en esta ocasión, no queremos olvidarnos de recomendaros otros artículos que hemos visto anteriormente en Silo Creativo. Por ejemplo, el texto que dedicamos en exclusiva a la regla de tercios y su aplicación, tanto en diseño gráfico como en diseño web. O aquel en que que dimos algunos principios con los que mejorar nuestros diseños, con ejemplos prácticos del mundo de la publicidad, el cine o el arte.
Para hacer este artículo hemos hecho uso del catálogo de fotografía disponible en Unplash. Unplash es un repositorio gratuito de fotografías, con más de medio millón de imágenes, todas ellas de gran calidad.
Y como no todo es las imágenes que vayamos a usar, también es importante tanto el texto como el tipo de fuente que elijamos. Os recomendamos que echéis un vistazo a alguno de los artículos que tenemos sobre nuestras tipografías favoritas. O también sobre las mejores combinaciones de fuentes, si tenemos pensados diferentes niveles de texto. Aunque si prefieres rebuscar entre colecciones de tipografías, siempre puede ir a Google Fonts, donde encontrarás cientos de ellos, todas de uso gratuito.
Sin más, vamos a meternos de lleno en nuestras recomendaciones. Este listado es mucho más amplio, pero queremos mostraros algunas de las más interesantes y fáciles de aplicar.
Pon un toque de color en tu texto
Añadir un color diferentes a ciertas palabras del texto puede funcionar de dos formas distintas. Si usamos un color opuesto al del fondo, le estamos dando mucha importancia a esa palabra
, dándole al fondo una protagonismo muy secundario.
Mientras que si decidimos poner un tono parejo al del fondo, dotamos al conjunto de mucha suavidad, dando un aspecto más amable y compensado entre todos los elementos de nuestra composición.
Desenfoca el fondo de tu imagen
De las más sencillas de realizar. Damos importancia al texto aplicando un desenfoque a la imagen. Jugando con estas variables, podemos dar lugar a varios escenarios. Por una parte, una fotografía totalmente desenfocada, donde el punto de interés es el propio texto. O por otra, que los únicos objetos enfocados sean el texto y un único algún componente de la imagen.
Este último caso suele darse cuando, por ejemplo, en banner de publicidad, cuando lo interesante es dar importancia a una única pieza, y al texto que la acompaña. Aunque podemos aplicarla en diferentes circunstancias.
Dale un tintado de color a tu imagen
Aunque es difícil de encontrar su punto intermedio, una vez que lo consigamos, este efecto es de los más estimulantes. Y es que hay que lograr un equilibrio entre que se note el color que estemos usando, que se vea la fotografía de fondo, y que el contraste con el texto sea suficiente. Pero cuando lo consigamos, el resultado es espectacular. Muy recomendable usar con el color de nuestra marca.
Si queremos ir un paso más allá, podemos pasar de un color plano a un gradiente. Y es que los gradientes son una de las tendencias en el diseño de este año. Eso si, estudia bien los colores a combinar para que tu composición tenga un aspecto agradable.
Añade contraste entre texto e imagen
Uno de los aspectos a tener en cuenta es que nuestro texto sea legible. Esto lo conseguiremos si el color de nuestro texto es lo suficientemente contrastado con respecto al fondo. Además, con esto nos aseguramos que las personas con algún déficit visual tengan problemas el ver nuestras composiciones. Al respecto de esto, la accesibilidad es un tema que siempre deberíamos tener en cuenta, tal y como te contamos en uno de nuestros artículos.
Y con contraste no solo nos referimos a la diferencia de color, sino también a su tamaño. Una fuente muy pequeña puede resultar ilegible o pasar desapercibida. Al igual que un texto que tenga una tipografía muy fina. Si nuestro texto no se lee, no será capaz de transmitir su mensaje.
Haz que el texto sea parte de la imagen
De esta lista, quizás sea el punto que más me gusta. Porque no es simplemente colocar el texto y fin. Hay que analizar la fotografía y todos sus elementos, descubrir los diferentes planos y colores. Y desde este punto, ver como podemos encajar el texto dentro de la imagen.
Uno de mis ejemplos favoritos son los títulos de inicio de Panic Room, de David Fincher. En el vídeo, podemos ver como la tipografía, recreada digitalmente sobre el plano de la ciudad, toma las perspectivas de la imagen, se refleja en los edificios, o da sombra a los viandantes. Es un elemento externo que forma parte del fondo.
Enmarca tu texto
En algunas ocasiones nos enfrentamos con una fotografía con multitud de colores, donde es complicado hacer que nuestro texto resalte. Por lo que una de las opciones que tenemos es, además una de las más sencillas. Y no es mas que colocar una forma de color justo debajo del texto.
No nos llevemos a engaño con el título que hemos puesto. Esta forma no tiene porque ser necesariamente rectangular. Podemos hacer un círculo u otra forma poligonal. Y si notamos que el contraste es demasiado grande, siempre tenemos la opción de dotar a esta forma de cierta transparencia para que muestre un poco el fondo, y se integre algo mejor en la composición general.
Como veis, las opciones son múltiples. Combinadas con nuestros conocimientos previos que tenemos sobre encuadres y tipografías, harán que nuestras imágenes con texto sean mucho más atractivas y visuales.
Como siempre, tenéis abiertos los comentarios para cualquier apreciación que queráis decirnos. O si tenéis alguna otra idea sobre combinación de imagen y texto que sepáis, nos la podéis comentar y las añadimos al artículo!
Que herramienta online o descarga recomiendas para realizara de manera práctica las composiciones de imagen y texto. Saludos…
La más conocida y usada posiblemente sea Photoshop, aunque actualmente uso Affinity Photo, que cumple ampliamente con mis necesidades. Ambas son de pago, Photoshop con un modelos de Suscripción, y Affinity Photo mediante el pago de licencia de por vida.
Si nos vamos a herramientas gratuitas, tienes Gimp o Krita, que son OpenSource, o Paint.net.
Todas las que he listado son para instalar en tu equipo de trabajo. Sobre las disponibles como aplicaciones web, las más usadas son Pixlr Editor y Photoshop Express Editor. Aunque personalmente, prefiero instalar estas aplicaciones de forma nativa en mi equipo de trabajo, ya que la mayoría de estas herramientas web tienes menos opciones que sus versiones de sobremesa, y no estan tan optimizadas.
Espero que te haya servido de ayuda. Y gracias por comentar!
Hola, ante todo muchas gracias por la información. Yo estoy buscando un banco de imágenes gratuitas pero que sean dibujos o vectores para luego editar en photoshop. Gracias
Hola Erosalva!
Pues sobre en un SiloMag hablamos sobre ese tipo de páginas. En concreto sobre unDraw, que tiene una gran cantidad de ilustraciones que puedes usar de forma gratuita. Personalmente, también me gusta mucho el estilo del banco de ilustraciones de Ouch!, que puedes descargar sin coste alguno en formato .png, y en .svg por una suscripción mensual.
Espero que te haya servido de ayuda. Un saludo!
Muy interesante.