Lucasmml

.

Será um prazer tornar a ajudar nessa nova etapa do Xtibia ❤️
 
#MakeEkzGreatagain

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

Vamos lá, vou comentar rapidamente todos os pontos primordiais que você deve prestar atenção para ter um resultado final de sua sprite aprimorado.
Siga os seguintes passos: Procure achar uma imagem referencia bem dinâmica para tentar representar todos os pontos característicos da imagem na sprite. Busque cores vivas, tente fugir de cores acinzentadas. Comece a sprite fazendo um rascunho em um fundo escuro, faça isso utilizando o pincel, ferramenta padrão do paint, fundo preto apenas para o rascunho, quando achar que o rascunho tem o formato que você imagina, troque o fundo para um claro e faça as alterações necessárias para arrumar o outline e comece a sombrear a sua sprite.(outline é o contorno da sprite e é necessário para objetos móveis [que se movem no caso]) Não fique preso ao outline, crie a sprite e ao longo do trabalho você vai ajustando o contorno da maneira que mais o agradar, se preocupando logo de cara com o outline você só irá perder tempo e ficar frustrado, ainda mais se você o estiver fazendo pixel por pixel. Você tem que ter um conjunto de fatores previamente trabalhados para que possa investir no outline, você precisa ter uma luz e sombra correta para entender/visualizar o formato que você quer alcançar e a partir dai trabalhar em um contorno final. No rascunho você pode já jogar as cores básicas e montar um esquema primário de volume (volume é utilizado para dar a ideia de massa na sprite, volume é feito adicionando tons claros sobre os escuros) no rascunho você também pode tentar adicionar as características da imagem referencia, mas nada muito trabalhado, você tem que ter uma visão da sprite primeiro, antes de sair trabalhando a fundo nela. Feito tudo isso, busque dar forma à sprite, lembre-se que a luz vem do noroeste e que o AA (Anti-Aliasing) é seu amigo, ele está ai para deixar suas bordas mais suaves, afiadas e server para criar elementos dentro da sprite de forma suave. Texturas vocês irão aprender com o tempo, busque texturas na internet.. jogue no paint, aproxime a imagem e analise e tente representar na sprite. Não crie sprites lado a lado com uma que você admira, sua mente vai fazer você copiar a sprite alheia e você será acusado de ripping por nada. Espero que meu comentário tenha servido para alguma coisa
 
 

Meu video exemplifica tudo o que eu disse a cima.



Atenciosamente,
Lucas Melo.

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

Vamos lá, vou comentar rapidamente todos os pontos primordiais que você deve prestar atenção para ter um resultado final de sua sprite aprimorado.
Siga os seguintes passos: Procure achar uma imagem referencia bem dinâmica para tentar representar todos os pontos característicos da imagem na sprite. Busque cores vivas, tente fugir de cores acinzentadas. Comece a sprite fazendo um rascunho em um fundo escuro, faça isso utilizando o pincel, ferramenta padrão do paint, fundo preto apenas para o rascunho, quando achar que o rascunho tem o formato que você imagina, troque o fundo para um claro e faça as alterações necessárias para arrumar o outline e comece a sombrear a sua sprite.(outline é o contorno da sprite e é necessário para objetos móveis [que se movem no caso]) Não fique preso ao outline, crie a sprite e ao longo do trabalho você vai ajustando o contorno da maneira que mais o agradar, se preocupando logo de cara com o outline você só irá perder tempo e ficar frustrado, ainda mais se você o estiver fazendo pixel por pixel. Você tem que ter um conjunto de fatores previamente trabalhados para que possa investir no outline, você precisa ter uma luz e sombra correta para entender/visualizar o formato que você quer alcançar e a partir dai trabalhar em um contorno final. No rascunho você pode já jogar as cores básicas e montar um esquema primário de volume (volume é utilizado para dar a ideia de massa na sprite, volume é feito adicionando tons claros sobre os escuros) no rascunho você também pode tentar adicionar as características da imagem referencia, mas nada muito trabalhado, você tem que ter uma visão da sprite primeiro, antes de sair trabalhando a fundo nela. Feito tudo isso, busque dar forma à sprite, lembre-se que a luz vem do noroeste e que o AA (Anti-Aliasing) é seu amigo, ele está ai para deixar suas bordas mais suaves, afiadas e server para criar elementos dentro da sprite de forma suave. Texturas vocês irão aprender com o tempo, busque texturas na internet.. jogue no paint, aproxime a imagem e analise e tente representar na sprite. Não crie sprites lado a lado com uma que você admira, sua mente vai fazer você copiar a sprite alheia e você será acusado de ripping por nada. Espero que meu comentário tenha servido para alguma coisa
 
 

