The Pixel Art Tutorial

[gkaonicx72 20]

Olá Xtibianos,

Então estou me interessando em Pixel Art e vi um ótimo tutorial por isso resolvi compartilhar com vocês. Então estudei um pouco sobre o assunto e com a ajuda de Mythorius agente fez umas mudanças no texto atual do tutorial que achei (link final do tópico). O tutorial atual é em Inglês então eu traduzi tudo, qualquer erro que cometi favor me avisar. Já no final do tutorial vou unir os melhores tutoriais do Xtibia e colocar no tópico e é claro vou explicar melhor os passos de cada coisa.

 

Parte #1 - Ferramentas

 

Introdução:

Uma das coisas legais sobre Pixel Art é que você não precisa de programas profissionais como o Photoshop. O MSPaint que se encontra no Windows® é o suficiente, porem muitos já estão acostumados com os atalhos e o layout do Photoshop, por isso preferem o mesmo. Mas há muitos programas para pixel art. Por exemplo, usuários de Mac® tem o Pixen. Não posso dizer muito sobre ele pois nunca o usei mais pesquisei um pouco e ouvi coisas boas sobre ele. O usado neste tutorial é o Photoshop mesmo já que muitos estão familiarizados com ele.

 

Desenvolvimento:

 

Quando você for usar o Photoshop, a sua ferramenta principal vai ser o pencil (B). O bom do Pencil Tool é que você tem controle total do que está fazendo, ou seja, você não só pega e pinta tudo rapido. Você vai fazendo coisa por coisa, e assim o resultado fica melhor. Dependendo, no começo é bom usar o balde para pintar uma área toda de uma cor e separar as cores da sprite, mas ai é meio que perda de tempo, só se for algo grande mesmo, o que não acho que seja o nosso caso, pois este tutorial é feito para iniciantes.

 

Duas outras ferramentas que você poderá usar vão ser o Marquee Tool (atalho M) e o Magic Wand Tool (atalho W) para selecionar, mover, copiar ou colar algo. Lembrando que ao segurar Shift ou ALT quando você fizer a seleção você pode adicionar ou retirar da sua seleção atual, isto já é usado quando você quer selecionar coisas que não são quadradas.

O Magic Wand Tool serve para selecionar coisas parecidas. A "Tolerance" no menu lá em cima define o quão parecida uma coisa tem que ser para a Magic Wand selecioná-la junto com o que você selecionou de primeira. Por exemplo, se você botar "0", ele só vai selecionar coisas que são da cor exata. Se você botar "255", ele vai selecionar tudo sem exceções.

 

Você também vai usar o Eyedropper(I) que lhe permite selecionar uma cor de seu desenho e ela automaticamente se torna a cor atual da sua palheta. Muitas pessoas preferem o Photoshop porque ele tem teclas de atalho para as ferramentas, e usá-las é mais rápido que ter que ir lá no canto e clicar na ferramenta desejada.

 

Então é isso aí. É bom você aprender as teclas de atalho (entre parêntesis) depois do nome da ferramenta para salvar tempo. Outra muito importante e que muitas pessoas não sabem é o "X" que muda da cor primária para a secundária.

 

Aqui temos uma lista de alguns programas que você também pode usar:

* Cosmigo ProMotion - Windows

* GraphicsGale - Free - Windows

* GIMP - Free - Windows Mac Unix

* Adobe Photoshop - Windows Mac

* Paint Shop Pro - Windows

* PD Pro Digital Painter - Free - Windows

* Ultimate Paint - Free - Windows

* PixelStudio - Free - Windows

* Paint.NET - Free - Windows

* Allegro Sprite Editor - Free - Windows

* Timanthes (c64) - Free - Windows

* GangEd (c64) - Free - Windows

* ProjectOne (c64) - Free - Windows

* GraFX 2 Win32 - Free - Windows

* Pixen - Free - Mac

* Iconographer - Mac

* JDraw - Free - Java

* Gpaint - Free - Unix

* XPaint - Free - Mac Unix

* KDE Icon Editor - Free - Unix

