[Aulas] - O basico do pixelart

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

[Aulas] - O basico do pixelart

Mensagem  Catchup em Ter 05 Out 2010, 9:05 pm


Inicio

Ola pessoal! creio que a maioria ja saiba o que são trabalhos com pixelart, mas todos tem curiosidade de querer aprender a como fazer esses desenhos 2D pro nosso The Mana World Brasileiro ficar ainda melhor!.
Estou aqui para dedicar nesse humilde tópico todo basico sobre prixel para tentar tiralos da estaca "to boiando" pra "experiênte",lembrando,
que sozinho posso simplesmente mostrar como mais preciso de suas sugestões,duvidas,perguntas ou questionamentos para que eu ajude você a chegar nesse nível de experiência.[confira foto 1]
<-foto 1:Trabalho Original meu que passou por umas 10 etapas até ficar de acordo com as esigências do jogo e logo estara no server.

Na foto acima perceberam que pode parecer algo muinto complexo,mais não é. É simples o problema é a demora então para aqueles que querem se tornar bom pixelart eu sugiro que tenha muinta paciência ,pois, a pressa é inimiga da perfeição.

Regras da Aula

Temos algumas regras que server para ter um ambiente de ensino mais agradavel e organizados então preste atenção nas exigências a seguir:
1º - Leia tudo antes de postar algo para ter certeza de sua duvida.e o local correto é em [Aula] - Apresentação de Exércicios de Pixelart,caso tenha alguma duvida para posta ou queria apresenta os exercicios acesse esse link mostrado.
2º - Aqui é um ambiênte de ensino e tuturiais basicos então recomendo que utilizem GIMP ou sei programa de Pintura comun do Windows conhecido como Paint. e tambem temos um program que fuciona pela internet mesmo o PIXLR.
3º - Utilizarei metodos simples que todos os 3 programas possui um lapis e cores.
4º - Não exite em perguntar!.É smepre bom ajudalos.
5º - Paciência é néssesario então pelomenos 1 vez por semana iremos avançar passos e capitulos.
6º - Como ja falei é um ambiente de ensino então não postem coisas fora do assunto por favor! e se postar,postem em [Aula] - Apresentação de Exércicios de Pixelart ,pois, prefiro não ver postagens aqui a não ser os meus tuturiais.

Capitulo 1 - Desenhos com Textura,Base e Iluminação

Para iniciarmos esse primeio capitulo vou mostrar as ferramentas basicas que ultilizaremos em ambos os programas:


Paint:
Utilizaremos com mais fréquência os números 1,2,3,4,5,6,7,8. os outros números usaremos em algumas exeções mais esplicarei quando for néssesário.
1 - Seleção Preferêncial:Server para retirar certas partes sem danificar.
2 - Seleção em Quadro:Otima ferramenta para repetir certas partis de imagem com mais facilidade.
3 - Borracha:Tem a função de ajudar a remover imperfeições ou erros cometidos.
4 - Preencher com Cor/Baude D'água:Tem a função de preencher com a cor desejada em uma área aberta (onde tinha a mesma cor junta).
5 - Ponta Gotas/Selecionador de Cores:Tem como função pegar a cor desejada do desenho e poder reutilizar.
6 - Lupa/Zoom:Uma das férramentas mais importantes para um pixelart.Tem como função ampliar a área desejada para poder desenhar com mais perfeição(detalhes).
7 - Lápis:Importante para criar qualquer desenho base (tudo é preenchido com a cor certa utilizando o Lápis para detalhes).
8 - Pincél:Tem como Função de preenchimentos mais grossos e intensos para partes de uma grande escala da mesma cor.

Cores no Paint:Paint é mais primitivo em destaque de cores pois apresenta uma escala de 30 cores para uso.
mais existe um modo de adicionar uma cor amais para uso assim podendo subistituir mais poderar usar as cores certas aproveitando na ferramenta 5.

GIMP: tem muintas funções ja conhecida no paint ,porem,algumas a mais então para entender melhor algumas ferramentas do GIMP acesse esse Tuturial das Ferramentas do GIMP.
será muinto compléxo no começo mais com umtempo pegamos o geito.

PIXLR:as ferramentas são muinto parecidas com a do GIMP mais tem as mesma do Paint então não é preciso muinta abilidade pra discubrir.

Iniciamos a Aula com o Primeiro assunto:O que é Pixelart?
Nesse Tuturial Você tera algumas noções sobre o pixel mais abaixo vamos da uma resumida no idioma de vocês!.
Pixel conhecido como pixel art - arte do pixel que são um conjuntos de micro cubos (quadrinhos pequenos) que juntos formam uma imagem
ou seja varios pixel unidos forma alguma imagem isso depende de cada um como preencher seus pixels.
vejas as imagens criada por Lunovox no PIXLR.
Uma espada com efeito usando camadas.

Essa espada... Como foi criada?
foi formada com pelomenos 100pixel cada um com a cor certa.OBS:
Concluimos que são apenas quadros com cores distribuidas de maneira certa.
Como aplicamos uma textura corretamente?
A principio ja vi varias tentativas de armaduras frustrada pois não tinha base como escala de cores em tons fracos e fortes para entender vamos analizar abaixo:
armadura da esquerda tentativa de criação do jogadro xXheizemxX:
A armadura dele precisou de algumas modificações para ter uma iluminação requerida.


O segredo é como preencher corretamente cada quadrinho.
agora para não deixalos confusos vamos analisar uma espada bem
mais simples.

= é Obivio que está pequeno mais vocês percebem a pequena amostra esta com Iluminação,base e textura seria otimo se aplicasse essas cores na armadura sem base e iluminação acima daria um toque de realizmo em 2D.

Percebemos que a imagem acima é a mesma so que ampliada e podemos ver que ela foi composta por 7 cores.
com a combinação das 6 escala de cinza e a cor branca vocês poderam ver que ficou um metal com reflexo.
claro que as imagens super ampliadas perde todo o foco (ficam feias)
mais podemos ver que isso foi possivel distribuir com mais facilidade os quadrinhos utilizando a lupa e o lapis com as cores que procurei no paint e ponta gota.

Esse seria uma pequena textura de ferro ou metal para uma armadura.
agora observando as texturas de madeira,rocha e água abaixo:

São muintos pixel bem distribuidos mais isso não fui eu que fiz utilizei as texturas do GIMP para demonstrar.
Deve estár complexo para vocês mais não se preocupe o Proximo Capitulo sera bem simples e vocês começaram a entender tudo. Wink

Fiquem atentos pois o proximo capitulo ja séra ensinando a usarem as ferramentas da maneira correta.

Data: 05/10/2010
Hora:21:00



