Tutorial Detalhado - Dando Volume ao PixelArt

Agora que a Adobe liberou a Suite CS2 não é mais desculpa dizer que é difícil conseguir um editor profissional de graça.
Nesse tutorial eu uso o Photoshop CS5 mas não é nada que não se possa fazer no CS2 ou qualquer que seja o seu editor de imagens.

Vou explicar técnicas para desenhar e dar volume as formas no pixelart e algumas dicas voltadas para o PS.
Não vou me prender a coisas como "o que é pixelart" ou o que é "anti-aliasing" ou "como usar o Photoshop", para isso procure tutoriais básicos sobre o assunto.


Recursos avançado de layers, diversas ferramentas de ajuste de cor, filtros, enfim, um ambiente ótimo para qualquer artista digital mas muita gente de engana ao pensar que sua complexidade deixa o Photoshop fora de opção como um editor de pixelart.

O maior mito que afasta pixelartistas do PS é qualquer traço ou forma nele tem anti-aliasing automático.
Isso não é realmente um problema porque o PS lhe da total controle sobre o que está fazendo, ou seja, é possível desativar o anti-alias em diversas situações.

Desenhando shapes sem anti-alias

Para desativar o anti-alias na hora de desenhar siga os passos:

Ao selecionar qualquer tipo de forma primitiva ou o custom shape marque o mostrado na imagem.



Ao fazer isso aparecerá outras opções ao lado e então desmarque o "Anti-alias"



Agora você pode desenhar shapes sólidos sem suavização das bordas.



Redimensionando imagem sem anti-alias

É possível escolher o tipo de qualidade do redimensionando.
Com a ferramenta "Image Size" (Alt + Ctrl + I), por exemplo, tem uma opção para especificar isso.



Normalmente estaria marcado "Bicubic" que é o algoritmo que faz a suavização, mas ao marcar "Nearest Neighbor" o PS vai esticar a imagem preservando a aparência sólida dos pixeis.

Configurando pincel e borracha

Clique e segure o mouse em cima da "Brush Tool" e selecione a "Pencil Tool" para desenhar de forma sólida.



Para desativar todos os efeitos, aperte F5 para abrir as configurações do brush e desmarque todas as opções.



Na caso da borracha, ao seleciona-la, vá até o menu da ferramenta e no campo "Mode" marque "Pencil" ou "Block".



Desativando o anti-alias da ferramenta de transformação

Vá em Edit > Preferences > General e no campo "Image Interpolation" coloque "Nearest Neighbor".
Com isso é possível rotacionar ou esticar irregularmente a imagem sem suavizações.

Essas são as principais dicas para fazer pixelart no Photoshop.
Agora vamos ao verdadeiro tutorial.


Primeiro de tudo, faço um rascunho!
É importante ter uma base enquanto desenha pixel por pixel ou vai acabar de perdendo no próprio trabalho.
Um rascunho de uma nave do tipo "jato" é simples de se fazer, comece marcando com retas o tipo de forma:



Depois vá adicionando formas



Até chegar a um resultado que lhe agrade



Por ultimo redimensione para o tamanho que quiser.
Eu escolhi fazer uma sprite de mais ou menos 128 de altura.



Com o rascunho pronto, crie uma nova camada para o lineart.
Aproveite para fazer pequenas modificações na forma se preferir e não esqueça de fazer linhas consistentes e limpas.
Leia este tutorial antes de prosseguir: http://www.mundorpgmaker.com/forum/index.php?topic=23517.0



Como ela é simétrica, copie a lado desenhado e espelhe.
Pegue a ferramenta de seleção retangular (M) e selecione a área da sprite para espelhar, aperte Ctrl+T, clique com o botão direito na seleção e vá em "Flip Horizontal" depois reposicione a copia.



Depois de terminar selecione as camadas do lineart e junte-as com Ctrl+E.
Pressione Ctrl+U e diminua a luminosidade até os traços ficarem na cor preta.
E agora temos lineart terminado





Agora é hora de escolher as cores bases.
Escolha tons médios pois a partir deles vamos fazer luzes e sombras.



Um erro comum nessa parte é escolher cores muita saturadas como vermelho ou azul puro.
Dificilmente um material está 100% iluminado ou com pigmentação em 100% em uma determinada cor além de que as vezes tem cores refletidas misturadas com sua base.




