TUTORIAL Spriting [TUTORIAL] Spriting, por onde começar? (completo)

[Thayam 187]

Saudações queridos amigos do TK!

 

Hoje venho trazer um tutorial mais básico porém muito útil. Vejo que algumas pessoas tem vontade de começar a vida em sprites, porém, ficam meio perdidos a como começar, veem em alguns tópicos agente falar sobre Hue, Dithering, AA e pensam "WTF?!". Então venho aqui hoje tentar explicar um pouco melhor sobre alguns conceitos e programas utilizados para tal ação.

 

Vamos lá!:

 

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:

 

Bom, vou finalizar o tutorial aqui, já ficou bem grande haha

 

Espero que eu tenho ajudado vocês a enter um pouco mais sobre Sprites, e ter dado a alguns, um norte para começar

 

Vamos juntos mobilizar esta seção que ta meio down ultimamente haha

 

Até a próxima pessoal!

 

 

Créditos:

Pixelaria (Tutorial)

Thayam (Trazê-lo ao TK)

Way20 (por indica-lo quando comecei minha jornada)

[Wise 445]

Mais um conteúdo sensacional, por favor, não pare de trazer isto ao TibiaKing.

Parabéns mesmo, seu tópico foi aprovado e movido para a seção correta, além de que você recebeu um ponto positivo de reputação

[WooX 691]

Se não me engano o Nogard já trouxe a parte 2 do tutorial, mas você trouxe junto a parte 3 que aborda algumas técnicas, complementou muito bem, continue assim.

[Thayam 187]

Mais um conteúdo sensacional, por favor, não pare de trazer isto ao TibiaKing.

Parabéns mesmo, seu tópico foi aprovado e movido para a seção correta, além de que você recebeu um ponto positivo de reputação

Obrigado seu lindo! haha

 

Pode deixar que não vou parar de trazer estes novos conteúdos

 

Abraço!

Se não me engano o Nogard já trouxe a parte 2 do tutorial, mas você trouxe junto a parte 3 que aborda algumas técnicas, complementou muito bem, continue assim.

 

Obrigado mestre!

[Xhico 0]

ae mano tem como fazer uns sprites pramin ? Addskype: gustavofontess, e pra meu digitibia Xd

[Danihcv 607]

@Xhico, amigo, pedir (e até msm oferecer) suporte fora do fórum é extremamente proibido, pois dessa forma caso haja alguma complicação no processo, nós não poderemos tomar nenhuma medida quanto ao problema ocorrido.

 

Agradeço a compreensão.

 

Estou vendo que vc é novo no fórum. Peço pra que tire 5 minutos do seu tempo para ler as regras do fórum: http://www.tibiaking.com/forum/topic/1281-regras-gerais/?p=7680#entry7680

[Thayam 187]

ae mano tem como fazer uns sprites pramin ? Addskype: gustavofontess, e pra meu digitibia Xd

Crie um tópico na seção Suporte de Spriting, que se eu puder com certeza irei te ajudar

[Nogard 344]

Bem, a necessidade da aprovação de conteúdo foi colocada, em grande parte, para evitar a postagem de algo já existente no fórum.

 

 

http://www.tibiaking.com/forum/topic/41554-por-onde-começar/

http://www.tibiaking.com/forum/topic/41717-termos-relevantes/

 

 

Sendo assim, segundo as regras, conteúdo reprovado. Porém a intenção foi ótima, continue assim!

[Thayam 187]

http://www.tibiaking.com/forum/topic/41554-por-onde-começar/

http://www.tibiaking.com/forum/topic/41717-termos-relevantes/

Achei interessante trazer ambas as partes juntas, facilita o aprendizado do pessoal

[Cat 2605]

O tópico foi movido para a área correta, preste mais atenção da próxima vez!

Leia as regras do fórum: http://tibiaking.com/forum/topic/1281-regras-gerais/?p=7680

Este tópico foi movido:

De: "Tibia King → Lixeira"

Para: "OTServ → Spriting OTServ → Tutoriais Spriting"

[Thayam 187]

Agradeço a moderação do fórum pela atenção no caso deste tópico

 

Espero que não haja nenhum ressentimento por parte da equipe

 

GOGO Spritear pessoal! haha

[Ashiley132 18]

Ei, eu tenho uma dúvida. Eu estou criando sprites para o poketibia em que eu jogo, e gostaria de saber,como adicionar as sprites no tibia, agradeceria muito se me respondesse.