* mtPaint - Free - Windows Unix

* Rendera - Free – Windows

* Photobie - Free – Windows

 

Parte #2 - Linhas

 

Introdução:

 

Pixels são pequenos pontos de cor, e é com esses pixels que formamos linhas e pintamos coisas. É só pensar assim: 1 pixel = 1 letra. Você usa eles para formar palavras que são partes do seu desenho, que no final acaba em um desenho inteiro, ou seja, o texto. Nesta parte do tutorial vamos discutir dois tipos basicos de linhas, retas e curvadas.

 

Desenvolvimento:

Linhas Retas:

 

Sei que muitos vão achar que fazer uma linha reta é muito fácil, maas até linhas retas podem ser problemáticas. O que temos que evitar são "Jaggies" - pequenos erros na linha que fazem ela parecer desigual. Os "Jaggies" são pedaços maiores ou menores do que os pedaços vizinhos. Caso você queira usar a Line Tool (U) seria uma boa segurar SHIFT para fazer uma linha totalmente reta.

 

 

Linhas curvadas:

Para linhas curvas, certifique-se que o declínio ou inclinação é consistente durante todo o tempo. Neste próximo exemplo, a linha suave vai à procura da curva 6> 3> 2> 1, enquanto a outra linha com o jaggy vai 3> 1 <3.

 

 

Conclusão:

Este é o básico já mais a frente vamos aprender AA (Anti-Aliasing) o que vai deixar suas linhas mais suaves e fazer com que elas não pareçam serrilhadas.

 

Qualquer sugestão do que pode ser adicionado é só postar.

 

Parte #3 - Conceitualizando

 

Introdução:

A primeira coisa que você precisa antes de começar a fazer algo é uma idéia. Sempre é bom você planejar no papel o que você vai fazer. Depois se você é iniciante olhe outros exemplos do que você quer ver e tente saber um pouco sobre o assunto. Isso irá lhe ajudar muito na hora de fazer seu desenho pois você já vai ter as idéias prontas e vai se concentrar mais ao trabalho. Porque senão você vai parar no meio do desenho só para pensar que cor pintar e isso só vai piorar o seu trabalho.

 

Desenvolvimento:

Aqui vou colocar algumas perguntas que podem te vão te guiar no planejamento e na criação da sprite.

 

Para que você esta fazendo a sprite? Isso é somente por diversão, algum jogo ou site? Vai ser algo parado ou algo animado? É bom você pensar antes o que vai fazer para não se desconcentrar durante o trabalho. Se vai para um jogo por exemplo o Tibia tente saber alguns conceitos básicos sobre as sprites do mesmo, algo bom seria você ler uns tutoriais sobre a perspectiva do mesmo e os tamanhos.

 

Ainda vou elaborar outras perguntas.

 

Parte #4 - O Formato

 

Introdução:

Um outline preto da uma boa e básica estrutura ao seu sprite e para os iniciantes é o mais recomendável. Já no capitulo 8 vamos aprender a usar outras técnicas de outline por exemplo usando outras cores sem ser o preto.

 

Desenvolvimento:

Cada um tem sua maneira de fazer o contorno do sprite. Eu vou ensinar um dos que eu conheço que acho que é o mais recomendável para os que estão começando. Geralmente as técnicas mudam de acordo com o tipo de sprite que você esta fazendo e sua habilidade.

 

1ro passo: Outline à mão livre

Use sua tablete ou o mouse mesmo e faça um layout meio que grosso não tanto mais faça algo sem calcular muito levando em consideração parte por parte do corpo e que de para entender do que o seu desenho se trata. Como no exemplo abaixo.

 

 

2do passo: Clean Outline

O titulo já diz tudo "CLEAN" do inglês significa limpo ou seja agora devemos limpar o nosso layout deixar o formato só com um pixel nada muito gordo pois já o sombreamento você faz na parte de colorir. Para este segundo passo o bom é você aumenta o zoom para 6x ou 8x e tirar os "jaggies" e as partes grossas. Abaixo uma imagem para você comparar e saber do que estou falando.

 

 

