[Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

por Anderson-XD Sex 22 Abr - 22:23:25

Progama
Photoshop CS5
Nivel
Básico
Autor
Anderson (Tiger)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Ola pessoal, hoje estou postando meu primeiro tutorial, e espero que você gostem, iniciaremos uma aula sobre como fazer uma sprite básica no photoshop, para quem não sabe preste muita atenção em cada passo que eu explicar.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Bom vamos primeiramente, começar a colocar a opção frames animation do photoshop, va no menu Windows >>> e selecione a opção animation como vocês vem na imagem acima, feito isso ira aparecer um retângulo a baixo, pronto agora vamos começar a trabalhar com ele!!
Agora, vamos fazer o seguinte, vai à opção file >>> news >>> ira aparecer uma opção e nomeia de sprite, e depois na parte Width e Height, coloca 25x25 pixel e aperta ok, pronto já criamos a nossa resolução da sprite desta aula!!

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Agora que criamos, vamos à parte da layer, como vocês podem ver tem um cadeado na primeira layer, clique nela duas vezes e ira aparecer umas opções, de preferência vamos apenas nomear, então chame de fundo. Se vocês perceberam apareceu do lado uma layer na animation(frames), essa é o seu primeiro frame que vamos trabalhar.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Crie agora varias layer e nomeando de cabeça, peitoral, braços, mãos, perna e depois desenha todas as peças de acordo com suas layer, como vocês vêem na figura acima!!

Observação!!

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Se sua layer, por exemplo, da cabeça tiver atrás da layer peitoral, clique na layer cabeça e arraste ela para cima da layer peitoral, para ela ficar na frente. Fique atento nessa parte!!
Agora que você desenhou e separou layer da frente e de trás, vamos passar para o proximo passo

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Vamos colocar efeitos nas cores de cada parte do corpo da nossa sprite, bom agora eu vou ensina-los um método bem interessante mas que seu uso exageradamente pode deixar ruim a sprite, então vamos La!!
Clique duas vezes em uma das layers do corpo do personagem, por exemplo layer da cabeça, vai aparecer uma lista de opções, agora vou explicar alguns efeitos que usaremos nessa aula!!

Bevel and Emboss: Esse efeito é muito usado principalmente em menus de jogo, botões, objetos sólidos, é um efeito bem interessante e se souber usa-lo poderá fazer efeito por exemplo de um botão sendo pressionado ou não,
Contour: E a nivel de iluminosidade que você for definir numa cor, de 0% a cor fica escurecida dependendo da forma que você mexer no Bevel and Emboss, de 100% é a cor normal.
Texture: Esse efeito é muito útil, para montagem de cenários arenosos como desertos, montanhas, cavernas, locais de pedras e etc..

Observações

Na opção Bevel and Emboss, quando o efeito tiver muita iluminosidade use a parte Shading >>> Opacity para diminuir um pouco da luminosidade

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Bom agora chegou a parte mais difícil, então preste muita atenção para não se confundir!!
Acabamos de colocar os efeitos na nossa sprite, agora vamos fazê-lo se mexer enquanto estiver parado.

Preste atanção agora!!

Selecione a layer braço e depois, clique na opção que esta na parte Animation (Frames), como na imagem de cima para criar a layerFrame, agora movimenta só um pouquinho com a seta direcional para cima, e logo em seguida cria outra layerFrame, e faça a mesma coisa que anteriormente, mas cuidado não vai deixar a sprite levantando somente para cima, faz essa seqüência

Frames: 1 – 2 – 3 – 2
1 = braço normal
2 = braço levantando +1,
3 = braço levantando no maximo +1
2 = braço descendo -1 e voltando para o estagio 1

Faça essa sequencia em outras layers do corpo da sprite, mas sempre vai mudando a sequencia de +1 e -1, pois senão os corpos se movimentaram de forma igual veja os exemplos abaixos

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Agora no final, não esqueça de apagar o layer que chamamos de Fundo, para que a sprite não fique com o fundo branco ao passar para o game maker ou outros progamas, tem duas opções para salvar a sprite, va na opção FILE >> Save for web & Devices... <<< abrira uma opção em que você terá que configurar os seguintes itens
2° opção gif(animação inteira) ou png( caso queira salvar frame por frame)
Matte: None
Transparency
Animation >> Looping Options >> Forever
Ditther: 100%
Colors: 256

Atenção!!

Sprites de tamanhos grandes pode dar lag no seu PS, dependendo de certa quantidade de layerframes e layers.

Agora é praticar !!

Bom estarei disponibilizando o mais breve possível, um tópico de exposição de sprites para quem quiser expor sua sprite feito com base no que aprendemos nesse tutorial, cada tutorial vai ter uma teoria e pratica,

Exercício

Faça uma sprite do jeito como você quiser mas desde que siga o tutorial de cima, e me mande MP, para eu colocar na exposição do tópico.

Alguém: -Mas o que eu ganho com isso?
Tiger: -Você ganha experiência xD!!

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Bom chegamos no final do tutorial da 1° parte, postarei em breve a 2° parte, que vou falar como montar uma sprite andando e também o tutorial criando sprite nivel avançado!! Comentem, tire dúvida, se gostou mande um +1 point, critica ou sugestões, fiquem a vontade!!
Se for divulgar em outros fóruns o tutorial, coloque os devidos créditos para: Anderson(Tiger)

por Vinicius_GM Sáb 23 Abr - 14:01:21

O.o Complexo e cheio de detalhes O.o
Você deve ter demorado para fazer esse tutorial, e postou ele só para nos satisfazer...
Obrigado mesmo.... :')
^^

por AdeilsonOliveira Qua 25 Jul - 10:41:27

as imagens tao buladas :S

por Anderson-XD Seg 27 Ago - 15:17:43

Nossa já faz tanto tempo que fiz esse tutorial, vou tentar refazer. essas imagens foram excluida.

por Conteúdo patrocinado

[Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

[Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

Re: [Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

Re: [Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

Re: [Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1

Re: [Tiger-Tutorial] Aprendendo a fazer sprite no PS - Parte 1