Blood Maker
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Tutorial Básico de Trabalho com Pixels

Ir para baixo

Tutorial Básico de Trabalho com Pixels Empty Tutorial Básico de Trabalho com Pixels

Mensagem por Raito Yagami Sáb Dez 20, 2008 1:05 pm

Tutorial Básico de Trabalho com Pixels


Gostaria de apresentar a vocês um jeito simples de mexer com a Pixel Art.

Isso não é uma coisa difícil, se bem aprendida. E irei mostrar o básico.

Índice:
[1] - Programas para trabalho..
[2] - O estudo da Sombra em Cabeças Humanas.
[3] - Ainda inexistente, preciso de idéias.

Tópico sendo atualizado constantemente... A demora para postar significa trabalho árduo (montando as aulas).

Aula 1 - Programas para Trabalho.


Antes de começar a mexer com as Sprites, precisa-se ter alguns programas.

Dependendo de sua preferência, pode procurar nesse site:

Baixaki - Editores de Imagem

Irei organizar os programas por Large Art e Pixel Art:

Large Art:

Versões do Photoshop: CS2 / CS3.


Entre outros... Esses são programas bons, pois são mexidos por camadas.

Pixel Art:

O famoso Paint, ou pode usar esse outro aqui, se não tiver:
Paint-NET

Idraw3

OV Art:

Qualquer programa de fotos que tiver.

------------------------------------------------------------------------------------------

Para conseguir bons resultados nesse tutorial, principalmente na próxima aula, deve-se ter um programa Large Art, e um Pixel Art. Todo programa Large Art serve como OV Art.

------------------------------------------------------------------------------------------

Glossário:
Spoiler:

Exercício
Spoiler:


Última edição por Raito Yagami em Sáb Dez 20, 2008 1:09 pm, editado 1 vez(es)
Raito Yagami
Raito Yagami

Tutorial Básico de Trabalho com Pixels Sword2

Número de Mensagens : 29
Premios : <br>Tutorial Básico de Trabalho com Pixels Medal_gold_3: 0Tutorial Básico de Trabalho com Pixels Medal_silver_3: 0Tutorial Básico de Trabalho com Pixels Medal_bronze_3: 0
Data de inscrição : 08/12/2008

https://bloodmaker.forumbrasil.net

Ir para o topo Ir para baixo

Tutorial Básico de Trabalho com Pixels Empty Re: Tutorial Básico de Trabalho com Pixels

Mensagem por Raito Yagami Sáb Dez 20, 2008 1:06 pm

Aula 2 - O Estudo da Sombra em Cabeças Humanas.


Sim, agora vocês tem as ferramentas, e podem começar a desenhar... Mas antes, vamos rever os conceitos de Luz e Sombra.


Spoiler:

*Definições estranhas. pt.wikipedia.org


Agora, depois de terem lido as citações, sobre esses conceitos, vamos colocá-los em prática.

Primeiro temos que encontrar as posições de Luz e Sombra. Não adianta em nada, você sombrear em qualquer lugar, e falar que está sombreado. Que está, está... Mas pode estar no lugar errado...

- Parte 1: O Estudo da Sombra

Nossa modelo de hoje é minha Hana.

Tutorial Básico de Trabalho com Pixels Hanachanbetasd0

Ela será nossa modelo em mais aulas, então se acostumem... *-*

Primeiro vamos localizar as sombras. Como ela faz parte de um jogo em que podemos "virar a câmera", para pegar ângulos variados, peguei apenas os quatro que podemos usar no Maker*.
Para fotos de outros tipos, é recomendado conhecer o personagem antes de fazer algo...
Por exemplo, a Hana tem uma trança, que não pode ser desconsiderada.

*(Por estarmos fazendo Pixel para o Maker, eu peguei como exemplo esse, mas não é apenas para ele que podemos fazer).

E aqui está as fotos dos ângulos de sua cabeça. (A dela >.<)

