PixelArt para Leigos
Autor: Dam Yonoros | Publicado: 2012-12-15T08:28:00-08:00







[20/12/12] - "essa perspectiva está geometricamente incorreta"

&nbsp;Bem-vindos ao primeiro Tutorial de PixelArt do blog! Nesse tempo em que estivemos inativos, eu, Damyoro, estive implementando nos gráficos do Contos de Bruxas - A Casa de Chocolate e, com isso, aprimorando minhas habilidades pixel-artísticas.
&nbsp;PixelArt para leigos&nbsp;provavelmente não se tornará uma série de tutoriais, mas eu vou continuar ensinando o que sei em diferentes tutoriais do assunto.
&nbsp;Aqui explicarei sobre os conceitos mais básicos da arte dos&nbsp;pixels.&nbsp;Também lerá um pouquinho da história e importância da origem desse estilo. Se você já tem uma noção básica, esse tutorial não é pra você.
&nbsp;É meu primeiro tutorial do tipo, então talvez o formato do post possa deixar a leitura um pouco confusa. Me esforcei ao máximo para evitar que isso acontecesse, mas acho que ainda existe a possibilidade.
&nbsp;Não sou um mega PixelArtist, mas acho que meus conhecimentos são o suficiente.

- O que é um Pixel?
&nbsp;Você ainda não entende o que é um pixel? Então explicarei.
&nbsp;Um pixel é o menor elemento de uma imagem digital. Ou seja, a imagem do seu monitor é composta por uma enorme quantidade de Pixels. Esses pixels são, nesse caso, pequenos quadrados. Quando você faz uma imagem digital, mesmo que não seja PixelArt, e escolhe o tamanho dela, o número desse tamanho é a quantidade de pixels da imagem.
&nbsp;Veja a imagem abaixo. Ela não foi trabalhada pixel a pixel como fazemos em PixelArt, mas mesmo assim é feita por uma imensidade de pixels (480x160p) numa imensidade de cores diferentes (113 cores ao total), e isso porque só vemos um tom de azul.


Exemplo em 400% de Zoom em uma imagem qualquer.

&nbsp;Contudo, a PixelArt não é necessariamente um estilo de arte digital. Na verdade, era uma limitação, até que tecnologia permitiu uma maior quantidade de bits. Os dispositivos de exibição também tinham resolução menor, uma paleta de cores menor e, também, uma velocidade menor.
&nbsp;Você pode emular Sega Genesis hoje, mas ainda poderá distinguir cada um dos quadradinhos. Mas se ligar o 32X ao Genesis, vai precisar chegar mais perto da tela para conseguir diferenciar os pixels.
&nbsp;Isso porque a partir da geração 32 bits o 2D passou a ser ultrapassado.&nbsp;Se os consoles da época já fossem capazes de trabalhar uma maior quantidade de bits, a PixelArt seria desnecessária.&nbsp;Atualmente, apenas mantemos a mantemos como estilo por nostalgia e por ser é mais simples de ser feita do que 3D.

- Então&nbsp;PixelArt&nbsp;é...?
&nbsp;Pintamos cada um desses pequenos componentes com as cores necessárias para fazer um&nbsp;sprite.
&nbsp;Claro que não é resumidamente tão fácil - requer muita cautela e paciência - afinal, você precisa colorir pixel a pixel.
&nbsp;Você, basicamente, usa uma pequena quantidade de cores pré-selecionadas para fazer imagens. É como desenhar e pintar no papel, ou digitalmente, mas você precisará prestar atenção em escala maior.
&nbsp;Em 600% de Zoom, veremos apenas uma coleção de quadradinhos coloridos, mas sem Zoom algum veremos a imagem mais suave e detalhada. E é isso que a PixelArt faz: passa a impressão, embora não seja perfeita.
&nbsp;Destacando que&nbsp;a&nbsp;PixelArt pode ser feita por qualquer programa. Usam&nbsp;Paint,&nbsp;Gimp&nbsp;ou até&nbsp;Photoshop. Isso fica a seu critério. Existem programas especiais para facilitar o processo, mas ainda assim podem complicar o iniciante em outros sentidos. Não existe um programa que organizará os pixels para contornar, colorir, iluminar/sombrear e texturizar sua imagem magicamente.&nbsp;Tenha isso em mente.&nbsp;Eu recomendo, mais pra frente, algum que inclua layers, como&nbsp;Gimp&nbsp;e&nbsp;Photoshop, pois facilitam a animação.



