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

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 publicaste arriba y solo ejecuto Color to Alpha en ella (seleccionando blanco para el color transparente, por supuesto), lo que obtengo es esto:

Como puede ver, esta imagen se ve bien en 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:

El problema es que la herramienta Color to Alpha 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 permanezcan opacos, y solo los píxeles suavizados alrededor de sus bordes se vuelvan semitransparentes. Para arreglar esto, necesitamos volver a 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. Duplica 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 sea completamente blanca (por ejemplo, usando la herramienta Cubo de relleno en el modo "Rellenar toda la selección").

4. Ahora ha agregado un poco de blanco a todos los colores de la imagen, pero el interior de las letras y las figuras aún no son completamente opacos. Para hacerlos así, debemos normalizar la máscara en la capa inferior, pero como 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 Rectángulo Seleccionar para seleccionar cada parte distinta de la imagen (la "B", la "NANO" y el dibujo sobre ellos) en gire y ejecute Colores → Automático → Normalizar en cada selección.

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

Si compara esto con la primera imagen de arriba, casi no se ve ninguna diferencia. Pero mira lo que sucede cuando lo ponemos sobre un fondo negro:

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

Desafortunadamente, también puede ver algunos flecos 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 arreglar eso: puede ajustar manualmente los niveles de color de la máscara en la capa blanca para reducir la franja, o puede intentar muestrear los colores sólidos de las letras en la imagen original y reemplazando el blanco en la capa inferior por 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 vectoriales 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 también ser escalables. ! Solo si es realmente imposible obtener los originales, debería considerar trabajar con archivos JPEG de baja resolución como estos.

Además, incluso si termina usando 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 un simple Copperplate .

El problema aquí es que la imagen tiene un "desvanecimiento a blanco" en los bordes, y no lo ha eliminado. El desvanecimiento o 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 crear una nueva capa en la parte inferior de la pila de capas y llenarla con un color obvio, alto contraste y generalmente 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 colorear de blanco) las áreas de las capas superiores para que se vea 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 probarlo.

Lo que quiere terminar es esencialmente una sola capa con todas las partes transparentes eliminadas (no blancas, sino transparentes). Generalmente uso máscaras de capa para hacer esto, ya que no es destructivo, pero hago lo que sea necesario.

Sin embargo, creo que obtendrá mejores resultados si reconstruye los elementos en lugar de simplemente importar el JPEG. Además, las líneas en esto son realmente delgadas y livianas, y en negro podrían desaparecer.

En algunos casos, es mejor concebir que el logotipo sea un sello o una pegatina, dejar las partes interiores en blanco y trazar una línea blanca de 5 px alrededor de los bordes exteriores.