Não tente fazer algo muito grande quando for fazer uma sprite elas geralmente não passam de 200x200. Acho que a frase "Fazendo mais, com menos" resume o que estou falando, ou seja, demonstre do que você é capaz em coisas pequenas e não faça coisas grandes só para dizer que é bom. Até você descobrir que 1 pixel faz uma grande diferença. Deixe o outline simples tente se concentrar em fazer com que as partes estejam claras nada muito detalhado pois isso vem na parte de colorir por enquanto isto é só o começo.

 

Parte #5 - Cores

 

Introdução: Com o formato/outline (como você queira chamar) pronto agente milhares de cores que podemos usar para colorir o nosso sprite, do mesmo jeito isto não é tão facil vocês acham que é só colocar cores random mais é algo que requer paciencia e você precisa saber um pouco da teoria antes de sair pintando qualquer coisa. Neste capitulo vamos encontrar alguns conceitos básicos que é bom você saber para spritear.

 

Desenvolvimento:

Modelo de cor HBS:

HBS significa Hue, Brightness e Saturation em português Matiz, Brilho e Saturação. Enfim este é somente um de vários modelos de cores. Outros conhecidos são RGB e CMYK.

 

Hue: Cor por exemplo vermelho, azul, verde, amarelo, etc.

 

Saturation: Que intenso a cor é. 100% de saturação da a cor com mais brilho e a medida que a saturação abaixa a cor vai ficando mais cinzenta.

 

Brightness: Leveza de uma cor, ou seja, 0% é preto.

 

Escolhendo as cores:

A escolha das cores já vai pro gosto de cada um mais abaixo vamos ter algumas dicas que pode te ajudar caso você não tenha idéia do que escolher ou do tom que deve usar.

 

1. Cores com menos brilho e saturação tendem a olhar mais "terras" e menos como "cartoony". Cartoony para quem não sabe pode ser também conhecido como fancy do português fantasia ou caricatura.

 

2. Da uma olhada no esquema des cores, nele você pode ver cores que combinam melhor. Outra alternativa seria visitar o tópico que criei aqui mesmo no Xtibia, CLIQUE AQUI e veja o tópico é algo similar a esta de abaixo.

 

 

3. Quanto menos cores você usar mais sua sprite vai se destacar tente escolher 3 cores principais e use tons diferentes para elas. É por isso que o mario não é tão detalhado sempre foi usado poucas cores nele.

 

Aplicando cores no Photoshop:

A aplicação de cores no photoshop é um pouco diferente do que a do paint. No paint você só seleciona o balde e pinta a área já no photoshop você tem que usar a magic wand tool ou qualquer ferramenta feita para selecionar por exemplo o marquee tool como dito no primeiro capitulo.

Assim que você selecionar a área é só você usar ALT+F ou SHIFT+F. O que eles fazem?

 

ALT+F = Vai preencher a área selecionada com a cor primaria da sua palheta.

 

SHIFT+F = Vai preencher a área selecionada com a cor secundaria da sua palheta.

 

Abaixo temos a sprite colorida seguindo as dicas mencionadas acima. Da para ver que ela esta bonita tem gente que até acha isso bonito só que ainda falta sombreamento e muitas outras coisas nela.

 

 

Parte #6 - Sombreamento

Introdução:

Sombreamento é uma parte importante em spriting porque a sprite que você esta fazendo tem que parecer real, não pode ser algo com a mesma claridade no lado < e > da sprite pois vai ficar algo incoerente.

 

Desenvolvimento:

Escolhendo a fonte da luz:

Primeiramente ao começar a sombrear você tem que saber onde a luz do sol esta vindo, esta é uma das coisas que muitas pessoas esquecem ou acham que não é importante. Se você esta fazendo uma imagem grande e larga só para mostrar o seu trabalho mesmo já é algo mais dificil pois existem lampâdas, velas, luzes de janelas, etc. Mais já que muitos aqui jogam tibia abaixo uma imagem de onde vem a luz no tibia.

 

 

