Como remover os pixels brancos nas bordas ao exportar um GIF transparente?

11

Peguei os carregadores do xooplate.com e depois os exportei com a ajuda da ação incluída para um GIF. Mas eu tenho alguns pixels brancos ao redor do carregador que são realmente irritantes quando exibidos em um fundo escuro. Você pode vê-lo aqui, em um quadro que extraí do gif:

insira a descrição da imagem aqui

Como posso evitar esses pixels brancos e manter o plano de fundo transparente?

Ryan
fonte
Você pode mencionar o software que está usando. Posso assumir o Photoshop, mas nunca é demais marcar sua pergunta corretamente e mencionar o software que você está usando.
Scott
é photoshop. Estou interessado em remover os pixels brancos, não transparência (KMSTR)
Ryan
1
O kontur está correto sobre o motivo da rugosidade (ou seja, o estado binário de transparência ativado / desativado). Dependendo do contexto, é possível trapacear um pouco, criando uma imagem quase maior e quase idêntica, salva como PNG com transparência alfa e colocá-la como uma imagem estática de fundo com o gif animado de baixa cor centralizado nela. Dessa forma, você pode garantir que a cor fosca (conforme descrito na resposta da kontur) possa ser conhecida com um maior grau de certeza.
horatio 31/01

Respostas:

19

A maneira como a transparência funciona com gifs / pngs de 8 bits é que um pixel é totalmente transparente ou totalmente opaco .

Nos cantos de um círculo em que o círculo combina de forma transparente com o plano de fundo, geralmente existem pixels semitransparentes para facilitar a transição. Essa transição suave não pode ser totalmente reproduzida com gifs / pngs de 8 bits.

Uma maneira de fingir isso é selecionar um fundo fosco para todos os pixels semitransparentes. Isso significa que os pixels que não são totalmente transparentes obtêm sua cor calculada como se estivessem sobre a cor fosca.

Os pixels brancos no gif do seu círculo aconteceram assim, porque foram criados para serem usados ​​contra um fundo branco. Os pixels semi-transparentes do círculo original foram rasterizados contra a cor branca fosca, resultando em pixels quase brancos, mas totalmente opacos nos cantos.

A maneira de remediar esta situação , se você tiver o original, círculo totalmente transparente é save for web & devicese selecione uma cor fosca que se adapta ao seu fundo. Dessa forma, os pixels potencialmente semi-transparentes serão mesclados aos pixels totalmente opacos contra a cor fosca e, visualizados no site com uma cor de fundo semelhante, parecerão totalmente suaves. Observe que a) os gráficos com pequenos intervalos de áreas semitransparentes (em pixels) funcionam melhor eb) isso exige que o plano de fundo com o qual o gif seja mostrado seja o que, em uma cor consistente, você escolher para o seu mate.

insira a descrição da imagem aqui

Nesta imagem:

  • O canto superior esquerdo é o gráfico redondo original com cantos suavizados, ou seja, suavizados.
  • O mesmo resultado obtido com png-24, como visto no canto superior direito - mas isso não funciona para animação.
  • A vista inferior esquerda mostra como os pixels semitransparentes do gráfico são transpostos para a cor fosca vermelha selecionada. Observe também como esses pixels, que são completamente transparentes, permanecem completamente transparentes. Enquanto apenas os pixels que possuem um pouco de transparência são "subjacentes" com a cor fosca, e os pixels totalmente opacos permanecem completamente inalterados pelas configurações de transparência (no entanto, eles são afetados pelas seleções no tipo de pontilhado e nas cores).
  • O canto inferior direito se parece com o tipo de opções de exportação que foram usadas para sua imagem de exemplo. Com um matte branco selecionado, os mesmos pixels que mostram vermelho na imagem inferior esquerda, mostrarão branco na imagem inferior direita. Isso é perfeitamente aceitável se você mostrar em fundo branco. Com outros fundos mais escuros, os pixels brancos são exibidos porque usam a cor fosca incorreta para criar pixels totalmente opacos para pixels não totalmente transparentes.

Veja os dois gifs exportados com vermelho e branco fosco nesta imagem, contra um fundo diferente. Isso mostra como o fosco vermelho combina bem com um fundo vermelho, mas também como o fosco branco é perturbador contra um fundo preto.

insira a descrição da imagem aqui


Se você estiver em uma situação lamentável, de que não possui o arquivo original com alfas completos com suavização de serrilhado (ou seja, você tem apenas o gif de 8 bits), é problemático reverter essa varredura fosca - pixel por pixel, você deve remover a cor fosca dos pixels semitransparentes e depois reexporte-os com as configurações mais apropriadas.

kontur
fonte
5

Na caixa de diálogo Salvar para a Web, defina a cor Fosco à direita da janela para a cor do plano de fundo da sua página da Web.

Os GIFs não suportam transparência total de 8 bits, apenas a transparência de 1 bits. O melhor que você pode fazer é usar uma cor que corresponda ao fundo da página da Web, para que a imagem se misture facilmente a essa cor.

Scott
fonte