Vamos Começar

 O Contorno
&nbsp;"Vamos começar do começo".
&nbsp;É previsível que tenhamos início com formas geométricas pois são belas exemplificações de como aplicar os efeitos em qualquer outro formato. De início, temos um círculo e um quadrado. Se estiver interessado, faça você também para acompanhar. Segue o exemplo com e sem zoom.


&nbsp;Repare como eu fiz o círculo: uma linha de 5 pixels, seguida por 2 pixels, e dois pixels sozinhos, circulando a área. Dependendo do tamanho haverão ordens diferentes, o importante é que deixe o resultado bem arredondado. A maioria dos programas possuem uma ferramenta que desenha um círculo automaticamente, você pode usá-la mas poderá não entender a essência de fazer um formato.&nbsp;O quadrado nem preciso explicar, né?
&nbsp;Eu deixarei os dois lado a lado, mas acabarão por ter efeitos diferentes. É importante que esses efeitos sejam observados, pois um representa o volume irregular enquanto o outro representa a superfície plana.

Paleta de Cores e Coloração
&nbsp;É aqui que começa a ficar interessante. Tomemos partida com a paleta do aplicativo que estou usando. É bem simples e não foi feita para PixelArt, mas os desenvolvedores de jogos da era 8 e 16 bits também não tinham uma paleta de cores perfeita, certo?
&nbsp;No futuro, é provável que você use paletas já feitas, então comece agora. Basta clicar com o botão direito do mouse em cima da imagem, escolher "Copiar Imagem" e você colar no seu rascunho:&nbsp;. Depois de colá-lo, você usa a pipeta para pegar as cores.
&nbsp;É hora de reparar como uma paleta funciona. É uma transição de cores, da mais clara à mais escura. As paletas voltadas a&nbsp;exclusivamente&nbsp;uma textura levam mudanças não somente no brilho como também na saturação e matiz para que possamos perceber que aquilo é feito daquele material (couro, madeira, aço etc.), mas também contam com diferentes formas de reflexo e sombra.
&nbsp;Agora, pinte. Não faça a besteira de pintar com o pencil ou paintbrush, use a ferramente que preenche uma área da mesma cor: o balde de tinta. Use uma cor escura para pintar a parte de dentro do círculo e uma mais clara para o quadrado:


&nbsp;Como parte do meu estilo, eu também pintei as bordas com a cor mais escura. Mas você não precisa fazê-lo se não quiser.
&nbsp;A seleção de cores e a forma da qual é usada é de grande importância para a textura, mas só me aprofundarei nisso em tutoriais futuros.
&nbsp;Isso já está parecendo uma esfera e um cubo? Não, né? Vamos para a próxima parte.

Iluminação e Sombreamento
&nbsp;Agora é a parte mais importante para a esfera, e ainda imperceptível para o "quadrado".
&nbsp;Imagine que a luz venha do alto a direita, e digamos que o formato da luz seja redondo. Batendo na esfera, essa luz seria refletida em formato redondo. Portanto, pinte um pequeno círculo&nbsp;(ou maior do que no exemplo)&nbsp;no alto a direita.
&nbsp;Feito isso, continue&nbsp;distribuindo&nbsp;o brilho, com um círculo maior em volta desse que acabamos de fazer com a segunda cor mais clara. Se esse círculo sair do contorno da nossa esfera, coloque de volta.
&nbsp;É importante ter em mente que, para fazer um círculo, basta que todos os pixels, juntos, pareçam uma bolinha quando visto sem zoom. Perceba que as miniaturas abaixo não parecem ter quadradinhos porque &nbsp;são muito pequenos.


&nbsp;O laranja escuro que havíamos usado quando começamos se tornou a sombra, parte mais escura do círculo. Pode ser que você prefira sombrear e clarear em ordem diferente da desse tutorial.
&nbsp;Com isso, temos a esfera. Como usamos uma paleta bem limitada, pode não estar perfeito, mas ainda assim é uma esfera.
&nbsp;Esse foi um exemplo da importância que o brilho e sombras têm na PixelArt. É uma forma de perceber o volume do objeto. Sem isso, não saberíamos se é uma esfera ou um "adesivo" circular.

