Haga una imagen desaturada transparente manteniendo solo sombras y reflejos

17

He tratado de hacer esto durante unos días y no he obtenido los resultados que necesito. No estoy seguro de estar usando la terminología correcta en el título; si no, no dude en corregirme y lo actualizaré.

Quiero ir de esto: ingrese la descripción de la imagen aquí

para esto (he muestreado un área de la transparencia para mostrar el valor k en caso de que eso ayude). Observe que las sombras / reflejos están ahí, pero nada más: imagen de resultado

Esto me permite colocar una capa llena de un color sólido debajo de la imagen transparente. El resultado es una camisa de color diferente, y se ven sombras / reflejos:

capa llena de azul colocada debajo de la capa de camisa transparente ingrese la descripción de la imagen aquí

capa llena de negro colocada debajo de la capa transparente de la camisa ingrese la descripción de la imagen aquí

¿Alguien tiene alguna idea sobre cómo podría lograr esto? He podido acercarme al resultado, pero mi transparencia no es suficiente o es demasiado. Pierdo gran parte de los detalles de sombras / luces. La imagen inicial es del tipo de archivo JPG.

ACTUALIZAR:

Necesito que el resultado final sea un PNG como este: ingrese la descripción de la imagen aquí

Parece que este PNG tiene un fondo blanco, pero si lo lleva a Photoshop o GIMP verá que la camisa es transparente. Necesito hacer ingeniería inversa de cómo se hizo esto para que se pueda hacer con otras piezas de ropa.

Lo que es interesante sobre el PNG anterior es que las sombras, los resaltados y los tonos medios en la parte transparente de la imagen se pueden seleccionar individualmente. Photoshop: Seleccione-> Gama de colores-> Sombras, luces o tonos medios. Imagen a continuación para mostrar lo que quiero decir: ingrese la descripción de la imagen aquí

aMMT
fuente
2
¿Por qué no hacer una mezcla de capas con un modo de multiplicación? Parece que su forma tiene bordes bastante bien definidos, por lo que podrá enmascararla con bastante facilidad.
ckpepper02
1
Porque OP quiere exportar la imagen como PNG transparente. Multiply se basa en un color para estar detrás de él.
Hanna
Multiplicar + máscara es el camino a seguir entonces.
John
¿Podrías ampliar eso, John?
Hanna

Respuestas:

13

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

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

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

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

    ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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) utilicé un relleno de cubo gris con un 20% de opacidad en el original blanco. Después de asignar un canal alfa de transparencia al gris (arriba a la derecha) podemos superponer un fondo de color (negro izquierdo, rojo oscuro medio, blanco marfil derecho) para lograr los efectos de la línea de fondo.

ingrese la descripción de la imagen aquí

Takkat
fuente
Soy un novato en esto y estoy teniendo problemas con el canal alfa. Mi método para obtener el efecto de transparencia hasta ahora ha sido ir a la pestaña de canales y controlar + hacer clic en el canal RGB. Luego uso una máscara rápida y ajusto los niveles, pero parece que no puedo llegar a donde estás en la primera imagen que publicaste. ¿Cómo se asigna un canal alfa a gris?
aMMT
@Phonetic: Rápidamente hice esto con Gimp (hay una entrada de menú para seleccionar cualquier color para la transparencia). Esto me hace creer que también hay (o debería haber) una opción en PS o en cualquier aplicación que uses. Sin embargo, la muy buena respuesta de Peter da un enfoque mucho mejor , es decir, la separación de luces y sombras. Esto permitirá ajustes mucho más finos.
Takkat
Lo entiendo ahora. He logrado exactamente lo que necesito siguiendo estas instrucciones. Muchas gracias
aMMT
¿Podría tener el psd para este tutorial? Estoy teniendo problemas para obtener la transparencia.
@Takkat, ¿podría mencionar los pasos para el segundo punto: "Entonces asigné un canal alfa a un color 'gris' (en lugar de blanco)"?
Vishal
13

Para esto, es mejor crear canales separados para las sombras y los resaltados .

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

En cuanto a los aspectos más destacados , 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 de 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 un 20% (baja reflexión).

Capas:

ingrese la descripción de la imagen aquí

Imágenes resultantes:

ingrese la descripción de la imagen aquí

Peter Walser
fuente
Esto es genial. ¿Hay alguna forma de obtener la imagen final como PNG transparente? El objetivo final aquí es usar una sola imagen png en un sitio web, y al cambiar el color de fondo del div html que contiene la imagen, el color de la camisa cambiará efectivamente.
aMMT
Tengo problemas para obtener los mejores momentos. Creo que me estoy perdiendo un paso porque después de aplicar un filtro de paso alto, la camisa en la capa en la que he aplicado el filtro de paso alto se ve muy gris (no hay mucho contraste como lo veo en la capa de Highlights) . Al principio usé un radio de 20 píxeles en el filtro de paso alto y luego probé algunos valores de radio diferentes, pero no me estoy acercando a lo que se ve en su capa de reflejos. ¿Qué me puedo perder?
aMMT
Use el mismo método, llene el fondo / exterior de su imagen en blanco y deje que su CSS actúe como la capa inferior. La camisa sería una ventana semitransparente.
John
Ojalá entendiera mejor esta respuesta porque suena realmente genial.
Hanna
Este efecto necesita modos de fusión (multiplicar, iluminar), mientras que HTML solo usa la fusión normal (pintar imágenes transparentes unas sobre otras). HTML5 + SVG sería una opción, pero los modos de mezcla SVG aún no son compatibles con los navegadores. Ver dev.w3.org/SVG/modules/compositing/master/… . Una forma efectiva de hacer este efecto en un navegador sería con un pequeño programa java (modos de mezcla Java2d) incrustado en la página.
Peter Walser
1

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

Valentina Yototva
fuente
1

Use filtros CSS en lugar de varias imágenes

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

ingrese la descripción de la imagen aquí

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 sus colores sin tener que usar un editor de imágenes.
  4. Móvil amigable.
  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);
}
Cambio invariante
fuente