Tutorial Avançado de Sprites

Bom galera, depois do meu primeiro tutorial acho que muitas pessoas conseguiram aprender algumas coisinhas novas e muitos me falaram que gostaram bastante do tutorial, isso me levou a querer fazer um segundo, dessa vez mais avançado.

[ÍNDICE]

• Artigo 1: Realidade do Sprite
  
  1 - Proporção
  2 - Coerência
  3 - Pintura avançada
  4 - Sombreamento

• Artigo 2: Efeitos de Aparência
  
  - Cromagem
  - Petrificação
  - Elemental do Fogo
  - Elemental do Gelo
  - Brilho externo
  - Corrente ( Chain armors...etc )

• Artigo 3: Tópicos especiais de Pixel Art
  
  Swords
  - Swords
  - Broadswords
  - Laminas retorcidas
  
  Clubs
  - Em 90 graus
  - Em 45 graus
  
  Axes
  - Laminas
  - Cabos
  
  Armors
  - Ombreiras
  - Peitoral
  
  Legs
  - Desenho
  - Sombreamento simples

• Artigo 4: Perspectiva
  
  - Paredes
  - Mesas
  - Humanoides
  - Quadrúpedes
  - Grama
  - Plantas de Decoração
  - Árvores
  - Pedras

Citação:

---

POR FAVOR! NÃO COMENTEM ATÉ QUE TODOS OS TÓPICOS DO TUTORIAL TENHAM SIDO FEITOS

---

