Jump to content

[Tutorial] Cesta Básica - Quase tudo que você precisa saber

Lucasmml

By Lucasmml
in Tutoriais de Spriting

 Share

Recommended Posts

Lucasmml

Lucasmml 157

Posted
Posted (edited)

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:

34i65co.gif

É 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):

20h0zgy.gif

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:

e9hky1.gif

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.

 

1zqvxpj.jpg

 

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

2ijhsvo.gif

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

2ijhsvo.gif

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.

do1lpt.png

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

1znn9dy.png

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:

ilumin.png


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.

 

luzga9.png

 

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

11h5q9f.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:

tuto.png


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.

Edited by Lucasmml
Link to comment
Share on other sites
Lucasmml

Lucasmml 157

Posted
  • Author
Posted

Insaend, eu posso sim te ajudar a continuar seus tutoriais, mas eu tenho em mente no caso do Cesta Basica, montar tipo uma compilaçao em um unico topico para nao perder tempo como se fosse uma apostila mesmo, quero colocar nesse topico coisas auto explicativas que o cara já sai daqui spriteando coisas maneiras, vou refazer esse meu tutorial ainda, deixa-lo mais explicado..

Link to comment
Share on other sites
  • 3 months later...
  • 1 month later...
  • 3 months later...
  • 1 month later...
 Share
Go to topic listing
×
×
  • Create New...