Meu video exemplifica tudo o que eu disse a cima.



Atenciosamente,
Lucas Melo.

Vamos lá, vou comentar rapidamente todos os pontos primordiais que você deve prestar atenção para ter um resultado final de sua sprite aprimorado.
Siga os seguintes passos: Procure achar uma imagem referencia bem dinâmica para tentar representar todos os pontos característicos da imagem na sprite. Busque cores vivas, tente fugir de cores acinzentadas. Comece a sprite fazendo um rascunho em um fundo escuro, faça isso utilizando o pincel, ferramenta padrão do paint, fundo preto apenas para o rascunho, quando achar que o rascunho tem o formato que você imagina, troque o fundo para um claro e faça as alterações necessárias para arrumar o outline e comece a sombrear a sua sprite.(outline é o contorno da sprite e é necessário para objetos móveis [que se movem no caso]) Não fique preso ao outline, crie a sprite e ao longo do trabalho você vai ajustando o contorno da maneira que mais o agradar, se preocupando logo de cara com o outline você só irá perder tempo e ficar frustrado, ainda mais se você o estiver fazendo pixel por pixel. Você tem que ter um conjunto de fatores previamente trabalhados para que possa investir no outline, você precisa ter uma luz e sombra correta para entender/visualizar o formato que você quer alcançar e a partir dai trabalhar em um contorno final. No rascunho você pode já jogar as cores básicas e montar um esquema primário de volume (volume é utilizado para dar a ideia de massa na sprite, volume é feito adicionando tons claros sobre os escuros) no rascunho você também pode tentar adicionar as características da imagem referencia, mas nada muito trabalhado, você tem que ter uma visão da sprite primeiro, antes de sair trabalhando a fundo nela. Feito tudo isso, busque dar forma à sprite, lembre-se que a luz vem do noroeste e que o AA (Anti-Aliasing) é seu amigo, ele está ai para deixar suas bordas mais suaves, afiadas e server para criar elementos dentro da sprite de forma suave. Texturas vocês irão aprender com o tempo, busque texturas na internet.. jogue no paint, aproxime a imagem e analise e tente representar na sprite. Não crie sprites lado a lado com uma que você admira, sua mente vai fazer você copiar a sprite alheia e você será acusado de ripping por nada. Espero que meu comentário tenha servido para alguma coisa
 
 

Meu video exemplifica tudo o que eu disse a cima.



Atenciosamente,
Lucas Melo.

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

SteamPunk Drone:

Animation (WIP):

Vamos lá, vou comentar rapidamente todos os pontos primordiais que você deve prestar atenção para ter um resultado final de sua sprite aprimorado.
Siga os seguintes passos: Procure achar uma imagem referencia bem dinâmica para tentar representar todos os pontos característicos da imagem na sprite. Busque cores vivas, tente fugir de cores acinzentadas. Comece a sprite fazendo um rascunho em um fundo escuro, faça isso utilizando o pincel, ferramenta padrão do paint, fundo preto apenas para o rascunho, quando achar que o rascunho tem o formato que você imagina, troque o fundo para um claro e faça as alterações necessárias para arrumar o outline e comece a sombrear a sua sprite.(outline é o contorno da sprite e é necessário para objetos móveis [que se movem no caso]) Não fique preso ao outline, crie a sprite e ao longo do trabalho você vai ajustando o contorno da maneira que mais o agradar, se preocupando logo de cara com o outline você só irá perder tempo e ficar frustrado, ainda mais se você o estiver fazendo pixel por pixel. Você tem que ter um conjunto de fatores previamente trabalhados para que possa investir no outline, você precisa ter uma luz e sombra correta para entender/visualizar o formato que você quer alcançar e a partir dai trabalhar em um contorno final. No rascunho você pode já jogar as cores básicas e montar um esquema primário de volume (volume é utilizado para dar a ideia de massa na sprite, volume é feito adicionando tons claros sobre os escuros) no rascunho você também pode tentar adicionar as características da imagem referencia, mas nada muito trabalhado, você tem que ter uma visão da sprite primeiro, antes de sair trabalhando a fundo nela. Feito tudo isso, busque dar forma à sprite, lembre-se que a luz vem do noroeste e que o AA (Anti-Aliasing) é seu amigo, ele está ai para deixar suas bordas mais suaves, afiadas e server para criar elementos dentro da sprite de forma suave. Texturas vocês irão aprender com o tempo, busque texturas na internet.. jogue no paint, aproxime a imagem e analise e tente representar na sprite. Não crie sprites lado a lado com uma que você admira, sua mente vai fazer você copiar a sprite alheia e você será acusado de ripping por nada. Espero que meu comentário tenha servido para alguma coisa
 
 