• Artigo 1: Realidade do Sprite
  
  Proporção
  
  Bom, começando esse nosso novo tutorial de sprites gostaria de chamar a atenção dos spriters que ja possuem certa experiência a ficarem atentos às proporções de seus sprites.
  
  Exemplo 1
  
  Como exemplo fiz essa Armor sem muitos detalhes ou efeitos de sombreamento, o objetivo é mostrar a vocês como uma proporção errada pode estragar um sprite:
  
  http://img529.imageshack.us/img529/8915/imagemin7.png
  
  Aparentemente, não nos parece um sprite ruim, na verdade ele tem potencial...talvez sombreando ali na esquerda...o ombro principalmente, clareando o lado direito nos pontos de brilho pra dar aquele contraste e tal...é ficaria bacana! Mas olhem só para a entrada do pescoço:
  
  http://img529.imageshack.us/img529/1...agembigwu4.png
  Quem tem um pescoço maior do que o próprio peitoral? Seguindo proporções normais provavelmente a armadura ficaria presa nas clavículas do guerreiro, quando o mais correto seria estar no trapézio. Conclusões: Noções anatômicas são sempre bem vindas.
  
  Exemplos
  http://img297.imageshack.us/img297/8835/dsmud2.png
  http://wop.tibianetwork.net/gfx/prop...5b250479a9.png
  
  
  Exemplo 2
  
  http://img299.imageshack.us/img299/7551/axejc4.png
  
  Geralmente Axes bizarros e non-sense fazem muito sucesso entre a galera, mas em um contexto do jogo todo e exagero bizarro e retardadisse TEM QUE FAZER SENTIDO. Se algum zé linguiça me vem e fala que isso é um axe de ELFO. Podemos parar a conversa por ai haha. Cabo pequeno, lamina bizarra de grande. Ele poderia ser um machado de anões...sim, ferreiros, pequenininhos e fortões...sim, mas ele provavelmente teria que segurar com as duas mãos mas esse machado tem lamina dos dois lados, logo o anão iria provavelmente se machucar, outra coisa é o cabo, quando que um cabo TRANÇADO de madeira iria suportar 450 oz de lamina de titanio? hahaha É preciso pensar nisso. Deveriamos ou aumentar o cabo ou diminuir a lamina, como temos só 32x32 de dimensão o certo é diminuir a lamina.
  
  Exemplo 3
  
  http://img231.imageshack.us/img231/7331/23299419im8.png
  
  Muitas pessoas gostam de usar esses prolongamentos do outline ( formato em preto ) pra dar uma aparencia de uma superfície mais afiada...bom eu digo que isso não é necessário. A aparencia de superfície afiada aparece quando vc faz um bom uso do contraste ( geralmente usando branco na parte mais externa da lamina do axe e depois usando uma linha escura ( que eu chamo de linha de separação, vamos ver mais pra frente ) para separar o corte (branco) do resto da lamina.
  
  Não sei se vcs ja tiveram a oportunidade de ver ferro derretido, mas o ferro derrete e quando se quebra para molde enquanto ele ainda está aquecido ele forma esses fiapos. Portanto a aparencia que a superfície tem passa longe de ser afiana, sendo mais aparente o fato de que ela foi mal manuseada durante o processo de confecção.
  
  
  Coerência
  
  
  Detalhes no Sprite
  
  Exemplo 1
  Mais uma característica importante para fazer um sprite realista é a Coerência, ou seja, tudo no sprite deve fazer sentido. Tudo deve ter um porque de existir ali. Vejmos então a nossa Armadura:
  
  http://img529.imageshack.us/img529/8915/imagemin7.png
  
  Bom, logo de cara, percebemos que ela possui uma capa, bacana! Mas onde a capa esta presa? Exato. Não se pode dizer "Po, acho que está atrás da armor...tem que estar, não?". A pessoa que ve seu sprite não pode ter dúvidas do que esta vendo. Então vamos concertar isso:
  
  http://img218.imageshack.us/img218/8745/imagem2hc6.png
  
  Agora sabemos onde a capa esta presa =]
  
  Exemplo 2
  
  Em escudos isso costuma acontecer bastante, vou postar um exemplo meu para vocês entenderem.
  
  A algum tempo fiz esse escudo:
  http://img360.imageshack.us/img360/7...nshieldmp8.png
  
  Certo, agora pensem comigo. Imaginem esse escudo com essas divisões na madeira em uma batalha...Agora imaginem nosso herói sendo atingido por um war hammer bem no meio do escudo ( E consequentemente no meio da madeira, mas na divisão que eu pus)...sim iria quebrar em mil pedaços, no mínimo. E a proteção seria 0.
  
  Agora, se tivessemos um escudo de madeira corrida mesmo, sem divisões ( que são rachaduras de certo modo ) o impacto seria distribuido pela madeira e ela iria resistir mais a ele. Logo:
  
  http://img360.imageshack.us/img360/1...eldfullgx5.png
  
  Acho que assim seria mais coerente de se desenhar um escudo de madeira.
  
  Detalhes no nome
  
  Bom a algum tempo eu fiz essa armadura, que na verdade e um Robe. Existe uma enorme diferença entre eles apesar de um robe ser usado como armor.
  E aqui está a diferença:
  
  Robe é igual a uma bata, uma roupa cerimonial ou uma vestimenta encantada, mas de pano. Isso significa usar cores menos saturadas e com pouco brilho.
  King's Robe
  http://wop.tibianetwork.net/gfx/prop...f0c290d3c3.png
  
  Uma armadura é algo mais armorizado mesmo, com peças de metal, muito mais brilhante e com mais cores saturadas
  King's Armor
  http://img170.imageshack.us/img170/2338/kajc9.png
  [cred: Alex - Redshrike]
  
  Logo o nome que vc escolhe também é importante na coerência.

Pintura Avançada - Método do Modelo de Gradientes

[Desculpem pelo atraso no Tutorial mas com a facul e td mais não tive tempo de postar mais cedo]

Bom, agora que encaramos o sprite como uma diversão que requer certa seriedade para ser bem feita vamos desenvolver nossa técnica de pintura.
Para quem acompanhou o Tutorial Básico de Sprites não deve ser difícil relembrar dos Orbs da Oficina de Pintura, na verdade esse método é mais fácil para quem esta começando porque em um globo sombreado é mais fácil visualizar quais tons se usará no sombreamento de um sprite. Como este tutorial é direcionado aos que já possuem uma certa experiência, eu aconselho o Modelo de Gradientes que se baseia no seguinte conceito:

