Apostila-pixelart

Pixel Art GUILHERME PUPO

O que é Pixel Art Pixel art é o tipo de imagem que é criada quando o artista controla o posicionamento e cor de cada pixel individualmente. Por se tratar muitas vezes de uma imagem minúscula, ao alterar a posição de um dos seus pixels causa uma grande variação no aspecto final da imagem. Pixel Art é tudo sobre controle, então ferramentas automáticas que borram, suavizam, misturam os pixels ou criam gradientes de forma que o computador escolha a posição e forma e não o artista, não são utilizadas na criação do Pixel Art. Nem todo o pixel precisa ser colocado à mão, ferramentas de preenchimento sólido (para preencher áreas grandes),ou de criação de linhas são e devem ser utilizadas para agilizar o processo, o importante é que o artista tenha controle da imagem no nível de cada pixel, mas não é necessário colocar um pixel por vez em alguns casos.

Tamanhos

8-BIT / 16-Bit / 32-Bit 8bit - 256x240

16bit 256x224

Castlevania - NES

Megaman X - SNES

32bit - 640x480

Valkirie Profile - PS One

8-BIT Vemos aqui alguns exemplos de imagens em 8bits, que são facilmente reconhecidos pela quantidade limitada de cores e por terem um tamanho pequeno em sua maioria (geralmente criadas em uma área de 16x16 pixels), as animações dos jogos em 8bits também eram curtas. Essas limitações aconteciam devido a época em que os consoles foram lançados sendo relativos a quantidade de processamento muito menor do que dos consoles de hoje (Xbox, PS4, Wii, etc).

Imagens por Polar Koala e Lord Zymeth Direitos autorais: Konami e Capcom

Paleta de Cores - NES

16-BIT Alguns exemplos de imagens em 16bits, nota-se uma variedade de cores maior, assim como uma quantidade maior de frames em suas animações e as imagens com mais pixels já que os desenhos podiam ser criados em áreas de maior dimensão. Uma nova geração de consoles permitiu essa gama de possibilidades com seus processadores evoluídos.

Imagens por Mister Man e Magma Dragoon Direitos autorais: Nintendo e Bandai/Natsume

Paleta de Cores - SNES

32-BIT Na era do 32bit, as imagens contém o Alpha Channel (transparência), o que possibilitou novos efeitos gráficos, junto com uma gama de cores nunca vista. Veio também a implementação de objetos 3D.

Megaman X4 - PS One

Final Fantasy Tactics - PS One

Softwares Existem diversos softwares de desenho que podem ser utilizados para criar Pixel Art. Aqui estão listados alguns gratuitos para você utilizar. Grafx2 http://pulkomandy.tk/projects/GrafX2 PiskelApp http://www.piskelapp.com/ GraphicsGale http://www.humanbalance.net/gale/us/

Graphics Gale

Piskel App

Primeiro Pixel Art Uma ótima forma de começar a criar o Pixel Art é utilizar como base um desenho feito a mão.

Ajuste o tamanho do seu desenho para o tamanho da área que irá criar o Pixel Art. Você pode começar criando uma silhueta do desenho, ou fazendo o contorno (Lineart) primeiro. Esses dois jeitos de começar a criar o Pixel Art podem ser utilizados para fazer o desenho do zero (sem referência de desenhos feitos a mão), visto que você poderá ver e analisar a forma do desenho imaginando como ele ficará ao ser finalizado.

Lineart O primeiro passo para se tornar um artista de Pixel Art, assim como no desenho tradicional, é compreender sobre os contornos de um desenho (Lineart). Poucos pixels de uma Pixel Art tem uma grande influência sobre a aparência final da sua imagem, então se você posicionar os seus pixels de forma incorreta, sua imagem final poderá ficar deformada. É crucial para o Pixel Art de sucesso que seu lineart esteja correto. 1:0

1:2

1:1 1:1 2:1

2:1

0:1

No pixel art, linhas com segmento simples (1:0, 1:2, 1:1, 2:1, 0:1), são chamadas de linhas perfeitas, pela facilidade que os olhos têm em segui-la. Elas não são as únicas formas de linhas, no exemplo da linha roxa, temos uma linha intermediária (simulando um segmento de 1.5), apesar de ser mais difícil do olho segui-la, ela ainda tem sua utilidade.

Lineart.2 Curvas são mais complexas do que linhas, existe apenas uma regra para fazer uma curva boa, fazer com que seus segmento variem de forma progressiva:

4,3,2,1,2,3,4,3,2,1,2,3,4,3,2,1,2,3,4,3,2,1,2,3...

Uma boa forma de começar uma curva é desenha-la livremente (sem seguir a regra de progressão), e em seguida, ir ajustando conforme a regra.

Não seguindo a regra de progressão, teremos uma curva ruim, mas principalmente evite curvas bruscas como nas áreas vermelhas do exemplo acima.

Cores As cores na arte em geral transmitem sensações (sentimento, clima, época), e não é diferente no pixel art, ela pode alterar completamente o seu desenho, deixando-o mais forte, triste, importante, maléfico, amigável, etc.

Para o processo de colorização, criamos uma paleta de cores, elas tem a função de unificar o seu jogo. Com elas você irá controlar os contrastes, como também fazer ligações entre personagens, itens e cenários.

