Cómo hacer que las superposiciones de color funcionen en tu 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 que prefiera un blanco y negro más minimalista, la forma en que use el color puede tener un gran impacto en el 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 colores. Esto significa que cubre una imagen o un 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 tomar la mayoría de las limitadas opciones de arte.

Hoy, vamos a ver una variedad de superposiciones de color para servir como un poco de inspiración para crear el suyo propio.

Prueba un gradiente

Los gradientes son geniales de nuevo. También son una excelente opción (y llamativa) cuando desea trabajar con una superposición de colores.

Lo que es particularmente bueno de un degradado es que puede trabajar con un par de colores (piense acerca de su marca aquí) o usar un solo color para crear el foco. Los pares brillantes pueden ayudar a atraer a los usuarios al diseño y dar un poco de chispa a las imágenes.

Gran parte de esta tendencia se puede vincular de nuevo a Spotify, que comenzó a usar superposiciones de degradado 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 músicos).

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

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

Los colores sólidos establecen un tono

Una superposición de colores sólidos puede ser tan llamativa como un patrón de degradado, pero a menudo tiene un significado distinto que puede asociarse con la elección del color. Considere una superposición de sepia, por ejemplo. Inmediatamente despierta sentimientos de antaño e historia.

Lo mismo se puede decir de la selección de una opción de color de moda. Al utilizar uno de los colores brillantes y saturados asociados con el diseño plano o material, puede evocar sentimientos de modernismo o alta moda.

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

Considere la oscuridad o la luz

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

Como es de esperar, las superposiciones más oscuras crean un ambiente más sombrío. Superposiciones más ligeras se asocian con la diversión. Otro factor de contribución cuando se trata de estos sentimientos y el blanco y negro es la imagen en sí misma. ¿Cómo funciona con el tinte o el tono? ¿La imagen, el color y la mensajería funcionan juntos?

Call me Ish (arriba) usa una superposición blanca para ayudar a enfocar las palabras en la pantalla en la parte superior de una foto en blanco y negro. Pero note la expresión en el rostro del fotógrafo: está sonriendo con una amplia sonrisa. El color y la combinación de fotos son atractivas y te dan ganas de 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 colores suaves. Obtendrá los mejores resultados si comienza con una foto con mucho contraste con espacios oscuros y claros en la imagen.

Si su imagen no tiene suficiente contraste, considere agregar contraste en el software de edición de fotos o elegir otra imagen. De lo contrario, el efecto de la imagen podría caer plano.

Hay otro truco para lograr este efecto es comenzar 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 proporciona 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 para emparejar imágenes sin color y contraste de colores brillantes).

Las imágenes deben parecer 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 y 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 se ven completamente alteradas. No se puede adivinar que se ha utilizado una superposición de colores (como la mayoría de los ejemplos en este artículo).

Realmente no hay un término medio aquí. Si las imágenes no caen en uno de estos? Extremos? los usuarios pueden pensar demasiado sobre las opciones de color y no concentrarse en el contenido del sitio. No querrás distraerte con una técnica de superposición de colores; Debe mejorar el diseño.

Probar un acento de superposición

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, 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 maneras de lograr esto de manera efectiva.

Knot Clothing (arriba) usa una barra de navegación verde brillante con transparencia. Es más destacado por el trazo sólido por encima de ella. El efecto ayuda a mantener la paleta de colores de la marca en todo el diseño al tiempo que muestra los elementos 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 atraiga la atención hacia abajo de la página y a través del diseño.

Nueces y maderas toma otro enfoque. 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 web. Cualquier elemento que obtenga una superposición de color rojo también es un elemento seleccionable. Lo que es notable de este diseño es que la superposición de colores sirve como una señal visual para los usuarios, les dice exactamente lo que quieren saber y les proporciona una ruta a los enlaces en todo el contenido.

Conclusión

Usar una superposición de colores 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 para uno o dos proyectos antes de que parezca exagerado. (Ahí es donde una superposición de acento podría ser una mejor opción).

Al igual que con cualquier técnica de diseño, asegúrese de aplicarlo en el contexto correcto. Nunca debes usar una superposición de color solo porque te haya inspirado otro proyecto; Guarda la idea y úsala solo para el diseño correcto.