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

Esqueci-me da senha

Últimos assuntos
» Retorno da GMBR!!!
por theguitarmester Ter 19 Mar 2024, 22:38

» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Mudar cor de apenas uma palavra
por lunalol Sex 01 Mar 2024, 13:42

» 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

» Versionamento de código com GitHub
por GabrielXavier Seg 08 Jan 2024, 07:32

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por kolesovsup Sex 29 Dez 2023, 07:16

» a funçao approach ainda existe?
por PEDRINDEV Ter 26 Dez 2023, 20:05

» Inimigo ataca até por trás! >:(
por saim Sex 22 Dez 2023, 08:55

» [RESOLVIDO]Spawn após morte
por Deception_1999 Dom 17 Dez 2023, 16:39

» Remunerado $$$ - Procuro programador para ajudar a "montar" um jogo
por theguitarmester Sáb 02 Dez 2023, 16:28

» Game maker nao abre
por Cerf Dom 26 Nov 2023, 12:01


Tutorial Detalhado - Dando Volume ao PixelArt

+3
Mr.Rafael
The Wizard
Kabeção
7 participantes

Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Kabeção Qua 03 Abr 2013, 00:23

Agora que a Adobe liberou a Suite CS2 não é mais desculpa dizer que é difícil conseguir um editor profissional de graça.
Nesse tutorial eu uso o Photoshop CS5 mas não é nada que não se possa fazer no CS2 ou qualquer que seja o seu editor de imagens.

Vou explicar técnicas para desenhar e dar volume as formas no pixelart e algumas dicas voltadas para o PS.
Não vou me prender a coisas como "o que é pixelart" ou o que é "anti-aliasing" ou "como usar o Photoshop", para isso procure tutoriais básicos sobre o assunto.

Dicas rápidas sobre Pixelart+Photoshop

Recursos avançado de layers, diversas ferramentas de ajuste de cor, filtros, enfim, um ambiente ótimo para qualquer artista digital mas muita gente de engana ao pensar que sua complexidade deixa o Photoshop fora de opção como um editor de pixelart.

O maior mito que afasta pixelartistas do PS é qualquer traço ou forma nele tem anti-aliasing automático.
Isso não é realmente um problema porque o PS lhe da total controle sobre o que está fazendo, ou seja, é possível desativar o anti-alias em diversas situações.

Desenhando shapes sem anti-alias

Para desativar o anti-alias na hora de desenhar siga os passos:

Ao selecionar qualquer tipo de forma primitiva ou o custom shape marque o mostrado na imagem.

Tutorial Detalhado - Dando Volume ao PixelArt 00

Ao fazer isso aparecerá outras opções ao lado e então desmarque o "Anti-alias"

Tutorial Detalhado - Dando Volume ao PixelArt 01

Agora você pode desenhar shapes sólidos sem suavização das bordas.

Tutorial Detalhado - Dando Volume ao PixelArt 02

Redimensionando imagem sem anti-alias

É possível escolher o tipo de qualidade do redimensionando.
Com a ferramenta "Image Size" (Alt + Ctrl + I), por exemplo, tem uma opção para especificar isso.

Tutorial Detalhado - Dando Volume ao PixelArt 03

Normalmente estaria marcado "Bicubic" que é o algoritmo que faz a suavização, mas ao marcar "Nearest Neighbor" o PS vai esticar a imagem preservando a aparência sólida dos pixeis.

Configurando pincel e borracha

Clique e segure o mouse em cima da "Brush Tool" e selecione a "Pencil Tool" para desenhar de forma sólida.

Tutorial Detalhado - Dando Volume ao PixelArt 04

Para desativar todos os efeitos, aperte F5 para abrir as configurações do brush e desmarque todas as opções.

Tutorial Detalhado - Dando Volume ao PixelArt 05

Na caso da borracha, ao seleciona-la, vá até o menu da ferramenta e no campo "Mode" marque "Pencil" ou "Block".

Tutorial Detalhado - Dando Volume ao PixelArt 06

Desativando o anti-alias da ferramenta de transformação

Vá em Edit > Preferences > General e no campo "Image Interpolation" coloque "Nearest Neighbor".
Com isso é possível rotacionar ou esticar irregularmente a imagem sem suavizações.

Essas são as principais dicas para fazer pixelart no Photoshop.
Agora vamos ao verdadeiro tutorial.

Desenho e animação de uma nave em PixelArt

Primeiro de tudo, faço um rascunho!
É importante ter uma base enquanto desenha pixel por pixel ou vai acabar de perdendo no próprio trabalho.
Um rascunho de uma nave do tipo "jato" é simples de se fazer, comece marcando com retas o tipo de forma:

Tutorial Detalhado - Dando Volume ao PixelArt 07

Depois vá adicionando formas

Tutorial Detalhado - Dando Volume ao PixelArt 08

Até chegar a um resultado que lhe agrade

Tutorial Detalhado - Dando Volume ao PixelArt 09

Por ultimo redimensione para o tamanho que quiser.
Eu escolhi fazer uma sprite de mais ou menos 128 de altura.

Tutorial Detalhado - Dando Volume ao PixelArt 10

Com o rascunho pronto, crie uma nova camada para o lineart.
Aproveite para fazer pequenas modificações na forma se preferir e não esqueça de fazer linhas consistentes e limpas.
Leia este tutorial antes de prosseguir: http://www.mundorpgmaker.com/forum/index.php?topic=23517.0

Tutorial Detalhado - Dando Volume ao PixelArt 11

Como ela é simétrica, copie a lado desenhado e espelhe.
Pegue a ferramenta de seleção retangular (M) e selecione a área da sprite para espelhar, aperte Ctrl+T, clique com o botão direito na seleção e vá em "Flip Horizontal" depois reposicione a copia.

Tutorial Detalhado - Dando Volume ao PixelArt 12

Depois de terminar selecione as camadas do lineart e junte-as com Ctrl+E.
Pressione Ctrl+U e diminua a luminosidade até os traços ficarem na cor preta.
E agora temos lineart terminado

Tutorial Detalhado - Dando Volume ao PixelArt 13
Tutorial Detalhado - Dando Volume ao PixelArt 14

Volume com cores

Agora é hora de escolher as cores bases.
Escolha tons médios pois a partir deles vamos fazer luzes e sombras.

Tutorial Detalhado - Dando Volume ao PixelArt 15

Um erro comum nessa parte é escolher cores muita saturadas como vermelho ou azul puro.
Dificilmente um material está 100% iluminado ou com pigmentação em 100% em uma determinada cor além de que as vezes tem cores refletidas misturadas com sua base.

Tutorial Detalhado - Dando Volume ao PixelArt 16

Luz e sombra

Quanto mais iluminado mais claro, e quanto menos iluminado mais escuro, isso é óbvio mas a questão é: quanto brilho/sombra devo colocar para dar volume a imagem.

Você consegue enxergar um objeto porque ele está iluminado e consegue perceber seu volume graças a direção das reflexão.

Tutorial Detalhado - Dando Volume ao PixelArt 17

A luz encontra a superfície do objeto e é refletida em um ângulo tangencial, ou seja, igual ao que entro mais invertido de acordo com a tangente formada entre a superfície é a luz.
Você com certeza já percebeu que mexer a cabeça um pouco já o suficiente para mudar o lugar de um brilho intenso de um material cromado ou envernizado.
Isso acontece porque ao mudar a posição do espectador, seus olhos captam com mais intensidade a luz refletida diretamente para eles em outro local, assim, o ponto brilhante muda mesmo que a luz e o objeto não se mexam.

Tutorial Detalhado - Dando Volume ao PixelArt 18

E por fim quanto mais longe a reflexão menos brilho vera.

Tutorial Detalhado - Dando Volume ao PixelArt 19

O fonte de luz não é a única a iluminar o objeto assim como a luz não reflete apenas uma vez.
A luz pode bater no chão refletir e iluminar a parte de baixo a esfera e o mesmo acontece com qualquer objeto ou superfície. Sua pele por exemplo, refleti a luz muito bem.
Coloque a mão debaixo do assento de uma cadeira com a lâmpada por cima iluminando sua mão. A parte de baixo da cadeira mesmo sem receber luz diretamente da lâmpada, receberá um pouco de luz graças a reflexão da sua pele.

Outro ponto a destacar é que objetos com superfície lisa refletem um brilho mais intenso e superfície áspera são mais foscas.

Tutorial Detalhado - Dando Volume ao PixelArt 20

Tecidos de algodão, superfícies lixadas e etc graças a sua irregularidade refletem luz em diversas direções diminuindo drasticamente a intensidade que seja aos olhos mas consequentemente iluminam uma área bem maior.
A ilustração a direita é o que normalmente vemos em metal cromado e carros, o efeito do verniz.
Se cobre uma superfície com uma camada mais lisa para aumentar a intensidade de reflexão em pontos próximos.

O algoritmo ray-tracing segue todo esse conceito para fazer simular reflexão em 3D.

Voltando ao pixelart...
Nossa nave é de metal liso mas um pouco fosco (tipo pintura metálica), reflete bem a luz mas não tem pontos intensos de brilho, com o sol iluminando por cima.
Quanto mais longe o ângulo de flexão mais luz se vé então naquela parte que se parece com uma garra temos um resultado mais ou menos assim:

Tutorial Detalhado - Dando Volume ao PixelArt 21

A dobra nos lados da parte superior e a ponta é mais reta inclinando para baixo.
As partes voltadas em 90º para cima tem grande brilho e uniforme pois o sol está muito longe do planeta e diferente de lâmpadas, os raios de luz caem praticamente no mesmo ângulo.

Tutorial Detalhado - Dando Volume ao PixelArt Sol_terra

Além disso quando mais inclinado menos luz se vê. A parte inferior é arredonda nos lados e por isso a sombra vai afinando aos poucos.

Note que tirei as linhas pretas.
Nunca use linhas em preto puro para marcas formas, elas o deixam mais definido mas ou menos tempo menos realista.
O meio termo é viável caso queria destacar melhor seu personagem do fundo, ou seja, use linhas da cor das sombras, em menos quantidade e apenas nas extremidades.

Quanto as cores, veja a paleta usada:

Tutorial Detalhado - Dando Volume ao PixelArt 22

A cor base está no meio e nas extremidades luz e sombra.
Seja lá qual for seu editor, use as ferramentas de seleção de cor para analisar essa paleta.
Não visualize cores pelas informações do RGB. RGB leva em conta intensidade de 3 cores diferentes mas no desenho saber a intensidade de saturação e luminosidade em cima de uma cor é muito mais importante, esse sistema é chamado de HSL ou HSB (hue, saturation, luminosity/brightness).

Aqui tem um tutorial praticamente obrigatório e explica muito bem o conceito da escolha das cores. Leia antes de prosseguir.

Em resumo quanto mais iluminada mais perto do amarelo está a matriz (hue) e quanto menos iluminada mais perto no roxo.
Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.

Depois disso a resto não tem mistério. Siga os mesmos conceitos e faça as outras partes.

Tutorial Detalhado - Dando Volume ao PixelArt 23

Note que quando uma parte esta por baixo de outra eu adiciona uma pequena sombra, nem que seja apenas 1 pixel para mostra que a luz é menos forte ali.
Além disso quanto mais brusca mais drástica é mudança de sombra e para dar um efeito de arredondado eu uso tons médios entre as duas cores. Obviamente, quando mais fino o tom médio mais fino a borda.

Tutorial Detalhado - Dando Volume ao PixelArt 24

Ao final cheguei nesse resultado:

Tutorial Detalhado - Dando Volume ao PixelArt 25

Vamos dizer que está pronto... a partir dai eu poderia continuar por minutos, horas ou dias aperfeiçoando mas é bom parar em um certo ponto ou nunca vai terminar. Laughing

Animação

Animação é parte mais chata com sprites orgânicas mas é a mais divertida com objetos mecânicos!
Para fazer o turbo 4 frames são o suficiente.
Para obter aquela animação frenética são 4 fases: explosão, descanso, ignição, acumulo.

Tutorial Detalhado - Dando Volume ao PixelArt Ani1 Tutorial Detalhado - Dando Volume ao PixelArt Ani2 Tutorial Detalhado - Dando Volume ao PixelArt Ani3 Tutorial Detalhado - Dando Volume ao PixelArt Ani4

Não tem muito o que dizer quanto a isso, eu apenas peguei uma cor bastante luminosa para as bordas onde o fogo seria menos intenso e deixei o cento branco além de move um pouco as "asas" das naves menores.

Tutorial Detalhado - Dando Volume ao PixelArt Nave

Arquivo PSD: https://dl.dropbox.com/u/60691076/tutoriais/pixelart/nave.psd

É só uma questão de treino e quando mais praticar melhor serão suas sprites.
Eu por exemplo, a algumas semanas atrás nunca teria feito algo assim...
Por essa falta de conteúdo em português decide passar nesse tutorial o que aprendi recentemente.
Isso termina o tutorial.
Espero que tenha aproveitado e que agora sua arte tenho fica um pouco melhor! nuu


Última edição por Kabeção em Qua 03 Abr 2013, 14:30, editado 3 vez(es)
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por The Wizard Qua 03 Abr 2013, 07:39

Nossa realmente esse é um tutorial ótimo, me ajudou muito, acho que deveria existir mais tutoriais assim, gostei muito das suas dicas, e... o resultado ficou maravilhoso, até =)
The Wizard
The Wizard

