Adobe Photoshop: Desenhe e anime um personagem usando a técnica Pixel Art. Adobe Photoshop: desenhe e anime um personagem com pixel art

Gráficos de pixel (doravante denominados simplesmente pixel art) estão se tornando cada vez mais proeminentes nos dias de hoje, especialmente por meio de jogos indie. Isso é compreensível, porque assim os artistas podem preencher o jogo com uma grande variedade de personagens e não gastar centenas de horas modelando objetos tridimensionais e desenhando objetos complexos à mão. Se você quer aprender pixel art, então a primeira coisa que você terá que fazer é aprender a desenhar os chamados “sprites”. Então, quando os sprites não te assustarem mais, você pode passar para a animação e até vender seu trabalho!

Passos

Parte 1

Coletando tudo o que você precisa

Baixe bons editores gráficos. Você pode, é claro, criar obras-primas no Paint, mas é difícil e não muito conveniente. Seria melhor trabalhar em algo como:

photoshop
paint.net
Pixen

Compre uma mesa digitalizadora. Se você não gosta de desenhar com um mouse, um tablet e uma caneta são o que você precisa. Os tablets da Wacom, aliás, são os mais populares.

Habilite "grade" em seu editor gráfico. Na verdade, se o seu editor gráfico não suporta exibição de grade, você deve pensar em encontrar outro programa. A grade permitirá que você veja claramente onde e como cada pixel individual será localizado. Como regra, o rosário é ativado através do menu “Visualizar”.
- Talvez seja necessário ajustar um pouco as configurações de exibição para que cada segmento da grade exiba um pixel. Cada programa faz isso de forma diferente, então procure dicas apropriadas.
Desenhe com um lápis com um tamanho de pincel de 1 pixel. Qualquer editor gráfico deve ter uma ferramenta Lápis. Selecione-o, defina o tamanho do pincel para 1 pixel. Agora você pode pintar... pixelizado.

Parte 2
Praticando o básico
1. Crie uma nova imagem. Como você está aprendendo a desenhar no estilo de pixel art, não deve mirar em telas épicas. Se você se lembra, em Super Mario Bros. a tela inteira tinha 256 x 224 pixels, e o próprio Mario cabia em um espaço de 12 x 16 pixels!
  
  Mais Zoom. Sim, caso contrário, você simplesmente não pode ver os pixels individuais. Sim, você terá que aumentar muito. Digamos que 800% é bastante normal.
  
  Aprenda a desenhar linhas retas. Parece simples, mas se você de repente desenhar uma linha de 2 pixels de espessura em algum lugar no meio com uma mão trêmula, a diferença atingirá seus olhos. Desenhe linhas retas até ter que ativar a ferramenta de desenho de linha reta. Você deve aprender a desenhar linhas retas à mão!
  
  Aprenda a desenhar linhas curvas. Em uma linha curva, deve haver, digamos, “quebras de linha” uniformes (o que é claramente visível na figura um pouco mais alta). Digamos que, começando a desenhar uma linha curva, desenhe uma linha de 6 pixels, abaixo dela - uma linha de três, abaixo dela - uma linha de dois e abaixo dela - de um pixel. Do outro lado, desenhe a mesma coisa (espelhado, é claro). É essa progressão que é considerada ótima. As curvas desenhadas em um padrão “3-1-3-1-3-1-3” não atendem aos padrões de pixel art.
  
  Não se esqueça de apagar os erros. A ferramenta “Eraser” deve ser configurada de forma semelhante a um lápis, tornando o tamanho do pincel igual a 1 pixel. Quanto maior a borracha, mais difícil é não apagar o excesso, então tudo é lógico.
Parte 3
Criando o primeiro sprite
1. Faça um esboço. Um esboço no papel é a base de qualquer sprite, pois assim você poderá entender como tudo ficará e, se necessário, poderá corrigir algo com antecedência. Além disso, você também pode traçar sobre um esboço de papel (se ainda tiver um tablet).
  - Não economize nos detalhes do esboço! Desenhe o que você quer ver no desenho final.
2. Transfira o esboço para um editor gráfico. Você pode traçar um esboço de papel em um tablet, pode redesenhar tudo à mão, pixel por pixel - não importa, a escolha é sua.
  - Ao traçar o esboço, use 100% preto como cor de contorno. Se alguma coisa, você irá alterá-lo manualmente mais tarde, mas por enquanto será mais fácil para você trabalhar com preto.
3. Refine o contorno do esboço. Nesse contexto, você pode, é claro, dizer o contrário - apague tudo o que for supérfluo. Qual é o ponto - o contorno deve ter 1 pixel de espessura. Assim, amplie e apague, apague o excesso ... ou preencha o que falta com um lápis.
  - Ao trabalhar em um esboço, não se distraia com os detalhes - a vez deles chegará.
Parte 4
Colorindo o sprite
1. Aprimore a teoria das cores. Olhe para a paleta para ver quais cores usar. Tudo é simples lá: quanto mais distantes as cores estão umas das outras, mais elas não são parecidas entre si; quanto mais próximas as cores estão umas das outras, mais semelhantes elas são e melhor elas ficam uma ao lado da outra.
  - Escolha cores que deixarão seu sprite bonito e não irritante. E sim, os pastéis devem ser evitados (a menos que todo o seu projeto seja feito nesse estilo).
