Haga que una imagen desaturada sea transparente manteniendo solo las sombras y los reflejos

Al asignar el blanco como canal alfa para la transparencia, no podremos tener reflejos opacos, ya que estos por definición serán blancos, por lo tanto, completamente transparentes.

Para tener un canal alfa que ahorre tanto las áreas blancas resaltadas como las sombras negras, es mejor elegir un color gris para asignar alfa.

• Para mostrar el efecto más claramente, primero oscurecí la imagen original y aumenté el contraste. Deberá ajustar el contraste de la fuente y elegir el nivel de gris que mejor se adapte a sus necesidades para obtener mejores resultados.

• Luego asigné un canal alfa a un color 'gris' (en lugar de blanco):

  

Ahora, cuando superponemos esta imagen con, por ejemplo, un fondo verde, podemos ver que tanto las luces como las sombras se mantienen.

Podemos ver que cuando se usa en colores oscuros, las áreas blancas de la imagen original aún pueden ser demasiado brillantes para el efecto deseado. Esto se puede superar cuando elegimos una fuente gris en lugar de una blanca para crear nuestra plantilla de canal alfa.

Abajo (arriba a la izquierda) usé un relleno de cubeta gris con un 20 % de opacidad en el original blanco. Después de asignar un canal alfa de transparencia a gris (arriba a la derecha), podemos superponer un fondo de color (negro a la izquierda, rojo oscuro en el medio, blanco marfil a la derecha) para lograr los efectos de la línea de fondo.

Para ello, lo mejor es crear canales separados para las sombras y las luces .

Las sombras se pueden tomar directamente de la camiseta blanca y usarse como multiplicador (0-100%) para el color de la camiseta (modo de capa: multiplicar)

En cuanto a los reflejos , esto realmente depende del material. La tela no refleja mucha luz en la superficie, por lo que la mayor parte de su color proviene de la luz difusa (el color de la camisa). Para extraer la luz especular, usaría un filtro de paso alto (adaptación del histograma: solo los colores brillantes y ninguno de los colores oscuros) en la imagen de la camisa blanca y lo usaría para iluminar la camisa, pero solo con quizás un 20 %. (baja reflexión).

Capas:

Imágenes resultantes:

Hay una manera más fácil: seleccione el fondo blanco, inviértalo, defina el pincel preestablecido, cree un nuevo archivo basado en transparente, en escala de grises, y esto es. Seleccione el pincel, que es el último en la lista y haga clic una vez con la muestra negra de cuatro puntos. ¡Voila! De lo que puede guardar como web - png.

Use filtros CSS en lugar de múltiples imágenes

Debe usar filtros CSS para colorear la imagen de un sitio web.

Los beneficios son los siguientes.

1. Solo se requiere una imagen.
2. Tamaño de archivo de imagen más pequeño.
3. Más control sobre tus colores sin tener que usar un editor de imágenes.
4. Compatible con dispositivos móviles.
5. Tiempos de carga más rápidos.
6. Mejor SEO.

Para Hue usa este filtro CSS:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Para uso de brillo :

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Para uso de saturación :

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

Para uso en escala de grises :

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}