Entrar
Últimos assuntos
» Preciso de ajudapor AftonDuGrau Dom 21 Abr 2024, 20:18
» Como faz o evento drawn GUI, não se repetir?
por aminaro Sex 19 Abr 2024, 20:30
» Como ajustar velocidade de cada frame da animação no game maker
por Ralphed Qui 18 Abr 2024, 18:28
» PROBLEMAS COM FÍSICAS DE ÁGUA
por aminaro Ter 16 Abr 2024, 10:07
» Retorno da GMBR!!!
por Ralphed Sex 12 Abr 2024, 22:45
» JOGADOR PARANDO NO AR QUANDO ATACA
por aminaro Qua 10 Abr 2024, 13:51
» Problemas com texto interativo
por Kaaru72 Dom 07 Abr 2024, 11:31
» Erro escondido e indecifrável
por dev_gabize.azv Qui 04 Abr 2024, 10:11
» Mudar cor de apenas uma palavra
por Ralphed Sáb 30 Mar 2024, 00:39
» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27
» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30
» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17
» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18
» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34
» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13
» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18
» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12
» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02
» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55
» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42
» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56
» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49
» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21
» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21
» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39
Tutorial - Pixel Art I - Básico
5 participantes
GMBR :: Projetos :: Assets & Recursos
Página 1 de 1
Tutorial - Pixel Art I - Básico
Olá pessoal!
Irei fazer alguns tutoriais sobre Pixel Art para melhorarmos a qualidade de nossos jogos 2D...
1-Introdução
Sei que não é só de Pixel Art que vivem os jogos, mas não é muito melhor ter um jogo feito inteira e exclusivamente por você ou por sua equipe?? Sem depender de imagens alheias e Google Images?? Então espero que estes tutos ajudem a deixar nossos jogos mais legais e criativos, mesmo porque, em contest's, boa parte da nota vem da criatividade e originalidade de imagens e sons.
2-Para começar...
2.1
Primeiramente vamos precisar de um programa desconhecido e difícil de encontrar: o Paint.
Conheçe?? Que bom! xDD
2.2
Recomendo também a criação de uma pasta apenas para esboços e imagens incompletas.
2.3
Se você nunca mecheu com o Paint, pode ler os tutoriais a seguir:
Aulas de Pixel Art - Anderson_H
3-O cubo
Vamos começar com um simples cubo...
Todos sabem o que é um cubo e talvez como desenhá-lo, mas como deixá-lo mais realista (assim como qualquer imagem digital) é o problema...
Crie antes uma imagens de 64x64 pixels..
Devemos primeiro desenhar um esboço do cubo, para isso usamos o comando de 'Linha" da barra de ferramentas:
a) com a tecla Shift precionada desenhamos um quadrado 25x25 pixels (para precisão basta olhar no canto direito inferior da tela);
b)ainda com o Shift precionado, desenhamos linhas diagonais de 7x7 pixels nos cantos superiores e inferior direito (todas as diagonais para cima e para a direita);
c)deve-se unir as diagonais desenhadas com uma linha horizontal em cima e uma vertical do lado direito, dando a forma do cubo.
Agora devemos imaginar aonde a luz está em um possível ambiente 3D a volta do nosso cubo...no exemplo, imaginei a luz à esquerda e acima (mais acima que à esquerda).
Sabendo disso, imaginaremos que a face mais clara será a de cima, certo?? No exemplo, preencho esta face com um 'cinza claro 221' (R=G=B=221 >> Vermelho = Verde = Azul), porque essa cor? Não sei! xD
Depois preencho a face frontal com 'cinza médio 193' e a lateral com 'cinza 163'...
Note também que preenchi a aresta entre o cinza claro e o cinza escuro com o cinza médio, para não dar um grande 'contraste' e consequentemente aparescer os pixels. Também, por usar o fundo azul, coloquei nos cantos onde havia união de pixels diagonais uma 'cor média' entre o azul e o cinza.
Muito bem! Agora podemos inventar mais figuras geométricas!
Como segundo exemplo, fiz um "L" cúbico.
a)Desenhe um quadrado 25x25 e as mesmas diagonais do cubo, com a diferença da diagonal da esquerda ter 14 pixels;
b)desenhe um quadrado 25x25, à direita do anterior, com sua aresta esquerda tendo como limites superior e inferior as pontas das diagonais de 7px;
c)desenhe as diagonais da direita deste segundo quadrado;
d)basta unir a diagonal de 14px à diagonal superior do segundo quadrado e esta à inferior para terminar o nosso "L".
Os preenchimentos laterais devem ser os mais escuros, sendo o da direita mais escuro que o da esquerda; o preenchimento superior deve ser o mais claro; os frontais terão uma cor 'média', também diferenciada.
No próximo exemplo, criei um meio-cubo em cima do "L", que vou deixar para que estudem....
Com o exemplo acima é possível também fazer sombras para dar ainda mais realidade à imagem...
Espero ter ajudado em algo!
Este foi apenas um primeiro tutorial, já neste deixei duas "deixas" para outros dois que estou bolando: Contraste e Cores Intermediárias, ambos intimamente ligados e muito úteis!
Qualquer dúvida ou correção (gramatical também é aceita) é só escrever aí em baixo:
Irei fazer alguns tutoriais sobre Pixel Art para melhorarmos a qualidade de nossos jogos 2D...
1-Introdução
Sei que não é só de Pixel Art que vivem os jogos, mas não é muito melhor ter um jogo feito inteira e exclusivamente por você ou por sua equipe?? Sem depender de imagens alheias e Google Images?? Então espero que estes tutos ajudem a deixar nossos jogos mais legais e criativos, mesmo porque, em contest's, boa parte da nota vem da criatividade e originalidade de imagens e sons.
2-Para começar...
2.1
Primeiramente vamos precisar de um programa desconhecido e difícil de encontrar: o Paint.
Conheçe?? Que bom! xDD
2.2
Recomendo também a criação de uma pasta apenas para esboços e imagens incompletas.
2.3
Se você nunca mecheu com o Paint, pode ler os tutoriais a seguir:
Aulas de Pixel Art - Anderson_H
3-O cubo
Vamos começar com um simples cubo...
Todos sabem o que é um cubo e talvez como desenhá-lo, mas como deixá-lo mais realista (assim como qualquer imagem digital) é o problema...
Crie antes uma imagens de 64x64 pixels..
Devemos primeiro desenhar um esboço do cubo, para isso usamos o comando de 'Linha" da barra de ferramentas:
a) com a tecla Shift precionada desenhamos um quadrado 25x25 pixels (para precisão basta olhar no canto direito inferior da tela);
b)ainda com o Shift precionado, desenhamos linhas diagonais de 7x7 pixels nos cantos superiores e inferior direito (todas as diagonais para cima e para a direita);
c)deve-se unir as diagonais desenhadas com uma linha horizontal em cima e uma vertical do lado direito, dando a forma do cubo.
Agora devemos imaginar aonde a luz está em um possível ambiente 3D a volta do nosso cubo...no exemplo, imaginei a luz à esquerda e acima (mais acima que à esquerda).
Sabendo disso, imaginaremos que a face mais clara será a de cima, certo?? No exemplo, preencho esta face com um 'cinza claro 221' (R=G=B=221 >> Vermelho = Verde = Azul), porque essa cor? Não sei! xD
Depois preencho a face frontal com 'cinza médio 193' e a lateral com 'cinza 163'...
Note também que preenchi a aresta entre o cinza claro e o cinza escuro com o cinza médio, para não dar um grande 'contraste' e consequentemente aparescer os pixels. Também, por usar o fundo azul, coloquei nos cantos onde havia união de pixels diagonais uma 'cor média' entre o azul e o cinza.
Muito bem! Agora podemos inventar mais figuras geométricas!
Como segundo exemplo, fiz um "L" cúbico.
a)Desenhe um quadrado 25x25 e as mesmas diagonais do cubo, com a diferença da diagonal da esquerda ter 14 pixels;
b)desenhe um quadrado 25x25, à direita do anterior, com sua aresta esquerda tendo como limites superior e inferior as pontas das diagonais de 7px;
c)desenhe as diagonais da direita deste segundo quadrado;
d)basta unir a diagonal de 14px à diagonal superior do segundo quadrado e esta à inferior para terminar o nosso "L".
Os preenchimentos laterais devem ser os mais escuros, sendo o da direita mais escuro que o da esquerda; o preenchimento superior deve ser o mais claro; os frontais terão uma cor 'média', também diferenciada.
No próximo exemplo, criei um meio-cubo em cima do "L", que vou deixar para que estudem....
Com o exemplo acima é possível também fazer sombras para dar ainda mais realidade à imagem...
Espero ter ajudado em algo!
Este foi apenas um primeiro tutorial, já neste deixei duas "deixas" para outros dois que estou bolando: Contraste e Cores Intermediárias, ambos intimamente ligados e muito úteis!
Qualquer dúvida ou correção (gramatical também é aceita) é só escrever aí em baixo:
Guardiani- Data de inscrição : 07/08/2008
Reputação : 1
Número de Mensagens : 31
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: Tutorial - Pixel Art I - Básico
Bom, muito bom... a galera tá precisando mesmo de uns tutoriais assim, bem explicados e que dão certo ;)
Re: Tutorial - Pixel Art I - Básico
nosssaaaa cara o resultado ficou mto bom!!!
gostei!
gostei!
Janx- Data de inscrição : 24/05/2008
Reputação : 14
Número de Mensagens : 2417
Prêmios :
x 0 x 0 x 0
x 0 x 2 x 0
x 0 x 0 x 0
Re: Tutorial - Pixel Art I - Básico
parese q todo pixel art e de habbo
kalegos- Data de inscrição : 30/07/2010
Reputação : 0
Número de Mensagens : 15
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: Tutorial - Pixel Art I - Básico
Muito bom! Parabéns!
O resultado ficou muito bom mesmo!
O meu fico bem legal pra ser o meu Primeiro!
O resultado ficou muito bom mesmo!
O meu fico bem legal pra ser o meu Primeiro!
GMBR :: Projetos :: Assets & Recursos
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|