Games Ranking : Nota B

Notas recebidas : B
Data de inscrição : 24/03/2010
Reputação : 17
Número de Mensagens : 1129
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Mr.Rafael Qua 03 Abr 2013, 08:21

Muito bom o tutorial, Kabeção! Very Happy

Percebo que a forma que eu desenho muda muito de pessoa para pessoa (vendo os links e o resultado da sua nave). Mas algumas técnicas são importantes para manter a organização (como as paletas) e a explicação das sequencias de linhas foi um ponto bem interessante. São padrões fundamentais para se trabalhar e isso foi muito bem explicado.

Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.
O uso do preto varia muito. Quando se quer destacar fragmentos, é bem interessante. Também é legal para fazer bordas, no caso deste desenho aqui e para separar blocos de mesma cor.
Por outro lado, rachaduras e aparências ásperas são melhores sem ele.

o/
Mr.Rafael
Mr.Rafael

Games Ranking : Nota A

Notas recebidas : A-C-B-A-A
Data de inscrição : 05/10/2010
Reputação : 94
Número de Mensagens : 502
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 2 Moedas x 0

Ouro x 1 Prata x 1 Bronze x 3

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Tiago Lima Qua 03 Abr 2013, 10:26

Realmente o tutorial está muito bom, todo muito bem explicado e principalmente ilustrado, as partes sobre escolha de cores e luz e sombra são as que mais me chamaram a atenção por se aplicarem a gráficos em geral e não só pixel art.

