Texturas Transparentes: HowTo?

Uma coisa que muita gente anda procurando é como fazer texturas transparentes para o Second Life. De experiência própria posso afirmar que isso parece um mistério, mas quando você descobre como fazer, na verdade é simples.

Há duas maneiras que eu conheço de se conseguir uma textura transparente, e vou explicar as duas.

1. Fazer uma imagem do tipo PNG: como o FireFox, o SecondLife consegue “enxergar” as áreas transparentes de um png e as exibe corretamente. Não recomendo essa maneira, é comum a imagem final bugar dentro do viewer.
2. Usar imagens do tipo TARGA (TGA), adicionando um alpha channel. Falando assim parece complicado, mas na verdade é simples. É só saber como fazer o alpha channel… Pronto pra mãos à obra?

Imagens Com Alpha Channel, o Mistério Revelado!

 Ok, bem-vindo ao tutorial propriamente dito, você vai precisar de:

• Photoshop – a versãoque eu uso é CS2, mas acredito que qualquer um depois do 7 está OK.
• Teoria de Alpha Channels, que eu vou explicar ali em baixo…
• Uma imagem, que será sua textura. No caso, vou usar minha piranha… (o peixe!!! o peixe!!)

OK, um pouco de teoria, para começar…

Se você já trabalhou um pouquinho só com imagens, deve estar familirizado com a idéia de canais, mesmo sem perceber. Com toda certeza você conhece os canais comuns, RGB (Red Green Blue), não é? Toda imagem pode ser filtrada e dividada nesses canais, mesmo que seja só um bitmap, uma sequência de valores simples de cores. Então podemos dizer que qualquer imagem possui 3 canais: 1 canal Red, 1 canal Green, 1 canal Blue.

Mas o que são esses ditos “canais”? Imagine como se fossem canais de TV. Você muda o canal da TV, e muda a informação que a TV te mostra. Mesma coisa… Abra seu Photoshop, e abra uma imagem qualquer. Pode ser aquela da textura, que vai ter uma transparência. Em lugar de exibir as camadas (layers), vamos exibir os canais (channels), clicando ali opnde a setinha aponta, na figura ao lado. Você verá que a imagem possui os 3 canais (R, G e B). Alterne a exibição entre eles e veja os diferentes resultados obtidos. É combinando-se os 3 canais que a imagem fica como vamos na camada, na exibição normal. O primeiro canal ali em cima,  onde a imagem é exibida colorida é a combinação dos 3 canais.

E o que isso tem haver com transparência? Tudo! O que faremos é criar uma imagem do tipo Targa, que é um tipo que armazena informações de vários canais, incluindo o alpha channel. Esse alpha channel é um canal especial que guarda informações extra a respeito da imagem. Diferentes tipos de programas vão buscar diferentes tipos de informação em alpha channels, mas em geral, usa-se esse canal para informações sobre transparência. É isso que o viewer do Second Life faz. Lê o alpha channel da sua imagem targa para identificar quais partes da sua imagem devem ficar transparentes. So far, so good?

Então vamos deixar a teoria de lado, e partir pra ação!

1. Identifique a parte da imagem que deve ficar tranparente. No caso da minha piranha, todo esse fundo branco ficará transparente, por isso, vou selecioná-lo com a Varinha Mágica (wand).

   

   O importante aqui é ter certeza de que todas as partes que devem ser transparentes estejam selecionadas, e nada além disso, para evitar resultados indesejados.

2. Feito isso, invertemos a seleção, de modo que a parte fosca fique selecionada. Você pode usar ctrl+shift+I, ou clicar no menu Select –> Inverse. (Selecionar –> Inverter). Para que isso? Para que o próximo passo funcione de primeira, hehe. Não solte a seleção.
3. Exiba os canais novamente, clicando na tab “Channels”. Ali em baixo, clique o botão “save selection as channel” (salvar seleção como canal). Isso criará um novo canal, o nosso alpha channel. Tudo que ficar Preto (#000000) nesse canal, será 100% transparente. Tudo que for branco (#FFFFFF)  neste canal, será 100% fosco. Como você deve estar imaginando agora, qualquer tom de cinza funciona no alpha channel, e define porcentagens de transparência. É possível selecionar o canal, e editá-lo normalmente, com brush, para retocar, editar, ou definir graus de transparência.
4. Salve sua imagem como targa, 32 bits, e voilá! Uma textura transparente!