Como posso obter um efeito de traçado perfeito de pixel nítido no Photoshop?


16

Estou trabalhando em pixel art de estilo retro para um videogame. Gostaria de poder adicionar uma borda ao redor de um sprite, mas preciso que ele seja nítido e "perfeito em pixels". Usar o efeito Stroke do Photoshop parece ser a escolha óbvia, mas infelizmente o Photoshop faz alguns anti-aliasing sofisticados e adiciona pixels extras onde eu não os quero:

insira a descrição da imagem aqui (Imagem ampliada para 400%)

A borda superior da imagem foi criada usando o Photoshop Stroke (tamanho: 1px, posição: Outside).

A borda inferior da imagem foi desenhada manualmente com a ferramenta lápis.

O efeito inferior é o que estou procurando, mas estou tentando alcançá-lo sem ter que desenhá-lo manualmente com a ferramenta lápis. Existe uma maneira de forçar o efeito Stroke a se comportar dessa maneira? Ou existe outro método que eu poderia usar para automatizar esse efeito?


Você tem acesso a fogos de artifício? É uma ferramenta melhor para esse tipo de trabalho. Exceto que, para esta resolução de trabalho, eu não me incomodaria com traços e apenas usaria a ferramenta lápis para desenhá-la.
DA01 04/06/12

Use a ferramenta lápis. @ DA01 A Adobe matou o Fireworks, infelizmente.
Billy Kerr

@BillyKerr sim, parece que o conselho de software não envelhece bem. :)
DA01

Respostas:


13

Uma maneira realmente fácil de obter um toque nítido é com um estilo de camada de sombra projetada (sim, você leu corretamente).

Curso afiado no Photoshop

O melhor Goomba é o seu exemplo. O Goomba inferior é o mesmo bitmap, mas mascarado com o traço adicionado como um estilo de camada de sombra projetada. O truque para acertar é a curva de contorno personalizada.

Curva de contorno personalizada

O mesmo pode ser feito com o estilo da camada de brilho externo. E agora você pode aplicar isso a qualquer camada facilmente.


a configuração do ângulo é importante?
horatio

4
Quando a distância é 0, o ângulo não importa.
Marc Edwards

Solução bastante inteligente para usar o Strokes! Isso está funcionando muito bem, nunca pensei em usar contornos!
bigp

Palavra ... eu nunca teria pensado em usar sombras. Isso funcionou perfeitamente para mim e para a mesma aplicação.
Nungster

4

Para fazer isso, você pode seguir este procedimento:

  1. Transforme sua camada em um objeto inteligente, dessa forma, você poderá fazer várias cópias da camada que permanecerão sincronizadas automaticamente com o conteúdo
  2. Faça quatro cópias desse objeto inteligente ( sem usar a função "Novo objeto inteligente via cópia", isso criará objetos inteligentes separados, queremos que sejam instanciados aqui)
  3. Ajuste a posição de cada uma das quatro cópias, empurrando-as para cada pixel nas quatro direções (ou seja, uma para cima, uma para baixo, uma para a esquerda e uma para a direita)
  4. Agrupe as quatro cópias em um grupo na paleta de camadas
  5. Adicione uma camada de cor sólida azul (a cor do traço) e posicione-a acima do grupo
  6. Clique com a tecla Alt pressionada na linha separadora entre o grupo e a camada azul para transformar o grupo em uma máscara de corte para a camada azul

Resultado:

Camadas Sprite

Você pode baixar o arquivo do Photoshop CS6 aqui .

Essa técnica pode ser facilmente adaptada para incluir pixels em todas as 8 direções, apenas repetindo as etapas acima uma segunda vez (outras 4 camadas) e pressionando-as um pixel na diagonal nas quatro direções diagonais.


1

A resposta de Lasse é boa. Dependendo da sua configuração, no entanto, uma camada de ajuste Posterize definida como 2 pode levá-lo a uma etapa. Definitivamente vale a pena tentar.

A colocação em camadas do arquivo, uma cor por camada, definitivamente o levará até lá usando o Posterize.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.