2. Escolha várias cores. Quanto mais cores você usar, mais "distrativo" seu sprite será, por assim dizer. Veja os clássicos da pixel art e tente contar quantas cores são usadas lá.
  - Mario - apenas três cores (se estamos falando da versão clássica), e mesmo essas estão localizadas na paleta quase próximas umas das outras.
  - Sonic - apesar de Sonic ser desenhado com mais detalhes que Mario, ainda é baseado em apenas 4 cores (e sombras).
  - Ryu é quase um sprite clássico, como são entendidos em jogos de luta, Ryu são grandes áreas pintadas em cores simples, além de um pouco de sombra para demarcação. Ryu, no entanto, é um pouco mais complicado que Sonic - já existem cinco cores e sombras.
3. Pinte o sprite. Colora seu sprite com a ferramenta Preenchimento e não se preocupe com tudo parecendo plano e sem vida - nada mais é esperado neste estágio. O princípio da ferramenta “Preencher” é simples - ela preencherá com a cor que você escolher todos os pixels da cor que você clicou até atingir as bordas.
Parte 5
Adicionando sombras
1. Comece a aplicar sombras usando cores um pouco mais escuras que as de base. Se a luz vem de cima, onde estará a sombra? Isso mesmo, onde a luz direta não incide. Assim, para adicionar uma sombra, basta adicionar mais algumas camadas ao sprite com pixels da cor apropriada acima ou abaixo do contorno.
  - Se você reduzir a configuração "Contraste" da cor base aumentando ligeiramente a configuração "Brilho", poderá obter uma boa cor para renderizar a sombra.
  - Não use gradientes. Os gradientes são maus. Os gradientes parecem baratos, hacky e pouco profissionais. Um efeito semelhante ao efeito de gradientes é obtido usando a técnica de desbaste (veja abaixo).
2. Não se esqueça da penumbra. Escolha uma cor entre a cor base e a cor da sombra. Use-o para criar outra camada - mas já entre as camadas dessas duas cores. Você obterá o efeito de transição de uma área escura para uma área clara.
  
  Desenhe destaques. Um destaque é o lugar em um sprite onde mais luz incide. Você pode desenhar um destaque se escolher uma cor ligeiramente mais clara que a base. O principal é não se deixar levar pelo brilho, é uma distração.
Parte 6
Usando técnicas avançadas de desenho
1. Não se esqueça do anti-aliasing (eliminação de irregularidades de contorno). Sim, o cartão de visita da pixel art é a “pixelação” visível da imagem. No entanto, às vezes você quer que as linhas pareçam um pouco menos visíveis, um pouco mais suaves. É aí que entra o anti-aliasing.
  - Adicione cores intermediárias às dobras da curva. Desenhe uma camada de cor intermediária ao redor do contorno da curva que deseja suavizar. Se ainda parecer angular, adicione outra camada, desta vez mais leve.
  - Se você quiser que o sprite não se misture ao fundo, não use anti-aliasing na borda externa do sprite do lado de fora.
2. Saiba como usar a renderização seletiva. Qual é o ponto: o contorno é desenhado em uma cor semelhante às usadas para o preenchimento. Acontece uma imagem menos “desenhada”, e é precisamente devido a uma aparência mais realista do contorno. Tente, digamos, renderizar seletivamente a pele, deixando um contorno preto clássico para roupas ou objetos.

Já no século 20, os jogos de computador se tornaram uma ampla área de aplicação dos gráficos de pixel, principalmente na década de 90. Com o desenvolvimento dos gráficos 3D, a pixel art começou a declinar, mas depois voltou à vida graças ao desenvolvimento do web design, ao advento dos telefones celulares e dos aplicativos móveis.

Pixel art é uma técnica especial de criação de uma imagem em formato digital, realizada em editores gráficos raster, em que o artista trabalha com a menor unidade de uma imagem digital raster - um pixel. Tal imagem é caracterizada por uma baixa resolução, na qual cada pixel se torna claramente visível. A pixel art é realizada por um longo tempo e meticulosamente, dependendo da complexidade do desenho - pixel por pixel.

Regras básicas de pixel art

O componente mais importante da pixel art é o chamado desenho de linha - em outras palavras, seus contornos. Pixel art é feito usando linhas - linhas retas e curvas.

linhas retas

A regra para desenhar linhas em pixel art é que elas devem consistir em segmentos que se movem para o lado por um pixel enquanto você desenha. Evite o principal erro dos artistas iniciantes de pixel art: os pixels não devem se tocar, formando um ângulo reto.

No caso de linhas retas, você pode facilitar sua tarefa usando um dos conhecidos padrões de linhas oblíquas:

Como pode ser visto na figura, todas as linhas retas apresentadas nela consistem nos mesmos segmentos de pixels, deslocados para o lado por uma distância de um pixel, e os mais populares são segmentos de um, dois e quatro pixels. Essas linhas retas simples são chamadas de linhas "ideais" em pixel art.

Linhas retas podem ter um padrão diferente, por exemplo, você pode alternar segmentos de dois pixels com um segmento de um pixel, mas essas linhas não ficarão tão bonitas, especialmente quando a imagem for ampliada, embora não violem as regras de pixel arte.

linhas curvas

Linhas retas são mais fáceis de desenhar porque evitam dobras, o que não é o caso das linhas curvas. Sua construção é mais difícil, mas as linhas curvas precisam ser desenhadas com muito mais frequência do que as retas.

Além da mesma proibição da formação de ângulos retos a partir de pixels, ao desenhar linhas curvas, é necessário lembrar a natureza de seu deslocamento. O comprimento dos segmentos de pixel deve mudar uniformemente, gradualmente - subindo e descendo suavemente com a mesma suavidade. Gráficos de pixel não permitem torções.