Última edição por Catchup em Seg 25 Abr 2011, 1:28 pm, editado 7 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qua 06 Out 2010, 8:51 pm

Capitulo 2 - Primeiros Passos com o Lápis
Aprendendo a criar Icons







Vamos analizar algumas demonstrações de espada,adagas e lanças com autores conhecidos e desconhecidos (para preservar não mostrarei o nome dos autores),Mas enquanto analizamos os modelos percebemos que são bem exóticos,diferêntes e mais trabalhosos.

Sim!,são varios modelos de espadas do modo mais comun até o mais diferênciado (bem trabalhado).
Para percerbermos melhor do que se passa vamos pular para outros exemplos!
Veja o modelos de espada que eu criei como demonstração:
->espada criada por Catchup com a função de uso de exemplo para aulasde pixel.
Percebemos que ela esta (2D) com umpouco de realizmo como aparenta ter um lado claro e escuro aparentando a iluminação,mas para esclarecermos melhor isso tudo eu tomei a liberdade de ampliala e esplicar alguns passos feitos.
Podem até não ter entendido muinto mais são apenas pixeis com cores (quadros) que formaram isso e para fazilitar o processo eu utilizei a ferramenta fundamental do Gimp e Paint chamada "lupa" que server para ampliar (dar zoom na) a imagem.


Agora para deixar tudo mais "simples" mostrarei algumas fotos do processo de criação de uma espada comun.
1º passo:

Tenha uma imagem criada no seu progama seja ele Gimp ou Paint.A imagem inicial não deve ser grande.
2º passo:

2º:Com a imagem ampliada mostrei na tela as cores que usei para fazer a simples espada e usando a ferramenta "Lápis",perceba que fiz uma linha diagonal usando cada uma das cores:
3º passo:

4º passo:

5º passo:

6º passo:

7º passo:

7º:Perceba que tambem usando o "lápis" fiz o cabo inicial da espada lembrando que é um lado claro do lado e escuro do outro para realizamo em 2D.
8º passo:

9º passo:

9º:Ja improvisando com outra cor fazendo o cabo (isso depende da criatividade de cada um).
10º passo:

10º:Ja feito de um lado tambem fiz de outro usando as cores e reaproveitando as outras cores ja usada para fazer detalhes.
11º passo:

11º:Indo bem logo a espada criou forma mais esta desfocada por que usei a ferramenta "lupa" para deixar a imagem 8X ampliada.Então é so usar a "lupa" novamente para deixar no tamanho normal.
-> resultado final(notem que utilizei pouca lâmina e cabo e assim ficou pequena mais ficou um trabalho legal).
Algo importante a mostrar:qualquer "icon" (icone) tem de estar com o fundo transparente e tamanho da imagem 32x32.
(sobre fundo transparênte é néssesario usar o GIMP,mas não estou esigindo trabalho com fundo transparênte por enquanto.Mais na frente mostrarei como remover o fundo da imagem).

Percebem o que tentei mostrar?
esse é um meio basico para criar uma simples espada lembrando que as ferramentas "lupa"e"lápis" são encontrada nos dois programas o GIMP e o Paint.
________________________________________________________________________________________________________________________
Evitem postar nesse tópico sobre apresentação e suas criações pois não seram comentadas.
Tem o local certo para avaliar sua tentativas e seus exercicios no topico [Aula] - Apresentação de Exércicios de Pixelart.
É néssesario que você poste no topico do link mostrado para poder saber se você entereçado(a) deseja mesmo ser avaliado por min e assim tentamos melhorar até que você fique mais abilidoso(a).
________________________________________________________________________________________________________________________

Exércico da Semana

Como mostrei os meios de criar icon eu não atrapalharei e avançarei e so pesso que tentem criar sua propria espada utilizando os métodos que mostrei acima e tambem pode utilizar os seus para avaliação,postem em [Aula] - Apresentação de Exércicios de Pixelart que no final da semana verificarei e neste tópico mostrarei os trabalhos apresentados e minha nota paracada um.Lembrando que sua espada pode está do geito que preferir (toda modificada,cor,estilo,etc...) me surprendam. Wink
_________________________________________________________________________________________________________________________

Avaliação do Exercicio da Semana



Em questão mostrando que por favor não quero ser vitima de reclamações.não quero que se magoem se a nota do outro trabalho ficou melhor "vamos melhorando cada vez mais" e como sei vou ser bem breve e direto lembrando que serei um avaliador correto não darei nota a mais por amizade e sim pela qualidade do trabalho apresentado.Se você não foi bom tente no proximo exercicio melhorar todos somos capazes so precisamos de treino.
Avaliação sera feita pelo nick de cada um do forum e não do sevidor.
-----------------------------------------------------------------------------------------------------------------------------------
Espada criada por "Caio"
Nota: 7.0

Espada criada por "gravityi"
Nota:5.5

Espada criada por "220volts"
Nota:8.0

Espada criada por "PintoNego"
Nota:7.0

Espada criada por "Gladiador Flash"
Nota:8.5

Espada criada por "ryanzinho1"
Nota:7.5

Espada criada por "OverLoko"
Nota:9.0

Espada criada por "alastrim"
Nota:8.0

Espada criada por "rodriguinho"
Nota:6.5

Espada criada por "Leperyon"
Nota:8.0

Espada criada por "Legolas"
Nota:7.0

Espada criada por "Katsuo"
Nota:8.5

-----------------------------------------------------------------------------------------------------------------------------------
Nota azul = 7.0/9.5 = Esta otimo e mostrou um bom exercicio.
Nota vermelha = 0.0/6.5 = Está tentando e mostrou esta no caminho certo mais ainda tem o que aprender.
Nota amarela = 10.0 = Exelente um trabalho muito bem feito.
"Estrela siginifica minha avaliação na qualidade das cores usada e o modelo do exercicio apresentado"
Esses foram os trabalhos da semana.Se você está estudando esse exercicio em outra data sendo que não esta mais valido,você pode postar ela no local apropriado ou seja no tópico de apresentação de exercicios ou me enviando uma MP quando que o mais rapido possivel colocarei ela acima como os outros.


Última edição por Catchup em Sex 25 Fev 2011, 7:00 pm, editado 8 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qui 07 Out 2010, 7:39 pm


Capitulo 3 - Angulo,Sombra e Volume

Antes de avançarmos os estilos de desenhos mais realista!,você deve saber sobre angulos,sombras e volume de qualquer imagem que é exigido para o TMW.