Sombreamento:

Agora que a gente já definiu uma fonte de luz podemos começar a sombrear. Pelo modelo mostrado acima posso indicar que os pontos que devemos sombrear são: Embaixo dos braços, cabeça, pernas, sapatos e a parte de cima do papel pois a mão esta fazendo sombra nele e outros pequenos detalhes.

Sombreamento também faz com que as coisas não pareçam lisas é o sombreamento que define musculatura, cabelo, etc. Se você não acredita pegue um papel, faça uma bola com ele e depois abre ele, você vai ver os pontos que pega sombra e vai entendo o que estou falando.

 

 

Sombras suaves:

Uma segunda sombra deve ser feita só que com um tom mais claro do que a anterior para fazer sombras suaves. Esta sombra também é utilizada para fazer transições de uma parte escura até a clara especialmente em lugares com curva.

 

 

Destaques:

Lugares que tomam luz direta do sol podem ter cores mais claras para fazer um destaque. Você só tem que tomar cuidado para não abusar pois isto deve ser usado menos do que o sombreamento pois como já disse é um destaque e a pessoa tem que se focar na sprite e não nessa área mais clara. Sempre faça o destaque depois do sombreamento pois ai você já tem uma noção do tamanho que tem que colocar e não acaba fazendo um destaque muito grande.

 

 

Nunca faça:

-Muitas sombras

-Use gradiente

-Pillow-shading

-Cores muitos similares ou seja com pouca diferença

 

Outros exemplos de sombreamento só que com a fonte de luz vindo do lado direito encima.

 

 

 

Pillow-shading:

Aqui nesta primeira imagem vamos ver algo usando o pillow-shading, como podemos ver é totalmente sem noção comparado com a fonte da luz.

 

 

Agora vamos ver o sombreamento correto para esse circulo.

 

Mais um exemplo

 

Gradiente:

Para quem não sabe o que é gradiente vou mostrar alguns exemplos.

 

 

Parte #7 - Dithering

Introdução:

Conservação de cores é algo muito importante em spriting. Este é um jeito diferente de ter mais sombras só que usando menos cores. Para quem nunca ouviu falar pode conhecer também "cross-hatching" ou "Stippling", é só você pegar duas cores e interligar essas duas cores.

 

Desenvolvimento:

Exemplo Simples:

Aqui temos um pequeno exemplo onde usamos duas cores para fazer quatro sombras usando dithering.

 

 

 

Exemplos Avançados:

Aqui nesta primeira imagem podemos ver um usando o gradient do photoshop e abaixo a técnica dithering. Viu como podemos fazer sombras com somente duas cores.

 

 

Outro exemplo:

 

Imagem original



 

Imagem usando web-safe color pallete, note as áreas grandes lisas e a perda de detalhes



 

Imagem anterior com dither, note que a mesma palheta foi usada só que foi aplicado dither.



 

Aqui a imagem foi salva usando somente 256 cores e o dither



 

Aqui a imagem foi reduzida para somente 16 cores sem dither



 

E aqui a mesma imagem de cima só que com o dither aplcado

Aplicação:

Dithering é uma coisa que não muitos gostam ela é usada só que poucas pessoas sabem usar da maneira correta. Se você se lembrar dithering era usado naqueles jogos velhos da SEGA. Você pode usar ou não ai já fica sua escolha mais como estamos aprendendo resolvi mostrar a técnica para vocês.

 

 

Parte #8 - Selective Outline

Introdução:

O selective outline ou "Selout" é um tipo de sombreamento do formato da sprite. Em vez de usar preto no outline todo muitos preferem usar tons parecidos com o da cor usada na área. Por exemplo se o cabelo é marrom usar um tom diferente de marrom no outline e não o preto.

 

Desenvolvimento:

Selout é usado para dar um pouco mais de realismo na sprite, não posso dizer que o preto é feio mais se você souber usar o selout da maneira correta o resultado é muito melhor.

 

 