É improvável que você consiga desenhar uma linha curva perfeita com um movimento de mão sem violar uma única regra, então você pode recorrer a dois métodos: desenhar linhas desenhando um pixel após o outro ou desenhar uma curva regular e corrigi-la removendo pixels extras do quadro finalizado.

vacilante

Na pixel art, existe algo como pontilhamento. É uma certa maneira de misturar pixels de cores diferentes para criar um efeito de transição de cores.

O método de pontilhamento mais popular é organizar pixels em um padrão quadriculado:

Esse método deve sua aparência a limitações técnicas nas paletas de cores, pois para obter, por exemplo, uma cor roxa, era necessário desenhar pixels vermelhos e azuis em um padrão quadriculado:

E, posteriormente, o dithering era frequentemente usado para transmitir volume devido à luz e sombra nas imagens:

Para que a pixel art pontilhada funcione bem, a área de mesclagem deve ter pelo menos dois pixels de largura.

Software de pixel art

Para dominar a criação de arte em pixel, você pode usar qualquer editor gráfico que suporte esse tipo de desenho. Todos os artistas trabalham com programas diferentes com base em suas preferências.

Até hoje, muitas pessoas preferem desenhar com pixels no conhecido programa padrão do sistema operacional Windows - Microsoft Paint. Este programa é realmente fácil de aprender, mas isso também é um ponto negativo - é bastante primitivo, por exemplo, não suporta trabalhar com camadas e sua transparência.

Outro programa de pixel art fácil de usar, cuja versão demo pode ser encontrada na Internet de forma absolutamente gratuita, é o GraphicsGale. A desvantagem do programa é, talvez, o fato de não suportar salvar pixel art no formato .gif.

Os proprietários de Mac podem experimentar o programa Pixen gratuito. E os usuários do sistema operacional Linux devem testar os programas GrafX2 e JDraw por conta própria.

E, claro, uma ótima opção para criar pixel art é o Adobe Photoshop, que possui ampla funcionalidade, permite trabalhar com camadas, suporta transparência e oferece um trabalho simples com uma paleta. Com a ajuda deste programa, veremos exemplos simples de como desenhar pixel art por conta própria.

Como desenhar Pixel Art no Photoshop

Assim como na arte tradicional, a forma, a sombra e a luz são importantes na pixel art, portanto, antes de aprender a desenhar pixel art, dê-se ao trabalho de se familiarizar com o básico do desenho - pratique o desenho com lápis no papel.

Desenho "balão"

Vamos começar com o mais simples - desenhe um balão comum. Crie um novo arquivo no Photoshop com uma resolução de tela de 72 dpi. Não faz sentido definir os tamanhos de imagem grandes - isso é pixel art. Selecione um pincel, duro e opaco, defina o tamanho para 1 pixel.

Desenhe um pequeno semi-arco curvado da esquerda para a direita, levando-o de baixo para cima. Lembre-se das regras da pixel art: mantenha as mesmas proporções dos segmentos, mova-os para o lado por um pixel, sem deixar dobras e ângulos retos. Em seguida, espelhe este arco desenhando o topo do balão.

Pelo mesmo princípio, desenhe o fundo da bola e o fio. Preencha a bola com vermelho usando a ferramenta Preenchimento. Agora resta adicionar volume - nossa bola parece muito plana. Desenhe uma faixa vermelha escura no lado inferior direito do balão e aplique pontilhado nessa área. No canto superior esquerdo da bola, desenhe um brilho de pixels brancos.

Veja como é fácil - a bola está pronta!

Figura "Robô"

E agora vamos tentar desenhar uma imagem da maneira tradicional, e só então vamos limpar os pixels que violam as regras da pixel art.

Abra um novo documento, faça um esboço do futuro robô:

Agora você pode limpar tudo o que atrapalhar e desenhar pixels quando necessário:

Da mesma forma, desenhe a parte inferior do corpo do robô. Não perca a oportunidade de desenhar linhas "perfeitas" nos lugares certos.

Detalhe o torso do robô. Muitos artistas experientes aconselham você a preparar uma paleta antes de iniciar o trabalho - um conjunto de cores que você usará ao criar o trabalho em pixel. Isso permite que você obtenha a maior integridade da imagem. Crie uma paleta em uma área livre do espaço de trabalho do Photoshop - por exemplo, na forma de quadrados ou manchas de cor. Posteriormente, para selecionar a cor desejada, clique nela com a ferramenta Conta-gotas.

Você pode começar a preencher os contornos. "Decore" o corpo do robô com a cor principal. Nossa cor é azul lavanda.

Altere a cor do contorno - preencha-o com azul escuro. Decida onde está a fonte de luz em seu desenho. Nós o localizamos em algum lugar acima e à direita na frente do robô. Vamos desenhar o peito do nosso personagem, adicionando volume:

Do lado direito, marque a sombra mais profunda da figura, passando pelo contorno do tronco. A partir desta sombra, das bordas para o centro, desenhe uma sombra mais clara que desaparece nas áreas pretendidas iluminadas pela fonte de luz:

Adicione destaques ao robô em todas as áreas que devem refletir a luz:

Dê às pernas do robô uma aparência cilíndrica com sombras e luzes. Da mesma forma, faça furos nos círculos no peito do robô:

Agora vamos melhorar a imagem adicionando o elemento de pixel art que consideramos anteriormente - pontilhamento - nas áreas de sombra do torso.

O pontilhamento pode ser omitido nos destaques, bem como nas pernas - eles já são muito pequenos. Com a ajuda de pixels escuros e claros, desenhe uma fileira de rebites na cabeça do robô em vez de dentes e também desenhe uma antena engraçada. Pareceu-nos que a mão do robô não foi desenhada muito bem - se você encontrar o mesmo problema, recorte o objeto no Photoshop e mova-o para baixo.