Todos com certeza conhecem muito bem essa palheta:

Cor/Definir Cores Personalizadas:
http://img144.imageshack.us/img144/5...adienteov0.png

Como podem ver todas as cores possuem tons que de certa forma misturam elas com outras cores, isso é nada mais nada menos do quê?... Isso mesmo, ANTI-ALIASING. Mas vamos abordar isso mais pra frente, o importante aqui é saber escolher os tons certos para começar a pintar, tendo em vista que vc precisará de sombra e luz...e ainda precisará de tons medianos para caracterizar as regiões que não recebem nem muita luz nem possuem muita sombra, e ainda por cima, precisa achar tons entre todas elas pra poder fazer AA. Ufa, coragem meus amiguinhos haha Preparei um sprite para tentar ilustrar a situação:

http://img522.imageshack.us/img522/2937/umbrellagh6.png
Bom, o sprite possui fins ilustrativos então também não precisamos de muitos efeitos, reparemos no sombreamento.

Antes de começarmos um sprite devemos saber que cor usaremos, quando escolhermos precisamos escolher os tons claros e escuros para formar nosso modelo de gradiente que usaremos para pintura do sprite. E aqui vão duas novidades pra vocês:

Citação:

---

NOTA para os interessados
Primeiro: Não é preciso usar 246 tonalidades de cor para se fazer um bom sprite, por isso não recomendo fireworks e/ou photoshop para quem já tem experiência em pixel art. Mesmo com Izuael e outros fazendo uso deles, o Sprite não possui uma aparencia limpa e quando não é bem feito, pode confundir-se com o resto do ambiente ( no caso de se utilizar o sprite em um jogo ).

Segundo: Quanto menos cores vc utiliza mais "smooth" ou "limpo" fica o sprite. Quando se fala em pixel art, geralmente não se aceita mais de 32 tons ou 32 cores diferentes em um sprite pois a técnica começou para consoles de baixa resolução como o primeiro Nintendo, Atari e os demais consoles arcaicos da indústria de videogames.

---

Bom, continuando com nosso amigo Guarda chuva, percebemos que separei vários gradientes de cinza, levemente azulado. Muitas pessoas tem dúvidas em que tom usar para sombra então eu fiz uns testes. E VOU DAR DE BANDEJA PRA VOCÊS

A Cor vc escolhe mas os Tons de Luminosidade que definem sombra e luz são:

Citação:

---

Verde Claro - Luminosidade = 220
Verde Médio - Luminosidade = 200
Amarelo Esverdiado - Luminosidade = 170
Amarelo - Luminosidade = 150
Amarelo Alaranjado - Luminosidade = 110
Laranja - Luminosidade = 80
Vermelho Escudo - Luminosidade = 50

---

A cor vcs escolhem mas se eu fosse traçar um sombreamento básico seria com esse padrão ( demorei pra fazer um haha ). Percebam que sendo um padrão, é dever e obrigação fugir dele algumas vezes! Ele está sendo postado aqui porque é um tutorial pra quem tem dificuldade em sombreamento no que diz respeito a escolha de tons. Mas cada um deve personalizar seu sombreamento.

Aqui um exemplo de Ombreira de Armor composta de tons nesse padrão. Observem como o sprite fica limpo:

http://img522.imageshack.us/img522/1...ouldersgr1.png
[Cred: Tim e Galiant ]

COR

Agora, pensando um pouco na cor, o que temos que considerar?

Certo, já somos spriters experientes e já temos em mente que o jogo de luz não é como no jardim de infância onde dizemos que o Ouro, assim como o Sol, é Amarelo. O ouro é um material que possui reflexos intensos de luz amarelo claro e sombras também intensas de marrom escuro, são geralmente cores bem saturadas e que chamam atenção.
No exemplo:
Emerald Myth
http://wop.tibianetwork.net/gfx/prop...f5c516cb49.png

Mas existe também o ouro envelhecido, aqueles não polidos e com cores menos saturadas com brilho mais fraco. Se vc quer que seu sprite seja de ouro envelhecido, não faz sentido usar cores ofuscantes com alta luminosidade e contraste.