Quanto mais iluminado mais claro, e quanto menos iluminado mais escuro, isso é óbvio mas a questão é: quanto brilho/sombra devo colocar para dar volume a imagem.

Você consegue enxergar um objeto porque ele está iluminado e consegue perceber seu volume graças a direção das reflexão.



A luz encontra a superfície do objeto e é refletida em um ângulo tangencial, ou seja, igual ao que entro mais invertido de acordo com a tangente formada entre a superfície é a luz.
Você com certeza já percebeu que mexer a cabeça um pouco já o suficiente para mudar o lugar de um brilho intenso de um material cromado ou envernizado.
Isso acontece porque ao mudar a posição do espectador, seus olhos captam com mais intensidade a luz refletida diretamente para eles em outro local, assim, o ponto brilhante muda mesmo que a luz e o objeto não se mexam.



E por fim quanto mais longe a reflexão menos brilho vera.



O fonte de luz não é a única a iluminar o objeto assim como a luz não reflete apenas uma vez.
A luz pode bater no chão refletir e iluminar a parte de baixo a esfera e o mesmo acontece com qualquer objeto ou superfície. Sua pele por exemplo, refleti a luz muito bem.
Coloque a mão debaixo do assento de uma cadeira com a lâmpada por cima iluminando sua mão. A parte de baixo da cadeira mesmo sem receber luz diretamente da lâmpada, receberá um pouco de luz graças a reflexão da sua pele.

Outro ponto a destacar é que objetos com superfície lisa refletem um brilho mais intenso e superfície áspera são mais foscas.



Tecidos de algodão, superfícies lixadas e etc graças a sua irregularidade refletem luz em diversas direções diminuindo drasticamente a intensidade que seja aos olhos mas consequentemente iluminam uma área bem maior.
A ilustração a direita é o que normalmente vemos em metal cromado e carros, o efeito do verniz.
Se cobre uma superfície com uma camada mais lisa para aumentar a intensidade de reflexão em pontos próximos.

O algoritmo ray-tracing segue todo esse conceito para fazer simular reflexão em 3D.

Voltando ao pixelart...
Nossa nave é de metal liso mas um pouco fosco (tipo pintura metálica), reflete bem a luz mas não tem pontos intensos de brilho, com o sol iluminando por cima.
Quanto mais longe o ângulo de flexão mais luz se vé então naquela parte que se parece com uma garra temos um resultado mais ou menos assim:



A dobra nos lados da parte superior e a ponta é mais reta inclinando para baixo.
As partes voltadas em 90º para cima tem grande brilho e uniforme pois o sol está muito longe do planeta e diferente de lâmpadas, os raios de luz caem praticamente no mesmo ângulo.



Além disso quando mais inclinado menos luz se vê. A parte inferior é arredonda nos lados e por isso a sombra vai afinando aos poucos.

Note que tirei as linhas pretas.
Nunca use linhas em preto puro para marcas formas, elas o deixam mais definido mas ou menos tempo menos realista.
O meio termo é viável caso queria destacar melhor seu personagem do fundo, ou seja, use linhas da cor das sombras, em menos quantidade e apenas nas extremidades.

Quanto as cores, veja a paleta usada:



A cor base está no meio e nas extremidades luz e sombra.
Seja lá qual for seu editor, use as ferramentas de seleção de cor para analisar essa paleta.
Não visualize cores pelas informações do RGB. RGB leva em conta intensidade de 3 cores diferentes mas no desenho saber a intensidade de saturação e luminosidade em cima de uma cor é muito mais importante, esse sistema é chamado de HSL ou HSB (hue, saturation, luminosity/brightness).

Aqui tem um tutorial praticamente obrigatório e explica muito bem o conceito da escolha das cores. Leia antes de prosseguir.

Em resumo quanto mais iluminada mais perto do amarelo está a matriz (hue) e quanto menos iluminada mais perto no roxo.
Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.

Depois disso a resto não tem mistério. Siga os mesmos conceitos e faça as outras partes.



Note que quando uma parte esta por baixo de outra eu adiciona uma pequena sombra, nem que seja apenas 1 pixel para mostra que a luz é menos forte ali.
Além disso quanto mais brusca mais drástica é mudança de sombra e para dar um efeito de arredondado eu uso tons médios entre as duas cores. Obviamente, quando mais fino o tom médio mais fino a borda.



