Hoje resolvi trazer para vocês a versão traduzida desse tutorial de Pixel Art que sempre é usado como resposta da pergunta “Alguém conhece um bom tutorial de pixel art?”. Ele foi feito pelo Derek, criador do spelunky e está sendo traduzido por mim, criador de porra nenhuma.
Como ele é enorme, resolvi separa em dois posts diferentes. Nessa primeira parte, vamos aprender as ferramentas que podemos utilizar, como criar um esboço, escolher e aplicar cores.
Meus comentários estarão em itálico.
Nota: esse tutorial foi criado em 2007 para meu blog pessoal. Algumas pequenas atualizações foram feitas desde então, mas nada muito relevante.
Nesse tutorial de 10 passos, eu vou ensinar vocês a criar um “sprite”, que é uma figura 2D de um personagem ou objeto. O termo veio dos jogos, é claro.
Criar pixel art é uma habilidade que eu resolvi desenvolver porque eu precisava de gráficos para meus jogos. Depois de muita prática, eu fiquei até bom nisso, e comecei a ver isso mais como uma arte do que uma ferramenta. Hoje em dia, pixel art é muito popular na comunidade indie.
Esse tutorial foi criado a muito tempo para ensinar às pessoas sobre os conceitos básicos da pixel art. Existem muitos outros tutoriais por ai, mas eu acho eles muito complicados e cheio de palavras desnecessárias… Pixel art não é uma ciência. Você nunca deveria ter que calcular um vetor quando estivesse fazendo pixel art.
1. Ferramentas
Uma das coisas mais legais da Pixel art é que você não precisa de programas mirabolantes – O programa de ilustração que já veio no seu computador provavelmente já é bom o suficiente! Existem programas feitos especificamente para pixel art, como o Pro Motion ou, para os usuários de Mac, Pixen. Não posso dizer que eu já testei eles, mas ouvi falar bem. Para esse tutorial, estarei usando o photoshop, que é muito caro, mas é ótimo para qualquer tipo de trabalho com imagens e possui muitas ferramentas para facilitar sua vida.
Alguns outros programas que você pode usar são Paint.net e GIMP.
Usando photoshop para pixel art
Quando estiver usando photoshop, sua ferramenta de confiança será o lápis (pencil tool) (o atalho é a tecla B), que é a alternativa para o pincel (brush tool). Principalmente porque o lápis permite que você pinte um pixel de cada vez.
Duas outras ferramentas úteis serão a Selecionar 
(o atalho é a tecla M) e varinha mágica 
(o atalho é a letra W) para selecionar e arrastar ou copiar e colar. Lembre-se que segurar o “Shift” ou “Alt” enquanto faz a sua seleção pode adicionar ou extrair coisas da sua área selecionada. Isso é muito útil quando se tenta selecionar uma área que não é perfeitamente quadrada.
Você também usará o eyedropper 
(atalho é o “I”) para copiar cores. Manter as mesmas cores é importante para a pixel art por inúmeras razões, então você vai querer pegar a mesma cor e reutilizar ela.
Por fim, tenha certeza que aprendeu a usar os atalhos. Eles vão te fazer economizar tempo e energia. Um bom pra saber é o X, que troca as suas cores primárias e secundárias.
2. Linhas
Pixels são, essencialmente, pequenos blocos coloridos. A primeira coisa que você precisa aprender é como usar esses blocos efetivamente para qualquer tipo de linha que você queira usar. Discutiremos as duas formas mais básicas de linhas: reta e curva.
Linhas retas
Eu sei o que você está pensando – “isso parece ser muito fácil, então não preciso me preocupar!”.
Mas pixels, mesmo em linha reta, podem ser problemáticos. O que nós queremos evitar aqui são os “Jaggies” – pequenas quebras na linha que fazem ela parecer desnivelada. Jaggies aparecem quando um pedaço da linha é maior ou menor que as outras em sua volta.
Linhas curvas
Para curvas, tenha certeza que o declínio ou subida são consistentes. Nesse exemplo, a curva bem polida vai de 6 pixels para 3, depois 2 e finalmente 1 (6>3>2>1). Enquanto a curva com jaggy vai de 3 para 1 e volta para 3 (3>1<3).
Conclusão
Se sentir confortável fazendo qualquer linha em uma pixel art é crucial. Daqui a pouco veremos como usar anti-aliasing para deixar nossas linhas bem ~suaves~.
3. Conceitualizando
A primeira coisa que você precisa é uma boa ideia. Tente visualizar o que você quer pixelizar, na sua cabeça, em um papel ou no computador. Um pouco de pré-planejamento pode deixar tudo mais fácil.
Coisas para pensar
1. Onde meu sprite será utilizado? É para um site ou um jogo? Eu terei que fazer uma animação depois ou é só uma imagem mesmo? Se o sprite vai ser animado depois, talvez você queira fazer ele menor e menos detalhado. Se for fazer apenas uma imagem você pode colocar quantos detalhes quiser, porque nunca mais vai ter que se importar com eles. Então, decida onde o sprite vai ser utilizado e tudo vai ser melhor.
2. Que limitações eu possuo? Um pouco antes, eu disse que as palhetas de cores são importantes. Um dos motivos é que a sua talvez seja limitada, talvez por hardware (isso é bem raro hoje em dia) ou por coerência. Talvez você esteja tentando imitar o estilo do gráfico do NES ou outro console retro. Ah, lembre-se de considerar as dimensões de seu sprite e como ele vai se comportar com relação as coisas em seu redor.
LET’S GET READY TO RUMBLE
Para esse tutorial, eu quis ter certeza que o sprite era grande, assim você poderia perceber claramente o que estava acontecendo em cada passo. Então eu resolvi criar o Lutador Legislador, o chutador de bundas da corte, para usar como meu modelo. Ele poderia estar em um jogo de luta, ou algo do tipo, com movimentos como “combo mortis”.
4. O esboço
Um esboço preto será uma boa estrutura para seu sprite, então é o melhor jeito de começar. A razão para escolher a cor preta é porque ela é legal, estadual, bonita e é neutra. Depois explicarei como você pode mudar a cor do esboço para obter algo mais realista.
Como começar
Existem duas formas de começar o seu esboço. Você pode fazer ele de qualquer jeito e depois passar a limpo, ou então colocar um pixel de cada vez pra já ser o definitivo.
Acredito que o melhor jeito para você começar dependa do tamanho do sprite e da sua habilidade de pixelização. Se seu sprite for muito grande, é muito mais fácil fazer um desenho qualquer só pra dar uma ideia e então passar a limpo.
Nesse tutorial, estamos criando um sprite muito grande, então eu vou usar o primeiro método. O bom é que ele também deixa a explicação mais fácil.
Primeiro passo 1: esboço cru
Usando seu tablet ou mouse, desenhe um esboço bem cru para seu sprite. Tenha certeza que ele não tenha ficado tão cru, ele deve representar mais ou menos o produto final que você quer.
Passo 2: Passando a limpo
Primeiramente, aumente bastante o zoom do seu editor para que você possa ver cada pixel perfeitamente. Então, comece a polir o esboço. Tente limpar bastante o excesso de pixels, as linhas devem ter apenas um pixel de espessura. Livre-se de qualquer jaggy e adicione pequenos detalhes que passaram em branco no passo anterior.
Até mesmo sprites grandes dificilmente excedem a proporção 200×200 pixels. A frase “fazendo muito com pouco” nunca se encaixou tão bem em algo. E, logo logo, você vai perceber que um pixel faz toda a diferença.
Mantenha seu esboço simples. Os detalhes vão aparecer daqui a pouco, mas gora, concentre-se em definir as partes grandes, como os músculos, nesse caso. Pode parecer pouca merda por agora, mas peço que seja paciente.
5. Cores
Com o esboço feito, nós temos um jardim secreto para colorir. Balde de tinta e outras ferramentas do tipo vão facilitar muito a nossa vida. Escolher cores pode ser… Um pouco mais difícil. No entanto, aqui estão alguns conceitos básicos de presente para você.
Modelo de cores HSB
HSB significa (H)ue, (S)aturação e (B)rightness. É um dos módulos de cores de computadores. Outros exemplos são RGB (Vermelho, verde e azul) e CMYK (Ciano, Magenta, Amarelo e Preto), que você provavelmente já ouviu falar. A maioria dos programas de ilustração usa o HSB para seleção de cores, então vamos desconstrui-lo:
Hue – O que você entende como “cores”. Tipo vermelho, azul, laranja, etc…
Saturação – O quão intenso uma cor é. 100% de saturação te da uma cor bem brilhante. Quando menos saturada uma cor vai ficando, mais próxima do cinza ela fica.
Clareza (ou luminosidade) – Luminosidade da cor. 0% claro é preto.
Escolhendo cores
As cores que você vai usar ficam à sua escolha, mas existem algumas coisas que você deve ter em mente:
1. Cores menos saturadas e menos claras tendem a parecer mais reais e menos cartoonizadas.
2. Pense na roda das cores – Quanto maior a distância de uma cor para a outra, mais separadas ela são. Cores como vermelho e laranja, que estão muito próximas, ficam legais quando estão próximas.
3. Quanto mais cores você usa, mais seu sprite vai chamar a atenção. Para fazer um sprite funcionar bem, use apenas duas ou três cores principais.
Aplicando cores
Aplicar as cores é bem fácil. Se você estiver usando photoshop, você vai querer selecionar a área que você vai pintar com a varinha mágica e então preencher ela apertando Alt+F (cor primária) ou Ctrl-F (cor secundária).
Você pode fazer algo semelhante se estiver usando o paint.net, basta selecionar com a varinha mágica e clicar com o balde de tinta em cima para pintar toda aquela área.
Na próxima parte: Aplicando as sombras, Matização, Selout, Anti-aliasing e Finalizando.
