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 minscula, ao
alterar a posio de um dos seus pixels causa uma
grande variao no aspecto final da imagem.
Pixel Art tudo sobre controle, ento ferramentas
automticas que borram, suavizam, misturam os pixels ou
criam gradientes de forma que o computador escolha a
posio e forma e no o artista, no so utilizadas na
criao do Pixel Art.
Nem todo o pixel precisa ser colocado mo,
ferramentas de preenchimento slido (para preencher
reas grandes),ou de criao de linhas so e devem ser
utilizadas para agilizar o processo, o importante que
o artista tenha controle da imagem no nvel de cada
pixel, mas no necessrio 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
so 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 animaes dos
jogos em 8bits tambm eram
curtas. Essas limitaes
aconteciam devido a poca
em que os consoles foram
lanados 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
animaes e as imagens com
mais pixels j que os
desenhos podiam ser criados
em reas de maior dimenso.
Uma nova gerao de
consoles permitiu essa gama
de possibilidades com seus
processadores evoludos.

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
contm o Alpha Channel
(transparncia), o que
possibilitou novos efeitos
grficos, junto com uma
gama de cores nunca vista.
Veio tambm a implementao
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 esto 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
comear a criar o Pixel
Art utilizar como base
um desenho feito a mo.

Ajuste o tamanho do seu desenho para o tamanho da rea

que ir criar o Pixel Art.
Voc pode comear criando uma silhueta do desenho, ou
fazendo o contorno (Lineart) primeiro.
Esses dois jeitos de comear a criar o Pixel Art podem
ser utilizados para fazer o desenho do zero (sem
referncia de desenhos feitos a mo), 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
influncia sobre a aparncia final da sua imagem, ento
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), so chamadas de linhas perfeitas, pela
facilidade que os olhos tm em segui-la.
Elas no so as nicas formas de linhas, no exemplo da
linha roxa, temos uma linha intermediria (simulando um
segmento de 1.5), apesar de ser mais difcil do olho
segui-la, ela ainda tem sua utilidade.

Lineart.2
Curvas so 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 comear uma curva desenha-la

livremente (sem seguir a regra de progresso), e em
seguida, ir ajustando conforme a regra.

No seguindo a regra de progresso, teremos uma curva

ruim, mas principalmente evite curvas bruscas como nas
reas vermelhas do exemplo acima.

Cores
As cores na arte em geral transmitem sensaes
(sentimento, clima, poca), e no diferente no pixel
art, ela pode alterar completamente o seu desenho,
deixando-o mais forte, triste, importante, malfico,
amigvel, etc.

Para o processo de colorizao, criamos uma paleta de

cores, elas tem a funo de unificar o seu jogo. Com
elas voc ir controlar os contrastes, como tambm
fazer ligaes entre personagens, itens e cenrios.

Mrio - NES

Paleta

Hoje em dia com o avano da computao, no temos mais

os limites grficos de antigamente (SNES, NES), logo
podemos expandir o tamanho da nossa paleta de cores,
mas no devemos fazer isso necessariamente, uma paleta
menor, alm de facilitar a criao e alteraes, o
visual do pixel art fica mais consistente, por tirarmos
a maior quantidade de informao possvel de cada cor.

Alterando a paleta de cores do exemplo temos uma

variao dele que poderia ser uma verso maligna.

Paleta.2
Com a paleta de cor bsica 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
tambm acrescentamos uma sensao (ele est em um
amboente escuro).
Devemos nos atentar tambem para no deixar o pixel art
muito saturado para que no 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 comear a
colocar cores, comeando com as cores base:

Aps ter escolhido a cor base do seu desenho, vamos

expandir a paleta de cores, e simular volume no
personagem atravs da luz na pgina a seguir.

Luz
Primeiramente vamos escolher um ponto de luz para
iluminar o nosso desenho, cada ngulo de luz diferente
ir ocasionar uma aplicao 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 tambm auxilia:

No se esquea de entender o volume do seu personagem,

cenrio ou objeto antes de aplicar luz e sombra, se
no, aplicar de forma incorreta poder deixar a imagem
estranha e deformada.

Pontilhado
No Pixel Art, s vezes precisamos fazer uma transio
de cores em uma imagem, para simular isso em pixels,
usamos algumas tcnicas:

Pontilhado:
Geralmente usado para
suavizar a transio entre
duas cores sem termos que
adicionar uma nova cor.
Tambm utilizado para criar
texturas.

Pontilhado estilizado:
Uma outra tcnica 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 no devemos exagerar, caso contrrio o seu objeto
poder perder a forma:

Anti-aliasing.2
Uma outra forma de aplicar o anti-aliasing em desenhos
de quebrar o contorno com uma invaso da cor do
preenchimento, geralmente essa quebra de contorno
acompanha a direo da luz:

Mesclando o preenchimento com o contorno temos uma

sensao mais realista, e acabamos auxiliando a
curvatura das linhas curvas.

Cenrio
Repetido
As peas repetidas so um hbito comum no pixel art,
necessrio para os jogos clssicos, que continham pouco
espao de armazenamento nos cartuchos, essas imagens ao
serem colocadas lado a lado, criam a iluso de uma pea
s, porm, infinita.

Para criar esse tipo de

pea, devemos apenas nos
atentar com as arestas da
imagem, para que os 4 lados
sejam a continuao do
outro.
Cada conjunto de cor das
setas ao lado marca uma
ligao:

Cenrio
Repetido.2
Para finalizar, voc pode variar as peas para fazer o
cenrio infinito, contanto que elas tenham ligao 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 ao mais comum uma perspectiva
planar (voc s ve um lado da imagem).
Focando em RPG, temos 3 tipos de tcnicas de
perspectivas mais comuns:

Isomtrica:
Famoso em jogos de RPG de ttica, representado
usando a progresso de 1:2 no ngulo de 26.5651 graus.
Representa muito bem profundidade e altitude.

Perspectiva.2

Planomtrica:
Na progresso de 1:1, no ngulo de 45 graus, uma
perspectiva rica em volumes.

RPG:
A que traz menos informao, porm a mais famosa, a
perspectiva de 3/4, mostrando apenas 2 lados da
imagem, porm, mais fcil de desenhar.

Referncias
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/