Agregar transparencia a un PNG existente

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

ingrese la descripción de la imagen aquí

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

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

Para cualquiera que busque una solución de Photoshop para convertir fondos en blanco o negro en transparentes, consulte este hilo .

Respuestas (5)

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

  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 color para hacerlo transparente.
  4. Haga clic en Aceptar".
  5. Guarde la imagen resultante en formato PNG:
    Imagen con transparencia
Fantástico, ¡esa era justo 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 detectar eso, agregué una nota al respecto a la respuesta. De hecho, convertir 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.
¿Cómo se hace esto en el editor gráfico Paint.NET?
@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.
Gracias, funcionó, pero la firma que era negra porque era un poco más brillante. Intenté jugar con el brillo y el contraste y solo ayudó un poco.
@Boris_yo: Es difícil saber por qué, sin ver las imágenes reales, pero las técnicas de esta respuesta podrían ayudar. Por supuesto, tendría que adaptarlos a Paint.NET usted mismo.
La versión de GIMP que usé 2.8.18 no solicitó que un color se volviera transparente, pero funcionó de todos modos simplemente siguiendo sus instrucciones y presionando el botón Aceptar. ¡Gracias!
@ozborn: A menos que haya habido algún cambio importante entre 2.8.16 y 2.8.18, debería estar justo encima de los botones Ayuda/Cancelar/Aceptar. Vea esta captura de pantalla .

Puede usar la herramienta Seleccionar por color de GIMP o la herramienta Varita mágica. De todos modos lo haces, simplemente selecciona 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 podrías tener algunos píxeles negros para formar un mate. No sé en GIMP, pero Photoshop tiene una buena función para eliminar el mate anterior y/o agregar un mate de su elección.

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, casi ha terminado.

Dependiendo de las funciones 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.

Aquí hay una técnica útil de GIMP que utilicé recientemente para esto, probablemente similar a "Color To Alpha" (Color To Alpha estaba atenuado para mí, aunque estaba en modo RGB), pero este método me dio una personalización útil para cómo "suave "Quería que los bordes salieran (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 Máscara de capa/Canal alfa, y luego usé Curvas en el Canal alfa para hacer que la mayor parte de la imagen fuera opaca mientras ajustaba la translucidez de los bordes. Efecto muy bonito y muy personalizable.

Aquí hay un paso a paso para hacerlo:

  • 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... > Lightnessen 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)
  • Pasteen el canal alfa de "imagen" (haga clic en la miniatura derecha de la capa "imagen" y luego péguela)

    • Los pasos anteriores son posiblemente idénticos al comando único "Color to Alpha"
  • Opcional: haga clic 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 que la curva sea plana en la parte superior y luego disminuya rápidamente hacia la izquierda, lo que hace 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 las curvas (en la parte superior de las curvas) y la velocidad con la que declina le permite ajustar cuánto de los bordes de la imagen son transparentes y cuánto.

Hola Demis, bienvenido a GDSE y gracias por tu respuesta. Para que su guía sea más legible, le aconsejo que use las opciones de 'lista de viñetas' o 'lista numerada'. ¡Gracias de nuevo y disfruta del sitio!

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 su negro será seleccionado; ahora presiona eliminar.