Cómo combinar texto e imágenes para crear una composición atractiva

¿Te has preguntado alguna vez cómo combinar texto e imágenes en tu diseño y conseguir un acabado profesional? En esta ocasión te voy a mostrar cómo lograr combinar texto e imágenes para despertar la curiosidad de tu público y conseguir que se interesen por tu contenido.

Para que el texto y la fotografía consigan comunicar de forma eficiente, atractiva y legible no es suficiente con colocar el texto cerca de la imagen sin seguir ningún criterio. Cuando escojas una fotografía tendrás que barajar varios aspectos para encontrar el lugar idóneo donde colocar el texto. En más de una ocasión tendrás que realizar ajustes para que el texto resalte ya que la heterogeneidad de la imagen puede dificultar la lectura. Te he dejado también un breve vídeo explicativo donde te muestro cómo aplicar estas técnicas.

Además, en el siguiente punto te diré dónde conseguir un montón de recursos de diseño de calidad tanto de pago como gratuitos. ¿Estás preparad@?

1. Combinar texto e imágenes

Cómo conseguir contraste en imágenes homogéneas

Para realizar una composición de texto e imágenes de forma óptima es necesario conseguir el contraste, de manera que las características de ambos elementos (imagen y texto) se complementen y resalten. A continuación te voy a mostrar diferentes técnicas para combinar texto e imágenes correctamente y lograr el contraste en las composiciones. Aunque existan otras variables, el contraste es la más importante a la hora de conseguir que el texto sea legible y destaque. En las líneas siguientes te muestro cómo crear composiciones cuando las imágenes presentan zonas de contraste completo o parcial.

Contraste completo

Combinar texto e imágenes

La composición imagen-texto presenta un contraste completo cuando la imagen mantiene un tono más o menos uniforme y sobre ella colocamos un texto que destaca de manera clara. En estos casos es muy sencillo acomodar el texto. En esta fotografía los granos de café mantienen un tono oscuro bastante uniforme que se puede aprovechar para realizar un contraste completo con una tipografía clara. He utilizado una fuente que se adapta muy bien al contexto y el color blanco para el texto.

Contraste parcial

Combinar texto e imágenes

En esta fotografía la zona más optima para colocar el texto es el cielo, ya que es mucho más uniforme que la zona de la montaña. En este caso podemos apreciar una composición de contraste parcial, dado que la imagen no es totalmente uniforme como en el caso anterior, y el contraste lo conseguimos utilizando sólo una parte de la fotografía. Además, he aprovechado para darle otro toque utilizando la zona de la montaña para darle color al texto.

Cómo conseguir contraste en imágenes heterogéneas

Ya has visto cómo es posible acomodar el texto en una fotografía buscando las zonas más homogéneas para conseguir el contraste. ¿Pero qué ocurre si la fotografía no es uniforme en absoluto? En esas ocasiones en las que el contraste no es posible porque la imagen es muy heterogénea, tendrás que crear tú ese contexto. Seguidamente te muestro algunas técnicas.

Capa superpuesta

Observa la siguiente composición:

Poco contraste

A simple vista se puede apreciar cómo la diversidad de elementos que componen la imagen dificulta encontrar un espacio uniforme donde colocar el texto. Esto provoca que al escribir el texto el contraste sea mucho menor y en algunas zonas no se definan del todo bien los contornos de las letras.

Para obtener un contraste mayor, coloca una capa translúcida superpuesta entre el texto y la foto. La capa en este caso es de color negro casi transparente, tendrás que ajustar el porcentaje de opacidad según lo necesite la fotografía. En este caso, 32% es más que suficiente.

Contraste mejorado

Mucho mejor, ¿no crees?

Desenfoque

Otra técnica para lograr contraste consiste en desenfocar la imagen. De esta forma el texto gana protagonismo, y la imagen queda en un segundo plano. En ocasiones, desenfocar la imagen no será suficiente para lograr el contraste idóneo. En estos casos lo mejor es añadir además una capa translúcida superpuesta entre el texto y la imagen (la técnica usada en el caso anterior). En la siguiente imagen la máscara es de color negro con la opacidad al 8%, suficiente para resaltar el texto.

combinar texto e imágenes

Figuras geométricas

Utilizar figuras geométricas para acomodar el texto dentro y lograr así el contraste deseado es una forma original y creativa de formar una composición sobre imágenes heterogéneas. En este diseño he escogido una tipografía adecuada para una cafetería y una fotografía de un local con un diseño fresco y moderno.

Figuras geométricas

