[Aulas] - O basico do pixelart

Percebemos agora como se nota a visão correta.
(imagens abaixo se trata do monstro não terminado (BigBug) criado por Catchup)

A imagem da esquerda está com otimo volume e apresenta algo bem realista e a da direita tambem so que a da direita não está com 45º graus de visão assim como a da esquerda.

Esiste um segredo ensinado pelo "Diogo_RBG" para recriar uma imagem com outro movimento e tendo essa visão 45º graus.
(Monstro Golem de Pedra ainda não terminado.Criado por Catchup e apresentado o modelo por Diogo_RBG)

Néssa imagem apresentada agora percebemos que o golem de lado está em visão 0º grau e mostrando umpequeno geito de refazer seu monstro ou imagem desejada com 45º graus.


Angulo e Sombra
(meios de deixar terrenos com visão correta e em 2D)

Primeiramente é preciso criar uma base para noção de como vai ficar ou seja deixando o contorno de ocmo vai ser e apagando dentro pra ficar como na imagem assim.

Aplico cor.

Tons cinzas e vai mudando detalhes para mais realizmo.

Vamos alternando nas cores para deixar mais 2D.


Perceba que completei a metade mais eu posso sair modificando ela para deixar sempre mais realista.

Fazendo do outro lado.Deixando os tons parecidos com o da esquerda so que mais escuros como mostra na luz com base do capitulo 3.

Vou continuando...

Perceba que modifiquei as cores do lado que ja preenchi para mostrar que tambem erramos nos tons mais vamos so modificando até fica assim.Parece não esta muinto 2D não mais vamos continuando.

Coloquei um detalhe vermelho com amarelo no ton claro e escuro danda a impressão de ser uma jóia preza.
RESULDADO FINAL

Viu como ficou?

_______________________________________________________________________________________________________________________

Exércicios da Semena

Preste atenção nos 3 modelos abaixo.

São 3 modelos,porém muinto complexo de criar ,pois, até hoje estou com dificuldades na criação da sprite de uma delas.
_______________________________________________________________________________________________________________________


Exércicios da Semana

_______________________________________________________________________________________________________________________

Um Elmo que criei logo veram o que podemos fazer com esse elmo.

Em todo caso se eu usar a ferramenta de seleção normal não fucionaria do geito correto.Eu acabaria prejudicando a imagem idesejada no caso o rosto do personagem.

Utilizando a ferramenta especial ou seja a Ferramenta de Seleção Percionalizada. Você tera a função de sair ligando os pontos com o mouse ou arrastando emquanto segura o click esquerdo para arrasta a a linha de seleção até liga do outro lado de maneira desejada.

Ai um bom resuldado.Fazendo isso agora posso fazer a alteração desejada sem danificar o rosto do pesonagem.

Recolor

O recolor é pratico entre os players para fazer algumas modificação na cor de certa imagem como elmos ou monstros.Porem o servidor para esse tipo de coisas ja tem o arquivo XML que ja vem com a imagem seja elmo até monstro que permite modifica a cor dele por la.
Assim o recolor tem uma função caso deseje em seu proprio desenho você tem liberdade de deixalo vermelho,azul,amarelo até mesmo preto sem danificar a textura dependendo do que você fizer.

Por essa caixa de "Colorizar" você é capaz de fazer isso ou seja modificar a cor da imagem como desejar.Veremos exemplos:

Basta selecionar da maneira que achar melhor a imagem e click com direito e va nas opições como na imagem acima.

Note que abroiu a aba de Colorizar como mostrei mais acima.Assim defini a cor de um geito que aparentasse ser dourado.
Cuncluindo conseguir deixar o Elmo Dourado mais se tivesse selecionado com mais cuidado poderia deixar dourado somente o elmo pois podemos ver que tambem os detalhes (asas) ficaram doradas.

Fundo Transparênte

Muintos novatos no pixelart fazem suas obras mais esquecem de deixalas com o fundo transparênte.Isso é possivel usando o GIMP.
Usaremos a mesma imagem.

Utilizando a Ferramenta de Seleção Contígua, eu pude selecionar a parte branca com cuidado da imagem para removela.É facil! basta selecionar a parte que quer remover e depois aperte a tecla "Delete" do teclado.

Veja como ficou legal.Removi todas as partes desejadas assim tendo a famosa imagem com fundo transparênte.
Vejamos o resultado!

Viram um Elmo Dourado que consegui sem fazer esforço.


Rotação da Imagem

A rotação é muinto util para certas sprites onde precisamos mover algo para encaixar em outra sprite,não movendo de lugar e sim girando a imagem.

Um exemplo da reaproveitação para o Elmo ter seu movimento de sprite de quando o personagem morrer.
Agora vamos ver como fazer utilizando o GIMP e suas ferramentas de Seleção.

Acredito que esteja bem legivel para vocês.Usando a Ferramenta de Seleção Retangular eu pude somente selecionar o elmo e acessar essa opição que fica em "Ferramentas" e depois "Ferramenta de Transfomação" e assim a opição "Rotacionar".

Aqui so modifiquei para ficar de lado usando a barra.É simples de fato e depois, basta clicka em "Rotacionar",no final eu so coloquei a imagem no tamanho normal (essas imagems grandes usei a lupa para facilitar).
Resultado Final

Agora podemos unir as imagens para forma a sprite.Lembrando que você pode aproveitar essas ferramentas para mil ocasiões,mais isso depende de você e do seu nível de criatividade.

Originalidade

