Aprenda a desenhar pixel art artesanal no Photoshop

As ilustrações em pixel são ótimas para criar ícones de computador, imagens isométricas e até cenas inteiras. Eles podem ser feitos de forma rápida e fácil usando o Photoshop com alguns ajustes rápidos nas configurações de preferência.

A única desvantagem, porém, é que a pixel art fica melhor quando cada pixel foi colocado à mão, em vez de usar algum filtro do Photoshop. Isso mesmo, colocado à mão – eu sei que isso parece um pouco louco, especialmente quando algumas cenas de pixel têm milhares de pixels nelas. Mas sem o posicionamento da mão, sua pixel art pode parecer uma imagem de baixa resolução, então cuidado!

Acho que uma boa regra geral antes de começar é que você deve ser capaz de ver sua criação claramente como um grupo de tijolos quadrados de cores diferentes, mas se você apertar os olhos e borrar os olhos, poderá vê-la como uma imagem. Imagine que você está fazendo um mosaico de ladrilhos, só que não precisa de rejunte.

Abaixo está uma peça completa de arte em pixel, estaremos criando algumas das peças mais básicas deste trabalho.

Programas

OK, vamos configurar para o desenho. Caso você não tenha uma cópia do Photoshop, existem alguns programas de desenho de Pixel dedicados gratuitos disponíveis para download gratuito:

Eu brinquei com os dois programas, mas voltei para o Photoshop porque estou acostumado com os comandos do teclado.

Ok, vamos configurar uma página

1. Primeiro abra as preferências no Photoshop e defina a interpolação da imagem para “Vizinho mais próximo”.
2. Crie uma nova página de 300 px por 300 px a 72 dpi.
3. Selecione a ferramenta Lápis em 1 pixel. As ferramentas Lápis e Borracha são as únicas ferramentas que você realmente precisa.
4. Ocasionalmente, você pode usar a varinha mágica para selecionar uma área para preencher, apenas certifique-se de que Anti Alias ​​esteja desativado.

Se você usou a ferramenta pincel em incríveis 9 pixels em vez de 1, você terá anti-aliasing ocorrendo e isso estragará o efeito de pixel de borda dura. Então fique com 1 pixel. “Mantenha-o magro, mantenha-o médio”, como minha mãe costumava dizer.

Quando seu desenho de pixel é visualizado em 100% (tamanho real), a ferramenta de lápis com 1 pixel de largura é muito pequena, então você pode achar difícil ver e manipular. Uma ideia é ampliar a visualização para 800% para que você possa ver o que está fazendo. Muitas vezes eu tenho uma segunda janela aberta no Photoshop com a mesma visualização de tela em 200% para que eu possa ver rapidamente como meu desenho parece de perto e também um pouco mais longe ao mesmo tempo.

Podemos salvar nosso documento de trabalho como um arquivo PSD e exportar para uso na web posteriormente como um arquivo GIF. Também podemos ampliar o arquivo posteriormente e transformá-lo em um TIF para impressão em CMYK.

Vamos começar a desenhar

OK, vamos tentar desenhar algo como este livro aberto. Com a ferramenta Caneta, desenhe ao redor da borda para criar seu contorno preto. Em seguida, preencha as cores planas da página e marque o livro.

Crie a ideia de texto na página com algumas linhas de pixel único. Veja como colocamos uma leve dobra na linha para dar a impressão de uma leve curva na página.

Por último, adicione alguns destaques no meio das páginas e na lateral do marcador. Um pequeno toque agradável é um destaque de pixel único no canto inferior externo de cada página, apenas dá uma dica de uma borda de página em vez de ser um bloco sólido.

Uma vez que você tenha o básico de contornos, cores, realces e sombreamento, você pode tentar construir outras formas simples.

Linhas de pixel angulares

Ícones de pixel como os acima podem ser desenhados como uma série de linhas que são apenas 90º entre si e são basicamente quadrados e retângulos. Ocasionalmente, porém, você pode precisar de uma linha em um ângulo.

Algo a ter em mente é que as linhas angulares ficam melhores quando são um padrão regular. Se eles forem irregulares (como os mostrados abaixo), eles podem parecer irregulares e grosseiros quando vistos pequenos. O segundo exemplo abaixo é de ângulos isométricos muito mais suaves, que ficam ótimos com desenhos de pixel, mas não é o ângulo “iso” de 30º que você usou na aula de desenho técnico – na verdade, é algo mais próximo de 26,5º. 30º infelizmente dá uma linha irregular em 100%. Se você fizer uma linha que corre regularmente 2 pontos acima e 1 ponto acima, você obterá 26,5º.