Meu video exemplifica tudo o que eu disse a cima.



Atenciosamente,
Lucas Melo.

Dromedary Mount


Requisitos para obter o mount
Fist on a Stick
Como obter o Fist on a Stick
Você terá que ir até Ankrahmun e depois na Tumba de Horestis (onde está circulado em vermelho na imagem a seguir):
 

 
Você terá que enfrentar um dos seguintes monstros para obter o item;
Sandstone Scorpion Tomb Servant É díficil conseguir esse item. Se você conseguir não só o item, mas o mount também, jogue na mega-sena.
 
Localização Dromedary
Para encontrar um Dromedary, basta vagar pelo norte de Ankrahmun ou oeste de Darashia que você achará.
 
Obtendo o mount
Você só conseguirá o mount se você tiver o item necessário. Caso tenha, vá até um Dromedary e sem matá-lo, use o item nele.

Essa árvore foi redimensionada, engrossei o tronco e fiz alguns ajustes. Mas ela precisa ser melhorada =). Quem quiser participar pode editá-la. O melhor edit irá para o portal na próxima semana!

Gutorb, peguei as redeas aqui da seção novamente para voltar a fazer a coisa acontecer por aqui, estarei a disposição para tirar as dúvidas da galera na medida do possível, voltarei com os concursos em breve também para recriar a dinâmica da seção. Continue postando, tente sempre fugir do padrão, quanto mais difícil for, será melhor, assim você irá evoluir mais rápido, pois ficar na mesmice não faz ninguém crescer.

Saudações!
 
Estas são minhas primeiras sprites, sintam-se livres para criticar pois será deveras construtivo.
 
Meu objetivo era desenhar e sombrear os pokémons ao estilo tibia, razão pela qual suas dimensões não são tão fieis ao anime.
 
Seguem as sprites feitas no paint:
 

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

Revivendo meu tópico com algo recente desta vez

2 Headed Giant
 

Resultados dos meus treinos hihi
Fiquem a vontade para usar!

























 

Revivendo meu tópico com algo recente desta vez

2 Headed Giant
 

Revivendo meu tópico com algo recente desta vez

2 Headed Giant
 

Olá comunidade,

O meu nome é Lucas Melo, conhecido como LuquitossML, eu recebo muitas mensagens aqui no fórum de membros que gostariam de auxilio para a criação/edição de uma sprite e outros com interesse de aprender a spritear, como eu não tenho tempo para ajudar todo mundo, decidi fazer um tutorial, neste tutorial eu vou compilar tudo aquilo que você precisa saber para começar a arte da perspectiva 45°. Aqui nós vamos aprender passo a passo para a criação de uma sprite.


Tutorial Básico sobre quase tudo aquilo que você precisa saber.


Introdução:

Definição Geral. No Tibia, assim como todos os jogos, os elementos gráficos são chamados de Sprites. Para criar estes sprites, utilizamos uma técnica de design gráfico conhecida pelo nome de Pixel Art.

Pouca gente conhece essa arte, que surgiu com os primeiros videogames. Pixel art significa fazer Arte através da utilização de Pixels.

Pixel são os pequenos quadrados que compõe as imagens gráficas de qualquer sistema televisual. A organização correta de pixels pode gerar formas que podem ser reconhecidas como animais, objetivos, fotografias, plantas, animações variadas, etc.
 