En el siguiente ejemplo puedes ver otra forma original de utilizar las figuras geométricas para lograr contraste. He introducido el texto dentro de un rectángulo con un fondo negro translúcido y he extraído el color ocre de la fotografía para aplicarlo al título.

Combinar texto e imágenes

Aquí te dejo un vídeo donde te enseño a aplicar estas técnicas con un software llamado Canva para principiantes:

Después de ver el vídeo podrás combinar texto e imágenes como un auténtico profesional.

2. Recursos y herramientas de calidad

Si quieres resultados profesionales utiliza herramientas de calidad. No es necesario que te dejes el sueldo comprando recursos ?. Hay un montón de sitios donde descargar material gratuito, aunque en algunas ocasiones tendrás que invertir un poco para encontrar recursos de mayor calidad.

Tipografías

Tipografías gratuitas

Es importante que escojas bien las tipografías. Asegúrate de que tengan cuerpo, que no dificulten la lectura y que sean adecuadas para cada tipo de contexto. Puedes obtener un montón de tipografías gratuitas de varias fuentes. Google ha realizado un trabajo excepcional reuniendo tipografías gratuitas en el llamado Google Fonts. Otra opción es Fontsquirrel, que al igual que Google Fonts también pone a tu disposición un amplio catálogo. Aquí tienes los enlaces:

Google fonts:

Recursos tipográficos

Tipografías de pago

Si necesitas tipografías profesionales, sin duda las vas a encontrar en creativemarket.com/fonts. Antes de comprar alguna tipografía asegúrate de que venga con tildes y con la ñ. Creativemarket te permite realizar un test con la tipografía seleccionada antes de hacer la compra, como puedes ver en la siguiente captura.

Test tipográfico

Bancos de imágenes

? ¡No descargues imágenes directamente de Google! ?.Las imágenes que encuentres en Google no serán tan buenas como las que puedes encontrar en los bancos gratuitos de imágenes, y además, puede que contengan copyright. En los bancos de imágenes encontrarás fotografías de calidad y en alta resolución.

Banco de imágenes gratuitas (Creative Commons CC0)

Banco de imágenes de pago

En creativemarket.com/photos puedes encontrar fotografías profesionales a partir de 2€. Es mi sitio preferido para adquirir recursos gráficos, y es más, a los usuarios suscritos nos regalan recursos todos los lunes.

La segunda opción son los bancos de imágenes más populares. Aunque su precio es un poco más elevado, la cantidad de fotografías dedicadas a todo tipo de negocios es espectacular:

Nota importante: Cuando realices tus diseños no olvides reducir el peso de las imágenes antes de subirlas a tu página web. Si no quieres que tu web funcione con lentitud tendrás que poner tus imágenes “a dieta” con herramientas de compresión de imágenes. Escribí un artículo sobre cómo optimizar la velocidad de carga de una web, donde dedico un apartado a la compresión de imágenes. En el vídeo que acompaña al post explico varias técnicas para reducir el peso de las imágenes (a partir del minuto 2:37).

Software de diseño gráfico

Para realizar estos diseños vas a necesitar herramientas de diseño gráfico. Photoshop fue una vez el estándar, y aunque aún mantiene cierto standing, le han salido muchos competidores. Su oponentes no lo están haciendo nada mal, de hecho yo, al igual que muchos diseñadores, hace tiempo que dejé de utilizar Photoshop por otro software. A continuación te hablo de varias alternativas.

Software gratuito

Gimp: es sin duda la mejor alternativa gratuita que existe para retoque fotográfico. La interfaz es un poco arcaica, pero aún así es un software perfectamente capaz de realizar casi las mismas tareas que Photoshop.

gimp.org

Inkscape: es uno de los programa de diseño gráfico vectorial más potente dentro del mundo del software libre. Hay ilustradores que hacen verdaderas maravillas con este software gratuito.

inkscape.org

Canva: Es un software online de diseño gráfico enfocado a principiantes. El vídeo explicativo que he realizado para que veas cómo combinar texto e imágenes y que aparece más arriba está realizado con este software.

Software de pago

Affinity Photo: por 43,99€ es, en mi humilde opinión, la opción más competente y económica que puedas encontrar. La interfaz es muy parecida a la de Photoshop y es casi igual de potente. Esta disponible para Mac, Windows y iPad.

https://affinity.serif.com/en-gb/photo/

Affinity Designer: es la alternativa a Adobe illustrator, y su precio es el mismo que el de Affinity Photo. Este software de edición vectorial no le tiene nada que envidiar a Illustrator; es más, creo que en algunos aspectos lo supera.

https://affinity.serif.com/en-gb/designer/