Madeira

Uma coisa importante sobre madeira, muitos não sabem disso mas pensando não só na estética ( Beleza ) do sprite mas sim no sentido que ele precisa ter, eu considero errado o uso de determinados tons para classificar a madeira de determinadas armas ou estruturas de casas ou mobílias.

Em geral, madeiras de cor clara são utilizadas para confecção de lális, réguas, martelos de obra, etc. Não é uma coisa que se pense sempre por isso estou aqui pra abrir a mente de vocês: Madeiras claras, em geral são utilizadas apenas para confeccionar ( criar ) produtos que suportem uma carga baixa ( pouco peso ) porque são pouco resistentes.

Madeiras mais escuras já são utilizadas pra construção de casas, pousadas, pilastras, e móveis principalmente...porque são madeiras mais compactas e rígidas.

Citação:

---

Fulano: Ah mais na minha casa todos os móveis de madeira são de madeira clara!

---

Acontece que móveis da sala de estar, portas de armário, mesinhas, de certa forma suportam pouco peso, uma mesa de jantar costuma ser de madeira escura. Sem contar o verniz, que muitas vezes influencia na cor da madeira além de dar brilho ( que não é uma propriedade comum de madeira )


Pedras

Pedras são formadas pela união de vários sais cristalizados. Com isso temos 3 tipos de Pedra: Rochas(Stones) Sedimentares, Magmáticas e um tipo especial que é a gema( Gem ).

Obviamente eu não sou geólogo e não estou dando conceitos 100% certos mas achei mais didático dividirmos assim.

Pedras Magmáticas: Pedras escuras, vindas do magma que esfriou.
Tonalidades: Baixa luminosidade, Baixa Saturação geralmente de cor negra com um leve sombreamento em cinza.

Pedras Sedimentares: Pedras de diversas cores mas em geral de cor clara.
Tonalidades: Variam do cinza-azulado ao branco-amarelado, possuem níveis de saturação medianos e geralmente não possuem muito brilho, logo para fazer os pontos iluminados geralmente usasse um cinza claro mas sem muito contraste com o resto da pedra.

Gemas
Essas sim possuem diversas cores, são bem brilhantes e simbolizam realeza e poder, muitas vezes.
Tonalidades: Contrastes fortes com uma porção(menor) muito clara e uma porção de tonalidades medianas(de tamanho médio) separadas de uma porção bem escura para dar o contraste. Costumam ser usadas para enfeitar cabos de armamentos ou coroas, e algumas armaduras.

Citação:

---

Exemplos serão postados...

---

Sombreamento

Neste quarto tópico do nosso primeiro artigo, vamos tratar do sombreamento dos sprites. A técnica do sombreamento é na verdade mais simples em muitos casos do que realmente imaginamos. Lógicamente todo sprite tem um sombreamento diferente de acordo com a proposta dele ( Laminas diferentes de espadas, sombra de uma ombreira multipla em armaduras, acessórios em escudos, etc ). Neste tópico vamos tentar generalizar o sombreamento e entender algumas coisinhas importantes, para isso utilizaremos essa armadura que fiz!

Heavy Armor
http://img99.imageshack.us/img99/3163/armorpc5.png

Em Resumo:

Citação:

---

Todo sombreamento se dá por Contraste, e toda parte do sprite é individualizada por Linhas de Separação. Isso só é possivel graças a utilização correta de tons com diferentes graus de luminosidade.

---

...Galiant

Racapitulando: Na pintura é possível utilizar 7 tons diferentes da mesma cor de acordo com a luminosidade para gerar gradientes de luminosidade ( sombreamento ). Vamos aprender agora como utilizar estes tons:

1 - Linhas de Separação - Luminosidade 50 / Luminosidade 80
Um dos piores erros dos spriters experientes é que eles dominam bem o AA. Isso é ótimo e um bom sinal para a maioria, mas é preciso ter atenção para não deixar o sprite com um aspecto borrado. As Linhas de Separação existem para identificar todas as partes que compõe o sprite e geralmente usamos tons de baixa luminosidade para criá-la como tons de Luminosidade 50 e/ou 80.