Perspectiva

&nbsp;Mas e o quadrado? O que aconteceu com ele?

&nbsp;Como o quadrado é a representação da superfície plana, sua tonalidade dificilmente receberá alteração em apenas uma face. Mas... ele tem 6 faces! É aí que entra a perspectiva.
&nbsp;Vamos mover o cubo pouco mais de 30º para cima. Para isso, coloquei um retângulo em cima, mas também tive que reduzir o tamanho do quadrado original.&nbsp;A parte superior é mais clara pois a luz está vindo de cima.


&nbsp;É assim que veríamos um cubo caso estivéssemos olhando um pouco mais de cima.
&nbsp;Em pixels, não dá para ter certeza se é um cubo ou apenas dois retângulos. Então vou girá-lo mais para a direita.&nbsp;Para isso, temos o processo:




&nbsp;Faça linhas diagonais nas pontas do quadrado. Como mostro nos exemplos, é só pintar um pixel superior esquerdo ao outro. Você pode fazer na altura que achar melhor, contanto que pareça um cubo.
&nbsp;Depois de fazer isso, trace uma linha entre a ponta dos últimos pixels de cada linha diagonal que você acabou de fazer.
&nbsp;Com isso, você tem o formato do cubo num ângulo diferente, mostrando três das seis faces. Repare que as linhas são paralelas, pois é um cubo perfeitamente plano de faces idênticas.
&nbsp;Agora, sim, você entenderá o processo de sombreamento de um cubo. Comece apagando as linhas vertical e horizontal de dentro do ex-quadrado, agora pinte a diagonal com a mesma cor da face.
&nbsp;Por fim, lembre-se do nosso conceito de iluminação: canto superior direito. Agora, sim, podemos pintar com os efeitos de iluminação e sombreamento.
&nbsp;Isso significa que as faces superior e direita estarão mais claras, mas principalmente a superior, assim como o cubo de antes.
&nbsp;A outra face, a esquerda, estará com a cor mais escura, pois a luz não consegue alcançá-la.
&nbsp;Deve estar mais ou menos assim:



&nbsp;E, enfim, mostrando mais faces planas, não há duvidas de que é um cubo.
&nbsp;Essa perspectiva é básica, e está geometricamente incorreta&nbsp;para um cubo perfeito. Uma perspectiva comum para a PixelArt é a isométrica&nbsp;e o tutorial exemplifica uma forma fácil e incorreta de projetá-la. Pretendo postar mais sobre isso em tutoriais futuros.



&nbsp;Percebe o que fizemos? A PixelArt não tem muitos recursos para ser realista, então temos que aproveitar desses poucos recursos para que a imagem tenha sentido.
&nbsp;Como eu disse, Pixel Art para leigos não se tornará uma série; mas sequenciará tutoriais mais avançados. Pretendo fazer dois PixelArt para iniciantes, que mostrará o processo detalhado do volume irregular e plano, a partir do que mostrei aqui, em casos complexos.

- Perguntas previsíveis e suas respostas

P. Não sei qual programa usar, qual você usa?
R. Isso é irrelevante. É um aplicativo leve, só uso porque o Zoom é bem manipulável xD

P. Em quanto tempo fico bom?
R. Acho que isso varia de pessoa a pessoa. É mais comum que pessoas familiarizadas com a geração 16bits tenham maior facilidade em progredir na arte. Aqueles que estão pouco acostumados nem saberão por onde começar.
&nbsp;Eu já testemunhei casos de pessoas que começaram melhor do que eu, mas também de pessoas que demoraram um tempinho para ficarem boas.
&nbsp;Comecei PixelArt há um ano, e minha evolução foi extremamente notável. Há tantas coisas a melhorar, e sei que conseguirei melhorar.

P. O que eu faço quanto as cores?
R. Você pode procurar paletas já prontas porque, se for de confiança (como a Enterbrain), você não precisará se preocupar, pois foram feitas para combinarem entre si. Isso significa que se pretende fazer charsets para RPG Maker VX, é fortemente recomendado que baixe as cores do RMVX.
&nbsp;Se tentar criar as suas próprias paletas, vai precisar testar bastante quais cores têm mais semelhança com a textura desejada e como se encaixam com o restante das cores.