Conectar-se

Esqueci minha senha

Últimos assuntos
» colisão de queda após outra colisão dando problema
Ontem à(s) 20:18 por Willy

» [Duvida] O que aprender
Seg 26 Jun 2017, 15:32 por Markituh

» BUILD FAILED: Cannot find BUILD.xml
Seg 26 Jun 2017, 14:50 por ReisBlender

» Nota de esclarecimento - GMBR voltou!
Sex 23 Jun 2017, 20:33 por Willy

» Regras do Fórum
Sex 23 Jun 2017, 19:02 por GMBR

» Retorno da GMBR!!!
Ter 24 Jan 2017, 15:43 por GMBR

» Jogo Dengue HTML
Seg 30 Nov 2015, 16:17 por guga

» Criando IA Simples para inimigos
Qua 25 Nov 2015, 19:22 por DJDAVYD

» Ordenar variavel em ordem decrescente
Sex 28 Ago 2015, 21:09 por Kodained

» Crio Trilha Sonora para Games!
Qui 27 Ago 2015, 13:50 por Isaias Malafaia

» Problema com Colisão
Qui 27 Ago 2015, 12:30 por The_Game

» Quem quer Uma Engine, e de Quê?
Qui 27 Ago 2015, 09:22 por theguitarmester

» [RESOLV]Como adicionar 2 objetos na mesma posição?
Qua 26 Ago 2015, 11:38 por Bhryenno Kelvyn Carlson

» Sistema de porta!!!
Ter 25 Ago 2015, 21:29 por theguitarmester

» Venda de objetos em Inventário - Multiplicado
Seg 24 Ago 2015, 18:33 por AG Hydra

» Atirar na direção certa
Seg 24 Ago 2015, 09:03 por theguitarmester

» Western Duels
Seg 24 Ago 2015, 07:47 por theguitarmester

» Problemas na compilação android
Dom 23 Ago 2015, 23:43 por Zero.

» Dúvida sobre strings, lendo txt
Sab 22 Ago 2015, 20:31 por Pai véi

» Como estabilizar um som
Sab 22 Ago 2015, 19:03 por Isquilo_Roedor

» Janela Modal
Sab 22 Ago 2015, 09:23 por Pai véi

» Sobre instance Creation Code
Sab 22 Ago 2015, 08:39 por Pai véi

» LudumDare #33
Sex 21 Ago 2015, 21:17 por WellingtonBecker

» Como fazer um temporizador
Sex 21 Ago 2015, 19:02 por Isquilo_Roedor

» GMS sempre salva projeto ao compilar?
Sex 21 Ago 2015, 12:32 por Pai véi

Quem está conectado
19 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 19 Visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 324 em Ter 05 Out 2010, 13:36

Tutorial Detalhado - Dando Volume ao PixelArt

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Kabeção em 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.



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



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



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.



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.



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



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



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:



Depois vá adicionando formas



Até chegar a um resultado que lhe agrade



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



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



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.



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




Volume com cores

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



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.



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.



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.



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



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.



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:



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.



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:



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.



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.



Ao final cheguei nesse resultado:



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.



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.



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)
avatar
Kabeção

Ranking : Sem avaliações
Data de inscrição : 08/06/2008
Número de Mensagens : 2314
Insígnias de JAM :

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

Prêmios
   : 3
   : 0
   : 1

Ver perfil do usuário http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por The Wizard em 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é =)
avatar
The Wizard

Ranking : Nota B
Notas recebidas : B
Data de inscrição : 24/03/2010
Número de Mensagens : 1129
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 1

Ver perfil do usuário http://awesomewizards.deviantart.com/

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Mr.Rafael em 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/
avatar
Mr.Rafael

Ranking : Nota A
Notas recebidas : A-C-B-A
Data de inscrição : 05/10/2010
Número de Mensagens : 383
Insígnias de JAM :

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

Prêmios
   : 0
   : 1
   : 2

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Tiago Lima em 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 Sab 01 Jun 2013, 20:40, editado 1 vez(es)
avatar
Tiago Lima

Ranking : Nota C
Notas recebidas : C
Data de inscrição : 14/07/2008
Número de Mensagens : 199
Insígnias de JAM :

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

Ver perfil do usuário http://www.youtube.com/user/CanalNexteLevel

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Kabeção em 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.
avatar
Kabeção

Ranking : Sem avaliações
Data de inscrição : 08/06/2008
Número de Mensagens : 2314
Insígnias de JAM :

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

Prêmios
   : 3
   : 0
   : 1

Ver perfil do usuário http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Mr. Kaleb em Sab 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.
avatar
Mr. Kaleb

Ranking : Nota C
Notas recebidas : C
Data de inscrição : 07/09/2010
Número de Mensagens : 1400
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por PedroX em Sab 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.

PedroX

Ranking : Nota C
Notas recebidas : C+B
Data de inscrição : 26/07/2008
Número de Mensagens : 6034
Insígnias de JAM :

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

Prêmios
   :
   :
   :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

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

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

Data de inscrição : 29/05/2013
Número de Mensagens : 212
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Tutorial Detalhado - Dando Volume ao PixelArt

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum