Outline em Pixel Art: Contorno Preto, Colorido ou Sem

Pixel art outline é a linha de pixels que contorna o sprite, e a escolha entre contorno preto, contorno colorido (selout) e nenhum contorno decide se o personagem se separa do cenário. Contorno escuro dá leitura máxima e salva sprite pequeno em fundo detalhado. Selout, com a borda tingida da cor de dentro, deixa o sprite mais suave e integrado. Sem contorno funciona quando o fundo já contrasta com o personagem. O teste que decide é colocar o mesmo sprite nas três versões sobre o fundo claro e o escuro do seu jogo, e no Aseprite o efeito Outline (Shift+O) gera o contorno base em segundos.

Este guia compara as três abordagens no mesmo sprite, mostra contorno interno e externo, o passo a passo no Aseprite e como testar contra o cenário real.

Pixel art outline: para que o contorno serve

Em jogo, o contorno tem uma função antes de ser estilo: separar a figura do fundo. O olho do jogador precisa achar o personagem, os inimigos e os itens em menos de um segundo, em movimento, com efeitos na tela. A silhueta é a primeira coisa que ele lê, e o contorno desenha essa silhueta de forma explícita.

Três fatores aumentam a necessidade de contorno:

1. Sprite pequeno. Em 16x16, a diferença entre a borda do personagem e o fundo pode ser de 1 pixel de cor parecida. O contorno garante a separação.
2. Cenário detalhado. Grama com textura, parede de pedra, muita cor no fundo. Sem contorno, o personagem se dissolve.
3. Paleta compartilhada. Se o personagem usa as mesmas cores do cenário (verde da roupa igual ao da grama), só o contorno salva.

E três fatores reduzem:

1. Sprite grande, com espaço para sombra e luz definirem o volume.
2. Fundo simples ou muito mais escuro, ou claro, que o personagem.
3. Iluminação forte no personagem, com rim light ou brilho na borda.

O guia completo de pixel art para jogos apresenta o contorno como um dos fundamentos. Aqui vamos ao detalhe de cada escolha.

Contorno preto: leitura máxima

O contorno escuro e uniforme em volta de toda a silhueta é o mais fácil de fazer e o que mais garante leitura.

Como fazer bem:

• Use um "preto" da paleta, não preto puro. Um tom muito escuro com matiz (roxo, azul ou marrom quase preto, com valor perto de 10% a 15%) lê como preto e integra melhor. Preto puro em #000000 fica duro, principalmente em paletas quentes.
• Espessura de 1 pixel. Contorno de 2 pixels em sprite pequeno come espaço do desenho.
• Contorno conectado pelos lados, não pelos cantos. Em curvas e diagonais, evite pixels que se tocam lado a lado e também na diagonal ao mesmo tempo. Isso gera o "contorno de espessura dupla", com degraus em L.

Onde ele brilha: sprites de 16 a 32 pixels, jogos de ação rápida, cenários coloridos, estilo inspirado em consoles de 8 e 16 bits. Onde pesa: sprites grandes, em que a linha preta grossa achata o volume, e estilos mais pictóricos.

Contorno colorido e selective outline (selout)

Selout (selective outline, contorno seletivo) é o contorno que muda de cor ao longo da borda. A lógica:

• Cada trecho do contorno é um tom mais escuro da cor de dentro. Onde a borda encosta na pele, o contorno é um marrom avermelhado escuro. Onde encosta no cabelo loiro, um marrom amarelado. Onde encosta na armadura azul, um azul escuro.
• O contorno clareia do lado da luz. Se a luz vem de cima à esquerda, a borda superior esquerda usa um tom menos escuro, às vezes só a cor de sombra do material. Em alguns pontos ele pode sumir, e a forma passa a ser definida pelo contraste com o fundo.
• O contorno fica mais escuro do lado da sombra e embaixo. Ali ele se aproxima do "preto" da paleta, garantindo a silhueta onde mais importa: a base do personagem, onde ele toca o chão.

O resultado é um sprite com volume mais suave, que parece iluminado em vez de recortado. O preço: em fundo movimentado, a borda do lado iluminado pode se perder. Por isso muitos jogos usam um meio-termo, com selout por dentro e uma borda externa escura só do lado da sombra.

Para escolher os tons do contorno, use as rampas da sua paleta: o contorno de cada material é o tom mais escuro da rampa dele. O guia de paleta de cores em pixel art mostra como montar essas rampas.

Sem outline: quando funciona

Sprite sem contorno nenhum depende de duas coisas: contraste de valor entre o personagem e o fundo, e sombreamento bem feito na borda.

Funciona quando:

• O cenário é escuro (caverna, noite) e o personagem é claro, ou o contrário.
• O sprite é grande (48 pixels ou mais), com espaço para a sombra própria definir a borda do lado escuro.
• O estilo do jogo é pintado ou pictórico, com cenário de fundo desfocado ou de baixo contraste (o famoso cenário "lavado" com o personagem saturado na frente).

Não funciona quando o personagem e o cenário dividem a mesma faixa de valor. Um teste rápido: converta uma captura da tela para escala de cinza. Se o personagem some, ele precisa de contorno.

Para quem quer mais de volume com borda limpa sem contorno, o sombreamento faz o trabalho de separação. O guia de sombreamento em pixel art mostra como o lado da sombra pode virar a borda do sprite.

Contorno é uma decisão pequena que só se prova no jogo rodando: ao lado dos inimigos, sobre o tileset, com partículas na tela. Quem aprende pixel art sozinho costuma desenhar o sprite isolado num fundo cinza e descobrir o problema só na engine, depois de 40 frames prontos. No curso de Arte 2D a arte é validada dentro do contexto do jogo desde o primeiro sprite, com a ferramenta que você preferir, e é isso que evita refazer tudo.

Contorno interno e externo

Dois tipos de linha convivem no mesmo sprite:

• Contorno externo é a borda da silhueta, a fronteira entre o personagem e o fundo. É o que garante a leitura.
• Contorno interno separa partes dentro da silhueta: braço na frente do tronco, cinto, borda da capa, olhos.

A regra que funciona em quase todo estilo: o contorno interno é mais claro que o externo. Se o externo é o "preto" da paleta, o interno é o tom de sombra do material ou uma cor intermediária. Contorno interno tão escuro quanto o externo transforma o sprite num mosaico de peças recortadas, principalmente em 16 e 32 pixels.

Em sprite pequeno, muitos contornos internos podem simplesmente sumir: a mudança de cor entre a manga e o tronco já separa as partes. Só mantenha linha interna onde duas áreas da mesma cor se sobrepõem (braço sobre corpo da mesma roupa, por exemplo).

Pixel art outline no Aseprite: atalhos e efeito Outline

O Aseprite tem um efeito de contorno automático. Pela documentação oficial (conferida em outubro de 2026), ele fica em Edit > FX > Outline, atalho Shift+O, e tem estas opções:

• Outline Color: a cor do contorno.
• Background Color: a cor que o algoritmo considera fundo. Ele contorna tudo o que não for essa cor. Em sprite com fundo transparente, deixe transparente.
• Outline Location: Inside (o contorno ocupa a borda de dentro da forma) ou Outside (o contorno é acrescentado por fora).
• Shape Controls: presets de formato (o painel de cima) e uma matriz para formato personalizado (o de baixo).
• Tiled: quando ligado, um contorno cortado pela borda do canvas continua do outro lado. Útil para tiles.

Fluxo para gerar as três versões:

1. Sprite sem contorno numa camada corpo. Duplique a camada (Layer > Duplicate) para guardar a versão original.
2. Contorno preto: na cópia, Shift+O, Outline Color no "preto" da paleta, Location em Outside e o preset circular, que numa grade de 3x3 forma uma cruz sem os cantos. Ele evita os cantos diagonais e dá o contorno mais limpo. O preset quadrado inclui os cantos e engrossa as diagonais.
3. Selout: duplique a versão com contorno preto. Com a Magic Wand (W), desmarque Contiguous no context bar e clique num pixel do contorno: todos os pixels daquela cor ficam selecionados. Agora pinte com o Pencil (B) por cima dos trechos, trocando para o tom escuro de cada material. A seleção impede que você pinte fora do contorno. Clareie os trechos do lado da luz.
4. Contorno interno: use Location em Inside numa cópia, ou pinte as linhas internas à mão com o tom de sombra.

Se quiser trocar a cor de todo o contorno depois, Edit > Replace Color (Shift+R) troca uma cor por outra na camada ou na seleção.

Em outros editores a lógica é a mesma. Onde não houver efeito de contorno pronto (procure no menu de efeitos ou filtros; o nome muda entre programas e versões), faça à mão: selecione a forma do sprite, aumente a seleção em 1 pixel e preencha numa camada abaixo com o "preto" da paleta. Depois limpe os cantos diagonais com o lápis, como no preset circular.

Testar contra o cenário real

Um sprite nunca é avaliado sozinho. Monte um teste no próprio Aseprite:

1. Crie uma camada embaixo de tudo chamada teste_fundo.
2. Cole nela uma captura do cenário do jogo (ou desenhe 3 faixas: o tile mais claro, o mais escuro e o mais detalhado).
3. Coloque as três versões do sprite lado a lado, cada uma em uma faixa.
4. Afaste o zoom para 100% ou 200%, o tamanho real em tela.

O que olhar: em qual fundo cada versão some? O selout perde a borda no fundo claro? O sem contorno some na grama? O preto parece pesado no fundo escuro?

Na engine, o teste é o mesmo, com uma vantagem: se você quer contorno só em certas situações (inimigo selecionado, item interativo), pode gerá-lo por shader em vez de desenhar. Na Godot, um shader de CanvasItem que lê os pixels vizinhos da textura desenha o contorno em tempo de jogo, com cor e espessura ajustáveis. Na Unity, o mesmo se faz com um Shader Graph de Sprite que compara o alfa dos pixels vizinhos, aplicado no material do SpriteRenderer. Para o personagem principal, contorno desenhado à mão continua dando mais controle.

Erros comuns

Contorno de espessura dupla. Pixels do contorno encostando lado a lado e na diagonal ao mesmo tempo, formando degraus em L. Correção: limpe as curvas deixando só a conexão diagonal, ou gere com o preset circular (a cruz sem cantos) no Outline.

Contorno interno tão escuro quanto o externo. O sprite vira um mosaico. Correção: clareie as linhas internas para o tom de sombra do material.

Preto puro numa paleta quente. O contorno parece um adesivo. Correção: troque por um tom escuro com matiz da paleta via Replace Color.

Selout que some no fundo. O lado iluminado se mistura com o cenário claro. Correção: mantenha um trecho escuro no contorno mesmo do lado da luz, ou escureça o fundo.

Contornar cada detalhe pequeno. Botão, fivela e olho com contorno próprio em sprite de 16 pixels. Correção: em sprite pequeno, detalhe é 1 pixel de cor, sem contorno.

Próximo passo

Pegue um sprite seu, gere as três versões com o fluxo acima e monte o teste sobre o cenário do seu jogo. Escolha a abordagem que lê melhor e aplique a mesma em todo o elenco: misturar contorno preto num personagem e selout em outro é uma das inconsistências mais visíveis em jogo indie.

Para aprofundar as cores do contorno, leia o guia de paleta de cores em pixel art.