Mário - NES

Paleta

Hoje em dia com o avanço da computação, não temos mais os limites gráficos de antigamente (SNES, NES), logo podemos expandir o tamanho da nossa paleta de cores, mas não devemos fazer isso necessariamente, uma paleta menor, além de facilitar a criação e alterações, o visual do pixel art fica mais consistente, por tirarmos a maior quantidade de informação possível de cada cor.

Alterando a paleta de cores do exemplo temos uma variação dele que poderia ser uma versão maligna.

Paleta.2 Com a paleta de cor básica acima (apenas alterando a luminosidade da cor), vamos melhorá-la com o Hue Shifting (deslocamento de matiz)

Adicionando um pouco de azul a nossa paleta, criamos um visual mais atrativo para o nosso pixel art, como também acrescentamos uma sensação (ele está em um amboente escuro). Devemos nos atentar tambem para não deixar o pixel art muito saturado para que não canse os olhos do espectador, fazendo com que perca o interesse.

Cor Base Depois de ter criado o seu personagem e já tiver feito a silhueta, e ou o contorno dele, vamos começar a colocar cores, começando com as cores base:

Após ter escolhido a cor base do seu desenho, vamos expandir a paleta de cores, e simular volume no personagem através da luz na página a seguir.

Luz Primeiramente vamos escolher um ponto de luz para iluminar o nosso desenho, cada ângulo de luz diferente irá ocasionar uma aplicação diferente de luz e sombra.

Alterando a cor da luz do personagem colocamos ele dentro de um ambiente:

Sombra Com a sombra, aumentamos o volume e damos mais um grau de “realismo” para o pixel art:

Da mesma forma que uma luz colorida afeta o ambiente do personagem, a sombra também auxilia:

Não se esqueça de entender o volume do seu personagem, cenário ou objeto antes de aplicar luz e sombra, se não, aplicar de forma incorreta poderá deixar a imagem estranha e deformada.

Pontilhado No Pixel Art, às vezes precisamos fazer uma transição de cores em uma imagem, para simular isso em pixels, usamos algumas técnicas:

Pontilhado: Geralmente usado para suavizar a transição entre duas cores sem termos que adicionar uma nova cor. Também é utilizado para criar texturas.

Pontilhado estilizado: Uma outra técnica de pontilhado, caracterizada por criar pequenas formas com os pixels.

Pontilhado.2 Aplicando o pontilhado na imagem conseguimos efeitos, diversos tipos de texturas ou volumes.

Anti-aliasing O anti-aliasing é conhecido por suavizar as bordas das imagens (seja ela 2D ou 3D), atualmente ele é feito automaticamente pelos computadores, mas no pixel art o anti-aliasing é feito manualmente:

Linhas e curvas irregulares geralmente precisam de anti-aliasing (dependendo do seu estilo de pixel art), mas não devemos exagerar, caso contrário o seu objeto poderá perder a forma:

O

X

Anti-aliasing.2 Uma outra forma de aplicar o anti-aliasing em desenhos é de “quebrar” o contorno com uma invasão da cor do preenchimento, geralmente essa quebra de contorno acompanha a direção da luz:

Mesclando o preenchimento com o contorno temos uma sensação mais realista, e acabamos auxiliando a curvatura das linhas curvas.

Cenário Repetido As peças repetidas são um hábito comum no pixel art, necessário para os jogos clássicos, que continham pouco espaço de armazenamento nos cartuchos, essas imagens ao serem colocadas lado a lado, criam a ilusão de uma peça só, porém, infinita.

Para criar esse tipo de peça, devemos apenas nos atentar com as arestas da imagem, para que os 4 lados sejam a continuação do outro. Cada conjunto de cor das setas ao lado marca uma ligação:

Cenário Repetido.2 Para finalizar, você pode variar as peças para fazer o cenário infinito, contanto que elas tenham ligação e se conectem:

Perspectiva As perspectivas se tornam mais evidente em jogos de RPG, quando você vê mais de um lado do objeto, em jogos de plataforma e ação é mais comum uma perspectiva planar (você só ve um lado da imagem). Focando em RPG, temos 3 tipos de técnicas de perspectivas mais comuns:

Isométrica: Famoso em jogos de RPG de tática, é representado usando a progressão de 1:2 no ângulo de 26.5651 graus. Representa muito bem profundidade e altitude.

Perspectiva.2

Planométrica: Na progressão de 1:1, no ângulo de 45 graus, é uma perspectiva rica em volumes.

RPG: A que traz menos informação, porém a mais famosa, a perspectiva de 3/4, mostrando apenas 2 lados da imagem, porém, mais fácil de desenhar.

Referências http://pixeljoint.com/forum/forum_posts.asp?TID=11299 &PID=139318#139318 http://www.drububu.com/tutorial/index.html http://www.pixelprospector.com/the-big-list-of-pixelart-tutorials/ http://finalbossblues.com/thinking-in-color/ http://www.deviantart.com/browse/all/?section=&global =1&q=Pixel+art http://opengameart.org/content/chapter-2-lines-and-cu rves http://www.pixelfor.me/crc/F0370B27 http://2dwillneverdie.com/tutorial/spriting-basics-an ti-aliasing/