¿Por qué mi PNG transparente no se ve bien?

23

Quiero convertir un JPG a transparente y usando GIMP agregué capas alfa y transparencia de la misma manera que hago un GIF transparente, lo convertí a PNG pero no se muestra bien cuando lo cargo en mi plantilla:

ingrese la descripción de la imagen aquí

La imagen original esingrese la descripción de la imagen aquí

¿Por qué no se ve bien cuando se convierte en un PNG transparente? ¿Podría tener mejor suerte haciendo un GIF transparente? O es que los colores azules no se mezclan bien con el negro y podría tener más suerte usando algunos de los otros logotipos:

ingrese la descripción de la imagen aquíingrese la descripción de la imagen aquí

Gracias

Niklas
fuente
1
Sería mejor si aclararas cómo lo convertiste en png transparente.
Joonas
Gracias por el comentario. Actualizo las preguntas con la información que usé GIMP de la misma manera que hago que un GIF sea transparente. Todavía no intenté convertirlo en un gif, pero ese sería mi paso alternativo para ver si eso funciona mejor.
Niklas
2
Te puedo decir ahora que .gif no funcionará mejor. La calidad actual que tiene su imagen .png no es la mejor que puede hacer .png. Sin embargo, eso es lo mejor que puede hacer .gif. Por lo tanto, debe haber algo en la forma en que lo haga que solo deje manchas blancas alrededor del logotipo. (Esto posiblemente podría ayudarte journalxtra.com/easyguides/… )
Joonas
Observación extraña adicional de GIMP 2.8.10: * cuando se agrega transparencia a través de "Capa" -> "Transparencia" -> "Color a alfa", la sustracción se realiza independientemente de la selección * cuando se hace por primera vez "Capa" -> "Transparencia" - > "Agregar canal alfa", luego "Color a alfa" solo funcionará en la selección.
tomash

Respuestas:

31

El truco principal, en mi experiencia, para agregar transparencia suave a una imagen en GIMP es usar la herramienta Capa → Transparencia → Color a Alfa ... Por supuesto, debe saber cómo usarlo con buenos resultados; por sí solo, todo lo que hace es hacer que sus imágenes se vean divertidas y translúcidas.

Si tomo la imagen que publicó anteriormente, y simplemente ejecuto Color to Alpha (seleccionando blanco para el color transparente, por supuesto), lo que obtengo es esto:

        Logotipo después de Color a Alfa

Como puede ver, esta imagen se ve bien sobre un fondo claro. Desafortunadamente, ponerlo sobre un fondo oscuro hace que los elementos grises desaparezcan por completo, y las partes azules tampoco se ven tan bien:

        Logotipo después de Color a Alfa sobre fondo negro

El problema es que la herramienta Color a Alfa hizo lo que se suponía que debía hacer: convirtió todo el blanco de la imagen original en transparencia. Esto significa que las líneas grises se convirtieron en líneas negras semitransparentes , y el azul claro se convirtió en azul oscuro semitransparente.

Sin embargo, lo que realmente queremos es presumiblemente que los colores básicos del texto y los demás elementos del logotipo se mantengan opacos, y solo los píxeles suavizados alrededor de sus bordes se vuelvan semitransparentes. Para solucionar esto, necesitamos agregar algo de blanco a los colores. Una forma de lograrlo, para una imagen como esta donde las áreas opacas consisten principalmente en colores únicos, es esta:

  1. Duplicar la capa.

  2. En la capa inferior, convierta la transparencia en una máscara haciendo Capa → Máscara → Agregar máscara de capa ... y seleccionando "Transferir el canal alfa de la capa".

  3. Después de transferir la transparencia a una máscara, haga que la capa inferior esté completamente blanca (por ejemplo, utilizando la herramienta Relleno de cubo en el modo "Rellenar toda la selección").

  4. Ahora ha agregado algo de blanco a todos los colores de la imagen, pero los interiores de las letras y las figuras aún no son completamente opacos. Para que sean así, necesitamos normalizar la máscara en la capa inferior, pero, dado que las diferentes partes de la imagen tienen diferentes colores y luminosidades, debemos hacerlo por separado para cada parte.

    Para hacer eso, haga clic en la máscara de la capa inferior en el cuadro de diálogo Capas para editarla, use la herramienta Selección de rectángulo para seleccionar cada parte distinta de la imagen (la "B", el "NANO" y el dibujo sobre ellas) en gire y ejecute Colores → Auto → Normalizar en cada selección.