Técnicas de pixel art Pixel art conta com algumas técnicas diferentes de qualquer outro tipo de arte, por ser uma arte de baixa resolução.
Dithering:
É o uso de padrões de pixels para se criar a ilusão de que existem mais cores do que realmente se estão sendo usadas. Também é usado para se fazer texturas.
Anti-Alias (ou AA):
Técnica para se suavisar linhas, usando tons médios para reduzir o contraste entre a cor da linha e a cor que envolve a linha.
Sombreamento:
O sombreamento em pixel art deve ser feito como em objetos reais, com base em uma fonte de luz. Sombrear a figura das bordas para o centro é um erro bastante comum, chamado de Pillow Shading (ou sombreamento 'travesseiro')
Salvando deu Trabalho: Para se salvar um trabalho seu no computador, deve-se usar o formato correto.
 

 
JPG é um formato que usa um tipo de compressão bom apenas para imagens suaves e contínuas. Se usado no pixel art, causa uma enorme perda de qualidade



BMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesado



GIF e PNG são os formatos mais apropriados. GIF, com uma paleta limitada a 256 cores, é o formato ideal, já que é o menor e dificilmente o pixel art terá tantas cores.

Se você usa o programa Paint para fazer pixel art, salve como PNG, pois quando o Paint salva como GIF, ele usa uma paleta de cores padrão, e causará alterações de cores no seu pixel art.
Categorias: Pixel art é normalmente dividido em duas categorias.



Isométrico é o pixel art que imita uma visão em 3 dimensões, mas que não possui perspectiva.



Não-isométrico é qualquer outro tipo de visão como Front View (frente) ou Top View (de cima)
Como começar a fazer Pixel Art? Existem vários programas para se fazer Pixel art. O mais simples deles é o conhecido Microsoft Paint, ou como dizem: MS Paint. A interface do Paint, é muito muito simples, e com o tempo você entenderá cada uma das funções que ele é capaz de realizar.
Ferramentas Básicas: LUPA - Amplia ou reduz o CANVAS (Área onde se desenha ou Área selecionada).
LÁPIS - Ferramente capaz de pintar um pixel por vez.
BORRACHA - Apaga o que foi desenhado.
LATA DE TINTA - Preenche formas com cores.
Controles Básicos.
CTRL + A = Seleciona todo o Canvas.
CTRL + C = Copiar Canvas.
CTRL + E = Abre a Janela de Atributos do Canvas.
CTRL + F = Fullscreen
CTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPA
CTRL + R = Abre Janela de Inverter ou Girar o Canvas.
CTRL + T = Ocultar Barra de Ferramentas.
CTRL + V = Colar Canvas.
CTRL + Z = Desfazer ação.

Desenvolvimento:


Agora que já temos uma abordagem geral sobre o tema, vamos aprofundar nossos estudos.

Luz e Sombra na perspectiva 45°. Para quem está começando é essencial ter noção de como a luz se comporta na perspectiva que focamos. De modo simples, a luz tem sua fonte a 45 graus acima do objeto, ou seja, a parte "noroeste" do sprite precisa sempre estar mais iluminado do que a parte "sudeste". Vejamos:



Obs: Virar a sprite horizontalmente permite verificar se a luz está se comportando da maneira correta (Vindo de uma fonte que está a esquerda e acima do sprite - ou seja, a noroeste )

Lembrem-se de sempre considerar que a parte sudeste não é totalmente escura. Pois a parte da luz que vem do noroeste e chega até sudeste cruzando o sprite, pode refletir/refracionar e iluminar a parte sudeste, mas lógicamente, essa luminosidade será menor.
 

 
Uma das regras mais importantes e obrigatórias caso seu intuito seja seguir o padrão Tibia: A luz vem do noroeste, mas mesmo assim, ainda existe luz vinda das demais fontes naturais e refletidas pelas superfícies. Sendo assim, seu sprite recebe luz de todas as direções, mas preferencialmente pelo Noroeste.
Anti-Aliasing (AA).
Quando trabalhamos com pixels percebemos que as bordas dos desenhos costumam aparentar muito o fato de que os pixels são de fato quadrados. O problema de muitos desenvolvedores gráficos no começo do pixel art, foi justamente no momento em que precisavam desenhar elementos que não seguissem o padrão quadrado dos pixels, como por exemplo Círculos, Esferas, e bordas redondas. Para muitos, a solução desse problema surgiu com a criação da ténica de Anti-Aliasing ou simplesmente AA.


