Editando Imágenes en CSS: Modos de Mezcla

En el tutorial anterior de esta serie, discutimos cómo usar filtros CSS para editar imágenes. Aunque los filtros pueden producir estupendos resultados, están limitados a ajustar una sola capa.

Digamos que usted tiene una imagen y quiere superponerla con un color rojo. Verá que no puede hacer eso con filtros. Sin embargo, los modos de mezcla son perfectos para este trabajo. De hecho, son necesarios para tomar los valores de los colores frontal y el color de fondo, y realizar algunos cálculos y luego, regresar un color final. La imagen final que conseguirá es el resultado de tales cálculos sobre cada pixel superpuesto.

Los modos de mezcla le permiten mezclar no solamente imágenes y colores sino también textos e imágenes. En este tutorial, le mostraré cómo usar los modos de mezcla para manipular imágenes y crear algunos efectos magníficos.

Modos de Mezcla Disponibles

• Normal: En este modo, el color final será el color que está arriba. El valor del color de fondo no tendrá ningún efecto sobre el resultado final.
• Multiply: En este modo, los colores de arriba e inferiores son multiplicados para conseguir el color final. El color resultado siempre será al menos tan oscuro como los colores que los componen. Esto implica que con una capa de color oscuro el resultado final siempre será negro. Si usamos una capa de color blanco no tendrá ningún efecto el resultado final.
• Screen: En este modo, el color final se obtiene invirtiendo los colores de arriba y de abajo, multiplicándolos y luego, invirtiendo el resultado. El color final siempre será al menos como el color de arriba o de abajo. Esto implica que usar una capa de color blanco volverá todo blanco, y una capa de color negro no tendrá ningún efecto en el resultado final.
• Overlay: En este modo, el color final se obtiene ya sea; multiplicando o filtrando los colores originales con base en el color de la parte inferior. Si el color de la parte inferior es oscuro, entonces los colores originales son multiplicados y si éste es más claro, entonces son proyectados. Las luces y las sombras de los colores en la parte inferior son preservados en este modo.
• Darken: Este es muy básico. El color final en este modo es el color más oscuro entre el color en la parte de arriba y el de las capas en la parte inferior.
• Lighten: Este es lo inverso de Darken, y el color final es, por lo tanto, un color más claro entre el color en la parte de arriba y los colores en la parte de abajo de las capas.
• Color-dodge: En este modo, el color de la parte inferior está divido por el inverso del color de la parte de arriba para conseguir el valor final. No verá ningún cambio con un fondo de color oscuro en este modo. Si el color en la parte de arriba es el inverso del color en la parte de abajo, entonces el color final será una versión completa del color de arriba.
• Color-burn: El color final en este modo es producido por dividir el inverso del color de fondo por el valor del color de arriba e invirtiendo el valor resultante. Si el color de arriba es blanco, entonces no verá ningún cambio. Un color de arriba que es inverso al color del fondo, resultará en una imagen completamente oscura.
• Hard-light: El modo Hard-light es el inverso del modo Overlay. En este caso, si el color de arriba es más oscuro, entonces los colores originales son multiplicados, y si este es más claro, entonces a estos se les aplica el modo screen. Es básicamente el modo overlay con las capas intercambiadas.
• Soft-light: Este modo es igual a hard-light, pero produce un resultado final más suave.
• Diferencia: Este modo substrae el valor del color oscuro del color claro para conseguir el valor final. Esto implica que el color negro no tendrá efecto, mientras que el color blanco invertirá el color de la otra capa.
• Exclusión: Este modo de mezcla es igual a Difference, pero el resultado final tiene un contraste más bajo.
• Hue: Este modo de mezcla usa el tono del color en la parte superior y la saturación y la luminosidad del color de fondo para crear un color final.
• Saturation: En este modo, el color final tiene la saturación del color en la parte de arriba y el tono y luminosidad del color en la parte inferior.
• Color: Este modo de mezcla produce un color final con el tono y la saturación del color en la parte de arriba y la luminosidad del color en la parte de fondo. Este modo preserva los niveles grises del color de fondo y puede ser usado para matizar las imágenes coloreadas.
• Luminosity: El color final en este modo tiene la luminosidad del color en la parte de arriba, mientras que los valores de tono y saturación vienen del color en la parte inferior. Es como el modo de Color pero con las capas intercambiadas.

