Lucasmml

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 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.

Psy, você precisa melhorar o AA da lamina, e mexer no sombreamento, lembre-se que a iluminação vem do noroeste (vem do canto superior esquerdo), você pode suavizar mais essa linha central da lamina, e escurecer um pouco mais o lado direito da lamina.

Fiz um rascunho rápido aqui, estude os pixels que eu mudei:

Phobos e Zezenia são projetos separados mas são possui nenhuma richa entre eles, e foi bom você ter citado o phobos, no caso aquelas sprites que o phobos não aprova a entrada, elas vão parar no Zezenia, entenderam?, No caso o Galiant (André) que trabalha no phobos possui um monstro no zezenia dedicado a ele com a inicial do nick dele..que eu me lembre é um mamute. Resumindo o zezenia é todo sucateado kkkk

Os gráficos do zezenia são feitos apenas por doações, a maioria dos spriters que treinam e não possuem um projeto para investir as sprites, elas acabam parando no zezenia, entendeu? Eu e uma galera ia fazer parte de uma repaginada dos graficos do zezenia, quase tudo seria refeito, mas a administração não deu muita atenção, então seguimos caminho...

Ah, e só para deixar claro, para qualquer estagiário ou moderador, não me importo que alguém poste na minha galeria para pedir algo como o Vinerion fez, ou seja, eles não precisam ser punidos. Faço questão de ajudar qualquer um que me procurar ajuda aqui no fórum. Vinerion, Tente investir mais na iluminação/sombreamento, e usar tons mais opostos, para dar um contraste maior.. aqui segue o edit que eu fiz na tua sword. Edit Sword (Vinerion):

Poh, obrigado BrenoNeto. ;D E aqui vai uma sworzinha atoa.. Sword:

Blaze, Você tem ai um cenário bem rico em sprites, parabéns. E caso queria que eu avalie alguma sprite para possíveis melhorias, apenas me diga ;D, estou aqui para ajudar e reviver a área de Spriting. Ah e sim, faço das palavras do Insaend as minhas..

São com pensamentos desses iguais ao do Kaiser, que fazem pessoas como eu hesitar na hora de postar algum trabalho por aqui...

Como sempre, Skywar e Brund são reis do mapping. Falta fazer o dia de feira que eu falei heim...

Muito pelo contrario, lembro demais de você Sky, a gente conversava direto no skype, teve uma época que você ficava pedindo ajuda em umas sprites que você fazia..E você laug, sempre sumindo e criando varias contas, você não tem jeito mesmo..

Vital, obrigado novamente pela abertura de espaço para a galera conhecer mais sobre mim, e outros me conhecer kkk ;D

Pois é look, o goblin é meio old, a textura da roupa dele ficou meio zuadinha, esse goblin foi pra um concurso, dai eu fiz a cabeça e um corpo com uma roupa qualquer ;D, depois arrumo ele e posto aqui novamente.

Kkkk não é assim que funciona, primeiro você tente criar um outfit, e depois trabalhamos no desenvolvimento do outfit para você aprender.. Antialiasing é o seguinte, você tem que tentar fazer um outline suave para dar uma boa impressão para aqueles que vão ver tua sprite, ou seja, o antialiasing irá te ajudar a afiar superfícies, deixar bordas mais redondas, essas coisas... Resumindo em uma imagem o "segredo" do AA: No caso da imagem, o AA funciona afiando uma superfície com preto de fundo, e no caso da sprite você tem que fazer isso internamente, e muito suave para que o efeito funcione.., estude as duas sprites suas que eu editei, que você vai entender (eu espero) tudo isso que eu estou te falando.

Rafael, você tem que investir mais no AA (Anti aliasing) para deixar as superfícies mais planas, e alem do mais ser mais ousados nas laminas, ou seja, investir em reflexos e uma iluminação mais marcante.. exemplo: Edit: Caso você tenha entendido as coisas que eu disse, ok. Se não eu vou reunir um material para aprofundar minha explicação..

Ricardo, Tomei a liberdade de editar a tua sword, afinal, sem uma direção você não vai aprender Edit:

Kkkkk, pode deixar Insaend, vou tentar te ajudar ao máximo com essa galera ai Stone:

Você é realmente muito esforçado, lembro de você no perspective45, você teria futuro danilo..

Olá galerinha, Primeiramente me apresentando, me chamo Lucas Melo, conhecido como LuquitossML, por problemas técnicos eu perdi meu nick aqui no Xtibia por conta da minha ausência, faz muito tempo que não visito o fórum, e percebi que agora o Xtibia está investindo mais na área de spriting, vou tentar me dedicar para que essa área cresça cada vez mais, e faço questão de ajudar aqueles que realmente pretendem evoluir. Mas vamos ao que interessa...Neste meu humilde tópico, irei postar alguns de meus gráficos... A principio um Axe e um Goblin e um Giant inacabado, coisas aleatórias de alguns dos meus trabalhos.. Ao longo do tempo vou postando coisas mais complexas.. Axe: Goblin: Hill Giant: [e claro, não estão liberadas para uso (: ] Atenciosamente, LuquitossML.