Volume
Volume em uma imagem é quando aparenta ter reflexo da lus de um lado e sombra do outro assim mesmo na imagem deixa com mais relidade.
Percebemos que o circulo da esquerda está sem volume e não tem forma tanto que não pode ser visto ja o da direita ja esta com o reflexo da lus assim mostrando que tem volume correto.Vamos ver alguns exemplos:
Vamos Perceber a diferêça entre os dois anões abaixo.
(Anão forjador de thorga (npc) criador por Catchup e editado por Kamaitachi)

Consegue identificar qual deles está com volume?
Já está esclarecido que o da direita esta sem volume pois apresentou uma cor mais escura assim mais frias e deixou umpouco sem aquele toque 2D que nessecita.


Angulo com Visão
O TMW exige imagens não importam quais, estejam em 45º Graus!,sendo 0º Grau a tal imagem não pode ser aceita ,pois, 0º grau são imagens para jogos em plataforma.Exemplos:

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)

A imagem quando não for Icone (raramente é preciso angulo para um icon) requer conhecimento ja na visão para podermos criar imagens com angulo em 2D eficaz para title(mapas).Exemplo:

Dessa forma podemos notar que tem que ter uma mnodificação a imagem antes de ficar totalmente em 2D.

Bom é um escada preenchida com camadas(depende da criatividade de cada um).
Certas imagens é requerido uma sombra para realizmo que é esigido.Veja alguns exemplos:

Outro exemplo que tive que fazer para modificar o trem (a sombra).

Assim podemos perceber como a sombra deve ser posicionada corretamente.
O que aprendemos agora não sera esigido nos exercicios no momento,ainda vamos avançar no passo normal até chegar no tempo em que deve usar e assim ensinarei o meio correto de fazer.


Última edição por Catchup em Seg 07 Fev 2011, 6:48 pm, editado 2 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qui 07 Out 2010, 10:00 pm

Capitulo 4 - Criações de Acordo\Criatividade Essencial
Trabalhos simples são boms e ajudam muinto mais o que é otimo para fazer é a conhecida como arte criativa.Aquela arte improvisada e inovadora que ensina algo novo até mesmo para os experiêntes então de acordo com o que mostrei no capitulo 3 vamos começar a desenhar,mais não avançarei para o complicado ainda vamos conhecendo alguns meios de criações bem légais.

(éssa imagem criada por Catchup (eu) ja foi minha assinatura no forum)
Como vemos na imagem foi a criatividade que gerou isso.Para não prejudicalos vamos descer o nível de pixel para os conhecidos Icons novamente.Bom como ja foi mostrado no Capitulo 2 a criar espadas com pixelart vamos ser criativos e tentar ver o que mais podemos criar alem de espadas!.
Lanças
=
Lanças são armas com ponta de guerra.Geralmente carregam a Curta Lãmina em sua ponta e tem um cabo de madeira.
Arcos
=
Arcos são armas que carregam flexas (uma espécie de cabo de madeira com uma lãmina na ponta) usada como munição para atirar sobre os inimigos.
Machados
=
Machados são armas de madeira que carréga uma lãmina afiada dos lados.
Cajados
=
Cajados são armas usada por feiticeiros ou bruxos para ataques magicos.
Acabamos de mostrar alguns icones de artistas desconhecidos para analisarmos como é feito esses itens tão diferênciados que geralmente são aceitos pois carregam com ele um puro trabalho feito com criatividade.
Agora para sabermos como é feito esse tipos de icones devemos aprender acriar estilos de texturas como cabo de métal ou lãmina de aço então vamos estudar um pouco sobre como criar essas inovações.
Agora preste atenção em todo o processo de criação de um machado de duas lãminas.
Primeira etápa

Deixa sua imagem tamanho 32x32 e almente com a Ferramenta "lupa" para 8x.
1º passo

2º passo

3º passo

4º passo

5º passo

6º passo

7º passo

tem um segredinho para facilitar:use a ferramenta seleção e selecione uma das lãminas ja criada depois click com direito e aperte na opição "Cópiar" depois a opição em qualquer espaço do seu desenho e "Colar",em seguida click novamente com direito e vai na opição "Girar/Mudar a posiçã) e selecione mover para a esquerda 2 vezes assim ficara 2 lãminas exatas para poder usar e depois ainda coma ferramenta selecionar movimente a lãmina clonada até o lado da outra como na imagem acima (não se esqueça de ativa a opição da ferramenta de dixar transparente).Se você está usando o gimp para execução do curso selecione a imagem usando qualquer seleção da sua escolha e em seguica click com direito nela e clica em cópiar e depois clica em colar e ira aparecer 2 repitidas então você clica com direito novamente e vai em "Ferramentas"depois"Ferramentas de Trãnsformação"depois use a opição "Rotacionar" e escolha a posição desejada da imagem selecionada deixando ela do outro lado e para mover a imagem no gimp pressione "M" e mova com o teclado para onde desejar ficando igual a imagem acima.
8º passo

9º passo

10º passo

11º passo

Resultado

Machado Completo

Percebemos que no final basta deixar a imagem no tamanho normal novamente.
Não é muinto dificil basta treinar e criar algo mais bolado para mostrar sua criatividade.Devemos mostrar nossa abilidade com pixel mais pra frente então para mostar as cores dos tipos de matérial como aço e madeira serão apresentados mais tarde.


Última edição por Catchup em Seg 25 Out 2010, 7:09 pm, editado 2 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Sex 08 Out 2010, 7:49 pm

Capitulo 5 - Ferramenta de Seleção Basico
Vocês conheceram modos de desenhos usando lápis mais tenho que mostrar todas a utilidade no Paint e GIMP da ferramenta Selecionar.
Vamos analisar uma das utilidades da ferramenta "Selecionar".
Usaremos a Espada Exemplar do Capitulo 2.

A espada comun que mostrei como criar.Perceba que ela é pequena demais então usaremos o selecionar para almentar o tamanho da lãmina.

Deixamos 8X com a Ferramenta "Lupa".

Use a Ferramenta "Selecionar" e abra o quadro em parte da Lãmina sem encostar no cabo.

Aqui antes não se esqueça de arrastar a espada para o canto da dimagem para sobrar mais espaço.


Quando fazemos isso aparecerar a Cópia da parte da lãmina selecionada então você deve somente arrastala para o local certo.


Depois disso basta clica fora e deixar sua imagem tamanho original 32x32 com a lupa e o resultado será esse:
=

Agora sabemos uma das utilidades da ferramenta selecionar,então vamos analisar outra utilidade.
Observe as imagens abaixo:

Você sabe como movimentei o Capacete em cima do char?sem danificalo?
Não é dificil! Entenda como nas imagens de exemplo de como essa operação foi executada.







Meu paint é do sistema operacional windows 7.se você usa o paint do windows XP basta clicar na ferramenta seleção e olhar que la nas ferramentas mais em baixo tem 2 opições se quer ou não fundo transparênte resultando nisso abaixo.