O AA foi um grande avanço no desenho de formas esféricas ou outras que precisassem passar a idéia de uma superfícia lisa, sem irregularidades. Mas como isto é possível se todo sistema televisual utiliza PIXELS para formar gráficos? A resposta é simples: O AA utiliza pixels que misturam as linhas com o plano de fundo em que elas estão. Quando isto é feito, nossos olhos não conseguem distinguir as irregularidades dos pixels. Em primeiro lugar devido ao tamanho dos pixels e segundo lugar devido a uma boa suavização de bordas. Vejam no exemplo:
http://img507.imageshack.us/img507/8484/aaexampleok2zl9.png


Obs: Créditos da imagem: Galiant

Na esquerda da 2° imagem, vemos o circulo formado de vários pixels pretos. Suas bordas estão "cruas" e sem AA. Assim, mesmo no aumento menor é possível perceber as falhas de suas bordas redondas.

Na direita da imagem vemos o mesmo circulo após a aplicação da técnica de Anti-Aliasing. E agora, no aumento menor, não se pode mais ver as falhas das bordas.
Como fazer Anti-Aliasing?
O Anti aliasing é simples apesar de não parecer. Tudo se baseia em 3 passos:

1 - Observar primeiro o desenho que se quer suavizar.
2 - Observar o fundo no qual este desenho está inserido.
3 - Adicionar cores que simbolizam a mistura das cores do desenho, com o seu fundo.

No exemplo acima (dos circulos) tinhamos um circulo PRETO, num fundo BRANCO, então apenas adicionamos tons de CINZA (PRETO + BRANCO) para suavizar a borda.

No caso de uma sprite, o AA é feito internamente, ou seja, é feito dentro do outline/lineart da sprite, isso é feito utilizando no caso tons mais escuros nas partes cerrilhadas da sprite. Vejamos:



Como podem ver na direita, a disposição dos pixels escuros nas partes mais cerrilhadas é o chamado AA, não é necessário que seja utilizado apenas preto para se fazer o Anti-Aliasing. Exemplo: "Ahh luquitos, eu quero fazer algo roxo, como eu faço AA nele?" Simples, apenas faça os passos iniciais para se fazer uma sprite:
Faça um outline (contorno do sprite) Comece a pintar. comece a fazer o AA. (no caso do meu amigo da sprite roxa, utilize tons roxos escuros nas partes cerrilhadas da sprite) Logo depois do AA pronto faça a Iluminação, no caso, Luz e Sombra. Depois de todos esses passos, veja se não há mais nada para arrumar e "Voilá" Sua sprite está pronta. Conclusão:

O Investimento do Tempo e Esforço.
Trabalho em pixel art é demorado e muitas vezes de difícil processo. Quanto mais tempo você gasta trabalhando, e, em seguida, um pedaço de refino, Melhor será sua aparência. Isso muitas vezes pode levar horas, mas as recompensas valem a pena.
Se você não está preparado para investir o tempo em seu trabalho, Ele não ira fluir, independentemente do número de tutoriais que você lê.
Nada da certo na primeira vez?
As primeiras interações com o seu outline/lineart ou imagem (sprite) sombreada pode muitas vezes ser frustrantes. Não desanime, mesmo os erros aparentemente mais hediondos podem ser editados em algo decente. Uma vez que a última versão de sua sprite é completa, sentar e dar uma boa olhada nela é essencial. Este reajuste geralmente divide-se em um simples ciclo de 3 etapas:

1 - O que aparentemente há de errado?
2 - Como posso corrigir?
3 - A fixação dele.
O uso de referências.
Muitas vezes, você pode compensar a falta de conhecimento sobre algum objeto através de imagens. Estes podem ser encontrados a partir de uma variedade de fontes, a mais imediata a ser através de um motor de busca na internet.Você também pode encontrar cores novas e interessantes a partir de fotografias e arte dos outros pixel. Lembre-se que o plágio direto, incluindo a edição do trabalho de outras pessoas, é distintamente ilegal.

Espero que o tutorial tenha sido útil para alguém, caso o tutorial tenha uma grande repercussão e o pessoal mais duvidas, eu irei continuar atualizando ele com um conteúdo mais aprofundado sobre o tema.

Obrigado a equipe do Xtibia pelo espaço.

Atenciosamente,
LuquitossML.

Revivendo meu tópico com algo recente desta vez

2 Headed Giant
 

Até tatuado o maluco é!
Ele ta pelado? kkkkkkkkkkkk