Agregar transparencia a un PNG existente

63

Me gustaría usar esta imagen en un sitio web.

ingrese la descripción de la imagen aquí

Lo que necesito hacer es cambiar el fondo de negro a transparente, para poder usar la flecha en mi sitio manteniendo el fondo de la página.

Utilicé Gimp para convertir la imagen a .png, pero ¿cómo procedo ahora?

gimp png background transparency background-removal Paolo
fuente
2
Para cualquiera que busque una solución de Photoshop para convertir fondos blancos o negros transparentes, vea este hilo .
Juan

Respuestas:

70

La herramienta Color to Alpha de GIMP es muy útil si sabe cómo usarla , y esta tarea parece particularmente adecuada para ello:

  1. Abra la imagen en GIMP y cámbiela al modo de color RGB si es necesario.
  2. Seleccione Capa → Transparencia → Color a alfa ...
  3. Seleccione negro ( #000000) como el color para hacer transparente.
  4. Haga clic en Aceptar".
  5. Guarde la imagen resultante en formato PNG:
    Imagen con transparencia.
Ilmari Karonen
fuente
2
Fantástico, ¡esa fue la respuesta que necesitaba! Solo un aviso: si la opción 'color a alfa' está atenuada, significa que su imagen está en modo de color indexado. Para rectificar, vaya a Imagen -> Modo -> RGB. ¡Salud!
@Heather: Gracias por ver eso, agregué una nota al respecto a la respuesta. De hecho, la conversión a RGB suele ser lo primero que desea hacer con las imágenes indexadas en GIMP de todos modos, a menos que desee que sus ediciones se limiten a la paleta existente.
Ilmari Karonen
¿Cómo se hace esto en el editor gráfico Paint.NET?
Boris_yo
1
@ Boris_yo: Parece que el complemento Unblend para Paint.NET debería hacer lo mismo que Color to Alpha en GIMP. Sin embargo, no lo he probado yo mismo.
Ilmari Karonen
Gracias funcionó, pero la firma era negra porque era un poco más brillante. Intenté jugar con brillo y contraste y solo ayudó un poco.
Boris_yo
11

Puede usar la herramienta de selección por color de GIMP o la herramienta Varita mágica. De todos modos, solo seleccione todos los píxeles negros. Luego, en lugar de eliminar los píxeles seleccionados, aplique una máscara de capa:

Layer -> Mask -> Add layer mask

Seleccione el Selectionbotón de radio " " y asegúrese de seleccionar la Invert maskcasilla de verificación " ". Ahora, todos los píxeles negros son transparentes.

Exportar como PNG o GIF.

El problema está en los bordes alrededor de la flecha, donde puede tener algunos píxeles negros para formar un mate. No lo sé en GIMP, pero Photoshop tiene una buena característica para eliminar el mate anterior y / o agregar un mate de su elección.

vulkanino
fuente
4

No uso gimp, pero esta imagen es un caso simple en el que debería ser sencillo obtener una transparencia decente.

Si selecciona la imagen completa y luego la usa (o más bien la versión en escala de grises) como un canal alfa, ya está listo.

Dependiendo de las características de exportación de su software, puede elegir el alfa como la transparencia PNG o puede usar el canal alfa como una máscara de selección y eliminar la selección (mala) o usar la selección como una máscara de capa (no destructiva), luego exportar.

Horacio
fuente
4

Aquí hay una técnica útil de GIMP que utilicé recientemente para esto, probablemente similar a "Color To Alpha" (Color To Alpha estaba en gris para mí, aunque estaba en modo RGB), pero este método me dio una personalización útil de cuán "suave" "Quería que salieran los bordes (a diferencia de las técnicas de varita mágica que dejan un borde negro delgado alrededor de la imagen, en lugar de hacer que los bordes sean parcialmente transparentes).

En pocas palabras, copié una versión en escala de grises de la imagen original en su Capa Máscara / Canal Alfa, y luego usé Curvas en el Canal Alfa para hacer que la mayor parte de la imagen sea opaca mientras ajustaba qué tan translúcidos deberían ser los bordes. Muy buen efecto y muy personalizable.

Aquí hay un paso a paso para hacer eso:

  • Comenzando con una capa con la imagen original llamada "imagen"
  • Duplique la capa "imagen" en una nueva capa llamada "imagen alfa" (con el botón Duplicar capa en el cuadro de diálogo Capas)
  • Colors > Desaturate... > Lightness en la capa "imagen alfa"
  • Haga clic derecho en la capa "imagen" y Add Alpha(si aún no lo ha hecho)
  • Copie toda la "imagen alfa" (en la capa "imagen alfa", Select All& Copy)

  • Paste en el canal alfa de "imagen" (haga clic en la miniatura derecha de la capa "imagen" y luego péguelo)

    • Los pasos anteriores son posiblemente idénticos al comando único "Color a alfa"

  • Opcional: haga clic con el botón derecho en "imagen" y Show Layer Mask(debería mostrarle lo que pegó). Si omite esto, puede ver el cambio de transparencia, en vivo, durante el siguiente paso.

  • Color > Curves
  • En el cuadro de diálogo Curvas, haga la curva plana a lo largo de la parte superior y luego disminuya rápidamente hacia la izquierda, haciendo que la mayoría de los píxeles brillantes se vuelvan completamente blancos (es decir, la imagen es opaca allí).

  • Desmarque Show Layer Maskpara ver la transparencia aplicada.

    Mover el punto de saturación de Curvas (en la parte superior de las curvas) y la velocidad con la que disminuye le permite ajustar cuánto de los bordes de la imagen son transparentes y cuánto.

Demis
fuente
1
Hola Demis, bienvenido a GDSE y gracias por tu respuesta. Para que tu tutorial sea más legible, te aconsejo que uses las opciones de 'lista de viñetas' o 'lista numerada'. Gracias de nuevo y disfruta el sitio!
Vincent
2

Puedes usar Adobe Photoshop. Vaya a Seleccionar -> Gama de colores . Mientras mantiene presionada la tecla Mayús , haga clic en el color que necesita eliminar (negro en su caso). Presiona OK. Entonces todo tu negro será seleccionado; ahora presiona eliminar.

Diana Alexescu
fuente