Pixelmator (Mac): aunque sólo cueste $29.99, que no te engañe su precio, ya que su potencial es mayúsculo. Su interfaz es muy sencilla de utilizar y es perfecto para aquellas personas que empiezan. Su original diseño les llevó a ganar el premio Apple Design Awards en el 2011.

www.pixelmator.com/mac/

Sketch (Mac): este último está más enfocado al diseño de interfaces, aunque con él también es posible realizar los diseños que has visto en este post. Su precio es bastante más elevado, unos $99. Considero que es un precio asequible para lo que esta herramienta es capaz de realizar. Lo utilicé en una ocasión para diseñar el boceto de esta página web y quedé fascinado por su potencial.

www.sketchapp.com

3. Recursos y herramientas mencionados en este artículo

Tipografías

Bancos de imágenes

Software de diseño gráfico

Y esto es todo lo que te quería aportar en el artículo de hoy. Espero que te haya gustado y te sea útil. Ahora ha llegado tu turno, participa en los comentarios:¿te han parecido interesantes las técnicas?, ¿vas a utilizarlas en tus próximos proyectos?, ¿qué te ha parecido el post?

Nos leemos en los comentarios. ?

6 comentarios en “Cómo combinar texto e imágenes para crear una composición atractiva

  1. Hola Victor,
    La realidad es que consumimos lo que vemos, comida, libros, internet..

    y lograr una combinación equilibrada en una imagen nos permitirá lograr un plus adicional sobre los demás.

    Excelente post y muy bien explicado y mi me ha dado luces para el refrescamiento de mi marca y blog

    Saludos

  2. Hola Joel,

    Me alegra verte por aquí y que te haya gustado el post. Seguro que lograrás los resultados esperados cuándo lo apliques en tu proyecto.

    Son técnicas muy sencillas de aplicar. El truco está en encontrar la zona de contraste y en su defecto crear ese contexto.

    Saludos 👋

  3. Hola Víctor,

    Qué buen artículo. Super completo. Así que enhorabuena 🙂

    Me ha encantado todo lo relativo a los contrastes y cómo utilizas Canva para lograr de forma sencilla muy buenos resultados.

    Respecto a las fuentes de pago te paso el enlace de Fontown. Es una empresa creada por un grupo de desarrolladores que conozco personalmente y se especializan es el diseño de fuentes.

    https://www.fontown.com/

    Un abrazo!

  4. Hola Pedro,

    Gracias por pasarte por el blog y comentar. La clave está en el contraste, cuando no exista, entonces es necesario crear ese contexto de contraste.

    Con Canva se pueden hacer muchas cosas. Pero cuando necesito algo más prefiero usar Affinity Designer.

    No conocía fontown, me he bajado la aplicación y es una pasada. Es parecido al famoso Typekit pero desarrollado por Españoles, ¿no?

    Gracias por tu aportación. 😉

    Un abrazo!

  5. Hola Víctor,

    Que bueno tu artículo, ¡esta genial!.

    Yo uso Canva para hacer composiciones, portadas y alguna que otra tipografía, pero desconocía estos trucos que explicas para incluir textos con imágenes que tienen mucho contenido y que son difícil de resaltar.

    La verdad es que con estos consejos, consigues que tus imágenes sean distintas a las que se suelen ver por ahí de bancos gratuitos, y además, con esto le das un toque para destacar tu marca personal.

    Tomo nota para aplicarlo.

    Muchas gracias 🙂

    Un saludo.

  6. ¡Hola Jessica!,

    Qué sorpresa, gracias por pasarte por aquí y comentar. Lo cierto es que es muy sencillo aplicar estas tres técnicas para combinar texto e imágenes y lograr muy buenos resultados. De esta forma puedes crear mensajes potentes y utilizarlos para casi cualquier cosa: Socialmedia, imágenes destacadas en el blog, etc. Y como tú bien dices, también se puede aprovechar para darle un toque a tu marca personal.

    Todos conocemos la expresión «Vale más una imagen que mil palabras», pero, ¿por qué quedarse con una si puedes tener las dos?

    Lo dicho, mil gracias por participar en los comentarios y darnos tu visión sobre el asunto. Espero que le puedas sacar partido a estás técnicas y utilizarlas en tu proyecto.

    Saludos, Jessica 👋.

Deja un comentario


Uso de los datos de los comentarios


Responsable del fichero: Víctor Rico Penalba. La finalidad: moderar los comentarios del blog. La legitimación: consentimiento del interesado. Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting, Raiolanetworks, empresa de servidores Española ubicada en Lugo. Podrás ejercer tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a o ante la Autoridad de Control. Encontrarás más información en la Política de Privacidad.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.