Spriting, por onde começar?

[Administrador 1434]

Quero fazer sprites, por onde eu começo?!?!

Pixel art é sobre os pixels – simples assim. Esses tipos compartilham um ponto comum: Ter certeza que o seu foco está nos pixels.

Comece devagar – Quanto mais larga a imagem que você está tentando fazer, mais tempo e trabalho levará pra completá-la. Não faça isso, use um canvas size (largura x altura) pequeno.
Um pixel art pode transmitir uma série de informações pelo seu tamanho, você ficará surpreso com o pouco espaço que você precisa se você controlar os pixels corretamente.

Use uma paleta limitada - Se você não pode fazer um bom sprite com 4 cores, usar 40 não vai ajudar. Usar uma paleta pequena é especialmente bom para iniciantes porque te força a ter foco na posição dos pixels e da relação entre grupos de pixels. A paleta original de 4 cores do GameBoy é uma boa escolha para iniciantes, porque você só precisa se preocupar com o valor, e não tons ou saturação.

Programas
Existe uma gama de bons programas por aí para pixel art, muitos desses são gratuitos. Eu uso Grafx2 porque é gratis, mas GraphicsGale, Pro Motion, Photoshop, Pixen e MS Paint são todos boas escolhas. Alguns são mais amigáveis que outros, por isso que eu escolhi algo com atalhos de teclado como grafx2, o que me salvou de muitas viagens para a barra de ferramentas (e fez muito fácil o manuseio de paletas)

Tipo de arquivo
Um erro comum que os novos pixel artistas cometem é salvar suas artes como JPEG/JPG. Esse tipo de arquivo pode ser legal para outros tipos de imagem, ele causa compressão, o que destrói a qualidade de uma peça de pixel art.



Nunca salve como JPG. Salve como PNG ou GIF. Seja cuidadoso assim mesmo, pois alguns programas (como MS Paint) não suportam propriamente o formato GIF, e vão arruinar sua imagem. Nessas instâncias, você vai precisar de um conversor de arquivo (Como o Giffy) se você quiser salvar sua imagem como GIF.

Mas como eu começo a imagem?
É completamente pessoal. Alguns artistas preferem criar o lineart primeiro, e depois vão adicionando cores:




Outros artistas preferem a definição das formas principais com um pincel grosso, e então continuam refinando a imagem até que ela chegue a um nível certo nível:



Ambos os métodos são legais, todos dependem de como você está confortável, ou as especificidades do projeto. O Linework é um bom método se você está traçando uma imagem digitalizada (como foi o caso do exemplo do monstro do mar acima). Se você está começando a imagem no seu programa, e não é um sprite pequeno, definir as formas com um pincel grosso pode ser mais útil.

Ok, mas o que diabos significa AA, Hue (br?) e os outros termos que são usados?

Ok, acomodem-se em suas cadeiras (ou sofás, para aqueles que gostam de utilizar o computador na sala) e vamos nessa:

Termos que devemos, ou melhor, precisamos saber!

Anti-aliasing (AA):

Anti-aliasing é o método de fazer bordas acentuadas parecerem suaves. Você deve estar familiarizado com anti-aliasing, porque um monte de programas e ferramentas faz isso automaticamente. Quando estamos falando sobre pixel art, de qualquer maneira, anti-aliasing significa anti-aliasing MANUAL. Manual AA significa suavizar as áreas acentuadas por posicionamento manual de pixels de uma diferente cor para facilitar a transição. Aqui vai um exemplo:


Acima você vê a mesma imagem sem AA na esquerda e com AA, na direita.

Há várias armadilhas frequentemente encontradas ao aplicar anti-aliasing, que são discutidas na seção "Coisas para evitar”.


Dithering:

O Dithering consiste de diferentes padrões de pixels. É tipicamente usado para facilitar a transição entre duas cores, sem adição de uma nova cor à paleta. É também usado para criação de textura. Nos dias de monitores CRT, o dithering foi particularmente útil porque a tela borrava a área pontilhada e obscurecia o padrão. Agora que monitores LC nítidos é a norma, os padrões não são mais fáceis de esconder, o que significa que o dithering não é tão versátil como era antes. Mesmo assim, o dithering ainda é usado.

A forma mais comum de dithering que você vê é o 50/50 pontilhado, conhecido como 50% de dithering ou o padrão pontilhado.



Como mostrado no exemplo acima, você pode criar vários outros padrões para amortecer ainda mais entre uma cor e um padrão 50% pontilhado.
Esses padrões são mais fáceis de detectar do que um 50% pontilhado, por isso tenha cuidado!

O Dithering estilizado é outra técnica, e é caracterizada pela adição de pequenos formatos no padrão.




O Dithering interlaçado permite que duas regiões pontilhadas se interlacem. É chamado de dithering interlaçado, pois as duas regiões pontilhadas se interlaçam nas bordas. Esse tipo de dithering permite a você misturar dois pontilhados para formar uma gradiente.




O Dithering aleatório é uma versão menos comum do dithering, e não é geralmente recomendado, pois adiciona ruídos de pixel à imagem. Embora tenha algum uso em doses muito pequenas, o dithering aleatório é algo que muitas vezes você vai querer evitar.




Tão útil como o dithering é, muitas vezes é mal utilizado por artistas inexperientes.
O Dithering ruim será discutido mais adiante na seção “Coisas para evitar.”




Grupos de pixels:

O conjunto de pixels é feito a partir de pixels individuais. No entanto, um único pixel é na maioria das vezes quase inútil e sem sentido se não tocar em pixels da mesma cor.
O pixel artista está preocupado com as formas que ocorrem quando pixels de cores similares tocam a si mesmos e convém uma forma opaca, plana.
A maioria dos triunfos e derrotas possíveis no pixel art ocorrem naquele momento exato em que o artista faz um aglomerado de pixels.
-Helm

Nós falamos muito sobre pixels individuais, mais estes são raramente pixels independentes. Um pixel sozinho, isolado, é um pontinho numa tela – é um ruído. Mas pixels não são normalmente encontrados sozinhos, ao invés disso, eles são encontrados fazendo parte de grupos de pixels – grupos de pixels da mesma cor que juntos formam um campo de cor sólida. Enquanto o pixel isolado é nosso bloco básico de construção e a menor unidade, os grupos de pixels são a unidade a qual muitas de nossas decisões sobre posicionamento de pixels se basearão. E enquanto é importante perceber que pixels individuais não são independentes, também é importante perceber que grupos de pixels não são independentes. Como peças de um quebra-cabeça, as bordas de um grupo de pixels determinam o formato do grupo de pixels que ele faz fronteira.
Aqui vai um exemplo de como interferir no formato de um grupo de pixels pode causar efeitos drásticos nos seus grupos vizinhos:



Enquanto pixels solitários são vistos como ruídos, um pixel solitário de uma cor diferente do campo que toca, se usado como AA, pode ser visto como parte do grupo, e é, portanto, a solução dos problemas:

Créditos:

Pixelaria (Tutorial)

Thayam