Por que meu PNG transparente não parece bom?

Quero converter um JPG para transparente e, usando o GIMP, adicionei camadas alfa e transparência da mesma maneira que tornei um GIF transparente. Convertei-o em PNG, mas ele não aparece bem quando carrego no meu modelo:

A imagem original é

Por que não fica bem quando transformado em um PNG transparente? Eu poderia ter melhor sorte criando um GIF transparente? OU são as cores azuis que não se misturam bem com o preto e eu poderia ter mais sorte usando alguns dos outros logotipos:

obrigado

O truque principal, na minha experiência, a adição de transparência suave para uma imagem no GIMP está usando a Camada → Transparência → Cor para Alpha ... ferramenta. Obviamente, você precisa saber como usá-lo com bons resultados - por si só, tudo o que faz é fazer com que suas imagens pareçam engraçadas e translúcidas.

Se eu pegar a imagem que você postou acima e apenas executar Color to Alpha nela (escolher branco para a cor transparente, é claro), o que eu recebo é o seguinte:

Como você pode ver, esta imagem fica bem em um fundo claro. Infelizmente, colocá-lo em um fundo escuro faz com que os elementos cinzentos desapareçam completamente, e as partes azuis também não parecem tão boas:

O problema é que a ferramenta Color to Alpha fez o que deveria: converteu todo o branco da imagem original em transparência. Isso significa que as linhas cinza se tornaram linhas pretas semi-transparentes e o azul claro se tornou azul escuro semi-transparente.

O que realmente queremos , no entanto, é presumivelmente que as cores básicas do texto e os outros elementos do logotipo permaneçam opacas, e apenas os pixels com suavização de borda em torno de suas bordas se tornem semitransparentes. Para corrigir isso, precisamos adicionar um pouco de branco de volta nas cores. Uma maneira de conseguir isso, para uma imagem como esta em que as áreas opacas consistem principalmente em cores únicas, é:

1. Duplique a camada.

2. Na camada inferior, converta a transparência em uma máscara executando Camada → Máscara → Adicionar máscara de camada ... e selecionando "Transferir canal alfa da camada".

3. Após transferir a transparência para uma máscara, torne a camada inferior completamente branca (por exemplo, usando a ferramenta Preenchimento de balde no modo "Preencher seleção inteira").

4. Agora você adicionou um pouco de branco a todas as cores da imagem, mas o interior das letras e figuras ainda não é completamente opaco. Para fazê-lo, precisamos normalizar a máscara na camada inferior - mas, como as diferentes partes da imagem têm cores e claridades diferentes, precisamos fazê-lo separadamente para cada parte.

   Para fazer isso, clique na máscara da camada inferior na caixa de diálogo Camadas para editá-la, use a ferramenta Seleção de retângulo para selecionar cada parte distinta da imagem (o "B", o "NANO" e o desenho acima) em gire e execute Cores → Automático → Normalizar em cada seleção.

Depois de fazer tudo isso (e, opcionalmente, mesclar as camadas), o resultado deve ficar assim:

Se você comparar isso com a primeira imagem acima, quase não haverá diferença. Mas veja o que acontece quando o colocamos em um fundo preto:

Agora as cores parecem opacas, mas o fundo ainda é transparente e as bordas são suaves.

Infelizmente, você também pode ver algumas franjas cinzentas nas letras, especialmente o "B". Eu suspeito que isso ocorra principalmente porque a imagem JPEG original já sofreu perda de croma nessas áreas devido à compactação com perdas, simplesmente não era tão aparente em um fundo branco. Existem duas maneiras (que eu conheço) de tentar corrigir isso: você pode ajustar manualmente os níveis de cor da máscara na camada branca para reduzir a franja ou pode experimentar amostras das cores sólidas das letras na imagem original e substituindo o branco na camada inferior, aplique branco essas cores sólidas (seleção de retângulo, preenchimento de balde). Ou você pode até tentar os dois.

No entanto, tudo isso é realmente algo que você só deve tentar se não tiver outra escolha. Uma solução muito melhor é tentar encontrar os arquivos vetoriais originais (AI, SVG, EPS, PDF etc.) dos quais esses logotipos certamente foram renderizados - eles devem ter informações completas de transparência, estar livres de artefatos de compactação e também serem escaláveis ! Somente se for realmente impossível obter os originais, você deve considerar trabalhar com arquivos JPEG de baixa resolução como esses.

Além disso, mesmo se você acabar usando os bitmaps, poderá obter um resultado muito mais limpo redesenhando alguns dos elementos - em particular o texto, que parece ser um simples Copperplate .

O problema aqui é que a imagem tem um "desbotamento para branco" nas bordas e você não o removeu. O desbotamento ou suavização de serrilhado é conseguido usando cinzas que se tornam um alto contraste contra cores mais escuras.

Eu não uso o GIMP, mas em termos simples, a maneira mais fácil de trabalhar com isso é criar uma nova camada na parte inferior da pilha de camadas e preenchê-la com uma cor óbvia, alto contraste e geralmente não na imagem. Eu costumo usar RGB (255,0,0). Isso destacará instantaneamente todas as áreas que você precisa remover ou ajustar para que a imagem funcione em qualquer plano de fundo. Você precisa remover (não a cor branca) as áreas nas camadas superiores para ver o vermelho da camada inferior aparecendo. Quando terminar, remova ou oculte a camada de contraste antes de exportar o PNG. Essa camada de contraste é especialmente útil porque você pode ver o resultado final sem precisar exportá-lo para testar.

O que você deseja concluir é essencialmente uma única camada com todas as partes transparentes removidas (não brancas, mas transparentes). Geralmente, uso máscaras de camada para fazer isso, pois não é destrutivo, mas faço o que precisa ser feito.

Penso, no entanto, que você terá melhores resultados se reconstruir os elementos em vez de apenas importar o JPEG. Além disso, as linhas são realmente finas e claras, e no preto elas podem cair.

Em alguns casos, é melhor conceber o logotipo como um selo ou adesivo, deixar os bits internos em branco e traçar uma linha branca de 5px nas bordas externas.