.png.020ba42dce1a4aa16afd44c8368fd85d.png)
Como fazer Sprite.
-
Quem Está Navegando 0 membros estão online
Nenhum usuário registrado visualizando esta página.
-
Conteúdo Similar
-
Por Thayam
Fala ai meus amigos do TK!
Durante a noite recebi algumas PM's sobre alguns sprites feitos, e neles percebi alguns erros básicos, que eu também cometi e que você também irá cometer haha!
Então resolvi trazer este novo tutorial para a comunidade, que fala sobre "Coisas para se Evitar" na hora de fazer sua sprite, acredito que será uma mão na roda para aqueles que estão iniciando neste mundo
Enfim, chega de enrolar vamos lá:
Coisas para evitar na hora de criar sua sprite!
AA Ruim:
Muito AA (anti-aliasing demais) – você só quer usar o AA necessário para suavizar a borda. Se você usar muito, as bordas podem parecer borradas, e você perde a nitidez da linha:
Muito pouco AA – aqui o artista usou pixels independentes para facilitar a transição, mas ele apenas conseguiu embotar a borda um pouco. Ele podia ter feito uma transição mais suave usando linhas longas para mostrar uma transição mais gradual como no segundo exemplo:
AA banding - quando segmentos de AA se ligam com as linhas que estão suavizando, o AA banding ocorre. Estarei criando um tópico para melhor explicação do AA banding
Anti-aliasing (o temido pelos bravos jovens aventureiros haha )
A não ser que sua linha esteja perfeitamente horizontal, perfeitamente vertical, ou em 45 graus, as bordas de seus segmentos de linha, naturalmente, serão um pouco irregulares.
Por conta da natureza quadrada do pixel e do padrão de grade, estamos restritos a fazer linhas angulosas e curvas difíceis de retratar. AA é a contramedida correta nestas situações.
Dithering ruim:
Existem várias maneiras comuns em que o dithering é mal utilizado. O erro mais comum é simplesmente o uso demasiado do dithering. Se o dithering está cobrindo metade do Sprite, provavelmente só será melhor se você adicionar uma nova cor à paleta. Pontilhados deveriam idealmente ser utilizados para afunilar as extremidades e bordas de um campo opaco de pixels. Quando muito dithering é usado, a área pontilhada se transforma em um campo próprio:
Neste ponto o dithering não está mais servindo como um amortecedor entre as cores, mas criando texturas indesejáveis. Criação de textura pode ser um aspecto útil de dithering, mas apenas quando usado corretamente. Se você está tentando suavizar ao invés de adicionar textura, então o dithering não está funcionando como deveria.
Banding:
Banding, mais simplesmente, é quando os pixels se alinham. Quando pixels vizinhos terminam na mesma coordenada x ou y na grade subjacente, a grade imediatamente se torna mais evidente, os pixels estão expostos e a resolução aparente se torna menos legal.
Aqui estão vários exemplos de banding, os quais ocorrem porque os pixels se alinharam. Estes nomes não são linguagens comuns, mas vão funcionar para os fins deste tutorial:
Hugging:
Aqui um campo de cor opaca é contornado por uma fileira de pixels. É bom usar contornos, mas certifique-se o contorno e a forma que ela contém não se alinham e revelam a grade.
Pixels gordos:
Pixels gordos podem ocorrer sozinhos em quadrados pequenos, juntos como linhas gordas, ou multiplicados como largas linhas (escadas de banding).
Banding pula-um:
Mesmo se houver um espaço negativo entre duas coligações, a mente irá preencher a lacuna e a coligação permanecerá.
Banding 45 graus:
Embora as linhas de pixels se alinhando tenham apenas 1 pixel de espessura, coligações ainda estão presentes.
Pillow-shading:
Sombreamento cercando uma área central com tons cada vez mais escuros.
O Pillow-shading é ruim porque não presta atenção à fonte de luz, e conforme a forma da área e não da forma que ela representa de como a luz a afeta. Pillow-shading é, muitas vezes, mas nem sempre, combinado com banding. A maneira de corrigir o Pillow-shading é simplesmente prestar atenção de onde vem a direção da luz:
A razão pela qual o pillow-shading está errado não é porque a fonte de luz é frontal (da direção do espectador). Você não tem que colocar a fonte de luz no canto. A razão pela qual o pillow-shading é incorreto é porque segue formas planas e não se concentra em como as formas tridimensionais são literalmente.
Assim, é possível usar uma fonte de luz frontal, desde que você preste atenção às formas:
Ruído:
Na maior parte do tempo, pixels independentes (pixels que não pertencem a um grupo de pixels) são incapazes de transmitir informações suficientes por si só, e a sua inclusão normalmente só cria ruído. O ruído é qualquer tipo de informação que não contribui para a peça e serve apenas para interromper a área que habita e distrair o espectador. No pixel art, o ruído é muitas vezes composto de pixels independentes. Para os fins deste tutorial, o ruído de pixel único será o que eu estou me referindo quando eu uso o termo "ruído". A razão pela qual é preciso ter cuidado ao usar um pontilhado 25% (ou qualquer dithering, na verdade) é por causa do ruído que todos os pixels independentes criam.
Pixels independentes expõem a grade subjacente, revelando a resolução da imagem. Lembrem-se, na natureza, pixels viajam em grupos. É a natureza de um pixel pertencer a um lugar num grupo de pixels. Por esta razão, pixels independentes só devem ser usados por razões muito específicas e propositais.
Casos justificáveis da presença de pixels independentes:
Usado como realces especulares
Detalhes independentes chamam bastante a atenção para si, mas às vezes isto é exatamente o que você deseja. Para brilhantes reflexos especulares, pixels individuais, muitas vezes, funcionam muito bem. Para um exemplo, veja o pixel branco usado no nariz do monstro abaixo.
Representando detalhes pequenos mais essenciais
Normalmente, será apenas uma questão de detalhes em imagens muito pequenas, como os olhos em um sprite pequeno, ou o bico de um pássaro pequeno. Ou estrelas, ou pequenas bolhas.
Sel-out (contornos quebrados)
Sel-out (abreviação para selective outlining, traduzido para linhas quebradas) é suavizar uma linha para a cor do plano de fundo. Isto significa que o sel-out é realmente um tipo de AA ruim, mas o termo se tornou popular o suficiente para justificar sua própria seção.
A ideia é geralmente escurecer o contorno para aproximar-se de uma cor mais escura, de modo que o sprite será bem interpretado em qualquer fundo, ao invés de fundir em um fundo da mesma cor. Sel-out não é o sombreamento de um contorno de acordo com uma fonte de luz. Um contorno completo com variação de luz não criará acentuações tão pior quanto uma linha quebrada irá:
Talvez este seja um exemplo mais simples. O semicírculo à esquerda é sombreado de acordo com uma fonte de luz (mais uma vez, vindo do canto superior esquerdo). A parte superior do semicírculo à direita tem sel-out aplicado:
É Isso ai pessoal, não vou prolongar mais o assunto pois já ficou um tópico muito grande. Mas esses são erros comuns, mas que são fáceis de serem evitados, nesse final de tutorial você já deve ter rabiscado alguma coisa ai no seu pc não? Porque não posta aqui, para que possamos avaliar e compartilhar conhecimento? haha
Agradeço a atenção de todos e até o próximo Tutorial
Créditos:
Pixelaria (Tutorial)
Thayam (Trazê-lo ao TK)
Way20 (por indica-lo quando comecei minha jornada)
-
Por Thayam
Falae Pessoal do TK!
Olha eu ai mais uma vez trazendo outro tutorial para os aventureiros que querem aprender um pouco sobre spirting haha
Vamos ao que interessa:
Usando e Escolhendo as Cores
Antes de mergulhar na criação de paletas de cores, eu quero explicar como maximizar cada cor, para tirar o máximo proveito de todas as cores em sua paleta. Aqui está um exemplo de rampa de cor:
A primeira vista não parece nada particularmente especial. Mas note que algumas das cores estão dispostas em colunas muito finas, enquanto outros estão em blocos maiores. Os coloquei desta forma para mostrar como algumas cores são usadas como cores maiores ("cluster" cores, para ser usado como uma sombra base para uma superfície), enquanto outros são meio-termo ("tampão" cores, para ajudar a mistura os aglomerados em conjunto). O que acontece se mudarmos as relações um pouco?
Esta rampa utiliza as mesmas cores, mas como um todo que parece mais leve devido à maneira como as cores são utilizadas em quantidades relativas de cada cor são diferentes, os aglomerados e tampões foram invertidos. O resultado é uma mudança de saturação e brilho de toda a rampa. O contraste, no entanto, permanece no mesmo nível de legibilidade, e continua agradável.
Qual é o ponto deste exemplo?
Mostrar que você pode empurrar as suas cores para trabalhar para você, em vez de ficar preso a elas. Eu vi um monte de gente se atrapalhar com suas paletas porque eles estavam com muito medo de empurrar suas cores.
Isso leva a outro ponto de contraste - um que você usará constantemente sendo um bom artista de pixel: a cor está diferente dependendo das cores em torno dele, e quanto essas cores são usadas.
Dica, aprendizes!
Por que conservar cores? Nos velhos tempos, o hardware era muito mais simples e jogos tinha limites muito específicos sobre quantas cores poderíamos utilizar. Tirar o máximo proveito de cada cor foi talvez o aspecto mais importante da arte do pixel naquela época, e a ideia tem transitado para os dias de hoje. Os jogos modernos não possuem mais esses tipos de limites, mas ainda vale a prática para manter suas paletas o quanto menores possíveis. Não só é muito mais fácil gerenciar as cores da sua arte com uma paleta menor, como vai criar uma consistência visual que vai manter tudo junto.
Então, é hora de fazer uma paleta. Há uma série de maneiras sobre a escolha de suas cores. Um monte de gente vai tentar chegar a uma paleta "definitiva" antes mesmo de começar a trabalhar, eu não fui diferente. Porém essa não é a melhor abordagem. As melhores paletas são alteradas conforme estão sendo usados. Não sinta a necessidade de prender-se a algo.
Mas por onde começar?
Normalmente, com algumas rampas de cores básicas.
A rampa de cores é um agrupamento de cores que lhe dão uma gama de tons para trabalhar, geralmente organizadas a partir da mais escura para a mais clara. Esta é uma rampa de cores:
Não é particularmente bom, no entanto. É o que chamamos de "rampa reta", porque ela vai direto da escuridão para a luz. Em outras palavras, a única coisa que muda é o brilho ou a luminosidade, mas não a matiz ou saturação. Em uma boa rampa, o tom vai mudar, porque isso é como funciona a luz na vida real.
Neste exemplo, a tonalidade mais escura aponta para uma tonalidade púrpura ou vermelho, enquanto a mais leve (sombra) é verde (caminhando para o amarelo). Contanto que as cores no meio são reconhecíveis, o enorme global da rampa será preservada. E não se esqueça de manter sempre em consideração o contraste.
Isso é chamado de hue-shifting.
Dica, aprendizes!
Normalmente, os tons mais escuros terão menos saturação, e serão desviadas para o azul ou roxo, enquanto tons mais claros serão mais saturados e tenderão para o amarelo. Mas, isso é apenas um bom ponto de partida, não sinta-se limitado a essas regras!. Uma vez que você está confortável com seus tons da rampa de cores, aventure-se!
A paleta de cores é uma coleção de suas rampas de cores, e é o que você usaria para manter suas cores organizado. Há muito para falar sobre paletas, então eu vou começar, mostrando-lhe um exemplo do que não fazer.
Eu vejo muito isso. E quando eu digo "muito", eu quero dizer que eu vejo isso constantemente. Em todos os lugares. Parece ser a primeira coisa que um novo artista do pixel fará ao tentar vir para cima com as suas próprias cores.
Então por que é ruim?
Além do problema imediato que as rampas são "rampas retas".O grande problema é que isso não é uma paleta unificada, mas uma coleção de rampas individuais. Ele não parece ser criado com a imagem grande em mente, cada cor foi construída individualmente, e como resultado, a paleta tem uma sensação de estar desconectada. Os vermelhos foram criados do mais escuro ao mais claro, e depois os amarelos, e, em seguida, os verdes, etc etc. Não há sobreposição entre as cores; eles não se misturam em tudo.
Este é um modelo de como se construir uma paleta de cores:
Claro que parece diferente, não é? Quando eu crio uma paleta de cores, eu não tenho medo de fazer uma bagunça. Eu a trato como uma verdadeira paleta do pintor (lembre-se que a arte pixel é muito mais perto de pintura do que o desenho).
A ideia é a união das cores. Cada rampa tende a ter uma distância da mesma tonalidade mais escura e, eventualmente, atingir o mesmo tom mais leve (aviso de que os amarelos de luz nos cantos opostos são, na verdade a mesma cor). Como resultado, toda a paleta é coesa.
Eu sugiro que você dê uma abordagem semelhante -não sinta a necessidade de organizar suas rampas em linhas pequenas puras só porque você já as viu organizadas dessa forma antes. As cores precisam fluir para a outra, para mantê-lo orgânica. Você sempre pode reorganizá-las depois.
Antes de passarmos para a próxima seção, aqui está um alienígena malvado e assustador:
A sprite na esquerda é feita com a primeira paleta (a ruim, com as rampas retas). O problema óbvio é que a saturação muito brilhante é uma monstruosidade. Mais relevante, o azul e o verde não combinam muito bem juntos em nada - o contraste é tão grande que a sprite não se sente coesa. Ao mesmo tempo, o contraste dentro das rampas de cor (em particular, a verde), é muito baixa. O resultado é uma bagunça estranha: as áreas verdes parecem muito planas, mas a azul é tão diferente que se destaca até demais.
O cara da direita usa cores da minha paleta mais orgânica, e é óbvio que as cores se misturam de uma forma natural - se você olhar para as pernas, você pode ver que a tonalidade mais escura dos azuis combinam melhor com a a tonalidade mais escura do verde .
Isso deve ajudar com as cores e paletas, pelo menos as coisas importantes.
É isso ai pessoal esse foi mais um tutorial sobre spriting, espero que ajude vocês a entender melhor sobre esses tais "monstros de 7 cabeças" que são as cores haha.
Espero que tenham gostado e até a próxima!
Créditos:
Final Boss Blues (pelo tutorial)
Thayam (pela tradução)
Way20 (por ter me indicado mais este fucking awesome tutorial!)
Link do tópico original:
Using e Choosing Colors
-
Posts Recomendados
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.