Como podemos ver acima não só usei o selout no outline, usei também dentro do corpo ou seja nos musculos para ficar separado melhor pois se não se lembram com o outline preto ficava feio a separação dos musculos. Abaixo a imagem de antes para você comparar melhor.

 

 

Parte #9 - AA (Anti-Aliasing)

Introdução:

Anti-Aliasing é uma técnica usada para deixar linhas mais suaves e não parecer tão serrilhadas. Adicionar cores intermediarias em relação a cor da linha e do fundo para deixar a mesma mais suave. Por exemplo, uma linha preta em um fundo branco você adiciona diferentes tons de pixels cinzas para dar um efeito diferente. Quando você ler o desenvolvimento você vai entender melhor o que estou falando.

 

Desenvolvimento:

Primeira Técnica - Curvas Suaves:

Geralmente você quer adicionar um tom mais claro para deixar a curva suave, se ainda continuar ruim adiciona mais pixels só que só usando mais um tom dessa vez mais claro ainda.

Acho que a maneira mais fácil de você entender é olhando as fotos então vou postar algumas.

 

 

Segunda Técnica - Arredondando para fora:

 

 

Terceira Técnica - Clareando, desaparecer gradualmente ou fazer um degrade:

 

 

Alguns exemplos:

Na esquerda o shape sem AA e na direita o mesmo shape com AA e a imagem ampliada dele.





 

Em uma linha.



 

E como podemos ver até em fontes.

 

Aplicando no sprite:

Então primeiramente se você quer que seu sprite fique bonito em um fundo branco não faça o AA fora só dentro do sprite mesmo. Então abaixo a imagem com o AA para você estudar melhor é bom você salvar a imagem e dar um zoom nela para você ver o que foi feito e como foi aplicado.

 

 

Parte #10 - Finalizando e adicionando detalhes finais

Introdução: A ultima parte a finalização é a que declara se você é um iniciante ou um profissional. Espero que todos esses capítulos anteriores tenham te ensinado alguma coisa.

 

Desenvolvimento:

Agora é só você adicionar os detalhes finais, o mais recomendavel para você que é iniciante e se preocupa em presentar a todos algo bonito é rever os 9 passos e ver se não faltou nada ou se tem alguma coisa que você pode fazer para melhorar. Abaixo a imagem da sprite pronta.

 

 

E aqui uma imagem animada mostrando passo por passo para você não se assustar tanto pensando que sua sprite ta péssima para você ver ela começou ruim e o trabalho final ficou ótimo.

 

Dicas Finais:

1.Leia vários tutoriais pois cada pessoa tem seu estilo e é bom você aprender um pouco de todos para não sempre fazer a mesma coisa.

 

2.Comece com sprites pequenas tipo as de tibia 32x32 ou 64x64, mais não se esqueça que estes 10 capitulos são aplicados também em sprites de tibia. E só um pequeno detalhe a fonte de luz vem do </\ como foi usado nesta sprite.

 

3. Tente adicionar ou procurar pessoas que tenha tempo para te ajudar e avaliar seus sprites. Se você admira o trabalho de alguém converse com essa pessoa não fique com medo ou vergonha pois se você tomar a sério você poderá ser um grande spriter igual ou melhor do que essa pessoa.

 

4. Muitas pessoas usam Tabletes eu nunca usei mais gostaria de ver como ela funciona. Quem sabe algum dia eu compro uma, se você não sabe se deve comprar ou não vai em alguma loja e faça um teste.

 

5.Todos os seus trabalhos publique eles em algum site por exemplo o Xtibia estamos aqui para te ajudar e dar dicas do que precisa melhorar. Quem sabe você até não faz novos amigos neste imenso Design-World.

 

Mãos na massa

Aqui uma coletânea de alguns tutoriais do Xtibia que podem te ajudar.

 

Como criar uma lamina para espadas - Por Xgogeta, Layout por Kaonic:

 

 

 

Aulas de Sombreamento, Criação e Lineart - Por Nedson

 

 

 

Técnica Utilizada para criação de sprites - Por Alessandro

 

 

Pixel Art - Técnica utilizada para criação de sprites

 

