Ir para conteúdo
Entre para seguir isso  
Vittu

Anti-Alising (AA)

Recommended Posts

Vittu    5
Vittu

Anti-Aliasing

 

Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da técnica de ANTI-ALIASING - ou simplesmente - AA.

 

 

O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfície lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:

 

11h5q9f.png

 

 

Na esquerda da imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

 

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.

 

COMO FAZER O ANTI-ALIASING?

 

O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

 

1 - Observar primeiro o desenho que se quer suavizar.

2 - Observar o fundo no qual este desenho está inserido.

3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

 

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para sua visar a borda.

 

Vejamos melhor como isso se dá no exemplo abaixo:

 

15nxhc5.png

 

Seguindo os passos do Anti-Aliasing, temos:

 

1 - Linha amarela (Desenho que quero suavizar)

2 - Fundos Vermelho e Azul (Fundos nos quais o desenho que quero suavizar - linha amarela - está inserido)

3 - Adicionar cores que simbolizam a mistura das cores do desenho com o fundo:

Linha Amarela + Fundo Vermelho = Anti aliasing LARANJA

 

Linha Amarela + Fundo Azul = Anti Aliasing VERDE

 

 

svp5d4.png

Créditos:

Galiant

Compartilhar este post


Link para o post
vHp    6
vHp

Muito bom, obrigado por trazer este tutorial para cá.

 

Att.

Compartilhar este post


Link para o post
Iago Felipe    5
Iago Felipe

Belo tutorial, simples e de fácil entendimento.

Compartilhar este post


Link para o post
Visitante
Este tópico está impedido de receber novos posts.
Entre para seguir isso  
  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×