Tutorial de Pixel art - Derek yu [COMPLETO]

esta dividido em :

1°Ferramentas
2°Contorno
3°Cor
4°sombreamento
5°Dithering
6°Anti-Aliasing
7°Finalização

ja aviso o tutorial é completo logo bem grande.

Aproveitem !!

Spoiler:

Quando o Photoshop usando, sua arma principal, vai ser a ferramenta lápis (atalho "B"), que é a alternativa para a ferramenta pincel. O lápis de cor permite pixels individuais, sem qualquer anti-aliasing.

Duas outras ferramentas que serão úteis são a ferramenta marquee (atalho "M") e da varinha mágica (atalho "W") para selecionar e arrastar ou copiar e colar.

Lembre-se que, segurando "Shift" ou "Alt" enquanto faz sua seleção que você pode adicionar ou subtrair a seleção atual. Isto vem a calhar quando tentam pegar áreas que não são perfeitamente quadrados.

Você também vai usar a conta-gotas (atalho "I") para capturar as cores. Conservação da cor é importante na arte de pixel para uma série de razões, assim que você vai querer agarrar as mesmas cores e reutilizá-los.

Finalmente, certifique-se de aprender os atalhos. Eles podem poupar muito tempo e energia. Um bom saber é "X", que muda suas cores primárias e secundárias.


Há duas maneiras de abordar o contorno. Você pode desenhar o contorno à mão livre e depois limpá-lo, ou você pode começar por colocar os pixels que você quer que eles desde o início. Você sabe, clique em "como, clique, clique em".

Eu acho que a aproximação que você deveria usar depende do tamanho do sprite e sua habilidade em pixelling.. Se um objeto é muito grande, é muito mais fácil traçar o contorno à mão livre para obter a forma geral e, em seguida, limpá-lo mais tarde do que tentar acertar na primeira vez.

Neste tutorial, vamos criar um sprite bastante grande, então eu vou demonstrar o
primeiro método. É também mais fácil para ilustrar com texto e imagens.


Usando seu mouse ou tablet, traçar um esboço do bruto para o seu objeto. Certifique-se de que não é bruto também, embora - ele deve se parecer mais ou menos o produto final desejado.

Spoiler:

Neste caso, estou baseando o meu esquema quase que totalmente no meu desenho.

Etapa 2: Limpar os destaques

Primeiro, aumenta o zoom para cerca de 6x ou 8x de ampliação, para que possamos ver claramente cada pixel. Em seguida, limpar esse esboço! Em particular, pretende encurtar distância pixels isolados (o contorno deve apenas ser um pixel de espessura todo o caminho), se livrar de qualquer serrilhados e adicione quaisquer pequenos detalhes que foram passados ao longo da Etapa 1.

Spoiler:

Mesmo sprites grandes geralmente nunca superior a 200 por 200 pixels. A frase "fazer mais com menos" nunca soa mais verdadeiro do que quando pixelling. E você vai logo descobrir que um pixel pode fazer toda a diferença.

Mantenha a sua simples esboço Os detalhes vão surgir mais tarde, mas por agora, concentrar-se sobre a definição das unidades "grandes", como a segmentação do músculo, por exemplo. Pode não parecer muito agora, mas seja paciente.

Spoiler:

HSB representa (H) ue, (S aturation), e (B) correção. É uma de uma série de modelos de cores do computador (ou seja, representações numéricas de cor). Outros exemplos são as RGB e CMYK, o que você provavelmente já ouviu falar. A maioria dos programas usa tinta de cor HSB-colheita, então vamos dividi-la:

Hue - O que você entende "cor" de ser. You know, like “red”, “orange”, “blue”, etc. Você sabe, como "vermelho", "laranja", "azul", etc

Saturação - Como a cor é intensa, ou quão intensa é a cor. 100% de saturação dá-lhe mais brilhantes de cor, e à medida que diminui a saturação, a cor se torna mais cinza.