Ao final cheguei nesse resultado:



Vamos dizer que está pronto... a partir dai eu poderia continuar por minutos, horas ou dias aperfeiçoando mas é bom parar em um certo ponto ou nunca vai terminar.


Animação é parte mais chata com sprites orgânicas mas é a mais divertida com objetos mecânicos!
Para fazer o turbo 4 frames são o suficiente.
Para obter aquela animação frenética são 4 fases: explosão, descanso, ignição, acumulo.



Não tem muito o que dizer quanto a isso, eu apenas peguei uma cor bastante luminosa para as bordas onde o fogo seria menos intenso e deixei o cento branco além de move um pouco as "asas" das naves menores.



Arquivo PSD: https://dl.dropbox.com/u/60691076/tutoriais/pixelart/nave.psd

É só uma questão de treino e quando mais praticar melhor serão suas sprites.
Eu por exemplo, a algumas semanas atrás nunca teria feito algo assim...
Por essa falta de conteúdo em português decide passar nesse tutorial o que aprendi recentemente.
Isso termina o tutorial.
Espero que tenha aproveitado e que agora sua arte tenho fica um pouco melhor!

Nossa realmente esse é um tutorial ótimo, me ajudou muito, acho que deveria existir mais tutoriais assim, gostei muito das suas dicas, e... o resultado ficou maravilhoso, até =)

Muito bom o tutorial, Kabeção!

Percebo que a forma que eu desenho muda muito de pessoa para pessoa (vendo os links e o resultado da sua nave). Mas algumas técnicas são importantes para manter a organização (como as paletas) e a explicação das sequencias de linhas foi um ponto bem interessante. São padrões fundamentais para se trabalhar e isso foi muito bem explicado.

Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.

O uso do preto varia muito. Quando se quer destacar fragmentos, é bem interessante. Também é legal para fazer bordas, no caso deste desenho aqui e para separar blocos de mesma cor.
Por outro lado, rachaduras e aparências ásperas são melhores sem ele.

o/

Realmente o tutorial está muito bom, todo muito bem explicado e principalmente ilustrado, as partes sobre escolha de cores e luz e sombra são as que mais me chamaram a atenção por se aplicarem a gráficos em geral e não só pixel art.

Vlw!

Muito obrigado galera.
Se houve muita gente interessada mais alguns tutoriais podem vir.

Mr.Rafael escreveu:

Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.

O uso do preto varia muito. Quando se quer destacar fragmentos, é bem interessante. Também é legal para fazer bordas, no caso deste desenho aqui e para separar blocos de mesma cor.
Por outro lado, rachaduras e aparências ásperas são melhores sem ele.

o/

Na verdade não tem nem um preto ali.
Como eu disse, o artista usou cores perto do roxo como o marrom escuro para a pele e o azul escuro para o cabelo.
No resultado final ele variou bastantes os tons escuros e claros nas linhas para fazer o anti-alias.

O problema do preto (assim como o branco) é que ele se separa totalmente das outras cores, ou seja, ele não se mistura e acaba destacando demais. Quando seu background se destaca bastante você vai querer enfatizar os contornos do personagem mas mesmo se uso tons próximos.
Além disso tem luz por todos os lados, o céu já é suficiente para refletir no chão e paredes para iluminar uma casa inteira, então em um jogo de plataforma a céu aberta dificilmente terá algo com 0% de luz.

Na verdade, o uso do preto não se prende apenas às cores sólidas e preenchimento de espaço. Um tom de preto com um alpha baixo ajuda bastante na hora do sombreamento, ou quando queremos destacar algum lugar num degradê. Mas, de toda forma, eu entendi o que vocês queriam dizer.
Bom, Kabeção, um tutorial bem elaborado, principalmente para spriters amadores (like me), principalmente na parte estrutural, porque é em organização que a gente mais peca na hora de trabalhar no pixel art. Tenho certeza que vai ajudar muita gente, assim como me ajudou.

Desculpa pela ressurreição :@, nem observei a data, mas gostaria de dar minha opinião.

Finalmente pude ver o tutorial. Está muito explicativo, tanto é que consegui entender bem. Com certeza quero ver mais tutoriais do tipo. É raro encontrar um tutorial assim.

Bom demeis esse tutu, me ajudou bastante! Valew!