É isso - nosso robô de pixel engraçado está pronto!

E com a ajuda deste vídeo você aprenderá como fazer animação pixel art no Photoshop:

Pegue, conte para seus amigos!

O que desenhar desenhos nas células

Esta arte está disponível para qualquer pessoa, o principal é seguir as células com clareza. Os cadernos escolares são ideais para desenhar uma imagem, o tamanho de seus quadrados é de 5x5 mm e o próprio caderno tem 205 mm por 165 mm. No momento, os blocos de notas de primavera com uma folha A4 estão ganhando popularidade entre os artistas nas células, o tamanho deste caderno é de 280 mm por 205 mm.

Artistas profissionais criam suas obras-primas em papel milimetrado (papel de desenho), que é o lugar para passear. A única desvantagem do papel milimetrado é sua cor verde pálida, que não é perceptível quando você desenha com canetas coloridas.
Ao escolher um caderno para desenhar, preste atenção à densidade do papel, a qualidade do seu desenho por células depende de sua densidade, se ele aparecerá no lado errado da folha. A densidade ideal da folha não é inferior a 50g/m².

Como desenhar desenhos por células

Não são necessárias ferramentas especiais para colorir desenhos por células, qualquer lápis e caneta servirão. As pinturas monocromáticas são muito legais, mas eu quero muito adicionar cores à minha vida. Para que as tintas se tornem diversas, vá a uma papelaria e escolha o que seu coração desejar, canetas gel, óleo, canetas esferográficas.

Canetas esferográficas para pixel art

Marcadores para desenhos por células

Se você gosta de desenhar com canetas hidrográficas, está certo, a coloração das canetas hidrográficas é muito rica. Vale lembrar que as canetas hidrográficas são divididas em dois grupos: álcool e água, a água é mais segura, mas pode molhar o papel. O álcool também pode encharcar o papel, e o cheiro também é forte para um amador.

Lápis para desenhos por células

Lápis, outro tipo de dispositivo de desenho. Os lápis não são exceção na variedade de tipos, são de plástico, cera, madeira e aquarela. Desenhamos com madeira desde a infância e sabemos que muitas vezes quebram o chumbo. Os de plástico e cera quebram com menos frequência, mas são mais grossos, o que será menos conveniente no desenho. Não pode haver lápis de aquarela, pois depois de pintar com um lápis, você precisa cobrir o desenho com um pincel umedecido, e isso é inaceitável para folhas de caderno.

Assista a um vídeo sobre como é fácil desenhar desenhos por células e como isso pode ser bonito:

Mais alguns esquemas de desenho que eu gostei:

Dot Graphics - Tecnologia Pixel Art

Descobrimos quais acessórios são necessários, agora vamos nos familiarizar com a tecnologia. A tecnologia da pixel art é muito simples, são gráficos de pontos.

Antes de passar a considerar os caminhos da pixel art, vamos voltar à infância nos anos 80 e 90. Claro, aqueles que cresceram na era pós-soviética se lembram dos videogames de 8 bits, gráficos de jogos, que são construídos em gráficos de pixel.

A melhor maneira de dominar qualquer coisa é praticar, vamos tentar dominar a pixel art:

Vamos pegar uma caneta de óleo preta e vermelha e uma folha de caderno quadriculada.

Vamos começar com um desenho simples. Vamos contar as células, definir o contorno e decorar de acordo com as cores.

Por exemplo, vamos desenhar um coração:

Pegamos uma folha em uma gaiola e uma caneta com pasta preta, colocamos 3 pontos, como na figura, os pontos marcam quais células serão pintadas de preto.
Desenhamos linhas que denotam os contornos da imagem.
Marque três pontos de cada lado, veja a figura.
Marque a área da figura com duas linhas.
Vamos colocar mais um ponto de cada lado e desenhar as bordas sob os pontos superiores.
Desenhe 8 pontos na vertical e 4 pontos em ambos os lados, como mostra a figura abaixo.
Ao desenhar linhas verticais, como mostrado na figura, indicaremos completamente os limites da figura.
Da mesma forma, marque a parte inferior do coração à esquerda e à direita.
Nós circulamos as células, como em nossa imagem.
A próxima coisa que precisamos fazer é pintar o interior do coração com uma caneta vermelha, deixando o destaque da luz sem pintar.
E, finalmente, sombreie as células marcadas com pontos com uma caneta preta. Agora você aprendeu a desenhar imagens de 8 bits.

Se você acha que fotos grandes e volumosas não são para você, tente desenhar uma foto da Internet. Assustada? Não vale a pena.

Leva

caneta preta,
os lápis,
caderno xadrez,
um computador,
foto ou imagem da internet
programa photoshop.

Para aplicar desenhos tridimensionais, precisamos contar o número de células que serão pintadas. É muito difícil não errar em números grandes. Certifique-se também de escolher tons de cores semelhantes à imagem original.
Então, vamos fazê-lo:

Vou dar um conselho que me ajuda muito, se você tiver uma impressora colorida, imprima a foto, se não, não é assustador. Desenhe uma grade de 10 células com um contorno mais grosso. Na folha impressa, usando uma régua e uma caneta de contraste, se não houver onde imprimir, você pode abrir a imagem no Paint.
Sucesso criativo para você.

Pixel Art é muito popular para jogos hoje em dia e há várias razões para isso!

Então, o que cativa a Pixel Art:

Percepção. Pixel art parece incrível! Há muito a ser dito sobre cada pixel individual em um sprite.
Nostalgia. Pixel Art traz de volta um grande sentimento nostálgico para os jogadores que cresceram jogando Nintendo, Super Nintendo ou Genesis (como eu!)
Facilidade de aprendizado. Pixel art é uma das artes digitais mais fáceis de aprender, principalmente se você for mais programador do que artista ;]

Então, você quer experimentar a Pixel Art? Então me acompanhe e eu vou te mostrar como fazer um personagem jogável simples, mas eficaz, que você pode usar em seu próprio jogo! Além disso, como bônus, veremos como integrá-lo aos jogos do iPhone!

Para um aprendizado bem-sucedido, você precisará do Adobe Photoshop. Se você não tiver, você pode baixar uma avaliação gratuita do site da Adobe ou torrent.

O que é PixelArt?

Antes de começarmos, vamos esclarecer o que é Pixel Art, não é tão óbvio quanto você imagina. A maneira mais fácil de definir o que é Pixel Art é especificar o que não é, a saber: tudo onde os pixels são criados automaticamente. aqui estão alguns exemplos:

Gradiente: Selecione duas cores e calcule a cor dos pixels entre elas. Parece legal, mas não é Pixel Art!

Ferramenta de desfoque: detectar pixels e replicá-los/editar para fazer uma nova versão da imagem anterior. Novamente, não é um gráfico de pixels.

Ferramenta de suavização(principalmente gerando novos pixels em cores diferentes para tornar algo "suave"). Você deve evitá-los!

Alguns dirão que mesmo as cores geradas automaticamente não são Pixel Art, pois exigem uma camada para efeitos de mesclagem (mistura de pixels entre duas camadas de acordo com um determinado algoritmo). Mas, como a maioria dos dispositivos atualmente lida com milhões de cores, essa afirmação pode ser ignorada. No entanto, usar um pequeno número de cores é uma boa prática em Pixel Art.

Outras ferramentas como (linha) ou ferramenta Balde de tinta(Paint Bucket) também gera pixels automaticamente, mas como você pode configurá-los para não suavizar a curva de pixels preenchidos, essas ferramentas são consideradas compatíveis com Pixel Art.

Assim, descobrimos que a Pixel Art requer muita atenção ao colocar cada pixel em um sprite, na maioria das vezes à mão e com uma paleta de cores limitada. Vamos trabalhar agora!

Começo do trabalho

Antes de começar a criar seu primeiro recurso de Pixel Art, você deve saber que o Pixel Art não pode ser dimensionado. Se você tentar reduzi-lo, tudo ficará embaçado. Se você tentar escalá-lo, tudo parecerá aceitável desde que você use um escalonamento múltiplo de dois (mas, é claro, não haverá clareza).

Para evitar esse problema, você deve primeiro entender o tamanho do seu personagem do jogo, ou elemento do jogo, e depois começar a trabalhar. Na maioria das vezes, isso se baseia no tamanho da tela do dispositivo que você está segmentando e em quantos "pixels" você deseja ver.

Por exemplo, se você quer que seu jogo pareça duas vezes maior em um iPhone 3GS (“Sim, eu realmente quero dar ao meu jogo um visual retrô pixelado!”), que tem uma resolução de tela de 480x320 pixels, então você precisa trabalhar na metade da resolução neste caso será 240x160 pixels.

Abra um novo documento do Photoshop ( Arquivo → Novo…) e defina o tamanho para ser o tamanho da tela do jogo, depois selecione o tamanho do seu personagem.

Cada célula tem 32x32 pixels!