Vlw!


Última edição por tblima123 em Sáb 01 Jun 2013, 20:40, editado 1 vez(es)
Tiago Lima
Tiago Lima

Games Ranking : Nota C

Notas recebidas : C
Data de inscrição : 14/07/2008
Reputação : 17
Número de Mensagens : 199
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 1 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

https://www.youtube.com/user/CanalNexteLevel

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Kabeção Qua 03 Abr 2013, 11:25

Muito obrigado galera.
Se houve muita gente interessada mais alguns tutoriais podem vir.

Mr.Rafael escreveu:
Obs.: raramente se usa preto em pixelarts mais detalhados e quando a artista realmente precisa de uma cores escura ele usa tons puxados para o roxo.
O uso do preto varia muito. Quando se quer destacar fragmentos, é bem interessante. Também é legal para fazer bordas, no caso deste desenho aqui e para separar blocos de mesma cor.
Por outro lado, rachaduras e aparências ásperas são melhores sem ele.

o/
Na verdade não tem nem um preto ali.
Como eu disse, o artista usou cores perto do roxo como o marrom escuro para a pele e o azul escuro para o cabelo.
No resultado final ele variou bastantes os tons escuros e claros nas linhas para fazer o anti-alias.

O problema do preto (assim como o branco) é que ele se separa totalmente das outras cores, ou seja, ele não se mistura e acaba destacando demais. Quando seu background se destaca bastante você vai querer enfatizar os contornos do personagem mas mesmo se uso tons próximos.
Além disso tem luz por todos os lados, o céu já é suficiente para refletir no chão e paredes para iluminar uma casa inteira, então em um jogo de plataforma a céu aberta dificilmente terá algo com 0% de luz.
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Mr. Kaleb Sáb 01 Jun 2013, 16:23