Después de hacer todo eso (y opcionalmente fusionar las capas), el resultado debería verse así:

        Logotipo después de restaurar partes blancas a opacas

Si compara esto con la primera imagen de arriba, casi no hay diferencia para ser visto. Pero mira lo que sucede cuando lo ponemos sobre un fondo negro:

        Logotipo después de restaurar partes blancas a opacas, fondo negro

Ahora los colores se ven opacos, pero el fondo sigue siendo transparente y los bordes son suaves.

Afortunadamente, también puedes ver algunas franjas grises alrededor de las letras, especialmente la "B". Sospecho que esto se debe principalmente a que la imagen JPEG original ya sufría pérdida de croma en esas áreas debido a la compresión con pérdida, simplemente no era tan evidente en un fondo blanco. Hay dos formas (que yo sepa) de tratar de solucionarlo: puede ajustar manualmente los niveles de color de la máscara en la capa blanca para reducir las franjas, o puede probar muestrear los colores sólidos de las letras en la imagen original y reemplazando el blanco en la capa inferior blanca de esos colores sólidos (Selección de rectángulo, Relleno de cubo). O incluso puedes probar ambos.

Sin embargo, todo esto es realmente algo que solo debes probar si no tienes otra opción. Una solución mucho mejor es tratar de encontrar los archivos de vectores originales (AI, SVG, EPS, PDF, etc.) a partir de los cuales estos logotipos seguramente se representaron: deben tener información de transparencia completa, estar libres de artefactos de compresión y ser escalables también ! Solo si es realmente imposible obtener los originales, incluso debería considerar trabajar con archivos JPEG de baja resolución como estos.

Además, incluso si termina utilizando los mapas de bits, aún podría obtener un resultado mucho más limpio al volver a dibujar algunos de los elementos, en particular el texto, que parece ser Copperplate simple .

Ilmari Karonen
fuente
2

El problema aquí es que la imagen tiene un "fundido a blanco" en los bordes, y no ha eliminado esto. El desvanecimiento o el suavizado se logra utilizando grises que se convierten en un alto contraste con los colores más oscuros.

No uso GIMP, pero en términos simples, la forma más fácil de trabajar con esto es hacer una nueva capa en la parte inferior de la pila de capas e inundarla con un color obvio, alto contraste y, en general, no en la imagen. A menudo uso RGB (255,0,0). Esto resaltará instantáneamente para usted todas las áreas que necesita eliminar o ajustar para que la imagen funcione en cualquier fondo. Debe eliminar (no color blanco) las áreas en las capas superiores para que pueda ver el rojo de la capa inferior. Cuando haya terminado, elimine u oculte la capa de contraste antes de exportar el PNG. Esta capa de contraste es especialmente útil porque puede ver el resultado final sin necesidad de exportarlo para probar.

Con lo que quieres terminar es esencialmente una sola capa con todas las partes transparentes eliminadas (no blancas, sino transparentes). Utilizo máscaras de capa en general para hacer esto, ya que no es destructivo, pero hago lo que sea necesario.

Sin embargo, creo que tendrá mejores resultados si reconstruye los elementos en lugar de simplemente importar el JPEG. Además, las líneas en esto son realmente delgadas y claras, y en negro pueden caerse.

En algunos casos, es mejor concebir que el logotipo sea un sello o una pegatina, deje los bits internos en blanco y trace una línea blanca de 5 píxeles alrededor de los bordes exteriores.

horacio
fuente