Um bom pixelart sempre demonstra trabalhos originais com inovações cada vez mais surpriendentes.Ja presenciei varios casos onde pixelart mostra trabalhos bonitos porem muinto comun,é util sim mais o trabalho que chama atenção e quele unico.Idéias?como surgem para você criar algo legal? isso se chama criatividade!
A Criatividade não se aprende e nem se aprimora,pois,é um dom! um dom próprio que vem des do nacimento de cada um a sempre bolar coisas legais e diferentes com algo simples que le dão.Bom uma pessoa sem criatividade tambem pode muinto bem se torna um otimo Dev,mas quando não tem criatividade para imaginar obras ele tera de geralmete ter imagens base como forma de inspiração de sua obra.

É possivel mesmo sem,eu conseguir ser criativo?

Claro! não é tão dificil mas terá de sempre imaginar novidades de como você pode fazer como uma warlord normal,você pode imagina ela azul?continue imagine oimbreiras maiores ou quem sabe uma placa de metal maior no peitoral?que tal uma capa? vá sempre pensando em algo maior
você pode até não atingir o nível do projeto como desejado mais garanto que com a sua criatividade ja esteja no nível que agrade muinta gente.

Estatuto do Desenvolvedor TMW

Primeiramente fiz um contorno de uma camisa em um char para poder modifica por dentro.

Utilizei a ferramenta de seleção contígua para selecionar a parte que vou aplica a textura desejado,no caso a camisa interna.

Preste atenção que na ferramenta GIMP vem com campo de texturas para você utilizar avontade(Caso não apareça a tal aba vai no menu do arquivo em cima e clica em Janelas e a ultima opição que tem o nome da janela de texturas) assim acessei cliquei com direito e apliquei a textura na área selecionada.

Viu como ficou?
repare ainda não é boa pois ficou muinto falso.

Deu uma colorida na camisa pro ton que eu queira.

Agora vem a opacidade no caso a da ferramenta picel.

Foi muinto facil,eu só deixei a ferramenta picel no menor tamanho e mudei a opacidade para 60,0(60%) e na cor preta que é da sombra assim com a opacidade baixa dara a trânsparência sobre o verde aparêntando ser sombra assim facilmente fazendo uma imagem com base e volume.
Resultado Final:

Observaram como não tem segredo algum?
É tudo questão de treino ou saber como manejar seu programa (seu GIMP é sua espada,aprenda a manejala e terá susesso em suas conquistas).Agora apresentei a vocês um bom exemplo que é de enorme ajuda a muintas pessoas com problemas em fazer textura.


Efeito de Luz com Opacidade

veja uma espada com efeito de trasparência de luz:

Agora Observe as imagens de como fazer esse efeito.

Recorto a parte desejada no caso a lãmina.

Observe que tem 2 camadas da cor azul com a opacidade em 50,0 (50%) primeiramente 1 picelada do formato e outra por cima no centro.

Ja feito basta cola a lãmina divolta e deixala no local de origem.

Somente clique fora e salve a imagem.
Resultado Final:

Está com o efeito de luz ao redor.

Vamos analisar....

Observe que é uma espécie de elmo porem sem nada dentro apenas o inicio de uma criação ou seja o contorno.
Esse é a principal utilidade do contorno iniciar projetos,mas um contorno todo predo nunca,jamais identificara desenhos em 2D então para não confundilos vou mostra de uma maneira como fazer o contorno ideal pro elmo,mas primeiramente vamos por uma textura dentro do desenhos pois a cor do contorno vai depender da cor da textura.

Ja dei uma base e textura para o elmo de minha preferência mais ainda o contorno é 100% preto.

Note como ficou diferênte mais não aceitavel ele vai passar por um processo de mudança de contorno.Como fazer:se o elmo é esverdiado metade da direita do contorno tera um verde do ton mais escuro do que tem no elmo e do outro lado um pouco menos escuro.

Esse é o resultado.

A Imagem da esquerda é no estado atual a do meio foi a parte onde modifiquei a cor ou seja o contorno para o ton correto e a da direita temos a imagem correta do elmo com o contorno aceitavel.

Vamos presta atenção nas imagens abaixo.

Tratace de duas texturas a da esquerda se trata de uma textura feita no GIMP com faceis recursos com o resultado (uma calçada de pedra) e a da direita tambem feita no GIMP tem o tesultado de um chão de madeira lisa.
Vamos pegar a imagem em branco.

Trata-se da mesma imagem branca so que vamos desenvolver nossa textura avançada nela.

Imagem separada para comparação e as cores utilizadas.

Todos conhecemos a textura basica por listras , vamos fazer do outro lado a avaçada.

No começo parecera desfocado mais com o tempo da resultado.

O segredo é sempre desfocando as listra por um modo faça uma grande listra de uma cor depois desfoque com outros tons suas pontas pouco a pouco.


Resultado é:

Esse é o resultado (perceba que ficou diferênte mais não saiu do realismo, do outro lado está uma textura basica muinto simples)se prestar atenção entenderar.

Elmo do arcanjo do lado.Observe como a textura avançada faz a diferênça (lado esquerdo textura avançada e lado direito textura basica)
Imagem com o zoon normal a diferênça é mais notada.

Alguns de vocês devem se recorda da imagem abaixo.

Postada como exercicio em pratica para os players mostrarem o grau de textura.
Vamos passo a passo aplicando a textura avançada na armadura e vocês perceberão que não há segredo algun alem de muinta pratica e paciência.

Utilizei a textura simples primeiramente.

Utilizei a textura avançada por cima.

Copiei o processo do outro lado e do inicio a textura basica na região peitoral da armadura.

Novamente repito o processo mais com a textura avançada por cima da basica(notem a diferênça).

Abidomen com texturas basicas.

Abidomen com Texturas avançadas por cima.Notem o capitulo passado que fiz a textura metalica e depois refiz o contorno adequado então utilizando a forma correta de prêncimento de pixel de textura avançada vamos ter esse resultado:


Notaram?