10 Consejos para Diseñar con Texto en una Foto

Una de las mejores técnicas para tener un tu caja de herramientas es diseñar mezclando texto e imágenes. Pero también puede ser uno de los conceptos más complicados de desarrollar correctamente.

Tienes que tener la foto adecuada, buen ojo para la tipografía y saber lo que quieres conseguir para sacar el máximo provecho de añadir texto a una imagen. Si crees que estás listo para aceptar el reto, aquí tienes 10 consejos para hacer que funcione:

1. Añade Contraste

pack

force

El texto debe ser legible para que sea efectivo. Asegúrate que el texto varía lo suficiente en color para que se vea en combinación con la foto. Si tienes una foto con fondo oscuro, opta por un texto blanco (o colores claros). Si tu foto tiene un fondo claro, usa tonos oscuros para el texto.

El contraste puede referirse también al tamaño del texto en relación con lo que está pasando en la imagen. Las letras deben ir con (no contra) la imagen. En la web de Pack arriba, por ejemplo, la imagen es grande y atrevida y el texto fino y claro. Los elementos trabajan en conjunto pero contienen un elemento de contraste.

2. Haz del Texto Parte de la Imagen

mmd

toast

A veces simplemente funciona y el texto sale – o es – parte de la imagen con la que estás trabajando. Esto puede ser difícil de conseguir y solo funciona en ciertas ocasiones. O bien necesitas una simple imagen y una palabra para trabajarlo, como el caso de McLaren, o una imagen que está tomada con texto en ella.

3. Sigue el Flujo Visual

hogan

schmid

Trabajar con el flujo visual de una imagen es uno de los mejores consejos cuando se trata de trabajar con texto y fotos. Necesitas que las palabras encajen en las partes lógicas de la imagen. Y por favor ten cuidado de no poner texto sobre las partes importantes de una imagen, como la acción principal de una foto, caras o el producto que intentas mostrar.

En términos de flujo visual, busca espacios para el texto donde los sujetos de la foto estén mirando. Ambos ejemplos muestran un lenguaje corporal que invita al texto. En estos casos el flujo está claro.

4. Desenfoca la Imagen

niche

wallmob

Una de los recursos más simples que puedes tener es el de desenfocar parte de la imagen. Añadir un poco de desenfoque al fondo de una imagen con un software tipo Adobe Photoshop puede ayudar a resaltar el texto. El desenfoque ayuda a concentrarse en el tema principal, como en la web de Wallmob de arriba. El desenfoque trae el producto y el texto adelante dándoles más importancia para los usuarios.

5. Pon el Texto en una Caja

tradestone

fall

Cuando las fotos contienen mucho color o diferencias entre claro y oscuro, poner el texto dentro de otro marco ayuda mucho a que resalte más.

Elige una forma – puedes ver un rectángulo y un circulo arriba – esto funciona en base a las palabras o la imagen. Busca un color para la caja que te dé suficiente contraste para las letras que vas a mostrar. Considera utilizar un marco con algo de transparencia para una integración más fina que deje ver la imagen a través.

6. Añade Texto al Fondo

square

wicker

Uno de los mejores “trucos” es poner el texto en el fondo como parte de la imagen en vez de en primer plano. Normalmente los fondos están menos ocupados y son más fáciles de trabajar a la hora de poner texto. A veces son de un mismo color, y por lo tanto es más fácil de deducir que color le irá bien al texto para que sea fácil de leer.

El resultado final es un lugar natural que no requiere de muchas alteraciones a la foto en cuestión. Juega con sombras sutiles, como la web de Caitlin Wicker, que al colocar el texto también añade un elemento de profundidad a la imagen.

7. A lo Grande

plain

coffee

Cuando no estás seguro de qué funcionará, considera ir a lo grande. Esto aplica a ambos, la imagen o el texto en si. El elemento del tamaño llamará la atención del usuario y con un elemento grande puede hacer más fácil crear una escala con el texto y la imagen.

Utilizar imágenes grandes, como la de los granos de café, puede ayudar con el sombreado y las diferencias de contraste. Utilizar un texto grande puede añadir suficiente peso a las letras para que sean legibles sobre casi cualquier imagen.

8. Añade Color

knuckles

moving

Añadir una pizca de color puede añadir un interés visual a la imagen. Estos dos sitios dos intereses diferentes – uno usa un color de contraste que no se encuentra en la foto para destacar ciertas palabras, mientras que el otro usa un tono que se integra con la imagen. Ambas técnicas pueden ser igualmente efectivas.

9. Utiliza las Dominancias de Color

winshape

brandv

Un efecto que se está haciendo popular es el uso de las dominancias sobre las imágenes para permitir la colocación de texto. Mientras que puede ser un efecto complicado de conseguir, puede también darle ese toque a tu diseño.

Opt for a color that his high visual interest. The balance is in making the overlay color transparent enough for the image to show through, but not so transparent that the text is difficult to read. You may have to experiment with several color and photo options before mastering this trick. Not sure what color to use? Start with an overlay related to your brand colors.

Opta por un color que sea de alto interés visual. El balance está entre hacer que el color sea lo bastante transparente como para que deje ver la imagen, pero no lo suficiente para que el texto deje de ser legible. Probablemente tendrás que experimentar con diferentes colores y fotos antes de dominar la técnica. ¿No estás seguro de que color usar? Empieza sobreponiendo un color relacionado con los colores de tu marca.

10. Ves a lo Simple

sa

cohen

Este consejo de diseño, “mantenlo simple”, se aplica a texto e imágenes. Quieres que la gente vea la foto y el texto. Aplicar demasiados efectos puede causar justo lo contrario.

Al trabajar con imágenes, utiliza tipografías simples y una imagen sencilla para obtener los mejores resultados. Recuerda dejar ver las partes importantes de la imagen y poner un texto claramente legible para que tu diseño funcione.

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres