CriarWeb.com > Manuais > Workshop de HTML

Os halos são efeitos pouco desejáveis que tem o fundo transparente, geralmente em formato GIF. O que ocorre com os halos que aparece uma linha de cor ao redor da silhueta da imagem. Esta linha pode ser escura ou clara. Se for escura e a colocarmos sobre um fundo escuro, não se verá o halo e tudo irá bem. Mas se for escura e a colocarmos sobre um fundo claro teremos o mencionado efeito de halo.

Em formato GIF, sempre que a silhueta da imagem tiver a borda suavizada, vamos sofrer o efeito de halo. Agora também, se o halo tiver uma tonalidade similar ao fundo onde estamos colocando a imagem, não o veremos e o resultado será bom. Por isso, às vezes as imagens GIF vêm preparadas para colocar sobre fundos claros ou escuros. Se a colocamos sobre um fundo com uma tonalidade que não lhe corresponde sairá silhueta rodeando a imagem, ou seja, aparecerá o famoso halo.

Por exemplo, aqui temos uma imagem que tem um halo.

O halo é essa pequena borda escura que há ao redor da silhueta do círculo e do caracol. Este halo aparece porque esta imagem GIF transparente está preparada para colocar sobre um fundo escuro. De fato, aqui temos a prova do bem que se veria a imagem sem o halo se a colocamos sobre um fundo preto.

Referência: Publicamos outro artigo com detalhes sobre os formatos gráficos GIF e PNG e os halos: Transparência em formatos gráficos para web GIF e PNG.

O suavizado provoca os halos

Enquanto a imagem tiver um suavizado existirá um halo. Se o suavizado da imagem estiver preparado para um fundo claro e a imagem se coloca sobre um fundo claro, não se verá o halo. Porém, se a imagem tem um suavizado tirando a claro e se coloca sobre um fundo escuro, o halo aparecerá. Ou seja, sempre temos que colocar a imagem sobre um fundo parelho ao que tivermos preparado.

Se não tivermos suavizado não sairá o halo, porém o efeito será sensivelmente pior, em muitos dos casos. Na imagem seguinte fizemos o mesmo desenho, porém sem suavizado.

Acho que para qualquer pessoa estará claro que o resultado tem pior qualidade. O halo desapareceu, mas se nota o pixelado ao redor da imagem.

Fazer um suavizado da cor desejado para evitar o halo

Agora vamos mostrar a maneira de conseguir um suavizado sem que apareça o halo. Vamos trabalhar com Photoshop, embora cada qual fará um processo similar em seu programa de design gráfico preferido.

Começamos com uma imagem com o tela de cor que desejarmos como fundo. Ou seja, colocamos o fundo da mesma cor da do fundo da web.

Logo, fazemos o desenho que quisermos.

A seguir fazemos um "Salvar para Web", no menu Arquivo de Photoshop, para salvar a imagem passando por um quadro de diálogo que nos vai permitir realizar uma série de ações para selecionar a transparência.

Na janela de Salvar para web temos que fazer trÊs passos. (Sempre ter em conta que queremos salvar a imagem em formato GIF, que se indica nas opções que há à direita. Pois se estamos salvando com outro formato como JPG, não poderemos selecionar transparência porque não tem. Além disso, temos que ter marcado o checkbox para permitir transparência.)

1. Primeiro selecionamos a ferramenta conta-gotas.
2. A seguir clicamos na cor que quisermos que seja transparente, que será o fundo da imagem.
3. Por último apertamos o botão para atribuir as cores selecionadas ao transparente. Com isso, conseguimos que a cor selecionada se mostre como transparente.

Este processo pode ser repetido se quisermos que várias cores da imagem se mostrem como transparente.

O resultado é a seguinte:

Observaremos que a imagem, sobre fundo branco, aparece com um halo azul, porém quando colocamos a imagem sobre um fundo que tenha a tonalidade azul, o halo desaparecerá de nossa vista.