Convertir imagen en máscara

9

Tengo una imagen de fondo verde con algunas sombras. Me gustaría usarlo como una máscara para poder colocarlo en el fondo con cualquier color (por ejemplo, rojo o rosa) y obtener el mismo estilo de sombras.

Intenté convertirlo a escala de grises y cambiar la opacidad al 20%, pero esto resultó en una imagen mucho más oscura.

Estoy usando esto en una página web donde el administrador puede establecer el color de la plantilla. Entonces estoy usando algo como esto en CSS:

background: #557d0d url("img/background.png") center center;

ingrese la descripción de la imagen aquí

Usando Gimp 2.8.6 en Ubuntu.

Tomás Greif
fuente
¿Asumiendo que un hue-rotatefiltro CSS3 para cambiar el color no es una opción? Ver stackoverflow.com/questions/17721960/… o stackoverflow.com/questions/12546499/…
Takkat

Respuestas:

5

Puedes desaturar la imagen con Colors > Desaturate.... Luego, use Colors > Color to Alpha...para eliminar el gris que lo hace más oscuro ( #808080).

Establezca la opacidad al 40% y debería hacerlo.

Acabo de hacer una pequeña prueba con un sitio web que creé: ingrese la descripción de la imagen aquí

Kelunik
fuente
3

No puede replicar exactamente la imagen usando solo una capa de escala de grises enmascarada en un fondo de color sólido, ya que el tono del color verde también varía a lo largo del gradiente vertical.

Podrías acercarte bastante simplemente eligiendo uno de los tonos verdes medios del centro de la imagen con la herramienta Cuentagotas, maximizando su saturación y valor y volviendo ese color transparente usando la herramienta Capa → Transparencia → Color a Alfa ... Sin embargo, esto dejaría su capa con matices de color en la parte superior e inferior, que es posible que no desee.

Una mejor solución puede ser descomponer la imagen en matiz, saturación y valor (HSV), descartar el canal de matiz y reconstruir los canales de saturación y valor en una máscara de escala de grises que se pueda colocar encima de cualquier color saturado puro para replicar la saturación y valor de la imagen original con el nuevo tono.

Una forma de hacerlo sería:

  1. Use la herramienta Colores → Componentes → Descomponer ... para descomponer la imagen en capas usando el modo HSV.

  2. Eliminar la capa de matiz. No lo usaremos.

  3. Seleccione la capa de saturación, abra el cuadro de diálogo Capa → Máscara → Agregar máscara de capa ... , seleccione el modo "Copia en escala de grises de la capa" y marque la casilla de verificación "Invertir máscara".

  4. Repita el paso 3 para la capa de valor también.

  5. Usando la herramienta de relleno de cubeta (en el modo "Rellenar toda la selección"), llene la capa de valor (¡ no su máscara!) Con todo negro y la capa de saturación con todo blanco.

  6. Mueva la capa de valor por encima de la capa de saturación en la pila.

  7. Opcionalmente, combine las capas junto con Imagen → Fusionar capas visibles ... o con Capas → Fusionar hacia abajo .

La imagen de escala de grises semitransparente resultante debería tener este aspecto:

Imagen PNG semitransparente
Haga clic para descargar / ver en tamaño completo.

El truco es que, después de los pasos 3 a 5:

  • la capa de "saturación" será de color blanco puro donde el color original estaba 0% saturado, y transparente donde estaba 100% saturado, y
  • la capa de "valor" será de color negro puro donde el color original tenía un valor de 0% y transparente donde tenía un valor de 100%.

Colocando esas dos capas (o su combinación combinada) sobre un fondo de color saturado puro, luego replica el proceso de convertir un color HSV a RGB: comienza con el color saturado puro del tono correcto, mezcla en blanco suficiente para obtener el deseado saturación, y luego mezclar en negro suficiente para obtener el valor deseado.

Así es como se ve la imagen resultante en varios fondos de colores:

Fondo verde (# 83ff00) Fondo azul (# 00aeff) Fondo naranja (# ffa200) Fondo rojo (# ff002a)
Colores: verde ( #83ff00), azul ( #00aeff), naranja ( #ffa200), rojo ( #ff002a).

Ilmari Karonen
fuente
2

En The Gimp puedes hacer esencialmente lo mismo que la respuesta de Photoshop, usando color a alfa . Recomendaría seguir desaturando y luego configurar el blanco a alfa en caso de que tenga más de un color allí. Parece que hay alguna variación azul / amarilla. Los pasos clave son:

  1. desaturar la imagen para que tenga una imagen en escala de grises
  2. establecer blanco (puede ingresar #FFFFFF para blanco en el selector de color) en alfa
  3. guardar como png para conservar la transparencia
fuego de fuego
fuente
Tenga en cuenta que la conversión a escala de grises en lugar de desaturación puede dar como resultado una imagen sin un canal alfa y puede volver a agregar esto utilizando el diálogo de capas . Es posible que también deba hacer esto si el archivo original que abrió no tiene canal alfa.
hurtstotouchfire
1
  • Abre el panel de canales.

ingrese la descripción de la imagen aquí

  • Decide qué canal te dará el grado de contraste que estás buscando.

Método 1:

  • Seleccione Image > Calculationsy use el canal que eligió como Fuente 1, el mismo canal o "Gris" como Fuente 2 y "Normal" como el Modo de fusión. Elija "Nuevo documento" como destino.

ingrese la descripción de la imagen aquí

  • Cambie el Modo del nuevo documento a RGB o Escala de grises y Guardar como png o jpeg.

Método 2:

  • Ctl / Cmd-clic en la miniatura del canal que ha elegido.

  • Edit > Copy o Ctl / Cmd-C

  • File > New, acepte las dimensiones, Edit > Pasteo Ctl / Cmd-V

  • Eliminar la capa de fondo.

  • Image > Mode > RGB

  • Guardar como png de 24 bits con transparencia.

Puede usar cualquiera de las imágenes resultantes como una superposición o como un canal Alfa cuando sea necesario.

Alan Gilbertson
fuente
Esto parece ser Photoshop, OP solicitó una solución GIMP.
Kelunik
-2

Haga doble clic en la capa, aparecerá un cuadro de estilo de capa, en el lado izquierdo busque y seleccione Superposición de degradado y cambie el color del degradado según sus necesidades y haga clic en Aceptar, luego en el cuadro de superposición de degradado cambie el estilo a lineal y cambie el ángulo y la escala según tu necesidad.

El camino de recortes India
fuente
La segunda vez que agregaste el enlace de tu empresa. ¡Eso no huele a spam, eso es spam!
Mensch