http://img382.imageshack.us/img382/739/lsco8.png
Exemplos de linhas de separação formadas pelos tons de menor luminosidade do sprite.


2 - Sombreamento em Cavidades - Luminosidade 50
A representação de cavidades só é possível quando se utiliza um forte contraste em relação ao sprite como um todo. Percebam que o sprite como um todo possui mais brilho (graus de luminosidade maiores) do que o tom usado para colorir as cavidades(o que é óbvio já que ali não se recebe luz). Percebam também que a linha de separação da ombreira possui mais luz que a cavidade:

http://img171.imageshack.us/img171/5184/lsnp4.png
Tons de menor luminosidade usados para caracterizar Cavidades(pontos que menos recebem luz em um sprite). Como fundo de ombreiras e interior de armaduras, onde entra a cabeça.

Por isso sempre utilizamos tons de Luminosidade 50, a menor luminosidade que podemos usar já que em Luminosidade 0 temos a cor Preta que utilizamos no contorno.


Sombreamento Global (Global shading) - Maiores Luminosidades à esquerda. Menores Luminosidades à direita.

Observem que estamos usando os mesmos tons de luminosidade sempre, só que no lado mais sombreado utilizamos tons de baixas luminosidades mais vezes e ocupando uma área maior. Também não utilizamos no lado esquerdo tons de luminosidade acima de 173. No lado direito, utilizamos tons mais claros em maior área e geralmente usamos tons com luminosidade 200 ou 220 e jamais usamos tons de luminosidade abaixo de 110 nas áreas mais iluminadas. Estes tons de baixa luminosidade servem para fazer Efeito de sombra e também Antialiasing com os tons de Luminosidade 50 que utilizamos nas cavidades

http://img521.imageshack.us/img521/714/armaduraxm7.png
Sombreamento Global


Efeito de Sombra

Efeito se sombra é o efeito no qual certas partes do sprite refletem a luz que chegaria ao resto do sprite, fazendo com que tais partes que não recebam luz tenham tons de luminosidade menores do que a maior parte do sprite, caracterizando a sombra.( oh! )

Imaginando uma câmara escura, e considerando o sistema de iluminação do Tibia é isso que eu imagino:

http://img223.imageshack.us/img223/5...madura2ti2.png

Temos:
1 - Luz intensa vinda do Noroeste chegando a porção da esquerda do sprite logo essa porção iluminada precisa receber tons de luminosidade altos ( 150, 173, 200 e 220 )
2 - Como a armadura é cilindrica, o lado direito recebe menos luz. Contudo, não fica no breu total, porque a luz vinda do noroeste reflete em outras superfícies e esse reflexo faz com que parte da luz volte para a armadura, só que com uma intensidade de luminosidade menor ( logo, utilizamos tons de luminosidade menor no sprite - Luminosidade 80, 110; 150 e 173 nos locais mais iluminados )

Lugares que precisam ter sombra:

http://img137.imageshack.us/img137/8094/lifi3.png

1- Embaixo de ombreiras - Tanto nas cavidades quando no peitoral já que a ombreira reflete grande parte da luz. No lado esquerdo não é preciso fazer mais de duas camadas de sombra. Já no direito o mínimo a fazer são duas camadas.
2- Entrada para pesçoco - Recomendo usar todos os tons de luminosidade nessa cavidade fazendo o efeito que eu chamdo de Dithering que não é nada mais nada menos do que misturar os tons em duas camadas pra dar um auxílio ao AA.

Exemplo de Dithering:
http://img502.imageshack.us/img502/2...theringeh2.png

3- Lado direito em Sombreamento Global - Utilização de Tons de baixa luminosidad eno lado direito.

4- Partes mais extremas de armaduras: - Geralmente armaduras tem um aspecto cilíndrico, então as porções laterais precisas ser mais escuras do que as porções do meio( peitoral, abdomen e pescoço ). Sendo que a extreminado do lado direito é mais escura do que a extreminado do lado esquerdo.