De manera adicional, hay dos formas de usar modos de mezcla.  Usted puede usar el mix-blend-mode, el cual determina cómo los contenidos de mezcla de los elementos con los contenidos del elemento debajo de él así como también con los fondos de los elementos. El background-blend-mode, por otra parte, determina cómo las imágenes de fondo de los elementos entre si y con los colores de fondo de los elementos.

Usted puede jugar con esta demostración para ver como diferentes imágenes y colores interactuan basados en el modo de mezcla aplicado. Además, he adjuntado una imagen debajo que muestra la combinación de amarillo con la imagen fuente.

Creando Bordes Irregulares

Aunque las imágenes en general son más rectangulares, usando las imágenes con límites irregulares puede hacerlos visualmente más interesante y darles un significado completamente diferente. Considere esta imagen de una águila calva mezclada con el mapa de los Estados Unidos. Esto significa los valores de América representados por el águila calva. Además, podría combinar otras imágenes en una forma similar.

Aquí he combinado dos imágenes en tal forma que el resultado final tiene la forma de la primera imagen y los colores de la segunda. ¿Cuál modo de mezcla cree usted que puede lograr este efecto?

Una pista aquí es que el mapa es todo negro y blanco. Así que, cualquier modo de mezcla que decidamos usar debe ocultar toda la porción sobre la parte blanca y mostrar toda la porción de la parte negra. El modo de color Lighten hace perfectamente bien este trabajo. Ya que el color blanco es más claro comparado a los colores en el águila, éste oculta el águila siempre que él se amplia más allá del mapa de los Estados Unidos.

Debería de tratar de adivinar el otro modo de mezcla que puede lograr este efecto. Puede probar diferentes modos de mezcla en esta muestra del águila para ver si adivinó el modo de mezcla de forma correcta.

Mezclando Degradados Coloridos

Créalo o no, la imagen colorida que está debajo es el resultado de degradados cuidadosamente escogidos y, también, modos de mezcla. Usted puede mantener el cursor sobre la imagen para ver la versión original.

Si quiere recrear este efecto, tendrá que empezar con una imagen que tenga un fondo de color oscuro para obtener mejores resultados. Después, decidir los colores que usted quiere mezclar y crear un degradado lineal con todos esos colores. De forma opcional, puede agregar más degradados en ángulos diferentes. Al final, ajuste el primero background-blend-mode a luminosity. Su CSS final debería de lucir algo así:

1

  div { background: url('image-url'), linear-gradient(red, orange, yellow, green, blue, indigo, violet), linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-blend-mode: luminosity, overlay; // More CSS rules }

Debería experimentar con diferentes modos de mezcla e imágenes en la muestra original para averiguar cual es la mejor combinación de modo de mezcla para diferentes tipos de imágenes.

Mezclando Textos

Los modos de mezcla no están limitados a las imágenes. Usted puede aplicar modos de mezcla sobre una pieza de texto. En la siguiente imagen, he aplicado un modo de mezcla a todos los caracteres así como también a la imagen de fondo.

Los caracteres usan la propiedad mix-blend-mode y el body usa background-blend-mode. Aquí está el código CSS:

1

  body { background: #D63 url('image-url') no-repeat; background-blend-mode: multiply; background-size: cover; } h1 span { mix-blend-mode: hard-light; }

Tal y como demostramos anteriormente, le sugeriría que experimente con varios modos de mezcla en este demo.

Últimas reflexiones

Con un poco de imaginación, las posibilidades con los modos de mezcla son infinitas. Espero que este tutorial le haya enseñado algo útil acerca de los modos de mezcla y la edición de imágenes. Siga practicando y conseguirá buenos resultados usando diferentes modos.

Si ha creado algo interesante con los modos de mezcla, por favor, comparta su trabajo en la sección de comentarios.