Brilho (ou luminosidade ") - Leveza de uma cor. 0% brightness is black. 0% de brilho é preto.

Escolher Cores

Que cores você escolhe última análise, cabe a você, mas aqui estão algumas coisas para manter em mente:

1. Menos saturadas e menos cores brilhantes tendem a olhar mais "terra" e menos cartunesco.

2. Pense na roda de cores - quanto mais longe duas cores são um do outro, o mais que se separarão. Por outro lado, as cores como vermelho e laranja, que têm grande proximidade na roda de cores, bom olhar juntos.

Spoiler:

3. As cores mais você usa, mais distraídos seu sprite vai olhar. Para fazer um Sprite destacam-se, use somente duas ou três cores principais. (Pense sobre o que acabou de vermelho e marrom fez para Super Mario volta ao dia!)

Aplicando Cores

A aplicação concreta da cor é muito fácil. Se você estiver usando o Photoshop, você quer primeiro selecionar a área que você vai encher-se com a varinha mágica (atalho "W") e depois preencher pressionando "Alt-F" (cor primária) ou "Ctrl + F" (cor secundária).

Spoiler:

Etapa 1: Escolher uma Fonte de Luz

Primeiro, temos de pegar uma fonte de luz. Se o seu objeto é parte de uma cena, pode haver todos os tipos de fontes locais de luz (como lâmpadas, incêndio, luzes de incêndio, etc) brilhando sobre ele.Estes podem se misturar de forma muito complexa sobre o sprite. Para a maioria dos casos, no entanto, escolher uma fonte de luz distante (como o sol) é uma idéia melhor.

Especialmente para os jogos, você vai querer criar um sprite que é como geralmente iluminado possível, para que ele possa ser usado em qualquer lugar.

Eu costumo escolher uma fonte de luz distante que está em algum lugar acima do sprite e ligeiramente na frente dele, de modo que qualquer coisa que está no topo ou na parte dianteira é bem iluminado eo resto é sombra.Esta iluminação parece o mais natural para um sprite.

Spoiler:

Passo 2: Sombreamento

Uma vez que tenhamos definido uma fonte de luz, nós começamos sombreamento áreas que estão mais longe de fonte de luz com uma cor mais escura. Nosso "para cima e para a frente" modelo de iluminação determina que a parte inferior da cabeça, os braços, as pernas, etc, devem ser sombreadas.

Lembre-se que o jogo entre luz e sombra define as coisas que não são planas. Amassar um pedaço de papel branco em uma bola e, em seguida, desenrolar-lo e colocá-lo em uma tabela - Como você pode dizer que não é plano mais? É porque você pode ver as sombras pouco por todo o enruga. Uso de sombreamento para trazer para fora das dobras na roupa, e para definir a musculatura, cabelo, pele, rachaduras, etc

Spoiler:

Passo 3: Sombra leve

Uma sombra segunda, mais leve que o primeiro, deve ser usado para sombras suaves. Estas são áreas que estão indiretamente iluminados. Também pode ser usado para fazer a transição da escuridão para a luz, especialmente em superfícies curvas.

Spoiler:

Passo 4: Destaques

Lugares que estão sendo atingidos diretamente pela fonte de luz pode ter destaques aplicada sobre eles. Em destaque deve ser usado com moderação (muito menos de sombras), porque eles estão confundindo.

Sempre se destaca depois de sombras, e você vai se salvar algumas dores de cabeça. Sem sombras já no lugar, você será inclinado a fazer os destaques muito grande.

Spoiler:

Pode e não pode

Aqui estão algumas regras que você deve sempre seguir ao sombreamento:

1. Não utilize gradientes. Gradientes são terriveis de olhar, e nem sequer começar a iluminar o caminho aproximado,realmente joga fora uma superfície.

2. Não use "pillow-shading"

3. Não use máscaras demais. É fácil pensar que "mais cores iguais mais realista". No mundo real, porém, tendemos a ver as coisas de grandes manchas de luz e sombra - o nosso filtro de cérebros para fora todo o resto. Use, no máximo, dois tons de escuro (escuro e muito escuro), e duas tonalidades de luz (e realmente leve) em cima de sua cor de fundação.

4. Não use cores que são muito semelhantes. Não há nenhuma razão para usar duas cores que são muito semelhantes entre si. A menos que você queira realmente obscuro

Cor de conservação é algo que os artistas pixel tem de se preocupar muito.. Uma maneira de obter tons mais sem usar mais cores é usar uma técnica chamada "dithering". Semelhante ao "cross-incubação" ou "pontilhado" no mundo da arte tradicional, você ter duas cores e entrelaça-los para obter, para todos os efeitos, uma média de duas cores.

Exemplo Simples

Aqui está um exemplo simples de usar duas cores para criar quatro tons diferentes, utilizando composição de cores:

Spoiler:

Exemplo Avançado

Spoiler:

Compare a imagem de topo, o que foi feito usando a ferramenta gradiente do Photoshop, e no fundo, que foi criado com apenas três cores com dithering. Observe os diferentes padrões que foram utilizados para criar as cores intermediárias. Experimente com diferentes padrões para criar novas texturas.

Aplicação

Dithering pode dar o seu sprite que se sentem retro agradável, já que um monte de jogos de vídeo antigos dependiam fortemente dithering para tirar o máximo proveito das suas paletas limitadas (olhar para o Sega Genesis para lotes de exemplos de dithering). Não é algo que eu uso muito frequentemente, mas pelo amor de aprendizagem, aqui ela é aplicada (possivelmente mais aplicados) para o nosso sprite.

Spoiler:

Você pode usar o dithering tanto ou tão pouco como você quer. Honestamente, é uma técnica que eu só vi algumas pessoas usam muito bem.


Seletiva define, ou "selout", é tipo como de sombreamento do contorno. Ao invés de usar preto toda a volta, nós aplicamos uma cor que está mais próximo da cor do sprite em si. Além disso, podemos variar o brilho desse contorno ao longo da borda do sprite, deixando a fonte de luz ditar quais as cores que aplicamos.

Até este ponto, temos mantido o contorno preto. E não há nada de errado com isso, realmente, uma vez que parece muito bom e ele mantém o sprite bem separado do seu entorno. Mas, usando preto, estamos a sacrificar mais realismo do que poderia querer, uma vez que dá a cartoony um sprite "olhar. Selout é uma ótima maneira de dar a volta que:

Spoiler:

Você notará também selout usado para suavizar as dobras de seus músculos. Finalmente, o sprite começa a parecer como um todo coerente, em vez de um monte de peças separadas.

Compare isto com o original:

Spoiler:

Anti-aliasing trabalha sob uma premissa simples: adicionar cores intermediário para The Kinks da linha para suavizá-los. For example, if you have a black line on a white background, then you would add gray pixels to the edge of the line to smooth it out. Por exemplo, se você tem uma linha preta sobre um fundo branco, então você gostaria de acrescentar pixels cinza à beira da linha de bom-lo.

Técnica 1: Suavização Curves

Geralmente, você deseja adicionar as cores intermediárias, The Kinks, já que é onde as quebras de linha e parece desigual. Se ele ainda parece demasiado desigual, adicionar outro, mais leve camada de pixels. Ter seu fluxo de camadas intermediárias na direção da curva.

Eu acho que não posso explicar isso melhor do que qualquer que, sem complicar as coisas.Basta olhar para as fotos, e eu acho que você vai entender o que eu quis dizer:

Spoiler:

Técnica 2: arredondamento para fora Humps

Spoiler:

Técnica 3: Fading no fim das linhas

Spoiler:

Aplicação

Agora vamos anti-alias nosso sprite. Tenha em mente que, se você quiser que seu sprite para ficar bem em qualquer cor de fundo, não anti-alias na sua borda externa. Caso contrário, você vai ver um infeliz quem "halo" de sua em-entre as cores em torno de seu sprite e ele vai olhar sórdido como o inferno.

Spoiler:

O efeito, como você pode ver, é sutil, mas faz uma grande diferença.
Por que fazer tudo na mão?

Você pode perguntar por que nós não apenas aplicar um filtro de nosso programa de pintura para o sprite se queremos torná-lo mais suave?A resposta é que nenhum filtro vai fazer o seu sprite como limpa-olhando como se você fez isso com a mão.

Você tem controle total, não só sobre o número de cores que você usa, mas onde eles se acostumam. E você sabe melhor do que qualquer filtro que áreas precisam ser nivelada para fora, e que áreas vão perder a sua qualidade pixelly se anti-alias-los.


Passo para trás e dar uma boa olhada ao seu objeto. As chances são, ainda é um pouco áspero. Aproveite o tempo para refiná-lo e certifique-se que tudo é perfeito. Dar ou tomar como você está cansado, isso pode realmente ser a parte mais divertida. Adicionar pequenos detalhes para fazer a sua sprite mais interessante.
Sua habilidade e experiência com pixelling vai mostrar por aqui.

Spoiler:

Você pode ter sido perguntando por que os olhos do Advogado Lucha foram falta esse tempo todo, ou porque o supoena ele estava segurando estava em branco. Bem, é porque esses foram pequenos detalhes que eu queria guardar até o fim.

Também tome nota da guarnição que adicionou ao seu braçadeiras, a mosca eu adicionei a sua calça, e ... bem, o que seria um homem sem seus mamilos?. Eu também escureceu a metade inferior do seu tronco de modo que sua mão esquerda estaria mais contra seu corpo.

Você está finalmente pronto! O advogado Lucha pesa em um impressionante 45 cores de luz (ou talvez ultra-pesado, dependendo das restrições da sua paleta) e tem dimensões de cerca de 150 por 115 pixels.

Todo o processo

Isso é sempre divertido. Aqui está uma animação. Gif que mostra a evolução do nosso sprite:

Spoiler:

Ótima Tuto Zeel22!!!Obrigado por disponibilizar aqui!
+1créd.

+ 1 crédito pelo tutorial...vai ajudar os iniciantes no pixel art...^^ muito bom...

È ótimo tuto,+1 cred.

cara olha eu adorei teu tuto +1credito

Zeel por aqui!!! Bom, já vi o tuto Original (em inglês), mais mesmo assim, parabéns por traduzir e trazer para nós da DJJ^^

EDIT: +1 Créd^^

Legal ajuda muito que quer aprender pixel art + crédito.