http://img526.imageshack.us/img526/3039/armaduranf0.png
Sentido da luz no sombreamento cilíndrico acromático.

Citação:

---

Mais detalhes sobre isso e outras coisas em Armaduras no Artigo: Tópicos especiais

---

Citação:

---

POR FAVOR! NÃO COMENTEM ATÉ QUE TODOS OS TÓPICOS DO TUTORIAL TENHAM SIDO FEITOS

---

Percebi que a galera tem se interessado pela perspectiva então fiz esse tutorial rapidinho de Paredes.

• Artigo 4: Perspectiva
  
  - Paredes

Bom, galera, fazer paredes realmente não tem muito segredo:

http://img296.imageshack.us/img296/6070/paredespm8.png

- Coluna suporte:

Apenas pegue um quadrado 8x8 desenhe uma diagonal no meio dele, copie e cole ligando as extreminades nas proporções da parede :D

Tijolos

Bom, para fazer tijolos temos uma técnica bem simples:
http://www.brasup.com.br/brasup/imag...6a223e6067.png
Geralmente não se usa cores muito saturadas, eu usei nos modelos só pra indicar de onde vez a luz =]
Ahh sim...a diagonal surge do meio do tijolo...meu exemplo não ficou dos melhores mas quebra um galho rs

• Humanóides

Certo galera, finalmente vamos ter uma perspectiva que é do interesse de todos, suponho eu hahaha e uma das coisas que tenho me especializado nesses ultimos meses. Bom...

Pra perspectiva humanóide não há nada mais do que seguir uma coisinha básica que aprendemos na escola que antigamente não servia pra muita coisa mas AGORA ela nos começa a ser útil...estou falando da famosa GEOMETRIA.

Sim, a começar pela perspectiva em si.

• Perspectiva

. Caso perguntem, a perspectiva do Tibia é um estilo de Pixel art no padrão "Top down isométrico em 45 graus", vcs ja devem saber disso e é sempre bom passar aos que não sabem caso pensem em procurar mais sobre o assunto ( pixel art ) que eu recomendo ^^.

Bom o macete é bem simples:

Primeiro: A cabeça deve ser OVAL em 45 graus, e não Redonda como a maioria pensa.

Segundo: Traçando uma linha diagonal atrás do olho esquerdo DO PERSONAGEM ( o que está a sua direita )...temos que observar que essa linha termina no ultimo dedo do pé esquerdo do personagem ( o pé mais a sua direita ) Isso garante uma perspectiva diagonal perfeita.

Citação:

---

OBS: Podem haver leves variações.

---

Terceiro: Todos os componentes esqueléticos e musculares devem estar paralelos. Isso inclui ombros, braços e mãos, que são os mais frequentes erros.

Citação:

---

• Observações de importância:
  - Não se observa o ombro direito do personagem ( o mais a sua esquerda )
  - A luz bate mais na cabeça e nos ombros do que nas pernas e no abdômem
  - No geral o peitoral é consideravelmente iluminado mas não tanto quando a cabeça e os ombros.
  - Não sei porque estou falando isso se postarei um tutorial de pintura logo abaixo. Mas enfim...pe bom saber disso galera! :D

---

http://img153.imageshack.us/img153/6...umanidenm1.png
Recomendo aos moderadores e usuários Premmium a salvarem esse tutorial já que o imageshack pode tirar ele do ar com o passar do tempo

ae galiant... nao li todos os de armaduras etc mas eu dei uma boa olhada no de outfit pra ver se tinha algo pra melhorar nos meus outfits etc...

mto bom mesmo... mas acho que voce poderia ateh deixar melhor mostrando um pouco a luz e sombra no topo da cabeça etc de modo que os usuarios possam visualizar o que voce esta falando... igual ao tutorial do izuael? Komaster? nao lembro... la no WOT... aquele esta muito completo.

mas muito bom... thx

Está de parabéns, um ótimo tutorial ;)

Citação:

---

Postado originalmente por Galiant

Citação:

---

POR FAVOR! NÃO COMENTEM ATÉ QUE TODOS OS TÓPICOS DO TUTORIAL TENHAM SIDO FEITOS[/color]

---

---

Bah, há tempos não recebe uma atualização, mas ainda não está completo...

Dark Matter? :O

Se bem que cabe tudo no post já 'reservado' ali, então... ah... :X

s=D|--<

muinto bom xD

Apêndice I: Smooth Techniques(Técnicas de suavização)

Certo, resolvi criar um tutorial porque essa é uma técnica bastante difícil até para os melhores artistas que conheço...de fato acho que apenas eu e mais 4 artistas comtemporâneos conseguimos dominar bem essa técnica e espero que depois desse tutorial esse número e multiplique, já que é uma técnica muito importante para a apresentação de um sprite.

Vamos lá então...

Como é de costume de todos, sempre ficamos impressionados com sprites maravilhosos dos novos e esforçados artistas que vem surgindo ( graças a Deus ) e principalmente dos nossos veteranos mais antigos que estão sempre buscando se atualizar...

Pois eu digo que muitos deles podem melhorar...mesmo os mais belos.

Vejamos como:

A técnica de smooth pode ser separada em 3 técnicas menores já que o efeito de Smooth só é alcançado quando há uma união perfeita (ou quase perfeita) destas 3 ténicas. São elas:

• Outline(formato, contorno do sprite)

• Antialiasing

• Contraste

Citação:

---

Outline

---

O outline, ou simplesmente "contorno" é uma peça fundamental para o sprite...seja ele preto ou não...mas o mais importante é assumir um formato que defina perfeitamente os detalhes que queremos para nosso sprite.

Vejamos um exemplo simples:

http://img201.imageshack.us/img201/2829/axescq5.png

Obviamente o exemplo 2 tem um outline bem melhor do que o exemplo 1, certo?! Vejam como está mais bem arredondado em comparação com o a superfície reta da lamina do primeiro!

Citação:

---

E acreditem! Ainda se ve muitos sprites do exemplo 1

---

Mas claro...o exemplo um não está errado, na verdade é por isso que muitas pessoas fazem assim! haha vejam só:

http://img201.imageshack.us/img201/2724/axe2ae9.png

Uma combinação de AA com o outline já é capaz de fazer o efeito de curvatura, MESMO QUE O OUTLINE NÃO SEJA CURVO

Citação:

---

Antialiasing

---

Uma coisa que poucas pessoas sabem é que o antialiasing não é uma técnica de suavização útil somente pra pixels da mesma cor (em diferentes luminosidades) mas também para pixels de cores diferentes.

Todos devem se lembrar da escola, quando se misturava cores primárias( azul, amarelo e vermelho ) e se conseguiam cores secundárias( verde, roxo, laranja, marrom etc )

Assim também funciona em nossos pixels, um pixel que ligue um pixel amarelo com um azul, deve ser verde...assim a borda ira assumir uma suave consistência. Feito isso, se vale das técnicas de contraste para dar uma amarencia mais enrigessida à superfície que vc estava previamente suavizando.

Em resumo: SUAVIZAR AS DIFERENÇAS COM AA e tornar a superfície ENRIGESSIDA(DURA) COM CONTRASTE.

Aqui vão alguns exemplos:

Armor 1

http://img408.imageshack.us/img408/2582/armorsr3.png

Aqui temos um exemplo de uma armadura muito bem desenhada e com boas cores...a princípio ninguém jamais diria que existe algo errado com ela, mas de fato, há vários erros nos detalhes como veremos a frente...

http://img408.imageshack.us/img408/9056/armorre3.png

Na ombreira à nossa direita temos uma curvatura bastante pixelizada(apesar de n parecer)

Na esquerda temos uma curvatura pixelizada da parte prateada da ombreira...

O centro tem AA em azul, quando deveria ser em uma cor que mesclasse com as bordas: amarelo ou marrom claro.