Vamos tentar desenhar outra coisa que seja um pouco mais geométrica e use mais desses padrões de linha?

Vamos desenhar um log de pixel

As linhas ao longo do comprimento são fáceis, sabemos como fazê-las agora, mas e as pontas arredondadas?

Esses dois são padrões regulares, mas estão mudando de linhas horizontais largas para quadrados e depois para linhas verticais. Parece um pouco irregular, mas se você borrar os olhos, parece correto!

A curva no canto superior direito da extremidade do log também é o padrão inverso da seção inferior esquerda. Costumo contar os pixels ou lembrar de certas combinações. A combinação de pixels no círculo é…

• 3 quadrados (através)
• 2
• 111
• 222 (baixo)
• 6
• 2
• 1

Um pouco complicado de pegar o jeito no começo, como usar curvas de bezier no Illustrator, mas logo você terá uma “sensação” para isso. O comprimento do log é fácil: basta usar o sistema 2 ao longo de 1 e tornar o log tão longo ou curto quanto quisermos.

Círculos concêntricos menores no final dão um belo padrão de anel e algumas áreas de sombreamento mais escuro na parte inferior do tronco dão alguma profundidade. Vamos dar ao log uma cor de abeto plana para começar, então para criar profundidade, podemos criar pontilhamento colocando pixels de cores contrastantes em cada lado de nossas linhas de luz alta/baixa luz.

Você pode construir os padrões e torná-los mais complexos. No entanto, cuidado – quanto mais realista e complicado você tentar obter, mais difusa a imagem pode parecer se for destinada a reproduzir em tamanho pequeno.

Eu coloquei mais alguns pixels aleatórios no log #3, pois queria que ele tivesse uma aparência grosseira e contrastasse um pouco com o esquilo.

Para a tora final trabalhei em uma área de casca descascada e um pequeno galho. Achei melhor completar uma área ou estilo primeiro e depois trabalhar mais detalhes nela. Eu não acho que poderia ter desenhado o tronco de casca descascada com padrão de pontilhamento do zero – em vez disso, continuei adicionando camadas sobre camadas. Fases simples funcionam melhor!

Desenho de pixel irregular

Vamos passar para algo um pouco mais irregular, como um esquilo para sentar em nosso tronco. Para algo complicado como este, é melhor começar com lápis e papel.

Primeiro desenhei um quadrado isométrico na minha página para obter as dimensões corretas. Como estamos usando esse exemplo específico para fins editoriais, usei uma fotografia como referência. Então eu começo a esboçar. Presto atenção especial ao ângulo nas orelhas e nos pés, pois quero que eles sigam as linhas isométricas.

Como você pode ver, o detalhe é muito mínimo – eu só quero obter a forma básica e os ângulos corretos trabalhados primeiro. Faremos o resto do trabalho no Photoshop.

Traga o esboço, coloque uma nova camada e fantasma a opacidade para que você possa ver claramente os pixels que está prestes a criar. Não é uma regra rígida e rápida, mas acho que os desenhos em pixel ficam melhores quando têm contornos pretos.

Aqui estou contornando meu esquilo com a ferramenta lápis criando o contorno preto. Uma coisa a ser evitada é se aglomerar onde os pixels de contorno se tocam em mais de um lado. Se você desenhar um quadrado extra, basta excluí-lo com sua ferramenta borracha (também mantida com 1 pixel de largura, veja o círculo vermelho) ele ficará mais limpo e seu público agradecerá por isso.

Ainda parece um pouco bagunçado, mas vai dar forma! As linhas-chave dentro da ilustração também ajudam a dar uma aparência ousada, apenas certifique-se de que sejam de uma cor escura que não seja preta para fazer algum contraste. Chame-me um radical, mas eu fui com marrom neste.

Quando a forma estiver completa, preencha a área interna com uma bela cor de tom médio (marrom suave) e talvez use uma cor clara para destacar alguns destaques.

A regra do contorno preto não é difícil e rápida, deixei algumas linhas-chave pretas abaixo da mandíbula e da pata dianteiras, pois estava ficando difícil ver o que estava acontecendo.

Conclusão

A mão colocando, removendo, mudando de pixels é onde entra a habilidade. Às vezes. Mas uma vez que você começar a pegar o jeito, você será capaz de desenhar praticamente qualquer coisa – tudo que você precisa é um pouco de paciência. Espero que isso ajude e inspire você a criar um ótimo trabalho seu!

Recursos adicionais

Aqui estão alguns recursos para leitura adicional de pixels:

Assine o Psdtuts+ RSS Feed para obter os melhores tutoriais e artigos sobre Photoshop na web.