Vuala! é so movimenta de maneria que se encaixe as ferramentas!
então com esse procedimento podemos equipa o char com o capacete usando o basico do paint ou GIMP.

=

Como podemos fazer essas mesmas execuções usando o GIMP?
Facil o GIMP tambem possui e ferramenta seleção não somente ela quanto mais 3 tipos e para fazer isso no gimp é do mesmo geito so que não precisa deixar o fundo transparênte porque ele ja consegue isso se você deixar a imagem de fundo transparênte tera o resultado desejado.
Mais para frente estudaremos como usar a ferramenta "selecionar" de um modo avançado.


Última edição por Catchup em Seg 21 Fev 2011, 7:44 pm, editado 4 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Seg 11 Out 2010, 5:00 pm

Capitulo 6 - Sprite



Nesse momento vamos começar a evoluir os estilos de desenhos mais precisamos saber de algo importante para podermos criar algo chamado "Sprite".
O que é uma "Sprite"?
Sprite é o nome que damos para a imagem com todos os movimentos possiveis usados no jogo.
Como assim?
Esplicarei melhor.Como vocês acham que seu personagem no jogo se equipa? como você acha que ele pode se mover com a animação do movimento e até atacar? isso tudo é feito por sprite.
Veja o personagem normal do TMW tem que ter essa sprite abaixo.

Essa sprite é composta por quadros de 65x65 no total temos 72 movimentos diferente que são ele de frente,atacando,de lado,etc... em fim.
Sabemos que o motivo de muinta gente desistir disso é porque sendo equipamento,calsa,luvas,botas até mesmo espada você deve fazer ela 1 vez para cada corpo acima ou seja 72 vezes.
Vamos ver um exemplo que consegui fazer uma armadura para o corpo acima:

Veja só consegui terminar. mais não basta so ela criada para o masculino,Tambem tem que ser feito pra sprite feminino.

Um modelo simples de armadura que vo mostrar é conhecido como Couraça da Floresta somente a sprite feminino dela.

Se você usar a ferramenta selecionar para por em cima como no capitulo 5 você pode ver que a armadura se encaixa perfeitamente no corpo.
Agora como criamos uma sprite de um Capacete?
esse é basico não requer uma sprite 72 vezes e sim somente 5 imagens.
Icon,tambem pode ser a imagem de frente do elmo.
Sprite,a sprite completa de um elmo basico assim tera todos os movimentos naturais de uma char.
(infelizmente não podemos usar a maneira simples para armaduras).
basta analisar a imagem acima para perceber.
Existe umas exeções como na sprite da mascara de necromante que requiriu umas 20 sprite para essa animação que ela possui mais isso ainda veremos.
Sprite de Monstro?

É livre para você mesmo por os movimentos de sua escolha ,ou seja, você pode colocar na ordem desejada os movimentos do monstro mais é esigido que ele tenha animação de ataque e morte para não ficar algo falso.

Mas não se preocupem com isso agora pois vou ensinalos com calma des do inicio a criar o seu capacete ou armadura para vocês ficarem féra nisso.mas a sprite é com vocês.
a Sprite nova que vai deixar o TMW melhor e conhecida como sprite de espada.Vou mostra como é.
= Espada do Cavaleiro Lider.Foi feita assim:

Link:http://themanaworld-br.googlecode.com/svn/trunk/tmwdata/graphics/sprites/weapon-lidersword.png
Com esses movimentos diz o lunovox que fazendo essas sprite toda com cada desenho da arma desejada por cima dessa sprite.

Link:http://themanaworld-br.googlecode.com/svn/trunk/tmwdata/graphics/sprites/weapon-base.png
Agora sabemos como é feito mais é algo complexo pois exige muinto esforço com dedicação e tambem otimas abilidades com pixel para refazer os desenhos.
caso sua arma esteja posicionada como na de cima ela pode ser aceita mais temos que ver isso com calma,pois,ainda estamos aprendendo.Certo?


Última edição por Catchup em Seg 07 Fev 2011, 7:06 pm, editado 4 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qua 13 Out 2010, 10:27 pm


Capitulo 7 - Estilos de Texturas Metalicas/Vamos Criar um Elmo

Ola aprendizes.Como estudamos um meio de textura comun usado em lãmina de espada, e isso possibilitou a todos para criar sua propria espada e ja com algumas abilidades que alguns desevolveram-se.
Agora vamos aprender a como fazer qualquer tipo de metal ou seja quando se tem curva a textura ou a iluminalção que requer isso sem tirar o volume,base e detalhe do desenho desejado no caso hoje mostrarei a vocês um meio simples para podermos criar um "Elmo".
O que é um Elmo?
Elmo é uma proteção, utilizada no ambiente bélico, destinada a defender a cabeça do soldado. Faz parte do equipamento de guerra antiga e medieval, e se apresenta das mais variadas formas, mas sua função básica é sempre a proteção craniana. A parte que protegia a visão era designada de barbudas.
---> Alguns elmos para demonstração com a função de inspiração.Veja mais modelos aqui.

Agora vamos saber os principios basicos que não vou esigir na aula,mas que é esigido para que entre no jogo.
Sprite:Conjunto de imagens para animação de movimentos (Capitulo 6).Uma sprite do helmo não requer uma imagem com tamanho base,ou seja, você produz da maneira que quer des de que tenha 5 modelos (de frente,de costa,de lado esquerdo,de lado direito,e virado [morto]).

Icon:Icone é a imagem tamanho 32x32 que representa a sprite(geralmente a imagem de frente server como modelo de icon).

Agora preste atenção que mostrarei os tipos de texturas metalicas para poder criar um bom elmo.

Note que não tem segredo basta o modo de cor para o detalhe metalico agora ensinarei os tipos de metais para usar.

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?
Esse não foi um otimo trabalho mais estou mostrando que não tem nada de dificil apenas requer criatividade para deixar mais realista precisava de um pouco de branco para reflexo coisa que não fiz.Proximo Capitulo mais vou esplicar melhor como usar essas texturas.
_______________________________________________________________________________________________________________________

Exércicios da Semena

Quero que crie seu elmo em um char como na imagem acima e não esigirei sprite somente ele desenhado sobre o char como no RESULDADO FINAL.Caiba a criatividade de cada um criar o seu Elmo de guerra do TMW com textura de metal e postar seu trabalho em [Aula] - Apresentação de Exércicios de Pixelart.Esse exercicios só sera avaliado depois de 2 semanas entã o vocês tem bastante tempo pra postar.
Criatividade e quero variedade Wink .
________________________________________________________________________________________________________________________

Avaliação do Exercicio da Semana


