AULA 14: Imagens transparentes

NESTA AULA
Vamos aprender o que são imagens transparentes, onde e como utilizá-las.

Ferramentas

Para poder seguir esta Aula sugerimos que utilize o PaintShop Pro.

Imagens com transparência

Já reparou que todas as imagens na web são quadradas ou rectangulares ? Isto é óbvio, não existe outra forma para elas: uma imagem em gif ou jpeg é obrigatoriamente quadrada ou rectangular. Uma maneira de alterar esta tendência é fazer parte da imagem com a mesma cor de fundo da página, do género: a página tem un fundo amarelo, quer um pneu no meio dela, portanto desenha um pneu numa imagem com um fundo amarelo igual ao da sua página. Certíssimo, mas ás vezes as coisas não são tão óbvias assim. Vejamos dois casos:

Caso 1:
Fiz a imagem com o fundo igual ao fundo da página, mas se mudar a resolução do meu computador para 256 cores, nota-se a diferença entre as cores.
Este é um caso habitual.

Caso 2:
O fundo da minha página é às riscas, fazer uma imagem com o mesmo fundo torna-se problemático porque as riscas não batem certo e dá uma trabalheira acertar as coisas de maneira a que tudo fique certinho.

Pois dá, mas aproxime-se que vamos ensinar a combater isso utilizando os GIFs transparentes.

Os GIFs transparentes.

O que são? São GIFs normalíssimos, mas que, depois de serem feitos, escolhemos uma ou mais cores nele contidas para serem transparentes. Supomos que já tenha instalado o Paint Shop Pro.

Começando: se a sua página vai ser às riscas, quadrados, bolas ou com outra textura qualquer, veja bem qual é o tom dominante nessa textura e escolha essa cor como fundo da sua imagem. Crie a imagem, pode ser um logotipo, apenas letras, um cabeçalho. Feito? Então vamos ao que interessa.

-No Paint Shop Pro escolha, à sua esquerda nas ferramentas, o conta-gotas. Use-o em cima da cor que quer tornar transparente e clique com o BOTÃO DIREITO do rato em cima desta. Assim definiu que aquela é a côr de fundo (background).
-No menu em cima vá a 'Colors' e, lá dentro, 'Set Palette transparency'. Se a sua imagem tiver mais do que 256 cores, irá aparecer uma janela avisando que para a tornar transparente terá que ser reduzida a uma paleta de 256 cores. Clique em 'Yes'.
-Na segunda imagem pode definir o método de redução de cores, não necessita de modificar nada nesta janela, clique em 'Ok'.
-Na terceira janela escolha a opção do meio: 'Set the transparency value to the current background color'.

A sua imagem já tem transparência, se quiser ver a transparência vá novamente a 'Colors' e escolha 'View Palette transparecy'. A transparência aparecerá em xadrês. (A sua imagem não está aos quadrados, estes só servem para indicar onde está a transparência). Se quiser tirar os quadrados repita o último procedimento desactivando assim o 'View Palette transparecy'.

Grave a imagem: Vá a 'File' e escolha 'Save as'. Em file name dê um nome à imagem, se esta for a imagem de um gato, por exemplo, chame-a de pantufa, e em baixo escolha a extensão 'CompuServe Graphics Interchange (*.gif)'.
Não se esqueça que em cima dessa janela existe o 'Save in' que é onde deve escolher a pasta onde se encontra o seu trabalho e pronto, pode clicar no botão 'Save'. A sua imagem está criada e tem um fundo transparente.
Estes procedimentos tornam-se banais com alguma prática. O Paint Shop Pro é um pouco confuso para estes casos. Se usa, por exemplo, o Photoshop, tudo é mais simples bastando fazer um export to gif89a e escolhendo depois as cores que quer tornar transparente.

Feito isto, nada mais simples, basta inserir o seu logotipo na página com textura, sem que ela fique com um quadrado à volta.