Na verdade, o uso do preto não se prende apenas às cores sólidas e preenchimento de espaço. Um tom de preto com um alpha baixo ajuda bastante na hora do sombreamento, ou quando queremos destacar algum lugar num degradê. Mas, de toda forma, eu entendi o que vocês queriam dizer.
Bom, Kabeção, um tutorial bem elaborado, principalmente para spriters amadores (like me), principalmente na parte estrutural, porque é em organização que a gente mais peca na hora de trabalhar no pixel art. Tenho certeza que vai ajudar muita gente, assim como me ajudou.

Desculpa pela ressurreição :@, nem observei a data, mas gostaria de dar minha opinião.
Mr. Kaleb
Mr. Kaleb

Games Ranking : Nota C

Notas recebidas : C
Data de inscrição : 07/09/2010
Reputação : 21
Número de Mensagens : 1400
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por PedroX Sáb 01 Jun 2013, 18:27

Finalmente pude ver o tutorial. Está muito explicativo, tanto é que consegui entender bem. Com certeza quero ver mais tutoriais do tipo. É raro encontrar um tutorial assim.

_________________


Leia o Manual do Iniciante e a Lista de Tutoriais, para aprender bastante sobre o GM.
Recomendo o Manual completo das colisões, bem útil.
O exemplo Criar um chat (banir, kickar, etc) é interessante.

Para seu jogo ficar rápido e legal, aprenda a Aumentar o desempenho do seu jogo.

Aprenda a calcular a velocidade de suas animações


Entre para o Clube do Inglês:
PedroX
PedroX

Games Ranking : Nota B

Notas recebidas : C+B
Data de inscrição : 26/07/2008
Reputação : 311
Número de Mensagens : 6086
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 17 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

https://web.whatsapp.com/send?phone=5519995935953&text=Pedro

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por ruben.23 Ter 25 Jun 2013, 22:30

Bom demeis esse tutu, me ajudou bastante! Valew!
ruben.23
ruben.23

Data de inscrição : 29/05/2013
Reputação : 10
Número de Mensagens : 212
Prêmios : Tutorial Detalhado - Dando Volume ao PixelArt Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Tutorial Detalhado - Dando Volume ao PixelArt Empty Re: Tutorial Detalhado - Dando Volume ao PixelArt

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