Elmo Criado por "legolas"

Nota:3.5

Comentario:Legolas achei legal mais ficou muinto sem base iluminação e não tem textura de metal tente melhorar amigo.Sempre vai ter outra chance você pode criar outro e manda se eu acha melhor eu subisituo e a nota pode mudar.

Elmo Criado por "Souljf"

Nota:7.0

Comentario:Gostei bastante da bandana ou touca com o fogo no meio você caprixou no volume.

Elmo criado por "leperyon"

Nota:10.0

Comentario:Exelente o seu elmo ta na textura e volume otimo e conseguiu me surpriender.Elmo bonito e criativo.

Elmo criado por "OverLoko"

Nota:10.0

Comentario:Adorei o seu elmo apesar de ser uma mascara ninja percionalizada.Você fez mais do que bonito a textura e o volume da mascara.

Elmo criado por "ryanzinho1"

Nota:8.5

Comentario:Gostei do metal usado e da textura e tambem ta bem criativo mais faltou uma base com iluminação mais realista.
________________________________________________________________________________________________________________________



Última edição por Catchup em Ter 22 Fev 2011, 6:24 pm, editado 6 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qui 14 Out 2010, 9:51 pm

Capitulo 8 - Como Fazer uma Textura Metalica Detalhada

Como mostrei no capitulo anterior a fazer um elmo.É néssesario que aprendam o geito certo e realista de por em seu elmo ou armadura pra deixala 2D com volume mais realista.Precisamos analisar as fotos a seguir com cuidado pois nélas mostra como fazer certos detalher que é muinto util para um pixelart pois com essas abilidades em suas mão apenas usando uma diversidade de cores e um lápis você vera como pode fazer coisas incriveis!.
[center]Preste atenção nas imagens a seguir e com ela vou descrever como fazer assim não vera dificuldade e tambem não terei a dificuldade de postar detalhe por detalhe pois acho que está bom para entender.

Perceba que a imagem ao lado é uma bota de metal.

Agora um importante vizão ampliada com as cores utilizada para fazer esse modelo e usa utilidade.Sempre escuro do lado direito e claro do lado esquerdo assim temos a textura de metal chama METAL REFLETIDO com esse efeito e veja como distribuo as cores de acordo sempre no ton.(note que não utilizei todas as cores pois o desenho é pequeno e será fréquênte)

Esse é o modelo de textura usada no elmo lembrando que utilizei as cores de outro minério como cobre assim nesse ton.

Dificil de esplicar mais essa textura se chama METAL CURVADO pois mostra curvas com os tons correto de cores escuras e claras deixando iluminação e volume basntante realista.

Uma armadura mais veja como é esse estilo de textura que mostra cores claras com o reflexo e curvas que vai escurecendo.

Uma mistura dos dois que chamo de METAL CURVADO COM REFLEXO Que de certo modo perceba os detalhes da armadura que de longe fora da vizão 8x com lupa ela fica bem realista de acordo com o esigido no TMW.

Observando esses modelos podemos concluir que é tudo base de cores para efeito e não tem segredo algun.Basta aplicar o ton no local correto que você é capaz de criar verdadeiras obras.
Com essa conclusão agora vocês podem dar inicio ao exercicio de criação de um elmo.Se ainda não entendeu como aplica as cores correta mente para forma textura metalica me informe no tópico
[Aula] - Apresentação de Exércicios de Pixelart.

Ajudarei como possivel.



avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Sab 16 Out 2010, 8:32 pm


Capitulo 9 - Armaduras



Uma armadura é uma vestimenta utilizada para proteção pessoal, originalmente de metal, usada por soldados, guerreiros e cavaleiros como uma forma de proteção às armas brancas durante uma batalha.
Existem as armaduras consideradas leves, médias e pesadas.
As armaduras leves geralmente não tem partes metálicas, sendo composta de varias camadas de couro e acolchoamentos. Estas armaduras de couro frequentemente eram infestadas de pulgas por acumular muito suor.

  • As armaduras leves têm sua principal vantagem no que diz respeito a liberdade de movimentos. São exemplos de armaduras leves: corselete de couro, corselete de couro batido e gibão de peles.

Também se incluem nesta categoria as armaduras japonesas, feitas de tiras de couro, bambu e laca.

  • As armaduras médias eram coletes de malha metálica, como peitorais de aço, brúnias, cotas de malha, por baixo dos camisões de malha se usava uma camisa comum de algum tecido macio como algodão para reduzir a fricção da malha crmadura de metal para os cavalos.

Você tem livre acesso para ver as imagens de varios modelos de armaduras e outros [url=http://www.google.com.br/images?um=1&hl=pt-br&biw=1276&bih=463&tbs=isch:1&sa=1&q=Armadura medieval]aqui.[/url]
Chain Mail:Cota de Malha de correntes,uma armadura feita de varias correntes permitindo mais movibilidade e uma proteção usada por soldados da antiga éra.
Plate Mail:Uma armadura com placa de ferro maciço util para combate pois carregava com ela uma grande proteção contra os ataques inimigos.

Mostrei 2 armaduras basicas usadas mais ambas ja tem o começo (armadura) no jogo.Quem sabe algum dia alguem cire luvas,botas ou calsa do mesmo tipo para virar um set(conjunto de equipamentos).

Para fazer futuras armaduras que é exigido um meio mais avançado de proteção.Como sabemos ja temos as armaduras basicas e agora é hora de investir nas mais pesadas.Uma das principais diferênças está nas ombreira que éra ao mesmo tempo uma forma de mais beleza na armadura tambem servia como proteção.
-> uma ombreira separada.
No momento vou somente pedir armadura pesada ,pois, mais na frente vamos aprender a fazer couro textura de couro ou couraças para muintas funções.
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

1º parte:Como no capitulo anterior aprendemos como fazer essas imagens com reflexo para texturas metalicas.Eu quero que primeiramente você use a imagem abaixo e passe a textura metalica sem danifica o contorno preto para avaliação se você tem abilidades em aplicação de textura metalica.
2º parte:Quero que você tambem mostre seu lado criativo e crie sua prórpria armadura em um char e poste tambem tudo em [Aula] - Apresentação de Exércicios de Pixelart. vou avaliar os trabalhos tudo na mesma data do elmo.
_______________________________________________________________________________________________________________________




Avaliação dos Exercicios da Semana

Fiz tambem o set bem trabalhado para notarem como a criatividade é dependente de cada um.



_______________________________________________________________________________________________________________________

Armaduras criada por "OverLoko"
1º:
não feita.
2º:

Nota:10.0

Comentario:Otimo trabalho apesar de ser uma armadura inovadora meio que sombria ficou otimo as texturas.Parabêns.

Armadura criada por "ryanzinho1"
1º:
não feito.
2º:

Nota:9.5

Comentario:Adorei e foi muinto bem caprixado com uma boa textura metalica mais faltou umpouco de iluminação.

Armadura criada por "leperyon"
1º:

Nota:8.0

Comentario:Gostei mais a sua textura não tinha pontos claros para iluminação.Se repara o modelo que fiz acima vera que é um metal bem luminoso.
2º:

Nota:10.0

Comentario:Adorei,pois, você inovou no estilo com o set bem legal e tambem apresentou uma textura diferênciada porem não saiu do ton metalico.

Armadura criada por "Souljf"
1°:

Nota:8.5

Comentario:Gostei bastante mais diferênte dos outros você aplicou a textura metalica mais ficou meio sem volume e a iluminação não ficou clara suficiente.
2º:

Nota:7.0

Comentario:Bom apesar de você ter reaproveitado a armadura feita para recriar detalhes eu vou considerar.

Vocês estão livres para continuar certas partes do exercicio não feito ou melhorar a qualidade dos produtos ja apresentado melhorado para maior nota.
_______________________________________________________________________________________________________________________



Última edição por Catchup em Qua 03 Nov 2010, 4:08 pm, editado 4 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qua 20 Out 2010, 7:18 pm


Capitulo 10 - Seleção Mediana/Utilitarios com o GIMP


Vamos aprender as utilidades e as principais funções que da para fazer usando as diversas ferramentas de seleção do GIMP ,mais primeiramente vou esplicar como usar cada uma delas de maneira correta.

Bom a principio você não deve está entendendo bem.Então na pratica com algumas fotos você verá como é facil,util e eficas.

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.
Logo aprenderemos o avançado sobre a "Seleção" estejam prontos pois as proximas aultas tem umas novidades.


Última edição por Catchup em Seg 21 Fev 2011, 7:58 pm, editado 2 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Sex 22 Out 2010, 8:17 pm


Capitulo 11 - Nobresa e Originalidade/Os Atos Corretos de um Pixelart

Na faze de treinamento de um pixelart ele deve saber não somente de como desenhar,mais tambem deve saber do valor e a nobresa de cada um e a valorizar a ética dos pixelart.

Ética do pixelart?refere-se ao do server?
Não!. Sabemos que é mais do que nosso dever respeitar as normas e agir com ética perante ao que o server pede.Mas tambem existe a ética dos Developers ou futuros Developers.

Vocês devem saber dos principios basicos de respeito ao colega pixelartista que é respeito.Entretanto há varias formas de respeito e vou explicar elas.

Uma maneira de respeito que os colegas devem prestar são:
1-Nunca julgar os trabalhos com criticas exageradas e sim com sugestões para ajudar (não queremos desprezar o trabalho do colega).
2-Quando possivel ajudar o colega com dificuldade em tal ocasião,pois,isinuar de maneira verbal que ele é de alguma maneira "sem experiência" mesmo que não aparenta mais que faça ele pensar isso é totalmente errado.
3-Sempre mostrar comentarios positivos do trabalho e depois as sugestões.
4-Nunca julgar sem o proposito,ou seja,sem saber a função do tal trabalho.
5-Jamais apresentar seu trabalho com base a ideia do colega ja postado,ou seja,ele se esforçou para mostrar uma armadura,você não pode chegar e editar a armadura dele de uma forma melhor sem pelomenos avisar com antecedência ,pois, isso é considerado trabalho desvalorizado.Um bom trabalho é um trabalho original.
6-Nunca contratacar trabalhos dos outros com o seu (melhorado ou não poste em tópico diferênte).
7-Posta seu trabalho com objetivo ou seja se ele entrar como seria o acesso a essa criação no caso criação usavel.
8-Nunca se zangue com criticos.É super normal uma critica e sempre bem vinda ,pois, o erro que gera a critica,eo erro nos ensina a melhorar.

São as regras basica de um Developer em questão de respeito.Tambem tem as ações com Desrespeito sendo que varias delas pode leva a adivertências ou até banimento.

Plagiu:Quando um pixelart(falso ou verdadeiro) pega um trabalho de outro membro ou de outro criador sendo de qualquer forum de qualquer MMO ou imagem e posta afirmando que é o autor original.Caso pego não será nada legal.

FalsoArtista:Quando uma pessoa sempre mostrou trabalhos otimos mais ela não foi o autor original,ou seja, o tempo todo teve ajuda com os projetos.Isso pode levar a no minimo perda do cargo de Dev caso ja esteja.

ArtistaDesrespeitador:Quando um membro usuarios desrespeita de forma muinto cruéu o outro por ações seja elas trabalhos mal feitos até provocações.Pode acabar em banimento.

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



Estatuto do Desenvolvedor TMW(by Lunovox)

Eu, Lunovox, exercendo os poderes de Líder DEV concedido a mim, promungo em 17 de agosto de 2010, o Estatuto dos Desenvolvedor TMW que rege os Conceitos, Títulos, Deveres, Direitos e Garantias dos colaboradores do servidor The Mana World Brasil.

Conceitos Básicos

Art 1 - O Desenvolvedor do jogo The mana World, conhecido popularmente como DEV ou Alquimista, é um indivíduo depreendido que interesse próprio, possuidor de habilidades convenientes, que exerce função de desenvolver não remuneradamente, por tempo indefinido, um servidor estável de The Mana World segundo os interesses pertinentes da população usuária.

Aquisição e Remoção de Título

Art 2 - O título de DEV será adquirido por meritocracia.

§1 - O mérito será dado através de exposição e avaliação de habilidade e de comportamento, convenientes ao servidor, pelo líder DEV.

§2 - A habilidade avaliadas serão:




    1. Leader
    2. Pixelart
    3. Questart
    4. Maper
    5. Publisher
    6. Composer

Art 3 - O título de DEV será removido por motivos de:



    1. Abandono da constância de desenvolvimento por tempo indeterminado ou longo;
    2. Desenvolvimento intencional de instabilidade estrutural e econômica no servidor;
    3. Compartilhamento de dados defeituosos que comprometam o funcionamento estável do repositório online gerador de localhosts.
    4. Compartilha sua senha de repositório pessoal e intransferível para terceiros.
    5. Insubordinação a licença Open Source vigente no servidor;
    6. Desrespeito as orientações do líder DEV.
    7. Desrespeito a exposição de trabalho de algum colaborador, seja ele um DEV ou não.
    8. Negar-se a compartilhar os conhecimentos adquiridos no servidor, para com terceiros.

§1 - Antes do DEV perder seu título. O líder DEV precisará apresentar solicitação mediantes apresentação de argumentos, que será homologada através de votação pelos membros da cúpula.

§2 - Ao perder o título, o DEV deverá ser executado, perdendo todos os seus poderes, níveis, itens, direitos e obrigações.
Direitos e Garantias

Art 4 - Cada DEV tem o direito de possuir:

    1. Pelo menos uma unidade de cada um dos itens que ele mesmo criar.
    2. Acesso as áreas de fórum online exclusivas aos DEVs, Administradores e Moderados.
    3. De editar tutoriais sobre suas habilidades típicas no fórum.
    4. Poderes de GM20;
    5. Habilitar e Desabilitar Scripts no servidor sobre caráter de emergência.
    6. Senha de compartilhamento de localhost aos outros DEV através de repositório subversion oficial;

§1 - Os poderes de GM20 podem ser alterados em aviso prévio mediante decisão da cúpula, ou por um dos Administradores mediante motivo de manutenção urgênte da estabilidade estrutural e econômica do servidor.

§2 - O direito compartilhamento de localhost do DEV, poderá ser revogado sem aviso prévio pelo Lider DEV, mediante motivo de seguração da estrutura, do poder e da economia do repositório.

§3 - O direito acesso total ou parcial ao fórum poderá ser revogado sem aviso prévio pelo Administrado, Moderador ou Líder DEV, mediante ofença por parte do DEV a terceiros ou ao servidor.

Sabemos agora que os devs seguem uma conduta tambem rigida sem tira o foco do orgulho de permanecer na equipe e deixa a sua digital em futuras criações dignas.


Última edição por Catchup em Seg 14 Fev 2011, 5:32 pm, editado 3 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Qua 03 Nov 2010, 8:39 pm


Capitulo 12 - Texturas de Tecido

Ja trabalhamos com as texturas metalicas e como fazelas em equipamentos agora vamos desenvolver pelomenos o basico sobre como criar uma textura de tecido e pano.

[Obra de darkmister]
O que acham a roupa do Ninja é de tecido pano?
se acham que sim estão errados,temos aqui uma textura desconhecida para tecido que seria util apenas em metais.Percebi que apenas a calsa e as botas do ninja estão na textura de pano.
Vamos ver o processo de trânsformação rapida da textura.

Cópiei a Imagem e deixei branco onde quero aplicar nova textura.

Texturas antigas que foi usada.Observe abaixo a diferênça do que consigo fazer com outras cores.

Vocês devem está se perguntando:Como faço essa textura?`
É simples é apenas um processo de cor em ton xadrês perceba que alguma partes vou misturando cor claras e escura com tom xadres é apenas sai pontilhando com varias cores no local para da esse efeito.
analise abaixo:

Se vocês sabem isso acima é uma T-neck cor preta e simplesmente vamos ver que foi utilizado cores no ton xadrês para fazer assim trocando cor clara ,escura ,clara ,escura ,mais clara ,mais escura,etc...
dando esse efeito de tecido realista.
Dica:Você pode copiar partes da tneck e colar sobre o espaço da roupa para dar esse toque de tecido se não conseguir criar o seu.
Veja o Resultado:

Lembrando que a textura de tecido é avançada,enquanto vocês não demonstrar técnica para misturar varias cores com esse efeito você não conseguira fazer trabalhos com tecido.Assim que cominar esse método você tera uma infinidade de coisas para por empratica.


Inovando

Esse é o meu estilo de textura que é possivel fazer varios estilos de pano,tecido,couro ou até metal avançado dependendo do desempenho.
agora para você poder descubrir seu próprio método de desenho vamos analizar uma foto do casaco.

Se você fizer sua textura de pano você tambem deve saber pricipalmente caso uma camisa ou um casaco onde tem dobraduras e amaçados da roupa efeito obrigatório para relismo.

Todo tipo de tecido seja grosso ou fino tera esse efeito dependendo do local.Vai alterando o tipo das dobraduras dependendo da parte onde a textura vai está isso é possivel apenas com tons mais escuros.
_______________________________________________________________________________________________________________________


Exercicios das Semanas

Como ja aprendemos as texturas de pano e tecido,quero que nesse exercicio vocês peguem uma imagem de um char seja masculino ou feminino e faça alguma roupa para ele.Pode ser uma camisa,casaco,calsa,botas,ou luvas se quiser fazer o conjunto todo tambem pode,mas o conselho que dou é de evita so fazer luva e bota tente algo melhor.Quero analizar seus equipamentos de tecido e para facilitar deixarei a data de avaliação para dia 14/11/2010 para dar mais tempo de descubrir seus estilo de textura.
Qualquer duvida me consulte.
Local de post do exercicio em: [Aula] - Apresentação de Exércicios de Pixelart.

_______________________________________________________________________________________________________________________
Roupa Criada por "Souljf"
(link quebrou,sugiro que reponhaa imagem no tópico de post de trabalhos para colocarmos novamente a amostra)
Nota:9,0

Roupa Criada por "Sky!"
Comentário:Otimo trabalho e ficou muinto bom a capa.

Nota:5,0

Comentário:Valeu a tentativa Sky!,você precisa melhorar amigo a sua tolca precisa de uns detalhes 2D e ta sem base e volume,leia mais as aulas para aprender.Lembre-se Pode não somente você,mas como todos posta a hora que quiser os exercicios mesmo os que ja passaram ,pois, eu atualizo numa boa aqui para vocês e dependendo melhora a nota.

_______________________________________________________________________________________________________________________


Última edição por Catchup em Seg 07 Fev 2011, 7:14 pm, editado 2 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Ter 09 Nov 2010, 7:40 pm


Capitulo 13 - Aplicação de Textura e Opacidade GIMP/Facilidades


Muintas pessoas tem dificuldade em criar sua texura seja ela para uso do metal,tecido,couro,madeira ou pedra.Existe uma forma que facilita bastante a maneira de criar texura certa para ajudar os player se chama Textura aplicada e Opacideade de sombreamento.

Textura aplicada:é um campo de varios modelos que o GIMP fornece a você com texturas para usar.

Opacidade de sombreamento:é muinto util para efeitos de sombra para desenhos ou até efeitos de luz com volume e base(recomendado).

Pesso que preste atenção em um meio facil e simples de criar uma camisa em um char e da a ela algum toque utilizando apenas os recursos que o GIMP fornece.


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

Não é dificil criar essas novidades como espadas com efeito de luz.Alguns tentam mais o efeito não tem trasparência então aparênta ser falso e mal feito.
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.

Espadas como a [Espada de Kurogane] entre outras tem esse efeito mais não é somente com espadas que podemos elabora esse sistema.
Esse papel é seu de decidir a cor e o modo de usar e isso depende da criatividade de cada um.
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Sex 19 Nov 2010, 5:52 pm


Capitulo 14 - Gif/Imagens Animadas

Gif é um processo bem divertido onde criamos aquelas imagens animadas com movimentos e ação que são bem criativas.Vou mostrar o basico para uso de testes de sprite no caso mais com o mesmo icentivo podera fazer outras coisas.(aulas com imagens précriadas por diogorbg e katucha serão usadas).



A imagem acima trata-se da asa de borboleta criada a pouco tempo pela talentosa Katucha. Note como o movimento é bem realista pois isso so foi possivel com ajuda de gif e claro de uma boa pixelartista.

(parte escrita de um mini Tutorial Criado por diogorbg)
Vou colocar aqui o mesmo tutorial que coloquei nas asas da katucha:

Coloquei cores nos quadros para facilitar, observem:

* parado - verde - Este é fácil de fazer animação, aceita quantos quadros você quiser.
* andando - azul - Tem 6 posições. Anima do 1 ao 6 e repete animando do 1 de novo.
* sentado - roxo - Também é fácil de fazer animações porque só tem um quadro.
* morto - preto - Também só tem 1 quadro.
* atacando - amarelo - Só tem 4 posições, mas o ciclo utiliza o quadro parado entre os ataques: (parado, ataque 1..4, parado, ataque 1...4 ...)
* atacando com arco - vermelho - Tem 5 posições e utiliza o quadro parado no ciclo: (parado ataque arco 1..5, parado, ataque arco 1..5, ...)


O que quero dizer é que a sua arma só vai ter o movimento de ida... o de volta que você está imaginando não vai ter.

Você se preferir pode Ler o Tutorial Basico de Gif
>>AQUI<<

Agora um pequeno tuturial meu.

Observe a Gif de cima que foi feita com o GIMP (programa ideal de Gif) com a função de testar a sprite que aparentimente está bem aceitavel.
Agora observe a imagem abaixo.

Podemos observa que são apenas multiplos quadros de 65x65 no total 72 quadros que forma uma sprite então com essa divisa cada quadro pode ser usado para fazer a Gif.
Preste atenção aseguir.

Separei no Gimp 6 sprite o de movimento de frente sendo que cada quadro tem 65x65 assim salvei separadamente elas em outro local no formato gif.
(para salvar no formato gif cada imagem deve estar com o nome desejado seguido de ".gif" exemplo "movimento1.gif" basta acrescentar o .gif na hora de salvar a imagem no GIMP).

Não está muinto esplicativo a imagem então preste atenção na parte de leitura pois vou esplicar com detalhes.
primeiramente depois de separa as imagens desejadas,elas devem ter o mesmo tamanho sempre no caso a 65x65 do gif.
Vá no Menu de Arquivo e abra a primeira imagem de movimento e depois vá em "Arquivo/Abrir imagem como camada..."
quando abri como camada todos os movimentos va no 1º passo da imagem acima clice com direito em cada camada e clica em "Alterar atributos da camada" assim pode mudar o nume e não se esqueça de por o (100ms).
(a ms é a abreviação de movspeed que é a velocidade de mudança de cada imagem no caso usamos 100ms para o TMW quanto maior mais demorado a mudança de camadas.)
lembrando que cada imagem está no formato gif,você pode ir em "Filtros
/Animação/Reproduzir..." para testar e quanto pronta salve ela com o ".gif" e aceite como animação gif (as imagens gif são abertas somente com navegador de internet).
assim você terá sua gif.



Última edição por Catchup em Qua 09 Fev 2011, 5:37 pm, editado 1 vez(es)
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Ter 08 Fev 2011, 8:02 pm


Capitulo 15 - Contorno


Primeiramente o metodo de pixelart quase sempre vem antes da criação o contorno dela e para facilitar vamos ter idéias basicas sobre o contorno,no inicio o contorno sempre preto demonstrava de alguma forma primitiva a diferência as divisões da figura e os movimentos assim facilitaria identificar o braço por exemplo se estiver no corpo pois la os desenhos vermelhos nessecitavam de um preto aoredor assim sendo um metodo adotado por todos os dotes artistico da antiguidade até os dias de hoje.
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.

Em algumas ocasiões o contorno pode ser iguinorado ,mas é nessesário para mostrar as divisas dos pixel.vejamos como seria uma espada sem contorno.
- Espada Negra (criado por Catchup,Recriado por Kamaitachi).
- Espada Negra sem Contorno (mesmo criador).

Observe que sem o contorno a imagem apresenta um maior realismo ou seja algo mais 2D e com contorno tende de mostra um modo mais anime.

Sabemos agora a função e como utilizar o contorno para seus futuros projetos.
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Seg 14 Fev 2011, 7:40 pm


Capitulo 16 - Textura Avançada

Vamos aprender em mais um capitulo de pixel art,mas agora não utilizando o basico em tudo de um modo de pintar vamos passar a fazercriações mais elaboradas,detalhistas ou seja criações avançadas,mas primeiramente temos que aperfeiço algo que exige acima de tudo que é a paciência e a tal conhecida como "Textura Avançada".
A Textura Avançada é um dote em 2D elaborado com a função de expressar o maio realismo possivel pelo meio do pixelart simples de fazer e que exite tempo.

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.

Tudo é base,é simples só desfocando (o problema é o tamanho quanto maior mais dificil trabalhar com a iluminação e textura 3D veja um resultado em imagens pequenas.

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.

Percebem como podemos fazer uma textura avançada? Caso ainda tenha duvida vá observando as imagens logo percebera que os detalhes estão nos reflexo de luz.

avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  Catchup em Sex 25 Fev 2011, 9:20 pm


Capitulo 17 - Texturas Avançadas/Pratica

Vamos por na pratica todos os capitulos passados agora sobre textura metalica em 1 obra.
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?

Textura avançada nunca foi dificil,apenas paciência com as imagens pequenas e teremos um otimo resultado, lembrando que estamos lidando apenas com a textura metalica.
_______________________________________________________________________________________________________________________

Exercicios


Novos exercicios com o objetivo de analizar apenas sua capacidade e acompanhar sua evolução assim tendo uma abilidade em destaque para se torna um futuro Dev.
Quero que vocês bolem um elmo,armadura,etc... de suas escolha utilizando a textura metalica acima nela (conta reflexo e curvas com efeito de luz).
Não há prazo de entrega de exercicio e sempre avaliarei semanalmente os trabalhos para atualizalos.
avatar
Catchup
Desenvolvedor(a)
Desenvolvedor(a)

Mensagens : 138
Data de inscrição : 19/07/2010
Idade : 25

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Aulas] - O basico do pixelart

Mensagem  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