Tutorial De Sprites

[Xedre]

Antes de mais nada eu quero dizer que fiz um double post porque atingi o limite do forum
The text that you have entered is too long (31566 characters). Please shorten it to 30000 characters long.


Olá, notei que não existe um tutorial completo que ensine a fazer sprites então resolvi fazer esse para ensinar o pessoal que ainda não sabe, e com isso levar mais movimento para a seção de sprites, eu vou mostrar como se faz uma sprite no paint e como se melhora ela no firework, e como se faz no ps, então vamos la!
1° passo

abra no paint esta imagem que você vai copiar para o seu computador
pq rosa? pq é facil de tirar, você vai aprender a fazer isso no fim do tuto
pq 32x32? pq são as dimensões do metro quadrado tibiano, e é isso um sprite, um iten que caiba em um metro quadrado tibiano
pronto, agora você já pode começar a desenhar, o que é o segundo passo


2º passo

coloque a imagem no paint, e coloque a lupa no 8, para você poder ver melhor o que está fazendo, ficará assim:

então vamos a parte em que você pega o lapis e risca! uhul! /o/
antes de fazer isso você aperta ctrl+g e o paint exibirá uma grade, isso ajuda na simetria, e eu considero otimo, feito isso comece a desenhar o contorno do que vai fazer, todos os sprites tem contorno, por mais fino que seja
feito isso você vai começar a colorir o seu sprite, eu sugiro que comece de baixo pra cima, no caso começando pelo cabo e subindo, mas fica ao seu criterio

3º passo

agora você começa a colorir, isso você pode fazer livrimente, como quizer, mas cuidado, lembre-se que a luz vem do noroeste, isto é do canto esquerdo superior da tela, então você vai começar a colorir sua sprite da direita pra esquerda, obviamente indo do escuro para o mais claro, não é obrigatorio, mas uma dica é fazer cada linha de uma cor, a primeira linha que é paralela ao contorno é sempre mais escura que a linha que se situa a sua esquerda, e assim sucessivamente até chegar ao outro lado


após ter colorido e tirado a grade (ctrl+g) eu não gostei das cores :mad: então resolvi mudar

agora ta melhor mas não pode ser ! Nossa Senhora dos spriters! será possivel? é a irmã mais nova da sov !!

4º passo

pronto, se você só vai fazer sprite no paint acaba aqui, você só tem que aprender a tirar o fundo gayzinho, ops o fundo rosa, então vamos lá, fazer o sprite no fundo rosa é bom porque quando se baixa todos os sprites do tibia eles vem todos em um fundo rosa, e é assim que tira ó
você clica com o botão direito no rosa que está na paleta de cores e coloca a segunda opção na ferramenta de recortar, isso faz com que a cor rosa fique branca, a cor rosa é usada nos sprites porque não é usada no tibia, porque fazer isso faria com que todo o rosa presente na tela sumisse também, então não podemos usar uma cor que pode estar na fake, não é mesmo?
acabado! você tem sua sprite e pode coloca onde quizer, juizo....

5º passo

agora é a parte em que você melhora o sombreamento, para isso vai precisar do firework, o qual eu não vou manda link pra baixar, porque tem direitos autorais, mas não é dificil de se conseguir por aí...
bem, vamos lá, você abre a sprite no firework e aperta R, isso aciona a ferramenta que você vai usar pra sombrear, a lupa da tons claros, e o quadradinho com cabo, da tons escuros, para mudar de ferramenta vá apertando R até chegar na que você quer, então comece a passar as ferramentas na sprite, lembrando que a luz vem do canto esquerdo superior da tela <- /\

vá fazendo isso até ficar com um tom legal, não tem como definir melhor que isso
a minha fico assim ó:


pronto, uma sprite usando apenas paint e fw fica +/- assim




Segunda parte do tuto, para quem ainda não sabe como uplodar as imagens das sprites, embora ache que todo mundo aqui já sabe isso, creio que o melhor é ensinar, então vamos lá!

1º passo

após ter feito a sua sprite abra o site http://www.imageshack.us/ e clique em arquivo, então selecione no seu computador a imagem que quer uplodar (hospedar), depois de selecionar a imagem clique em host it

