Ir para conteúdo
  • Cadastre-se

TUTORIAL [TUTORIAL] Quando preocupar-se com as cores? - Spriting


Posts Recomendados

Falae pessoal do TK!

Hoje to a milhão e vim trazer mais um tutorial para os spriters de plantão! haha

 

Vamos lá:

 

Quando eu devo me preocupar com cores?

Bem, essencialmente o que vem é, que cores a peça precisa ter? Então, enquanto eu prossigo, o quão longe eu posso ir com estas (até é claro eu precisar adicionar mais sombras). Aí é quando a mistura ocorre.
-Adarias

Esse é um método comum de criação de paleta para uma peça. Aqui vai um exemplo do que ele está falando:

palettegrowth.png

Como a peça se torna mais complexa, torna-se necessária a criação de cores adicionais para alcançar o sombreamento mais avançado, ou para colorir novos elementos da imagem ou detalhes.

Outro método consiste em criar a peça em tons de cinza, e adicionar cor posteriormente. Isto é possível porque um valor relativo é uma preocupação maior do que com o tom, porque o tom pode ser mais facilmente alterado mais tarde, após as relações de valor serem estabelecidas.

zkjxie.gif

Pessoalmente eu acho mais fácil de acompanhar cores enquanto a peça avança, por isso eu prefiro o primeiro método.




Contagem de cores

Você deve achar que pixel artistas muitas vezes defendem uma contagem baixa de cor. Você deve assumir que isso é uma tradição de dias velhos de pixel art deixada para trás, quando os consoles de vídeo game só podiam disponibilizar certa quantidade de cores.

super-mario-bros.gif

Se os computadores modernos podem facilmente exibir centenas de cores, por que você não deve usar todas elas? Na verdade, usar paletas pequenas não é uma tradição ultrapassada do pixel art, e há razões muito lógicas por trás desta prática.

Coesão - Quando você estiver usando menos cores, as mesmas cores reaparecerão por toda a peça com mais frequência. Uma vez que diferentes áreas do trabalho compartilham as mesmas cores, a paleta envolve as peças, unificando o trabalho.

Controle - Quanto menor a paleta, mais fácil de gerir. Você pode, e provavelmente irá, querer ajustar uma cor mais tarde. Se você tem 200 cores, vai levar muito mais tempo para fazer os ajustes, porque por mudar uma cor você muda toda a relação dessa cor com as cores vizinhas na sua paleta, e ajustá-la significa mudar as relações entre as cores e seus vizinhos! Você pode ver como isso rapidamente acrescenta-se a um monte de trabalho. Com uma pequena paleta, o efeito de mudar uma única cor é mais substancial, e existe menos micro relações a se preocupar.




Tom, saturação e luminosidade

Tom:
O Tom refere-se à identidade de uma cor. Se uma cor é definida como azul, vermelho, laranja, etc. Depende da sua tonalidade:

1320620511-ima.png

Na foto acima, o tom é representado ao longo do eixo-x.

Assim como você pode mudar a forma de como clara ou escura uma cor aparece por rodeá-la com pixels claros ou escuros, o tom percebido de uma cor depende do seu ambiente. Aqui temos um cinza completamente neutro, médio:

grey.png

Nesta foto (um detalhe desta peça por iLKke) o verde nas árvores não é realmente verde em si, mas o mesmo cinza da imagem anterior:

notgrey.png

Porque o fundo é tão roxo (que é o oposto do verde na roda de cores), o cinza parece mais verde do que realmente é.

O tom será um conceito importante depois, quando falarmos de hue -shifting.

Saturação:

A saturação é a intensidade de uma cor. Quanto menor a saturação, mais próximo fica a cor do cinza:

1320620511-ima.png

O problema mais comum que novos artistas encontram se refere à saturação. É o uso de cores muito saturadas. Quando isso acontece, as cores começam a queimar os olhos. Este pode ser um problema em qualquer mídia, mas porque as cores em pixel art são feitas de luz, ao invés de pigmento como na pintura, o potencial para cores serem muito claras ou irritantes é muito maior. Observe como as cores na segunda imagem são muito mais fáceis para os olhos:

dragons.gif

Luminosidade (brilho):

Luminosidade (também conhecida como brilho ou valor) é o quanto mais clara ou mais escura é uma cor. Quanto maior a luminosidade, mais perto fica a cor do branco. Se a luminosidade é 0, então a cor é preta.
Aqui está uma paleta organizada como uma escala de luminosidade para sua aprendizagem visual:

rampredone.png
Luminosidade baixa (cores mais escuras)na esquerda, alta (cores mais brilhantes) na direita

