Cómo hacer que las superposiciones de color funcionen en su diseño

El color es una parte importante de casi cualquier diseño. Ya sea que sea un fanático de los tonos brillantes y audaces o prefiera un blanco y negro más minimalista, la forma en que usa el color puede tener un gran impacto en su diseño general.

Una forma de usar el color para hacer una declaración es con un diseño que incorpore una superposición de color. Esto significa que superpone una imagen o video con un cuadro de color semitransparente. El efecto puede agregar significado a una imagen, llamar la atención sobre un diseño y ayudarlo a aprovechar al máximo sus limitadas opciones de arte.

Hoy, vamos a ver una variedad de superposiciones de colores para que sirvan como un poco de inspiración para crear las suyas propias.

Prueba un degradado

Los degradados vuelven a ser geniales. También son una excelente (y llamativa) opción cuando desea trabajar con una superposición de color.

Lo que es especialmente bueno de un degradado es que puede trabajar con varios colores (piense en su marca aquí) o use un solo color para crear enfoque. Las asociaciones de luces pueden ayudar a atraer a los usuarios al diseño y darles una chispa a las imágenes.

Gran parte de esta tendencia se puede atribuir a Spotify, que comenzó a usar superposiciones de gradientes y duotono para resaltar las listas de reproducción. El color dio nueva vida a las imágenes que los usuarios estaban acostumbrados a ver (fotos de prensa de músicos).

Este es un concepto que también es fácil de replicar para usted.

• Elige una foto.
• Crea un degradado con los colores de la marca.
• ¡Divertirse!

Los colores sólidos marcan un tono

Una superposición de color sólido puede ser tan llamativa como un patrón degradado, pero a menudo tiene un significado más distintivo que se puede asociar con la elección del color. Considere una superposición sepia, por ejemplo. Inmediatamente evoca sentimientos de los viejos tiempos y la historia.

Lo mismo se puede decir sobre la elección de un color de moda. Al usar uno de los colores brillantes y saturados asociados con el diseño plano o material, puede evocar sentimientos de modernismo o alta costura.

Cuando utilice un solo color como superposición, piense en el grado de saturación y transparencia del color. Estos elementos también pueden agregar significado. Las combinaciones de colores más intensas (menos transparentes y más saturadas) ponen más énfasis en el color en sí que en la imagen que hay detrás. Las combinaciones más ligeras y sutiles ponen más énfasis en la imagen.

Considere oscuro o claro

No siempre tiene que usar un color solo para crear una superposición. A veces puede ser negro, blanco o gris. El uso de estos matices y tonos realmente puede cambiar el estado de ánimo de un proyecto.

Como era de esperar, las superposiciones más oscuras crean un entorno más inmersivo. Las superposiciones más ligeras están asociadas con la diversión. Otro factor que contribuye cuando se trata de estos sentimientos y el blanco y negro es la imagen en sí. ¿Cómo funciona con matiz o tono? ¿La imagen, el color y el mensaje funcionan juntos?

Call Me Ish (arriba) usa una superposición blanca para ayudar a enfocar las palabras en la pantalla sobre una foto en blanco y negro. Pero fíjate en la expresión del rostro del fotógrafo: sonríe con una amplia sonrisa. La combinación de color y fotografía es atractiva y te hace querer interactuar con el fotógrafo y posiblemente incluso contratarlo para un trabajo.

Optar por imágenes de alto contraste

Al planificar una superposición de imágenes en un proyecto de diseño, la composición de la foto (o video) es importante. Una imagen suave te dejará con un resultado de superposición de color suave. Obtendrá los mejores resultados si comienza con una foto con mucho contraste entre los espacios oscuros y claros de la imagen.

Si su imagen no tiene suficiente contraste, considere agregar contraste en su software de edición de fotos o elegir una imagen diferente. De lo contrario, el efecto de la imagen puede fallar.

Hay otro truco para conseguir este efecto que es empezar con una foto en blanco y negro. Especialmente para los principiantes, puede ser más fácil ver y mejorar el contraste en una imagen en blanco y negro. Just Actions ofrece un excelente ejemplo de una imagen en blanco y negro junto a imágenes superpuestas en color. (Además, es un gran efecto emparejar imágenes sin color y con un contraste de colores brillantes).

Las imágenes deben verse naturales (o no)

Cuando se trata de trabajar con superposiciones de color, tiene dos opciones:

1. Las imágenes aún deben verse naturales. El color, la iluminación y las sombras deben aparecer en un lugar natural. La superposición es algo sutil, como el café Abednego (arriba).
2. Las imágenes aparecen completamente alteradas. No se supone que se haya utilizado una superposición de color (como la mayoría de los ejemplos de este artículo).

Realmente no hay término medio aquí. Si las imágenes no caen en uno de estos «extremos», los usuarios pueden estar pensando demasiado en las opciones de color y no pueden concentrarse en el contenido del sitio. No querrás distraerte con una técnica de superposición de colores; Debería mejorar el diseño.

Prueba un acento superpuesto

Si bien los ejemplos anteriores han mostrado formas de usar una superposición de color para imágenes grandes, como las opciones de estilo de encabezado de héroe, esta no es la única forma de aprovechar al máximo esta técnica. Los efectos de superposición de color también pueden funcionar bastante bien como acentos.

Los dos ejemplos anteriores muestran diferentes formas de hacer esto de manera efectiva.

Knot Clothing (arriba) usa una barra de navegación verde brillante con transparencia. Se destaca aún más por el contorno sólido encima de él. El efecto ayuda a mantener la paleta de colores de la marca en todo el diseño, presentando artículos en una variedad de otros colores. El efecto es simple, ayuda a que la página se vea un poco más suave que si la navegación fuera en un color sólido y atrae la atención hacia la página y el diseño.

Nuts and Woods adopta un enfoque diferente. El diseño utiliza una superposición de color como efecto de desplazamiento para brindarle más información sobre elementos específicos en el sitio. Cualquier elemento que reciba una superposición roja también es un elemento en el que se puede hacer clic. Lo notable de este diseño es que la superposición de colores sirve como una señal visual para los usuarios, diciéndoles exactamente lo que quieren saber y proporcionando una ruta a los enlaces a través del contenido.

Conclusión

Usar una superposición de color es una de esas técnicas que no funciona todo el tiempo. La mayoría de los diseñadores descubren que solo pueden salirse con la suya con uno o dos proyectos antes de que parezca excesivo. (Hay una superposición de énfasis que podría ser una mejor opción).

Como con cualquier técnica de diseño, asegúrese de aplicarla en el contexto adecuado. Nunca debe usar una superposición de color solo porque se inspiró en otro proyecto; guarda la idea y utilízala para el diseño correcto.