As bordas laterais do cinturão não seguem até o fim da armadura...
E a parte central ( adorno ) não está simétrico...

A seguir veremos as mudanças:

Essa é mais ou menos a versão que traduz como eu editei essa armadura:

http://img517.imageshack.us/img517/6...rrectedsl4.png

Comparem:

http://img408.imageshack.us/img408/2538/smoothitpe4.gif

INCRIVEL, eu diria coisa de outro mundo... Parabéns muito bom mesmo!

Revividada
Tem um aviso ali em cima que é para não reviver um topico
(quando não tinha, eu revivi um de 1 ano atras xD)
isso pode gerar um alerta
e com reincidencias Banimento (eu acho)
@topico
já q eu postei isso
eu quero dizer q eu adorei o tuto, mas odeio fazer os efeitos
por isso que na maioria das vezes meus sprites ficam mal detalhados
(to fazendo uma armor vou >tentar< caprichar)

Apêndice 2

• Como criar Animações de Magia DO NADA

• Fase 1: Teste de animação

A primeira coisa a se fazer é testar a sequencia de frames:

http://i39.tinypic.com/o8v2iv.png

- Coloque um fundo escuro e o outfit que vc quer usar como base ( Fiz um só pra esse teste mesmo haha porque n faço fakes e n tenho os sprites de outfits do Tibia pra ilustrar melhor =/ )

- SALVE O FRAME INICIAL e depois vá fazendo os próximos frames usando a cor BRANCA até que no final vc tenha a animação de magia...

http://i41.tinypic.com/24givzp.gif

• Fase 2: PINTURA

Por fim, pinte os pixels brancos da cor que você escolher...com sombreamento e td mais...e está pronta sua magia

Citação:

---

( vou ficar devendo a imagem, fiz só pra abrir um caminho pros jovens que pediram na sessão de "Peça seu Tutorial" ;) )

---

Até a próxima continuação do tutorial! ( Não postem pq NÃO ACABOU e o Dark Matter vai deletar estes posts TODOS com uma felicidade ENORME ¬¬ ) haha

Num intendi as magia como eu faço os efeitos?

PARA DE REVIVER TUTORIAL SE NUM FOR DUVIDA NEM LINKS QUEBRADOS CARALH*
TO CANSADO DISSO VOCÊS AI NAO PRESTAO ATENCAO EM TOPICOS FIXOS?
http://forums.tibiabr.com/showthread.php?t=309337

Citação:

---

Postado originalmente por "PunK"

PARA DE REVIVER TUTORIAL SE NUM FOR DUVIDA NEM LINKS QUEBRADOS CARALH*
TO CANSADO DISSO VOCÊS AI NAO PRESTAO ATENCAO EM TOPICOS FIXOS?
http://forums.tibiabr.com/showthread.php?t=309337

---

ele não reviveu nada

Citação:

---

Postado originalmente por "PunK"

PARA DE REVIVER TUTORIAL SE NUM FOR DUVIDA NEM LINKS QUEBRADOS CARALH*
TO CANSADO DISSO VOCÊS AI NAO PRESTAO ATENCAO EM TOPICOS FIXOS?
http://forums.tibiabr.com/showthread.php?t=309337

---

ele reviveu por uma duvida o.O

Citação:

---

Postado originalmente por Swan

Ele só reviveu um único tutorial e foi para sacar uma dúvida, além de que isso foi o primeiro erro desse newcomer que só está em busca de aperfeiçoamento de suas habilidades. Não reportei ele, mas reportei você sim, por fazer um post muito ofensivo a ele.

PS: e foi uma dúvida, você nem tem noção doq escreveu.

---

Na verdade, a dúvida dele foi editada, pois ontem eu vim aqui visitar o tópico, e ele tinha escrito mais ou menos isto:

"Naum to nem aí se vou ser ban, mas Galiant vc eh FODAAA!"

Só que pelo menos com o edit, ele reconheceu e concertou o erro ;D

~Arknose

nao consigo ver as imagens das primeiras partes, estou estudando spritins quero virar profissional da area.