Em uma dada paleta, você vai querer ter uma ampla gama de valores. Se você só tem cores no mesmo intervalo de luminosidade, então você não será capaz de criar bom contraste. Uma gama completa de valores permite que você use destaques, meios-tons e sombras. A diferença entre o brilho de duas cores é conhecido como contraste. Um problema comum em artistas recentes é não ter contraste suficiente. Aqui está um exemplo de uma imagem que o contraste é muito baixo:

puggishlowc-1.gif

E essa mesma imagem, ajustada. Logo, os valores estão espalhados de forma mais uniforme do claro para o escuro:

puggish.gif

O valor de uma cor é um número definido, mas as cores podem parecer mais claras ou mais escuras dependendo do seu plano de fundo. Por esta razão, você não vai sempre querer usar sua cor mais brilhante para toda parte iluminada. Uma cor que faz um bom destaque em um objeto pode ser muito brilhante para uso em um objeto mais escuro.

Luminosidade é especialmente relevante para pixel art: O brilho de um pixel ou linha determina o quanto grosso ele aparece:

lumthick.png

O primeiro exemplo é uma simples linha preta. A largura da linha parece consistente. Abaixo disso é uma linha com pixels que variam de brilho. Observe como a linha aparece mais fina no centro em 1x.

Rampas de cores

A rampa de cores é um grupo de cores que podem ser utilizadas em conjunto, organizadas de acordo com a luminosidade. Uma paleta pode consistir de uma rampa única com muitas rampas diferentes.

Aqui está uma paleta:

palette.png

E aqui está essa mesma paleta, organizada de acordo com as rampas de sua cor (as quais existem duas):

paletteramp.png

Não é necessário que você crie um modelo como o descrito acima (embora alguns artistas acharem útil). O que é importante é que você entenda quais as relações de suas cores, isto é, o que suas rampas são.

Não é necessário que uma cor se restrinja a uma só rampa. Muitas vezes, rampas irão compartilhar cores. Frequentemente, a cor mais escura ou mais clara irá pertencer à maioria ou a todas as rampas da paleta, como no exemplo acima, em que ambas as rampas partilham os mesmos tons mais escuro e mais claro.

Também é possível meios-tons trabalharem em rampas múltiplas. Nestes casos, a cor versátil toma o lugar de duas ou mais cores diferentes, auxiliando na conservação da paleta. No caso da rampa de multi-sombras e luzes, os extremos na luminescência permitem a cor a ser flexível (porque eles se aproximam do preto ou branco). Desde que os meios-tons não têm esta vantagem, eles muitas vezes são as cores mais neutras, o que significa que estão mais perto de marrom ou cinza.

Aqui está uma paleta que usa um tom de cinza para unir as lacunas em várias rampas:

greyz.png

Você também tem que ser cuidadoso sobre ter cores em uma rampa que não se encaixam. Se uma cor não pertence à rampa, então ele tem o potencial de perfurar a imagem, que é um erro grave em que a cor, ao invés de trabalhar como parte da imagem, parece separar-se dela, e parece quase que ela está sentada em cima da imagem. Isto é geralmente devido à saturação muito alta, ou pelos confrontos de tons com tons vizinhos, assim criando um eyeburn.

eyeburn2.png
A imagem acima mostra um eyeburn criado por uma cor com saturação muito alta.

eyeburn.png
... e nesta imagem, o eyeburn é criado pelo confronto do verde com o roxo. A tonalidade deve logicamente seguir os seus vizinhos na rampa.


Hue shifting

Hue Shifting" se refere a transição de cores numa paleta. Uma paleta sem hue shifting é conhecida como "paleta reta". Nas paletas retas, só a luminosidade muda, enquanto em "paletas com hue shifting", o tom e a luminosidade mudam.

straightramp.png

rampredone.png

A primeira paleta é uma paleta reta verde. A segunda imagem é uma paleta verde com hue shifting aplicado. Ao usar hue shifting, una seus destaques a uma determinada cor (amarelo, no exemplo acima), e mova as cores mais escuras em direção a uma segunda cor (eu escolhi azul no exemplo acima). O hue shifting é usado porque rampas retas são entediantes e não refletem a variedade de cores que nos vemos na realidade, e o hue shifting pode adicionar o contraste de cores sutis dentro de uma rampa.

 

Ta ai pessoal, mais um tutorial muito bom sobre cores em sua pixel art, espero que gostem e que tirem muito proveito deste tópico haha

 

Obrigado pela atenção e até o próximo tutorial

 

Créditos:

Pixelaria (tutorial)

Thayam (trazer para o TK)

 

Link para o post
Compartilhar em outros sites

Excelente tutorial.

 

Seu tutorial foi aprovado, você recebeu um ponto de reputação e seu tópico foi movido para a área correta. :accept:

 

Esperamos mais conteúdos como este. ^^

Te ajudei?? REP + e ficamos quites... <ahttp://www.tibiaking.com/forum/uploads/emoticons/default_happyy.png' alt=';D'>

Atenciosamente,