Escolhi 32x32 pixels não apenas porque é ótimo para o tamanho da tela selecionada, mas também porque 32x32 pixels também é um múltiplo de 2, o que é conveniente para motores de brinquedo (os tamanhos dos blocos geralmente são múltiplos de 2, as texturas são alinhadas múltiplas de 2, etc

Mesmo que o mecanismo que você está usando suporte qualquer tamanho de imagem, você sempre pode tentar trabalhar com um número par de pixels. Nesse caso, se a imagem precisar ser dimensionada, o tamanho será melhor dividido, resultando em um melhor desempenho.

Como desenhar um personagem de pixel art

Pixel Art é conhecido por ter gráficos nítidos e fáceis de ler: você pode definir características faciais, olhos, cabelos, partes do corpo com apenas alguns pontos. No entanto, o tamanho da imagem complica a tarefa: quanto menor o seu personagem, mais difícil é desenhá-lo. Para abordar a tarefa de forma mais prática, escolha qual será o menor tamanho dos traços de caráter. Eu sempre escolho olhos porque eles são uma das melhores maneiras de dar vida a um personagem.

No Photoshop selecione ferramenta de lápis(Ferramenta Lápis). Se você não conseguir encontrá-lo, basta pressionar e segurar a ferramenta pincel(Ferramenta Brush) e você o verá imediatamente (deve ser o segundo da lista). Você só precisará redimensioná-lo para 1px (você pode clicar na barra de opções da ferramenta e redimensioná-lo, ou apenas manter pressionada a tecla [).

Também você vai precisar Apagar ferramenta(Ferramenta Eraser), então clique nele (ou pressione a tecla E) e altere suas configurações selecionando na lista suspensa Modo:(Modo:) Lápis(Lápis) (já que não há pontilhamento neste modo).

Agora vamos começar a pixelizar! Desenhe sobrancelhas e olhos como mostrado na imagem abaixo:

ei! Estou pixelizada!!

Você já poderia começar com Lineart (onde o desenho é feito com linhas), mas uma forma mais prática é desenhar a silhueta de um personagem. A boa notícia é que você não precisa ser um profissional nesta fase, apenas tente imaginar as dimensões das partes do corpo (cabeça, corpo, braços, pernas) e a pose inicial do personagem. Tente fazer algo assim em cinza:

Você não precisa ser um profissional nesta fase

Observe que também deixei algum espaço em branco. Você realmente não precisa preencher a tela inteira, deixe espaço para quadros futuros. Nesse caso, será muito útil manter o mesmo tamanho de tela para todos eles.

Depois de concluir a silhueta, é hora de . Agora você tem que ser mais cuidadoso com o posicionamento dos pixels, então não se preocupe com roupas, armaduras, etc. Para estar no lado seguro, você pode adicionar uma nova camada para nunca perder sua silhueta original.

Se você achar que a ferramenta Lápis é muito lenta para desenhar, você sempre pode usar (Ferramenta Linha), apenas lembre-se de que você não poderá posicionar pixels com a mesma precisão que faria com um lápis. Você precisará configurar como abaixo:

Selecionar pressionando e segurando Ferramenta retângulo(Ferramenta Retângulo)

Vá para o painel de opções da ferramenta, na lista suspensa Modo de ferramenta de seleção(Modo de desenho de contorno) selecione Pixel , altere Peso(Largura) por 1px (se ainda não tiver feito) e desmarque Anti-alias(Suavização). Veja como você deve ser:

Por favor, note que eu não fiz o contorno inferior para os pés. Isso é opcional, pois os pés não são uma parte tão importante das pernas para destacá-las, e você salva uma linha de pixels na tela.

Aplicação de cores e sombras

Agora você está pronto para começar a colorir nosso personagem. Não se preocupe em escolher as cores certas, elas serão muito fáceis de mudar depois, apenas certifique-se de que cada uma tenha "sua própria cor". Use as cores padrão na guia Amostras(Janela → Amostras).

Pinte seu personagem como mostrado abaixo (mas fique à vontade para ser criativo e usar suas próprias cores!)

Uma boa cor contrastante melhora a legibilidade do seu ativo!

Note que ainda não fiz nenhum esboço para as roupas ou o cabelo. Lembre-se sempre: salve o máximo de pixels possível de contornos desnecessários!

Não perca tempo pintando cada pixel. Para acelerar as coisas, use linhas para a mesma cor ou ferramenta Balde de tinta(Ferramenta Balde de Tinta) para preencher as lacunas. By the way, ele também terá que ser configurado. Selecionar ferramenta Balde de tinta na barra de ferramentas (ou apenas pressione a tecla G) e altere tolerância(Tolerância) para 0 e desmarque Anti-alias(Suavização).

Se você precisar usar Varinha mágica(Magic Wand Tool) - uma ferramenta muito útil que seleciona todos os pixels com a mesma cor, depois configura da mesma forma que a ferramenta "Paint Bucket" - sem tolerância e anti-aliasing.

O próximo passo, que exigirá algum conhecimento de você, é clarear e sombrear. Se você não tem o conhecimento de como mostrar os lados claro e escuro, abaixo eu lhe darei uma pequena instrução. Se você não tem tempo ou inclinação para aprender, pode pular este passo e ir para a seção Spice Up Your Palette, porque afinal, você pode apenas fazer seu sombreamento parecer com o meu exemplo!

Use a mesma fonte de luz para todo o ativo

Tente dar os contornos como quiser/pode, pois depois disso o ativo começa a ficar mais interessante. Por exemplo, agora você pode ver o nariz, olhos carrancudos, mechas de cabelo, dobras nas calças, etc. Você também pode adicionar alguns pontos de luz, ficará ainda melhor:

Use a mesma fonte de luz ao sombrear

E agora, como prometi, um pequeno guia de luz e sombras:

Apimentar sua paleta

Muitas pessoas usam as cores padrão da paleta, mas como muitas pessoas usam essas cores, nós as vemos em muitos jogos.

O Photoshop tem uma grande variedade de cores na paleta padrão, mas não confie muito nela. É melhor criar suas próprias cores clicando na paleta principal na parte inferior da barra de ferramentas.

Em seguida, na janela Color Picker, navegue na barra lateral direita para selecionar uma cor e na área principal para selecionar o brilho desejado (mais claro ou mais escuro) e a saturação (mais suculenta ou mais opaca).

Depois de encontrar o caminho certo, clique em OK e reconfigurar a ferramenta Paint Bucket. Não se preocupe, você pode simplesmente desmarcar a caixa 'Contíguo' e quando você pintar com a nova cor, todos os novos pixels com a mesma cor de fundo também serão pintados.

Essa é outra razão pela qual é importante trabalhar com poucas cores e sempre usar a mesma cor para o mesmo elemento (camisa, cabelo, capacete, armadura, etc.). Mas não se esqueça de usar cores diferentes para outras áreas, caso contrário nosso desenho ficará muito colorido!

Desmarque "Contíguo" para preencher os pixels selecionados com a mesma cor

Mude as cores se quiser e obtenha uma coloração de personagem mais glamourosa! Você pode até recolorir os contornos, apenas certifique-se de que eles se misturem bem com o plano de fundo.

Por fim, faça um teste de cor de fundo: crie uma nova camada abaixo do seu personagem e preencha-a com cores diferentes. Isso é necessário para garantir que seu personagem seja visível em fundos claros, escuros, quentes e frios.

Como você pode ver, desativei o anti-aliasing em todas as ferramentas que usei até agora. Não se esqueça de fazer isso também em outras ferramentas, por exemplo, Marquee Elíptico(Área de seleção oval) e Laço(Laço).

Com essas ferramentas, você pode redimensionar facilmente as peças selecionadas ou até mesmo girá-las. Para fazer isso, use qualquer ferramenta de seleção (ou pressione a tecla M) para selecionar uma área, clique com o botão direito e selecione Transformação Livre(Free Transform), ou apenas pressione Ctrl + T . Para alterar o tamanho da área selecionada, arraste uma das alças localizadas ao longo do perímetro do quadro de transformação. Para redimensionar a seleção mantendo a proporção, mantenha pressionada a tecla Shift e arraste uma das alças do canto.

No entanto, o Photoshop suaviza automaticamente tudo o que é editado com o Transformação Livre então antes de editar vá para Editar → Preferências → Geral(Ctrl + K) e altere interpolação de imagem(Interpolação de imagem) em Bairro mais próximo(Vizinho mais próximo). Em poucas palavras, em Bairro mais próximo a nova posição e tamanho são calculados de forma muito grosseira, não são aplicadas novas cores ou transparências e as cores escolhidas são mantidas.

Integrando o desenho de pixel art em jogos para iPhone

Nesta seção, você aprenderá como integrar nossa pixel art em um jogo para iPhone usando a estrutura de jogo Cocos2d. Por que estou considerando apenas o iPhone? Porque, graças a uma série de artigos sobre Unity, (por exemplo:, ou Jogo no estilo de Jetpack Joyride em Unity 2D) você já sabe como trabalhar com eles no Unity, e de artigos sobre Crafty (Jogos de navegador: Snake) e Impact (Introdução à criação de jogos de navegador no Impact) você aprendeu como incorporá-los em uma tela e criar jogos de navegador.

Se você é novo no Cocos2D, ou no desenvolvimento do iPhone em geral, sugiro que comece com um dos tutoriais do Cocos2d e iPhone. Se você tem o Xcode e o Cocos2d instalados, continue lendo!

Criar um novo projeto iOS → cocos2d v2.x → modelo cocos2d iOS, nomeie-o como PixelArt e selecione iPhone como o dispositivo. Arraste a pixel art criada, por exemplo: sprite_final.png para o seu projeto e abra HelloWorldLayer.m e substitua o método de inicialização pelo seguinte:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Posicionamos o sprite no lado esquerdo da tela e o giramos para que fique voltado para a direita. Compile, execute e então você verá seu sprite na tela:

No entanto, lembre-se, como discutimos anteriormente neste tutorial, queríamos aumentar artificialmente os pixels para que cada pixel fosse visivelmente diferente dos outros. Então adicione esta nova linha dentro do método de inicialização:

Escala do herói = 2,0;

Nada complicado, certo? Compile, execute e... espere, nosso sprite está embaçado!

Isso ocorre porque, por padrão, o Cocos2d nivela o desenho quando o dimensiona. Nós não precisamos disso, então adicione a seguinte linha:

Esta linha configura o Cocos2d para dimensionar imagens sem anti-aliasing, então nosso garoto ainda parece "pixelado" Compile, execute e... sim, funciona!

Observe os benefícios de usar gráficos Pixel Art - podemos usar uma imagem menor do que a exibida na tela, economizando muita memória de textura. Nem precisamos fazer imagens separadas para telas retina!

E o que vem a seguir?

Espero que tenham gostado deste tutorial e aprendido um pouco mais sobre pixel art! Antes de partir, quero dar-lhe alguns conselhos:

Sempre tente evitar o uso de anti-aliasing, gradientes ou muitas cores para seus ativos. Isso é para o seu próprio bem, especialmente se você ainda é iniciante.
Se você REALMENTE deseja emular o estilo retrô, confira a arte em jogos de console de 8 ou 16 bits.
Alguns estilos não usam contornos escuros, outros não levam em conta a influência da luz ou sombra. Tudo depende do estilo! Em nossa lição, não desenhamos sombras, mas isso não significa que você não deva usá-las.

Para um iniciante, Pixel Art parece ser o gráfico mais fácil de aprender, mas na verdade não é tão simples quanto parece. A melhor maneira de melhorar suas habilidades é praticar, praticar, praticar. Eu recomendo postar seu trabalho nos fóruns do Pixel Art para que outros artistas lhe dêem conselhos - é uma ótima maneira de melhorar sua técnica! Comece pequeno, pratique muito, obtenha feedback e você poderá criar um jogo incrível que lhe trará muito dinheiro e alegria!

Parte 7: Texturas e desfoque
Parte 8: Mundo dos azulejos

Prefácio

Existem muitas definições de pixel art, mas aqui usaremos esta: uma imagem de pixel art se for inteiramente feita à mão, e houver controle sobre a cor e a posição de cada pixel que for desenhado. Sem dúvida, em pixel art, a inclusão ou uso de pincéis ou ferramentas de desfoque ou máquinas de degradação (máquinas degradadas, não tenho certeza), e outras opções de software que são “modernas” não são usadas por nós (na verdade, colocadas à nossa disposição significa “à nossa descarte”, mas logicamente parece mais correto assim). É limitado a ferramentas como "lápis" e "preencher".

No entanto, você não pode dizer que gráficos pixel art ou não pixel art são mais ou menos bonitos. É mais justo dizer que a pixel art é diferente e mais adequada para jogos retrô (como Super Nintendo ou Game Boy). Você também pode combinar as técnicas aprendidas aqui com efeitos de arte não-pixel para criar um estilo híbrido.

Então, aqui você vai aprender a parte técnica da pixel art. No entanto, eu nunca vou fazer de você um artista... pela simples razão de que eu também não sou um artista. Não vou te ensinar anatomia humana ou a estrutura das artes, e não vou falar muito sobre perspectiva. Neste guia, você pode encontrar muitas informações sobre técnicas de pixel art. No final, você precisará ser capaz de criar personagens e cenários para seus jogos, desde que preste atenção, pratique regularmente e aplique essas dicas.

- Também quero salientar que apenas algumas das imagens usadas neste guia estão ampliadas. Para imagens que não são ampliadas, seria bom se você tirasse um tempo para copiar essas imagens para poder estudá-las em detalhes. Pixel art é a essência dos pixels, é inútil estudá-los de longe.

No final, tenho que agradecer a todos os artistas que se juntaram a mim na criação deste guia de uma forma ou de outra: Shin, por seu trabalho sujo e arte de linha, Xenohydrogen, por seu gênio da cor, Lunn, por seu conhecimento de perspectiva, e Panda, os severos Ahruon, Dayo e Kryon por suas generosas contribuições para ilustrar estas páginas.

Então, vamos voltar ao ponto.

Parte 1: As ferramentas certas

Más notícias: você não desenhará um único pixel nesta parte! (E isso não é motivo para ignorá-lo, não é?) Se há um ditado que não suporto, é "não existem ferramentas ruins, apenas trabalhadores ruins". Na verdade, eu achava que nada poderia estar mais longe da verdade (exceto talvez "o que não te mata te fortalece"), e pixel art, prova muito boa. Este guia visa familiarizá-lo com os vários softwares usados para criar pixel art e ajudá-lo a escolher o caminho certo.

1. Algumas coisas antigas

Ao escolher um software para criar pixel art, as pessoas costumam pensar: “Escolha de software? Isso é loucura! Tudo o que precisamos para criar pixel art é pintar! (aparentemente um jogo de palavras, desenho e um programa)” Erro trágico: falei de ferramentas ruins, essa é a primeira. O Paint tem uma vantagem (e apenas uma): você já o possui se estiver executando o Windows. Por outro lado, ele tem muitas deficiências. Esta é uma lista (incompleta):

* Você não pode abrir mais de um arquivo ao mesmo tempo
* Sem gerenciamento de paleta.
* Sem camadas ou transparência
* Sem seleções não retangulares
* Poucas teclas de atalho
* Terrivelmente desconfortável

Em suma, você pode esquecer o Paint. Agora vamos ver o software real.

2. No final...

As pessoas então pensam: "Ok, o Paint é muito limitado para mim, então vou usar meu amigo Photoshop (ou Gimp ou PaintShopPro, é a mesma coisa), que tem milhares de possibilidades". Isso pode ser bom ou ruim: se você já conhece um desses programas, pode fazer pixel art (desativando todas as opções de anti-aliasing automático e desativando muitos dos recursos avançados). Se você ainda não conhece esses programas, gastará muito tempo aprendendo-os, mesmo que não precise de todas as suas funcionalidades, o que seria uma perda de tempo. Em suma, se você os usa há muito tempo, pode criar pixel art (eu pessoalmente uso o Photoshop por hábito), mas, caso contrário, é muito melhor usar programas especializados em pixel art. Sim, eles existem.

3. Creme

Existem muito mais programas de pixel art do que se imagina, mas aqui vamos considerar apenas os melhores. Todos eles têm características muito semelhantes (controle de paleta, visualização de ladrilhos repetidos, transparência, camadas e assim por diante). Diferenças que eles têm em conveniência... e preço.

Charamaker 1999 é um bom programa, mas a distribuição parece estar em espera.

Graphics Gale é muito mais divertido e fácil de usar, e custa cerca de US$ 20, o que não é tão ruim. Acrescentarei que a versão de teste não é limitada no tempo e vem com kit suficiente para fazer gráficos bons o suficiente. Só que não funciona com .gif, o que não é um problema já que .png é melhor de qualquer maneira.

O software mais comumente usado por artistas de pixel é o ProMotion, que é (claramente) mais conveniente e rápido que o Graphics Gale. E sim, ela é preciosa! Você pode comprar a versão completa por uma quantia modesta... 50 euros ($78).
Não vamos esquecer nossos amigos Mac! Pixen é um bom programa disponível para Macintosh e é gratuito. Infelizmente não posso dizer mais porque não tenho um Mac. Nota do tradutor (francês): Usuários de Linux (e outros) devem tentar , e GrafX2 . Exorto-vos a experimentá-los todos em versões de demonstração e ver qual se adapta à sua conveniência. No final é uma questão de gosto. Esteja ciente de que, uma vez que você comece a usar um programa, pode ser muito difícil mudar para outra coisa.

Continua…

Notas do tradutor do francês para o inglês

Este é um ótimo guia para pixel art escrito por Phil Razorback de LesForges.org. Muito obrigado a Phil Razorback por permitir que o OpenGameArt.org traduzisse esses guias e os publicasse aqui. (De um tradutor para o russo: não pedi permissão, se alguém quiser, pode ajudar, não tenho experiência suficiente em me comunicar em inglês, muito menos em francês).

Nota do tradutor do inglês para o russo

Sou programador, não artista ou tradutor, traduzo para meus amigos artistas, mas o que de bom se perde, que seja aqui.
Original em francês em algum lugar aqui www.lesforges.org
Tradução do francês para o inglês aqui: opengameart.org/content/les-forges-pixel-art-course
Traduzi do inglês porque não sei francês.
E sim, este é meu primeiro post, então sugestões de design são bem vindas. Além disso, a questão é: as partes restantes devem ser publicadas como artigos separados ou é melhor atualizar e complementar este?