Tutorial Básico de Trabalho com Pixels Hanachansidesrx6

Agora, coloque em um programa Large Art. Suma com o fundo (Na foto, o deixei monocromático, isso ajuda também), deixando-o com apenas uma cor (tom de cor), ou até mesmo sem cor.

Em uma camada abaixo dessa, pinte ela de uma cor única*.

*Recomendo as cores Azul, Verde ou Vermelho*

Depois, na camada da frente (onde está a foto) deixe-a com efeito "Luminosity" (ou algo parecido, dependendo do programa, foi o que usei no exemplo, servem outros também):

Tutorial Básico de Trabalho com Pixels Hanachanredcd6-> Vermelho


Tutorial Básico de Trabalho com Pixels Hanachanbluekq0-> Azul

Tutorial Básico de Trabalho com Pixels Hanachangreentc8-> Verde

Tutorial Básico de Trabalho com Pixels Hanachanmonosr1-> Ou apenas deixe a foto monocromática.

Assim, a foto parece ser mais fácil de detectar os efeitos... A Luz e a Sombra... Vendo pelas cores mais claras, e mais escuras...

Prefiro fazer as quatro ao mesmo tempo... Também ajuda. Onde uma cor erra (funciona insuficientemente), a outra corrige.
Raito Yagami
Raito Yagami

Tutorial Básico de Trabalho com Pixels Sword2

Número de Mensagens : 29
Premios : <br>Tutorial Básico de Trabalho com Pixels Medal_gold_3: 0Tutorial Básico de Trabalho com Pixels Medal_silver_3: 0Tutorial Básico de Trabalho com Pixels Medal_bronze_3: 0
Data de inscrição : 08/12/2008

https://bloodmaker.forumbrasil.net

Ir para o topo Ir para baixo

Tutorial Básico de Trabalho com Pixels Empty Re: Tutorial Básico de Trabalho com Pixels

Mensagem por Raito Yagami Sáb Dez 20, 2008 1:07 pm

Parte 2 - A montagem da cabeça.

Bem, agora que estudamos a sombra dela, vamos continuar, e fazer a cabeça.

Primeiro, procurei um resource próximo ao do cabelo dela...
Tutorial Básico de Trabalho com Pixels Headshanazx5
Neste caso, um recolor sairia melhor, mas acha que teria graça, e fazer uma aula com recolor? >.<
Resolvi descolorir a imagem, já que queria refazê-la.
Tutorial Básico de Trabalho com Pixels Headshanabasepm2
Depois disso, pintar o cabelo da cor que quero, no caso, roxo.
Tutorial Básico de Trabalho com Pixels Headshanapurplefk1
*Antes que me perguntem, sempre jogo a cor mais clara no meio.*
Agora, fazer uma borda, de uma cor próxima ao preto...
Tutorial Básico de Trabalho com Pixels Headshanabordertf1
No caso, eu sombreio da ponta para o meio, sempre clareando... Alterar o "B", do HSB, onde regula o brilho...
Tutorial Básico de Trabalho com Pixels Headshanashadow1dw9
Nesse caso, tomar pequeno cuidado com a trança... Que está no meio, e requere cuidados especiais.
Tutorial Básico de Trabalho com Pixels Headshanashadow2sd9
Quanto mais próximo do "centro", mais clareado é...
https://2img.net/r/ihimizer/img104/7123/headshanashadow3qt7.png
Agora, comecei a sombrear o rosto.
Tutorial Básico de Trabalho com Pixels Headshanashadow4gl4
É a mesma coisa, sempre das pontas para o meio...
https://2img.net/r/ihimizer/img60/6563/headshanashadow5pw0.png
Só que, em uma cabeça, o ponto mais claro é um pouco mais em baixo do que o centro de um círculo. *Vejam no Estudo (2.1)*
Tutorial Básico de Trabalho com Pixels Headshanashadow6yv1
Quase pronta, falta apenas detalhar:
Tutorial Básico de Trabalho com Pixels Headshanashadow7db1
Prontinho... Essa é uma cabeça resombreada...

