Tutorial: Como fazer Sprites de Tibia?

[Galiant]

Certo galera...Meu nome é Galiant, e resolvi fazer esse Tutorial pra tentar passar um pouco do que estudei em matéria de sprites a vocês, a princípio todos acharão uma coisa aparentemente fácil, ou completamente absurda de difícil dependendo da sua pressa para evoluir.

Pretendo fazer um Tutorial grandinho então vou citar os tópicos que iremos abordar nesse Tutorial: Peço por favor a todos para não postarem nada até o final do Tutorial para n prejudicar o entendimento. Obrigado!
[ÍNDICE]

• Artigo 1: Características Principais de um Sprite
  
  1 - Tamanho
  2 - Luz
  3 - Perspectiva
  4 - Edição

• Artigo 2: Começando um sprite
  
  1 - Introdução ao PAINT
  2 - Criação de um sprite
  3 - Pintura
  4 - Aprimoramento

• Artigo 3: Efeitos gerais - Módulo: Fireworks
  1 - Magic Wand Tool
  2 - Blur Tool
  3 - Sharpen Tool
  4 - Dodge Tool
  5 - Burn Tool
  6 - Smudge Tool

• Artigo 4: Efeitos gerais - Módulo: PAINT
  
  1 - Como colorir um sprite
  2 - Oficina de pintura
  3 - Anti-Aliasing e suas aplicações
  4 - Lista de cores

• Artigo 5: Efeitos particulares
  
  1 – Jóias de enfeite
  2 – Cavidades
  3 – Rachaduras
  4 – Sprites Envelhecidos
  5 – Sprites brilhantes sem “Sharpen”

[Galiant]

Artigo 1: Características Principais de um Sprite

1- Tamanho
Bom, pra galera que tá começando agora a fazer sprites e não sabe por onde começar, aqui começaremos com o básico do básico, a dimensão dos sprites:
De fato é bem simples:

• Sprite pequeno porte (carregável)
  Todo sprite carregável deve possuir os padrões de sua Backpack e para isso, é preciso que ele tenha as dimensões 32x32 Pixels..
  
  Veremos mais a frente como dimensionar sua página de edição.[Art2:1]

• Sprites de médio porte
  Geralmente outfits, monstros humanóides, e pequenas estátuas seguem padrões com dimensão 32x32 Pixels no eixo de base(Chão) também, porém é preciso que eles se mantenham na perspectiva do Tibia
  

• Sprites de grande porte
  A grande maioria dos sprites de grande porte segue um padrão de 64x64 Pixels no eixo de base(chão), é o caso de Pedras, Estátuas, Mesas, e grande parte dos itens que compõe o cenário:
  

2 - Luz

• Direção da Luz
  Uma das regras mais importantes e obrigatória caso seu intuito em fazer sprites seja criar itens para o Tibia: A LUZ VEM DO NOROESTE, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Como no esquema a seguir:
  
  Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.

3 - Perspectiva

• A perspectiva é teoricamente bem simples também, basta você seguir os padrões de formato estabelecidos pela Cipsoft[Art1:1] e desenhar seguindo uma orientação diagonal: Como no esquema:
  

[Galiant]

Artigo 2: Características Principais de um Sprite

1- Introdução ao PAINT

Bom galera, é fato que muitos de nós ja abominaram o PAINT muitas vezes, mas uma prova de que ele é a chave para o sucesso de muitos é que, todo sprite é feito no paint, logo todos os itens mais belos bem desenhados que vcs ja viram vieram do mesmo lugar, e esse lugar é o Paint.

• Onde está o Paint?
  O primeiro de tudo é localizar o programa PAINT em seu computador, geralmente ele se encontra no seguinte endereço:
  
  Menu Iniciar/Todos os Programas/Acessórios/Paint.

• Configurando as dimensões da página
  Assim que abrir o PAINT, é preciso configurar a página para os padrões do Tibia. Para configurar a página siga o exemplo:
  
  IMAGEM/ATRIBUTOS
  
  E configure em:
  
  
  
  • 32x32 Pixels para Itens de pequeno e médio porte(carregáveis e outfits/humanoides):
    
    
  
  
  
  • 64x64 Pixels Para itens de grande porte:
    
    

• Principais ferramentas que utilizaremos no paint para fazer Sprites:
  
  - Lápis : Usaremos para desenhar e colorir.
  - Linha : Usaremos para dimensionar sprites(Perspectiva) e algumas vezes na pintura criando linhas.
  - Conta-gotas : Usaremos na pintura para captura de cores para o lapis.
  - Recorte Quadrado e Aleatório : Usaremos quando para movimentar o Sprite ou Parte dele ao longo da página
  - Lupa : Usaremos para aumentar seu sprite em duas, seis, oito e Doze vezes

[Galiant]

• Criação de um Sprite
  
  Certo, finalmente deixar de teorias e vamos colocar a mão na massa. Começaremos desenhando um formato apropriado, como este Tutorial foi feito para um nível Básico e Intermediário de Sprite Art, vamos começar com um formato simples, utilizando a Lupa de aumento em 8x ou 12x.
  Para ficar mais fácil desenhar os pixels simetricamente, o melhor é
  Quadricular a página apertando CTRL + G.
  
  
  • 8x + [ Ctrl + G ]
    
  
  
  
  • 12x + [ Ctrl + G ]
    Para configurar o aumento de 12x é preciso clicar exatamente na linha que limita o quadro de aumentos:
    
  
  
  Bom, vamos começar com uma espada. Veremos que até o formato mais simples pode ficar muito bom se for bem trabalhado:
  
  
  • Formato externo
    - Sempre Preto
    - Sempre dentro do espaço exigido pela Cipsoft
    
  
  
  
  • Formato interno
    - Sempre usar cores escuras mas Nunca Preto
    - Dividir bem as partes a serem detalhadas
    
  
  
  
  • Pintura
    - A pintura inicial deve ser simples para visualizar como o sprite deve ficar
    - Feito isso, segue-se para Aprimoramento e Oficina de Pintura ou para o Fireworks.
    - Aproveite para corrigir os pixels pretos que esqueceu dentro do Sprite ;D
    

• Aprimoramento
  - Se preferir desenhe alguns detalhes, como a divisória da lamina e jóias de enfeite
  - Feito isso: Sigamos para a Oficina de Pintura! Ou para o Fireworks...
  

[Galiant]

• Artigo 3: Efeitos gerais - Módulo: Fireworks
  
  Bom galera, pra ser sincero com vocês, eu não começaria a editar os efeitos pelo Fireworks, mas não se pode negar o fato de que muitos sprites ficam "bacanas" quando feitos no fireworks, mas na minha opinião, ele deve ser um programa de edições finais...como "escurecer isso aqui e ali" "clarear aqui", "deixar com cores mais vivas lá". Porém muitas vezes as pessoas preferem utilizar o Fireworks ou o Photoshop pra edição de efeitos então vou dar essa opção a vocês.
  
  
  
  • Efeitos Gerais
    
    - Magic Wand Tool: Usada para extrair o fundo do sprite, muito usado em fakes e outras edições como efeito de "Transparencia":
    
    - Blur Tool: Usada pra homogeinizar as cores, deixando-as com tons parecidos. Dando um efeito de Embaçado
    
  
  - Sharpen Tool: Usada principalmente para dar mais vida ao sprite, deixá-lo mais brilhante e com detalhes aparentes. O ruim é que em grande escala pode gerar riscos pretos indesejáveis.
  
  - Dodge Tool: Talvez, juntamente com a Burn Tool está seja a ferramenta mais utilizada no Fireworks. Utilizamos Dodge Tool sempre que quisermos clarear um sprite, tornando as cores mais próximas do branco:
  
  - Burn Tool: Usada para escurecer seu sprite, muito usado na porção direita dos escudos e outros equipamentos evidenciando a vinda d aluz ao noroeste.
  
  
  Por fim, juntando todo nosso trabalho no FireWorks é visível a diferença
  entre o molde e o sprite final. Basta lembrar que se a luz vem do Noroeste a parte Sudeste fica mais escura em relação a parte voltada para luz porem não fica PRETA já que os raios são refletidos para todas as direções
  
  
  • Processo de edição pelo Fireworks:
    
    

- Dodge Tool para clarear a ponta da lâmina e a lateral voltada para o noroeste.
- Burn Tool para escurecer a porção que mais se aproxima do cabo com mais enfoce na lateral direita do sprite
- Sharpen Tool para dar vida aos pixels mais iluiminados para torná-los consequentemente os mais brilhantes.

Controle a transmissão da luz pensando nos reflexos da luz e na perda da força da luz ao longo da lâmina, já que onde a luz bate, ela é refletida aos olhos do observador, passando somente uma parte ao resto do sprite. Assim se segue em todos os pontos de luz:

[Galiant]

• Artigo 4: Efeitos gerais - Módulo: PAINT
  
  
  
  • 1 - Como colorir um sprite
    
    Certo galera, acho que finalmente chegamos no meu método pessoal e mais esperado do tutorial(por mim) Daqui para frente abordaremos todo o verdadeiro trabalho de um Spriter de acordo com o meu pensamento, é um método trabalhoso, realmente trabalhoso; mas um método que torna o sprite realmente Tibiano. E realmente bonito.
    
    
    
    • Pintura PAINT x Fireworks
    
    
    Tudo na pintura se baseia na escolha das cores e dos tons, em matéria de sprites não basta somente escolher uma ou duas cores diferentes, colorir um sprite como fizemos na pintura básica [Artigo 2:3] e depois disso apenas usar Blur Tool(Clarear) e Burn Tool(Escurecer) do Fireworks no Sprite.
    Para nós o Fireworks será uma ferramenta básica de edição.
    
    
    
    • A escolha das cores
    
    
    Bom, como dito anteriormente o mais importante na pintura de um sprite é sua cor e os tons dessa cor.
    
    Geralmente usamos tons diferenciados de uma mesma cor para gerar a idéia de sombreamento e luminosidade. A utilização destes tons, varia de acordo com 3 pontos importantes:
    
    
    • Material a ser pintado: Metal, Bronze, Tecidos, Marfim, Ouro, Pele.
    
    
    • Propagação de luz no material: Alguns materiais como pedras não polidas, troncos e materiais envelhecidos não propagam a luz muito bem devido a manchas e ao não polimento de suas superfícies.
    
    
    • Reflexo da luz no Material: Tecidos, Peles, Materiais envelhecidos e pedras não polidas não devem refletir a luz como objetos polidos e bem trabalhados, essa diferença precisa existir.

Ouro

Cobre

Túnicas

Pedras

[Leomage]

Não tenho nada a reclamar do tutorial, ficou excelente,a seção precisava de algo assim. Mas nesse axe aqui () faltou créditos a mim não?Afinal, era pra ser uma parceria entre nós...incrivel, pensei que você ai me avisar. :triste:

Pra quem só usava paint você conhece muito bem o fireworks...
~Mage

[.LuKas~]

Muito bom, como vc viu!!! Eu fiz um sprite com esse tutorial e fico show!!!


O tutorial fico show de bola!!!!


Parkour'Lucas

[Galiant]

Valeu galera, LEO!! Já adicionei seus créditos pelo nosso axe!! Desculpa cara, nem me liguei mesmo! ;*

Espero mesmo que ajude a galera ai
Abraços!

[Strad]

Muito bom tutorial! excelente mesmo!
Uma pequena observação, o sombreamento em criaturas é diferente de como é feito nos ítems, a luz, no caso bate nas áreas que estão apontando para o céu, (cabeça, ombreiras, costas,) e fica mais escuro nas áreas que não estão apontando para o céu, (peito, área da cintura, pernas) entendeu? :S

Strad.