Lucasmml 157 Posted April 28, 2013 Share Posted April 28, 2013 (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 artPixel 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 qualidadeBMP é um formato que apesar de manter a qualidade, acaba resultando em um arquivo muito pesadoGIF 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 = FullscreenCTRL + G = Cria uma grade de pixels nos aumentos de 6x e 8x da LUPACTRL + 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. Edited January 14, 2014 by Lucasmml Espiho 1 Link to comment Share on other sites More sharing options...
PsyMcKenzie 150 Posted April 28, 2013 Share Posted April 28, 2013 Ótimo tutorial Luquitoss, irá ajudar muitas pessoas. Bem detalhado, gostei. REP+ Link to comment Share on other sites More sharing options...
Alexclusive 687 Posted April 28, 2013 Share Posted April 28, 2013 Muito bom rapaz. Parabéns e obrigado pelo conteúdo! Tutorial aprovado e movido. Link to comment Share on other sites More sharing options...
Lucasmml 157 Posted April 30, 2013 Author Share Posted April 30, 2013 Obrigado pessoal, e só para avisar que dentre essa semana eu vou atualizar o tutorial com mais algumas coisas úteis que o pessoal pede muito... Link to comment Share on other sites More sharing options...
Insaend 155 Posted April 30, 2013 Share Posted April 30, 2013 ¬¬ se podia era me ajudar com os do Pontinho AUSHUASHAS! seja bem vindo a me ajudar ^^! PS: vc qr? Link to comment Share on other sites More sharing options...
Lucasmml 157 Posted April 30, 2013 Author Share Posted April 30, 2013 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 More sharing options...
Insaend 155 Posted April 30, 2013 Share Posted April 30, 2013 Ok ^^ aguardaremos essa revelação! ^^ Link to comment Share on other sites More sharing options...
AlexandreGiacobo 5 Posted April 30, 2013 Share Posted April 30, 2013 Obrigado pelo tutorial vai me ajudar a me tornar um spriter,pretendo treinar para refazer todas sprites do meu servidor. Obrigado por compartilhar! Link to comment Share on other sites More sharing options...
Desnecessario 59 Posted May 1, 2013 Share Posted May 1, 2013 O tutorial ta bem escrito mais ja existem tutoriais como esse , mesmo assim como disse o seu ta bem explicandinho.. parabéns ! Link to comment Share on other sites More sharing options...
crazyTs 0 Posted August 15, 2013 Share Posted August 15, 2013 Sou novo para aprender isso + queria saber e nao consigo Obr Rep+ vc vai ajuda quem ja sabe o basico !!! Link to comment Share on other sites More sharing options...
Avuenja 253 Posted September 17, 2013 Share Posted September 17, 2013 Simplesmente incrível, vou tentar colocar em prática tudo isto Lucas. Espero por mais cestas básicas! Abraços grande amigo. Link to comment Share on other sites More sharing options...
Lucasmml 157 Posted January 14, 2014 Author Share Posted January 14, 2014 Fazendo uma limpeza na Área de Tutoriais, resolvi dar uma atualizada no meu tutorial.. Vejam a cima as novidades. Link to comment Share on other sites More sharing options...
Desnecessario 59 Posted January 14, 2014 Share Posted January 14, 2014 LoL, que atualização você fez em, muito boa ! Link to comment Share on other sites More sharing options...
Emenson 0 Posted March 10, 2014 Share Posted March 10, 2014 (edited) Bom. Edited March 10, 2014 by Emenson Link to comment Share on other sites More sharing options...
Recommended Posts