Caracteriza-se pelo trabalho desenvolvido pixel por pixel. Ao contrário do que pensam, pixel art nada mais é que um técnica utilizada por empresas de jogos de celulares com recursos de 8 bits. É criada pintando cada nível com programas de edição de imagens raster (como Photoshop, Fireworks ou Microsoft Paint.)

 

O pixel é a menor unidade de uma imagem, nos monitores coloridos, cada pixel é composo por um conjunto de 3 pontos: verde, vermelho e azul. O pixel em quantidade maior representa uma resolução agradável, ou seja, mais pixel, melhor resolução.

 

Resumindo, Pixel - de acordo com o Wikipedia- (aglutinação de Picture e Element, ou seja, elemento de imagem, sendo Pix a abreviatura em inglês para Picture) é o menor ponto que forma nossas imagens digitais, onde o conjunto de milhares de pixels resultam em uma imagem inteira.

 

Exemplos de trabalhos feitos em pixel art:

Pixel Art proporciona um ângulo fixo em aplicações de RTSs a RPGs. Foi na indústria dos videogames que essa arte ganhou uma percussão maior.

 

Raster (ou bitmap): Uma imagem do tipo bitmap não passa de uma matriz ou um mosaico onde temos vários pixels, cada um em seu respectivo lugar. Sendo assim, as imagens do tipo bitmap armazenam o posicionamento e a cor de cada um dos pixels existentes na memória do computador.

 

Base: Perspectiva Isométrica

Caracteriza-se pelo fato dos dois lados da imagem fazer um ângulo de 30º com o que está no centro. No computador, por pixel não é possível fazer um ângulo desses, portanto temos que utilizar um ângulo aproximado.

 

Ferramentas: Podemos utilizar uma ferramenta popular no Windows, sim o Paint. Mas podemos utilizar outros programas que utilizam layers, para facilitar o trabalho. Podemos citar entre os mais populares, Photoshop, Fireworks, Gimp.

Com estes programas, podemos obter partes individuais do trabalho, ao contrário do MS Paint.

 

Nota: Foi dada aqui uma breve explicação do que é e ao que relaciona-se o Pixel Art. Através desta pequena leitura, espero inspirar novos artistas para esta técnica. Em breve estarei disponibilizando tutoriais relacionado a esta magnífica técnica.

 

 

 

 

Créditos:

-Derek Yu (pelas imagens e a base do texto)

-Kaonic (tradução do texto e algumas adaptações ao mesmo)

-Mythorius (Correção de alguns erros)

-Wayofthepixel (lista de programas)

-Wikipedia/dithering and AA (imagens do gato)

-Mark's Pixel Art tutorial (pillow-shading)

Editado Janeiro 23, 2010 por kaonic

[Felp321 1]

Parabéns, muito bom o tutorial, quero ver ele inteiro ^^

 

Atenciosamente,

Felipe.

[satan666 12]

Ficou bom mesmo pena que eu não me intereço nessa área.

mas vai ajudar algumas pessoas que se interessam.

[Bernardo 87]

Eu já vi o original, é um ótimo tutorial, valeu por traduzir

[rockets 7]

Otimo e de grande qualidade, um tipo de tutorial que nao se encontra em todo lugar..

Ou melhor, axo q nunca vi algum aki.

Parabens, adorei e de grande utilidade em algumas coisas.

[CarlosPain 9]

Caraca.. que tutorial foda, deu até vontade de fazer uns desenhos, euaheuhua

A pessoa que vai fazer isso aê tem que ter paciência, uahuahua

[ArthurFavilla 6]

excelente tutorial velho! eu amo pixel art mas nunca consigui fazer, acho que com esse tuto eu aprendo :-)

levei uns 10 minutos só pra ver as imagens, imagine quando eu for ler ;s

[dwhfms 168]

Caramba, tutorial perfeito! isso vai ajudar muito quem vem procurar sobre designe no XTibia, fora que melhora ainda mais o conteudo da seção. Parabéns!

 

Obrigado por trazer conteúdo de qualidade para o XTibia!

Abraços.