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

El color es una parte importante de casi cualquier diseño. Tanto si le gustan los tonos vivos y atrevidos como si prefiere un blanco y negro más minimalista, el uso que haga del color puede tener un gran impacto en el diseño general.

Una forma de utilizar el color para hacer una declaración es con un diseño que incorpore una superposición de color. Esto significa que cubres una imagen o un vídeo con una caja de color semitransparente. El efecto puede añadir significado a una imagen, llamar la atención sobre un diseño y ayudarte a aprovechar al máximo las limitadas opciones artísticas.

Hoy vamos a ver varias superposiciones de color que te servirán de inspiración para crear las tuyas propias.

Explorar Envato Elements

Pruebe con un degradado

Los degradados vuelven a estar de moda. También son una opción estupenda (y llamativa) cuando quieres trabajar con una superposición de colores.

Lo mejor de un degradado es que puedes trabajar con un par de colores -piensa en tu imagen de marca- o utilizar un único color para centrar la atención. Las combinaciones brillantes pueden ayudar a atraer a los usuarios hacia el diseño y dar chispa a las imágenes.

Gran parte de esta tendencia se remonta a Spotify, que empezó a utilizar superposiciones de degradados y duotonos para destacar las listas de reproducción. El color dio nueva vida a imágenes que los usuarios estaban acostumbrados a ver (fotos de prensa de músicos).

Este concepto también es fácil de reproducir.

• Elige una foto.
• Cree un degradado con los colores de la marca.
• ¡Que te diviertas!

Los colores sólidos marcan el tono

Una superposición de color sólido puede ser tan llamativa como un patrón de degradado, pero a menudo tiene un significado más definido que puede asociarse a la elección del color. Pensemos, por ejemplo, en una superposición sepia, que inmediatamente despierta sentimientos de tiempos pasados e historia.

Lo mismo puede decirse de la elección de un color de moda. Si utiliza uno de los colores brillantes y saturados asociados al diseño plano o material, puede evocar sensaciones de modernismo o alta costura.

Cuando utilices un solo color como superposición, piensa en el grado de saturación y transparencia del color. Estos elementos también pueden añadir significado. Las combinaciones de colores más intensas -menos transparentes y con mayor saturación- centran más la atención en el color en sí que en la imagen que hay detrás. Las combinaciones más claras y sutiles centran más la atención en la imagen.

Considerar oscuro o claro

No siempre es necesario utilizar un color en sí para crear una superposición. A veces puede ser negro, blanco o gris. El uso de estos tintes y tonos puede cambiar realmente el ambiente de un proyecto.

Como es de esperar, las superposiciones más oscuras crean un ambiente de mal humor, mientras que las más claras se asocian a la diversión. Otro factor que contribuye a estos sentimientos y al blanco y negro es la propia imagen. ¿Cómo funciona con el tinte o tono? ¿Funcionan juntos la imagen, el color y el mensaje?

Call me Ish (arriba) utiliza una superposición blanca para ayudar a centrar la atención en las palabras de la pantalla sobre una foto en blanco y negro. Pero fíjate en la expresión de la cara del fotógrafo: está sonriendo con una amplia sonrisa. La combinación de color y foto invita a interactuar con el fotógrafo, y posiblemente incluso a contratarlo para un trabajo.

Opte por imágenes de alto contraste

A la hora de planificar una superposición de imágenes en un proyecto de diseño, la composición de la foto (o vídeo) es importante. Una imagen sosa le dejará un resultado de superposición de colores soso. Obtendrá los mejores resultados si parte de una foto con mucho contraste, con espacios oscuros y claros en la imagen.

Si tu imagen no tiene suficiente contraste, considera la posibilidad de añadir contraste en un programa de edición fotográfica o de elegir otra imagen. De lo contrario, el efecto de la imagen podría quedar en nada.

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

Las imágenes deben parecer naturales (o no)

Cuando se trata de trabajar con superposiciones de color tienes dos opciones:

1. Las imágenes deben seguir pareciendo naturales. El color, la iluminación y las sombras deben aparecer en un lugar natural. La superposición es algo sutil, como en el caso del Café Abednego (arriba).
2. Las imágenes parecen completamente alteradas. No hay forma de adivinar que se ha utilizado una superposición de color (como en la mayoría de los ejemplos de este artículo).

En realidad, no hay término medio. Si las imágenes no caen en uno de estos "extremos", los usuarios podrían pensar demasiado en las opciones de color y no concentrarse en el contenido del sitio. No hay que distraer con una técnica de superposición de colores; debe realzar el diseño.

Pruebe con un acento superpuesto

Aunque en los ejemplos anteriores se han mostrado formas de utilizar una superposición de color para imágenes grandes, como opciones de estilo de cabecera de héroe, 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 distintas formas de lograrlo eficazmente.

Knot Clothing (arriba) utiliza una barra de navegación de color verde brillante con transparencia. El efecto ayuda a mantener la paleta de colores de la marca en todo el diseño, al tiempo que muestra los 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 estuviera dentro de un color sólido y atrae la mirada hacia abajo de la página y hacia el fondo.a través del diseño.

Nuts and Woods adopta otro enfoque. El diseño utiliza una superposición de colores como efecto hover para ofrecer más información sobre elementos específicos del sitio web. Cualquier elemento que reciba una superposición roja es también un elemento sobre el que se puede hacer clic. Lo más destacable de este diseño es que la superposición de colores sirve como pista visual para los usuarios, indicándoles exactamente lo que quieren saber y proporcionándoles una ruta a enlaces en todo el contenido.

Conclusión

Utilizar una superposición de color es una de esas técnicas que no funcionan siempre. La mayoría de los diseñadores descubren que sólo pueden salirse con la suya en uno o dos proyectos antes de que parezca exagerado. (Ahí es donde una superposición de acento 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 utilizar una superposición de colores sólo porque se ha inspirado en otro proyecto; guarde la idea y utilícela para el diseño adecuado.