---------------------------------------------------------------------


Raito Yagami
Raito Yagami

Tutorial Básico de Trabalho com Pixels Sword2

Número de Mensagens : 29
Premios : <br>Tutorial Básico de Trabalho com Pixels Medal_gold_3: 0Tutorial Básico de Trabalho com Pixels Medal_silver_3: 0Tutorial Básico de Trabalho com Pixels Medal_bronze_3: 0
Data de inscrição : 08/12/2008

https://bloodmaker.forumbrasil.net

Ir para o topo Ir para baixo

Tutorial Básico de Trabalho com Pixels Empty Re: Tutorial Básico de Trabalho com Pixels

Mensagem por Raito Yagami Sáb Dez 20, 2008 1:08 pm

Parte 3 - Cabelos Longos (Especial)

Oi, gente... Depois de um tempo absurdo, e alguns pedidos, que foi o que me fez retomar às aulas, vou montar a terceira aula sobre Sombreamento.

Todas as Sprites podem ser sombreadas deste jeito, menos um caso especial: O dos cabelos longos.

Sprites de cabelos longos tem uma iluminação diferente, já que a influência da luz interfere no brilho dos mesmos, mais do que nos curtos.

Por isso precisei criar uma aula a mais.

Certo, vamos começar.

Pulando a parte do estudo, vamos direto à criação.

Descolori outra imagem, para poder sombrear.
Tutorial Básico de Trabalho com Pixels Longhairstartkt0
Vamos começar pelas bordas.
Tutorial Básico de Trabalho com Pixels Longhairbordersij2
Agora, fazendo o sombreamento básico, das pontas para o meio, até chegar nas cores mais claras.
Tutorial Básico de Trabalho com Pixels Longhairpart1ym2
Tutorial Básico de Trabalho com Pixels Longhairpart2cy0
gora, estamos chegando na cor mais clara.

A diferença do cabelo longo vem agora. Atentem-se a char de costas.

Percebeu que nosso "meio" é gigantesco, não é mesmo?

Nesse caso, ampliei a terceira cor (A que fiz o último sombreamento) em um pixel para os lados, para deixar mais "grossa", nossa sombra.

E como os cabelos tem fios (Não diga '-'), e algumas "grandes" mechas, alguns principais são destacados na Sprite. Assim eles aparecem na mesma.

A char de lado tem "dois meios", isso pode acontecer, o tamanho do cabelo interfere nisso.

Fazendo todos os escurecimentos possíveis, ela ficou assim:
Tutorial Básico de Trabalho com Pixels Longhairpart3xw0
Agora, chegamos perto do final.

A personagem de cabelo longo tem uma diferença, pois mesmo com o tamanho do cabelo, assim tendo um campo de luz grande, há uma parte que é mais iluminada que as outras. Esta parte forma um arco, com concavidade para baixo.

O resultado da montagem foi este:
Tutorial Básico de Trabalho com Pixels Longhairpart4hf4
Agora terminamos a aula...

Para matar as saudades, um exercício:
Spoiler:


Bem... Gostaram da aula?
By Angel Ivy
Raito Yagami
Raito Yagami

Tutorial Básico de Trabalho com Pixels Sword2

Número de Mensagens : 29
Premios : <br>Tutorial Básico de Trabalho com Pixels Medal_gold_3: 0Tutorial Básico de Trabalho com Pixels Medal_silver_3: 0Tutorial Básico de Trabalho com Pixels Medal_bronze_3: 0
Data de inscrição : 08/12/2008

https://bloodmaker.forumbrasil.net

Ir para o topo Ir para baixo

Tutorial Básico de Trabalho com Pixels Empty Re: Tutorial Básico de Trabalho com Pixels

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos