Tutorial: Como fazer Sprites de Tibia?

[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

[Galiant]

• Oficina de Pintura
  
  Bom a Oficina de Pintura foi um projeto meu, seguindo dicas de ótimos spriters do Mundo Fake como o Marcotonio e outros tutoriais, que continuo usando até hoje e que se baseia na reunião de várias cores e seus diferentes tons em volta do sprite a ser pintado. Sendo a pintura do sprite realizada pela captura das cores pré-definidas em Orbs coloridos com o conta-gotas.
  Tudo na pintura se baseia na escolha das cores e dos tons então
  Desenhei orbs coloridos para facilitar a captura de cores:

Veremos mais pra frente como isso se aplica.

• Como fazer um Orb colorido:
  
  Na verdade é bem simples quando se tem o Fireworks, basta usar a Dodge Tool para clarear e a Burn Tool para escurecer. Mas basicamente o que se deve fazer é:
  - Escolher uma cor e fazer um círculo
  - Clarear a porção noroeste e um pouco da sudeste (para dar idéia de esfera)
  - Escurecer o meio para intensificar o efeito de esfera e refração da luz.
  - Pode-se fazer isso pelo paint selecionando uma cor e escolhendo diferentes tons desta cor para colorir o círculo em forma de esfera, mas utilizando as Ferramentas do Fireworks vai lhe poupar muito trabalho.

• Seguindo as etapas:
  
  
  Créditos: Redstrike

• Como organizar minha Oficina de Pintura:
  
  - O primeiro de tudo é vc desenhar seu sprite
  - Quando passar por todas as etapas abordades no Artigo 2, copie seu sprite e cole em um arquivo PGN ou BPM que vc chamará de Oficina de Pintura.
  - Lá vc deve colar também suas cores pré-definidas e deixá-las em torno do sprite.
  - Se tiver itens antigos com uma boa distribuição de cores e tons
  copie-os e cole todos na Oficina
  
  Em resumo:
  
  

  

Créditos ao Leomage pelo axe

[Galiant]

• Iniciando as etapas da pintura:
  
  Aproveitando que estamos trabalhando com uma espada, que é um sprite simples, vamos aproveitar para um minitutorial de espadas =D
  Bom, pra começar vamos às regras básicas:
  
  Regra número 1 - Toda espada possui uma linha média que definirá o corte da lâmina
  Regra número 2 - A porção esquerda da linha média recebe mais luz do que a porção da
  direita.
  Regra número 3 - A luz não é estática, ela se propaga ao longo de todo sprite porém alguns pontos são menos iluminados como regiões de cavidades na guarda, cabo e principalmente na porção da lâmina que está voltada contra a luz, tendo o corte como barreira.

Certo, vamos clarear a mente de vcs

• Regra número 1: Linha média que define o corte

• Selecionei as cores que usaremos na pintura desse sprite.

Certo, a Linha média não é nada mais do que uma reta diagonal formada por 4 ou 5 tons diferentes da mesma cor, logo consultaremos o mesmo Orb colorido no caso...o azul-acinzentado. Também pode-se capturar cores de seus antigos sprites ou imagens para possuir uma maior gama de opções.


[ virei e pintei de marrom o fundo pra vocês poderem entender melhor com a lamina voltada pra luz ]

-Depois pintaremos as laterais médias, lembrando sempre que a luz é dividida no local que eu chamo de Secção Transversal, ou simplesmente "ST" representado pela cor mais escura perto da ponta da linha média.

Seguindo o Tutorial do Strad, podemos perceber a diferença das lâminas e saber como nossa linha média deve se comportar.

- As laterais médias, são as laterais da linha média ( huaiua ) e geralmente seguem três regras:

• Regra número 1: A ponta da espada recebe mais luz, logo todos os pixels devem ter tons mais claros na ponta caminhando para tons mais escuros conforme se aproximem do cabo.

• Regra número 2: A lateral esquerda possui uma propagação maior da luz do que a lateral esquerda, logo os pixels são mais claros em relação a esquerda.

• Regra número 3: A Secção Transversal(ST) é de extrema importancia para o direcionamento do corte e da luz.

No exemplo:


E ao final da pintura das laterais médias:


Certo, nosso Sprite está começando a ficar bonitinho hehe, agora o próximo passo é pintar as linhas das extreminades.

Geralmente essa é a parte que entra o Anti Aliasing, um efeito usado muitas vezes para deixar o Sprite mais redondo( falaremos dele mais pra frente ) mas usaremos ele neste caso para deixar nosso sprite mais ponteagudo!
Isso é feito utilizando Cores Escuras com Tons próximas do contorno, que no caso dos itens de Tibia é Preto. Faremos isso deixando alguns pixels mais claros perto do cabo para dar a idéia de uma superfície "Afiada".

Como na imagem:


- E ao acabar a lâmina partimos para a guarda. Seguindo mais três regras:

• Regra número 1: A porção esquerda da guarda recebe mais luz do que a direita. Porém há pouca diferença.

• Regra número 2: Cavidades, Jóias, Rachaduras e Cabos com guardas longas recebem sombreamentos à parte da guarda.

• Regra número 3: A guarda não segue padrões de Secção transversal.

( pelo menos a maioria delas. )

Então vamos pintar a Guarda! Escolham cores também próximas do preto para o AA mas que mantenham a ideia dourada, reforce isso com cores mais vivas ao longo da guarda, utilizem para isso o Orb Colorido dourado.

Exemplo:


E por fim temos nosso Sprite totalmente feito pelo PAINT.
Parabéns a todos que leram até aqui!

• Vejamos uma comparação rápida entre o nosso Sprite inicial e suas edições pelo Paint e pelo Fireworks:

1 - Formato Externo
2 - Formato Interno
3 - Pintura básica
4 - Aprimoramento
5 - Rota pelo Paint
6 - Rota pelo Fireworks

Façam seus julgamentos! =D
Eu pessoalmente diria que a espada 100% paint ficou muito melhor, talvez clareasse mais a lámina com o Fireworks ou usando uma técnica que vamos ver no tópico: Sprites brilhantes sem “Sharpen” [Art5:5]

*OBS: Com laminas mais curtas em largura é mais fácil fazer AA ¬¬

[Galiant]

• Anti-Aliasing e suas aplicações
  
  O Anti-Aliasing é uma técnica muito utilizada para "arredondar" o sprite, e quando digo arredondar eu me refiro a
  
  Diminuição dos acidentes nas armações dos pixels
  
  Isto é: Algo pra disfarçar o fato de todos serem mini-quadradinhos haha. Isso se dá com o clareamento gradual da cor que mais se assemelha ao contorno e ao sprite, muitas vezes cinza, marrom ou até mesmo azul...todos em seus tons mais próximos do preto.

• Efeitos de Arredondamento
  
  Ao desenhar um círculo branco percebemos que existem muitos pontos brancos perto dos pixels pretos do contorno, isso faz om que o Sprite fique "quadrado" literalmente! haha. A correção desse efeito é fazer um pequeno degradê que parta do preto do contorno até a cor do fundo.
  
  Como no nosso caso estamos utilizando a cor branca...nada melhor do que fazer um degradê do preto para o branco usando a cor CINZA.

• Efeitos de Ponta-afiada

Para fazer ponta não precisamos desenhá-la no formato mas caso preferirem assim; fiz essa imagem, bem ilustrativa ao meu ver da influencia do AA no Efeito de ponta dos Sprites

• Efeitos do AA na Pintura
  
  O Anti Aliasing é muito usado ( e bem usado ) na Alemanha e na Suécia para dar mais vida aos Sprites, evidenciando e enfatizando as cores vibrantes do interior ao invés de deixá-las soltas a mercê somente do contorno.

A algum tempo fiz uma espada a qual dei o nome de Arectaris
Fiz uma segunda versão dessa Sword utilizando duas técnicas de AA:

• A Primeira: no cabo, utilizando um marrom bem escuro para escurecer e um marrom-acinzentado mais claro para manter a cor escura.

• A Segunda: na lâmina, utilizando cores bem escuras na ponta, contrastando com a claridade dos ultimos pixels e gradualmente escurecendo os pixels para formar uma ponta.

Observem atentamente a Ponta dos Sprites:

• OBS: Façam espadas com a largura da Arectaris no começo porque é muito complicado fazer AA de lâmina em espadas maiores a melhor que consegui acho que foi essa, preciso treinar e estudar mais isso haha

[Galiant]

• LISTA DE CORES

Vou postar aqui uma série de Orbs de Pintura que estou fazendo, caso algum de vcs não tenha acesso ao Fireworks.

[Galiant]

• Artigo 5: Efeitos particulares

• Jóias de enfeite
  
  Fazer jóias é realmente algo bem fácil! Na teoria, tudo que precisamos fazer é desenhar um Orb! Ou seja, uma pedra ao esfera, que tenha um ponto luminoso vindo do Noroeste e que possua um ponto de claridade mediana a Sudeste, indicando que a luz passou por Refração e todos os pontos ao redor destes dois pontos de Luz são mais escuros

• Refração da Luz

• No exemplo

Créditos - Redstrike

• Cavidades
  
  A ideia de cavidades é fácil de ser entendida, vou me aproveitar novamente da Arectaris:

Como todos podem ver, desenhei um ruby dentro de uma cavidade na guarda da Arectaris, essa mistura de pixels só foi capaz de passar a idéia de cavidade porque, como dito antes, a luz se propaga ao longo de todo o sprite, vindo do Noroeste. Quando chega à cavidade, a luz não consegue penetrar no buraco e chega até a borda dele ( a sudeste ) que por sua vez reflete a luz de volta à pedra, porém em menos quantidade.

Por isso usei cores escuras para simbolizar as bordas internas da cavidade, e as claras, as borda externas:

• Resumindo:

• 1 - A Luz vem do noroeste, atingindo a borda externa com grande intensidade

• 2 - A luz passa pela cavidade atingindo a segunda borda externa mais com menos intensidade

• 3 - A luz que ilumina a segunda borda externa é refletida por ela chegando em menor parte ao ruby encontrado na cavidade.

Sigam o esquema

[Galiant]

• Rachaduras
  
  Rachaduras podem ser uma coisa bem complicada no começo, mas com o tempo se pega a prática e a coisa fica mais simples. Na verdade em teoria é mesmo muito simples...basta você:
  
  
  • Regra 1: Escolher de onde e como será a rachadura
  
  
  • Regra 2: Desenhar um risco PRETO na região da rachadura
  
  
  • Regra 3: De acordo com o fundo, escolher um tom bem claro e iluminar a porção Sudeste da rachadura e um tom bem escuro para iluminar a porção Noroeste <--- mesmo efeito que vimos em Cavidades

Passo a passo temos:


[Créditos: Artfire & Galiant]

[Mapper123]

parabens mano me ajuda:riso:continue asim encinando as pessoas vlw to acabando de ler

[Drako__]

Uu

Otimo tutorial so com 1 pagina e meia de coments ??

Putz vamo comenta povo !!

@Topic

Cara me ajudo muito³ mesmo, meus sprites tavam horriveis, ainda estão, mas melhoraram bastante depois de começar a ler.

So da uma olhada na primeira depois de lê:

Agora imagina um 10x pior que essa, sem sombra sem AA pois é era assim as minhas.

Vlw mesmo otimo tutorial, nota 10.

[Fresh Breath]

ôloco, isso q eh tutorial O___O"
muito bem explicado
meu,
vai ajudar todos daki ._.

inclusive eu \o/
MUITO BOM o TUTORIAl
aeaeae \o