Daniel.

Abraços!

Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

  • Conteúdo Similar

    • Por Underewar
      Tutorial: Criando um Sistema de Enviar efeito com OTClient.


       
      Neste tutorial, vamos criar um sistema simples de Enviar efeito no OTClient.
      Este sistema permitirá que os jogadores ativem um efeito especial e vejam uma janela ao clicar em um botão específico.
      Pré-requisitos:
      Ambiente de Desenvolvimento:
      Certifique-se de ter um ambiente de desenvolvimento configurado com OTClient Edubart. Conhecimento Básico em Lua:
      Familiaridade com a linguagem de script Lua.
       
      Passo 1: Estrutura do projeto
       
      Organize seu projeto conforme abaixo:

      OTC / MODS



      Passo 2: Criando a Interface Gráfica (OTUI)

      game_pass.otui
      Repare que em nossa interface nossos botões de ação entram no caminho do module e iniciam uma função que esta disponivel em nosso game_pass.lua (Client-Side)

       



      Passo 3: Criando funções Client-Side

      Agora com as funções criada podemos chamar elas de acordo com a necessidade em nosso arquivo de interface.
      Por exemplo a função effect() que foi chamada em nosso arquivo de interface.otui agora é criada aqui para mostrar o efeito ao jogador.

      game_pass.lua
       
       
      Passo 4: Registrando o novo Mod

      Agora podemos registrar e iniciar nosso modulo usando o arquivo de configuração

      game_pass.otmod
       

      Feito isso ja podemos ver nosso module no client e enviar opcodes através do gameprotocol e também receber o buffer para manipular os dados podemos utilizar :
      protocolGame:sendExtendedOpcode(14, "1")
      Basicamente oque estamos fazendo é armazenando o valor 1 na variaval 14 do ExtendedOpcode e futuramente podemos recuperar esse valor.

      Recuperamos esse valor em nosso server side data/creatuerscript/otc/game_pass.lua

      Verificando se o opcode é 14 se for 14 então fazemos x ação.

      Show, tendo isso em mente para que o nosso client-side consiga receber com sucesso o efeito enviado ao jogador então utilizamos 

      Passo 5: Criando o Server-side responsavel por enviar o efeito correto ao jogador dependendo do opcode selecionado no nosso cliente.

      data/creaturescripts/otc/game_pass.lua
       
      Passo 6: Registrando o evento para evitar erros futuros!
      Para que tudo funcione corretamente sem erros é  necessário registrar o evento no creaturescript.xml / login.lua

      creaturescript.xml
      <event type="extendedopcode" name="GamePass" script="otc/game_pass.lua" />
      login.lua
          player:registerEvent("GamePass")  


      Ótimo agora ao selecionar o menu recompensa o jogador recebera um efeito.

      Espero que tenha ficado claro como usar Opcodes/ExetendedOpcodes.

      Arquivos usados no tutorrial:
      OTC MODULE
      game_pass.rar
      Creaturescript
      game_pass.lua

      Vi muitos tutoriais desatualizado então resolvi trazer esse!
      Reparem que nesse caso passamos creature como parametro do buffer isso porque precisamos enviar um efeito no player.

      Melhorando a formatação com JSON Encoder

       
       
    • Por guiferr
      Alguem me ensina a descompilar as sprites do ot pokemon ou me manda ela atualiazada 2023? por favor
       
    • Por ArisenCodex
      Olá galera do TK, após um bom tempo parado resolvi voltar a me aventurar nesse mundo de arte digital, dessa vez não me limitando apenas ao estilo original do Tibia, estarei postando aqui as sprites/pixel arts que eu for criando, aceito críticas construtivas e sugestões desde colaborem para meu desenvolvimento. Inicialmente estarei fazendo pixel art/sprites simples e vou aumentando a qualidade conforme for evoluindo, enfim, espero que gostem.
       
      Uma casca de banana
      Uma roda de queijo cortada (sei que essa precisa de mais polimento, mas por enquanto é oque consigo fazer)
      Estarei atualizando o post conforme mais pixel art/sprites forem sendo criadas.?️
    • Por Foxy0
      Estou pensando em criar um ndbo, andei estudando como meche com sources,mapa,programaçao etc mais estou sem sprites queria sprites de ndbo para adicionar em meu servidor!, se alguem poder doar algumas sprites agradeço ( um client esta otimo  so quero algumas vocaçoes )
       
    • Por Anonymus Sprite
      Salve galera vi que tem pessoas vendendo esses programas que pega SPRITES de qualquer servidor sao 2 programas q estrao de graça, vim trazer informações de como usá-los fiz um video com tudo q precisa espero q gostem !!! ?                                                                                                                                                                              
      https://www.youtube.com/watch?v=AjRg2SPteNQ  
×
×
  • Criar Novo...

Informação Importante

Confirmação de Termo