espere alguns segundos(acho que não demora muito mais que um minuto) e o site vai abrir uma nova pagina com varios links, o que você quer é o ultimo, este marcado na ss, veja:

agora que você já tem o link você aprenderá como fazer com que o forum carregue a imagem, isso é, você vai aprender a postar imagens no lugar de links de imagens

2º passo

você escreve [IMG] , [/IMG]
o link fica entre os cochetes ]<-link->[
acabo essa parte ae /o/


COMO FAZER UM SPRITE ANIMADO NO FW

Olá amigos spriters ! agora vou ensinar como se faz um sprite animado, embora o sprite que usei no tuto tenha ficado um LIXO, HORRIVEL, TOSCO, ASQUEROSO eu vou usar ele msm, então vamos aos passos

1º passo

abra a sprite no fw e tire o fundo, para fazer isso use a magic wand tool, você clica com ela na parte rosa (deixe a tolerancia a 25%) e vá em : select>select similar e pronto toda a parte rosa estará marcada, então aperte delete e o fundo magicamente sumirá ! :eek:

2º passo

vá no quadrinho que a seta está apontando, se não tiver isso no seu fw você aperta shit+f2 que ele aparece, selecione as opções mostradas nas imagens


vai aparecer essa janela


3º passo

agora você já tem varios frames, no caso eu fiz 3 veja ali do lado direito, abaixo da barra de frame and history, agora imagine que cada frame é um quadrinho que vai passar no seu sprite, então você colore fazendo o efeito que você quer, aqui no meu caso é um efeito meio estranho, sem definições parece mais purpurina... ¬¬



pronto após você colocar o efeito que quizer você vai pro 4° passo

4° passo

agora você vai animar a sprite \o\, vá em file, e selecione export preview, ou se for um fw mais novo a opção será apenas export

aí abrirá essa janela e você escolherá animated gif, como mostrado, e siga as instruções que estão nas imagens

depois de ecolher essa opção vá para aba animation, lá você vai animar a gif de verdade, as setas mostram tudo, as frames você clica nelas e depois escolhe mais em cima o tempo, o tempo que ficará em cada quadrinho (frame) esse tempo é contado em centesimos de segundos,coloque o tempo desejado, para vizualizar clique no play, para salvar clique no export, e tem um quadrinho no canto direito inferior que seleciona se a gif passa pra sempre (forever) ou uma vez (since)

aí quando você clicar no export abrirá um quadrinho para salvar a imagem

selecione em que pasta do seu computador quer salvar, confirme e pronto! sua sprite estará prontinha e animada, sprites animadas tbm podem ser feitas no ps, mas depois falarei disso
sprite pronta:
<nossa ficou horrivel >

agora que já ensinei a fazer um sprite e sombrear ele vou ensinar como você deve imaginar a luz que clareia o sprite e como se fazem sprites no ps. Muito simples você sobreia da seguinte maneira, pega e clareia a sprite do noroeste até o sudeste, mas não é exatamente isso, isso seria um efeito de luz muito simples, o efeito de luz que se usa é um efeito que considera o sprite com um certo volume, isso quer dizer, você não simplesmente clareia tudo de qualquer jeito, até metade esquerda da lâmina você coloca clara, a metade direita você coloca escura, eu estou usando espadas nos meu tuto pq são o tipo de sprite que considero mais fáceis de se fazer, mas funciona para tudo, aqui to usando um outro sprite que fiz agora mesmo
olha só, na lamina a luz fica "caindo de um lado e do outro" a luz que define como é o formato da espada, quando for sombrear imagine a luz como uma água escorrendo na espada, a luz modela a espada, então ela não pode ser apenas uma parte mais clara que a outra, uniformemente, é muito importante lembrar que a luz da metade esquerda é mais forte, porém você joga uma luz na parte direita tbm, porque a lamina "divide a luz no meio", veja na ss
a seta amarela e mal feita mostra aonde a luz se divide

Não é uniforme, não é uma especie de degradê,
Cometi um erro, na parte esquerda do cabo a "zona clara" ta escrita em vermelho, mas era pra tar em verde, é a parte clara de fato.
Não é muito aconselhável, já que os sprites são para ser usados em fakes, mas é um efeito de luz então eu vou falar dele, é uma espécie de poder que as pessoas gostam de fazer, esse "poder" chama glow e da pra fazer usando blending options no ps (forma mais fácil, as outras formas não ficam boas então não vo fala delas) olha só
você clica com botão direito na camada da sword, vai em blending options e escolhe as configurações da ss
vai ficar mais ou menos assim
caso você queira só na lamina, você faz uma outra camada, só com a lamina, mas já vou te dizendo, esse tipo de efeito não fica legal, e fica horrível de recortar, então EU prefiro sem ele, como quase todo sprite meu, eu coloquei uma pedra, como forma de detalhe para não ficar uma parte sem nada -Xedre! chega de espada plzz!!!- ok ,ok então chega de espadas vamos aprender a fazer outros tipos de sprites, começando por esse shied aí pra começar você não precisa perder seu tempo fazendo pixel por pixel no ps, faça o sprite no paint dps salve e abra com ps mesmo que fique feio, depois melhora

Agora faça os efeitos de luz, imagine que a luz é como um jato de água que passa por cima do sprite, e que da o formato a ele, a imagem mostra onde está claro onde está escuro e onde se divide a luz (as setas amarelas mostram a divisão da luz)

Para clarear use a dodge tool, para escurecer use a burn tool,

Fica mais ou menos assim (para abrir essa janela clique com o botão direito na ferramenta que estou usando na ss abaixo)

E no tamanho normal assim
um pouco mais escurecido fica assim

Bem eu acho que já ensinei como se faz os sprites, mas agora vamos ter uma noção melhor de generos especificos e animações

ARMADURA
não tenho muito a dizer, a imagem mostra como a luz atinge a armadura, ou seja você observa pra depois conseguir fazer uma armadura com bom efeito de luz, e observe bem o formato das ombreiras, elas são muito importantes e muito utilizadas, lembre-se que a maioria das armaduras fazem os contornos dos peitos, mas não é regra

em tamanho normal

MACHADO
novamente não há o que ser dito, mas vale lembrar que a parte de baixo da lâmina fica com menas luz, e que a parte oposta a lâmina também fica iluminada

em tamanho normal

ANIMAÇÕES
então vamos lá, como fazer sprites animados no ps, muito simples, é muito importante saber o seguinte, que no quadro de layers do ps, a layer que vai ser riscada é a marcada de azul, e as layers que estão sendo vistas ficam com a marcação de um olhinho, ou seja quando você for riscar um layer coloque a marcação azul nela e desative os olhinhos das outras para você ver o que está fazendo
eu não tinha muitas ideias de efeito, então resolvi fazer o axe pingando sangue
nessa parte eu apenas colori de vermelho a lâmina do machado, e tinha apenas uma layer que eu copiei mais quatro veses (aperte ctrl+j para duplicar as layers)

agora que já copiei a layer 4 veses eu fui riscando de vermelho como queria cada uma delas

agora vamos ao image ready, para fazer a animação, para isso basta clicar na opção que a ss está mostrando

no image ready, você vai de fato animar a sprite, caso a janela de animação não esteja aberta faça como na ss

agora você vai fazer os quadrinhos, você clica no icone que a imagem ta mostrando, aí vão aparecer outros quadrinhos, e do lado você vai selecionando qual layer você quer que apareça naquele quadrinho, ou seja vai colocando o olhinho naquela layer, mas lembre-se de desmarcar os outros, a ss mostra onde clicar pra fazer mais quadrinhos

e essa mostra onde você coloca o olhinho pra aparecer aquela layer no quadrinho, é a janelinha do lado, caso ela não esteja lá vá em windown lá em cima e procure por ela, eu não sei o nome dela, e no momento não tenho paciencia de descobrir

então vá fazendo mais quadrinhos e colocando as layers que você quer

feitos os quadrinhos a sprite ta quase pronta, agora falta você selecionar o tempo de cada quadrinho, a imagem mostra como se faz isso, você clica naquela parte onde está escrito 0 sec, e então abrirá aquela janelinha que a ss tbm ta mostrando, na janelinha você seleciona quanto tempo quer, caso não seja nenhum daqueles você clica na opção other

se você clicar nessa opção aparcerá uma nova janela pra você digitar quantos centezimos de segundo quer que fique em cada quadrinho, no caso eu usei 0,7 centezimos de segundo

após selecionar o tempo de cada quadrinho esta pronta a sua sprite! agora falta você salvar, é claro, faça como na ss, depois selecione a pasta que você quer que a sprite seja salva, e clique em salvar, e pronto ! acabou totalmente!

em tamanho normal
Pronto amigos, acabei meu tutorial, espero que isso ajude a todo mundo que ainda não sabia como fazer uma sprite
abraços


ATUALIZANDO DPS DE UM SÉCULO !!!! HJ É DIA 24/11/07 E EU A PARTIR DE HJ CONTINUO MEU TUTORIAL, PQ A PARTIR DE HJ TENHO TEMPO PARA ISSO

Saudações a todos que esperaram! eu farei o que prometi e continuarei o meu tutorial com as partes do set que faltam. Antes eu quero fazer algumas coisas:
Responder a criatura que postou esse comentário na terceira pagina:
Meu filho vc só viu esse tutorial com essas imagens em outro idioma em outro forum se alguem me roubou ele e traduziu pra outro lidioma, quem sabe esse alguem não atualiza o que eu escrever aqui agora tbm
Parabenizar o tbr pelo suporte que o forum oferece:
A maioria dos foruns não permite que você digite mais de 3000 carácters em um post e não permite que você poste mais de 10 imagens, aqui não é assim, vim atualizar meu tutorial e vejo que posso continuar escrevendo e postando imagens livremente, só uma reclamação: o forum corta os paragrafos e pra quem gosta de escrever "bíblias" como eu, os paragrafos são bons para organizar o texto
Dar as boas-vindas aos novatos:
Todos os novos spriters que sejam muito bem-vindos, mesmo que os antigos spriters continuem ativos é preciso que surjam novos spriters, novatos trazem novas ideias, novos estilos, novas duvidas e é por isso que eu faço tutoriais, porque as pessoas mesmo que possuam novas idéias, estilos, ect não nascem sabendo como fazer sprites. Quero dar boas-vindas também ao Dark Matter que pelo que me lembro não era moderador dessa seção, era o Gold, e o Gold sempre foi muito ativo e comunicativo, sempre participou dos nossos concursos, sempre organizou concursos, sempre nos atendeu, respondeu e sempre cuidou bem das coisas por aqui, acredito que você fará o mesmo e quero dizer que fico honrado em ve-lô usando uma img minha na sign, essa idéia das signs do Admin foi ótima deu super certo e parabéns tbm pra todo mundo que ajudou
Parabenizar os antigos spriters e fakers:
meus velhos amigos, parabéns ! voltei e vi que cuidaram bem do forum, digo isso porque vi que muitos ainda tem coragem de dizer:
"Cara seu sprite ta ruim desmancha e faz de novo."
E que tiveram a paciencia de explicar como se faz, citar os erros, fazer tutos...
É isso que mantém o bom nível do tbr.
Me apresentar:
Para quem não me conhece eu sou Xedre, sou spriter mas não entro mais no forum de sprites por problemas pessoais que tenho com alguns usuários, eu estive fora durante muito tempo e ainda estarei até dia 20 por causa de estudos, vestibular... a partir de hj estarei aqui melhorando meu tutorial, estarei na seção de pedidos e estarei na seção de duvidas.
Sem mais conversa! vamos ao tutorial

O Set

Olá pessoal recomeçando o tutorial eu vou mostrar o set que vou usar nele:


Este é o set organizado, ficou um pouco escuro, problema simples de resolver... bem, sobre o fundo uma pergunta que me fazem com frequência é como deixar o fundo transparente, para a imagem ficar com o fundo do forum. É só salvar em PNG que o forum vai ler o transparente. Já está respondida, como eu conheço os folgados que tem nesse forum... aqui está o quadradinho transparente -><-

Anéis

Bom pessoal, não é muito o que posso dizer sobre os anéis, temos que lembrar que o diâmetro tem que ser pequeno, tem que ser proporcional, eu acho razoável cerca de 5 pixels, temos que lembrar (mesmo sendo obvio) que para se prender ao dedo o anel tem que ter um suporte redondo, alguns spriters se esquecem disso quando vão fazer anéis, e temos que lembrar que embora sejam pequenos têm que seguir a regra de iluminação que falei no início do tutorial: a luz vem do canto superior esquerdo ->
aqui está meu anel ampliado em 8x com a disposição que fiz da luz:

por último, uma dica, não tente fazer anéis que são só a pedra e o suporte de preto, ficam feios



Amuletos

Eu gostaria que meu amigo Polito escrevesse essa parte do tutorial, especialidade dele, talvez depois ele escreva outro tutorial e eu até coloque o link aqui, já que sou que eu estou escrevendo vamos lá:
1- não tente fazer o cordão muito fino
2- um colar pode ter uma pedra ou não, vc pode usar outra coisa, como por exemplo um ankh, uma cavera, qualquer coisa, ou até mesmo só um cordão como o Demonbone Amulet
3- faça o que fizer mas respeite a luz e seja proporcional, não faça um amuleto que ocupe todo o quadrinho, também não faça um amuleto do tamanho de um anel
4 - o cordão tem mais do que qualquer coisa que seguir a regra de luz, tente clarear os pixels mais externos de todo o cordão para que dê a impressão que o o cordão é redondo, e clareie mais ainda os pixels do canto esquerdo superior
Meu colar em 8x com o esquema de luz:

talvez fique confusa a parte direita, está marcada como escura e clara, eu quero mostrar que alí tem que ser mais escuro que o outro lado, mas ainda tem que ser claro ou então o amuleto não fica bom.
Uma curiosidade que talvez seja útil é que o Tibia tem um cordão padrão, ele é usado nos seguintes amuletos:
Amulet of Life, Amulet of Loss, Dragon Necklace, Elven Amulet, Garlic Necklace, Protection Amulet e Stone Skin Amulet. Mais uma vez para facilitar a vida dos preguiçosos... ->



Elmos

Os elmos são considerados por muitos o tipo de sprite mais dificil, eu acho que o mais dificil são as criaturas, mas isso não vem ao caso, vamos ao que interessa:
1- elmo não é pinico! os elmos bonitos tem que ser compridos, não ocupam simplesmente a parte de cima da cabeça, mesmo que sejam bem abertos os elmos bonitos se estendem no mínimo até a altura da boca
2- deixe espaço para os olhos
3- não seja exagerado como os designers da cip foram no Iron Helmet e no Strange Helmet, ambos são muito feios
4- coloque alguma coisa em cima do elmo porque nele não da pra pôr, motivo: falta de espaço, graças a deus as pessoas não tem a cabeça do mesmo tamanho da cabeça das Meninas Super Poderosas (60% do corpo)
5- faça no mínimo 2 divisões de luz, uma na parte acima dos olhos e outra na parte abaixo dos olhos
6- os elmos por serem pequenos de mais para se colocar adereços, e grandes de mais para serem simples como os amuletos e aneis, é nescessário muito trabalho em cada pixel, logo, é preciso ter detalhes, como por exemplo furinhos na parte de baixo do elmo
7- não faça o buraco por onde sae o pescoço, a perspectiva do tibia vê os itens por cima
Meu elmo ampliado 8x com o esquema de luz:





Armaduras

...não tenho muito a dizer, a imagem mostra como a luz atinge a armadura, ou seja você observa pra depois conseguir fazer uma armadura com bom efeito de luz, e observe bem o formato das ombreiras, elas são muito importantes e muito utilizadas, lembre-se que a maioria das armaduras fazem os contornos dos peitos, mas não é regra...

Como já disse as armaduras são praticamente isso, vou tentar melhorar um pouco o que disse lá em cima:
1- lembre-se de afinar a cintura
2- coloque um detalhe na cintura, um cinto -OOOOOOOOHHHHHHHHH jura que é um cinto Xedre?- juro :o
3- é pra fazer só o contorno dos peitos não é pra colocar mamas na armadura
4- armaduras normalmente ocupam o quadrinho inteiro verticalmente, as armaduras tem que ser compridas para cobrir o corpo inteiro, e tem que ser finas, elas não ocupam todo o quadrinho horizontalmente
5- faça uma emenda entre as peças da armadura
6- faça peças para a armadura no lugar de uma peça única
7- se não tiver muitos contornos coloque um símbolo no meio, e faça a sombra do simbolo
8- faça o desenho do buraco por onde sai o pescoço
9- não faça o buraco por onde saem as pernas, a perspectiva do tibia vê os itens por cima
10- armaduras são os itens com mais espaço, coloque adereços, como por exemplo capa (por favor não coloquem o b robe nas armaduras!!) ou espinhos como fiz na primeira armadura, tem 1 espinho de cada lado do pescoço, você pode colocá-los tbm nas ombreiras ou onde quizer
11- faça no mínimo 4 divisões de luz: uma para a ombreira(se tiver), outra para o peito, e 1 ou 2 para definir a parte mais fina da cintura, caso tenha uma capa use a luz para fazer a profundidade da capa, a luz é mto util tbm para desenhar o buraco do pescoço, caso a armadura tenha espinhos use a luz para mostrar a parte mais "afiada" deles
Só para não perder o costume ta aí minha armadura em 8x com meu clássico esqueminha:

Isso é porque não tinha muito o que dizer sobre as armaduras né...



Calças

É... eu vou ter que escrever sobre as calças... com certeza não são o tipo de sprite mais facil que existe acho que dessa vez realmente não tem muito o que dizer, mas mesmo assim vou tentar falar alguma coisa:
1- todas as calças do Tibia são compridas, não tente fazer diferente, ou tente e se conseguir me avise e me ensine
2- a cintura tem que ser fina e proporcional a armadura do set
3- o cinto fica na armadura, não na calça
4- tente manter o estilo do resto do set, mesmo que seja com um detalhe muito simples porque as calças são muito difíceis de serem trabalhadas, não tem espaço para muitos detalhes nem para a criação de estilos
5- não existe calça no Tibia que mostra o buraco por onde entram as pernas, as calças são um iten que é visto de frente, você pode até tentar fazer o buraco, mas já aviso que normalmente não fica bom
6- não faça as pernas muito juntas
7- divida a luz nas 2 joelheiras se tiver
8- divida a luz nas 2 coxas
9- nem sempre joelheiras são uma boa idéia, mas as vezes são úteis para colocar detalhes de cor e manter o estilo do resto do set
10- não coloque bolsos nas calças !!!!!!
11- como são duas pernas a luz que vem do canto esquerdo tem que aparecer nas duas, e dividir nas duas, a perna direita tem que ter muita luz na parte esquerda e pouca luz na parte direita quase da mesma maneira que a esquerda, talvez um pouco menos
12- a virilha é funda então tem que ter menos luz
13- as pernas são roliças, tente mostrar isso, coloque sempre muita luz do lado esquerdo e menos luz do lado direito
A minha calça ampliada em 8x com esquema de luz:

Mais uma vez me enganei sobre o quanto tinha a dizer... Essa calça ficou bem ruinzinha, acho que é uma imagem que n ajuda muito meu tutorial mas fazer o que :triste:



Botas

Temam o poder das botas !!!!! MUAHAHAHAHAHAH !!!!!! :riso:
Sim! as botas tem um poder mágico! elas tem o poder de te deixar com medo, desanimado, sem vontade de tentar, 99% dos spriters não conseguem fazer botas, principalmente porque... TÊM MEDO, só por isso, não é tão dificil, você não precisa de detalhes, não precisa escolher cores, não precisa de quase nada, precisa apenas finalizar o set
1- se o set é metalico, tente fazer uma bota Metallica(:rock ou no mínimo com algumas partes metalicas, se o set é de couro, tente fazer uma bota exclusivamente de couro
2- siga as cores do set
3- faça o buraco por onde entram as pernas
4- lembre-se das diferenças entre chinelos e botas
5- é um iten pequeno por isso faço questão de lembrar da proporcionalidade
6- as botas têm uma semelhança com as calças no que diz respeito a parte em que a luz tem que aparecer e dividir nas duas pernas, no caso, nas duas botas
Minhas botas 8x ampliadas com esquema de luzes:


Continua...