Adobe Photoshop: desenhe e anime um personagem usando a técnica Pixel Art. Programas para criar pixel art Pixel art simples

Hoje em dia programas como Photoshop, Illustrator, Corel facilitam o trabalho do designer e do ilustrador. Com a ajuda deles, você pode trabalhar plenamente sem se distrair com a disposição dos pixels, como acontecia no final do século passado. Todos cálculos necessários compromete Programas- editor gráfico. Mas há pessoas que trabalham numa direção diferente, não apenas diferente, mas até completamente oposta. Ou seja, eles usam o mesmo arranjo tradicional de pixels para obter um resultado e uma atmosfera únicos em seus trabalhos.

Um exemplo de pixel art. Fragmento.

Neste artigo gostaríamos de falar sobre pessoas que fazem pixel art. Veja mais de perto seus melhores trabalhos, que, apenas pela complexidade de sua execução, podem ser chamados, sem exagero, de obras arte contemporânea. Obras que vão tirar o fôlego quando vistas.

Arte de pixel. Melhores trabalhos e ilustradores

Cidade. Autor: Zoggles

Castelo de conto de fadas. Autor: Tinuleaf

Vila medieval. Autor: Docdoom

Jardins Suspensos Semíramis. Autor: Eclipse Lunar

Área residencial. Autor:

Desenhar no nível do pixel tem seu próprio nicho nas artes visuais. Com a ajuda de pixels simples, são criadas verdadeiras obras-primas. Claro, você pode criar esses desenhos em uma folha de papel, mas é muito mais fácil e correto criar imagens usando editores gráficos. Neste artigo analisaremos detalhadamente cada representante desse software.

O editor gráfico mais popular do mundo que pode funcionar no nível do pixel. Para criar essas imagens neste editor, você só precisa realizar algumas etapas preliminares de configuração. Aqui está tudo que um artista precisa para criar arte.

Mas, por outro lado, tal abundância de funcionalidades não é necessária para desenhar pixel art, então não faz sentido pagar a mais pelo programa se você for usá-lo apenas para uma função específica. Se você é um desses usuários, aconselhamos que preste atenção a outros representantes que se concentram especificamente em gráficos de pixel.

Pixel

Este programa tem tudo que você precisa para criar essas pinturas e não está saturado de funções que o artista nunca precisará. A configuração é bastante simples; a paleta de cores permite alterar qualquer cor para o tom desejado, e a livre movimentação das janelas o ajudará a personalizar o programa.

PyxelEdit possui um recurso para definir blocos na tela, que pode ser útil ao criar objetos com conteúdo semelhante. A versão de teste está disponível para download no site oficial e não possui restrições de uso, portanto você pode experimentar o produto antes de efetuar a compra.

Pixelformador

Em termos de aparência e funcionalidade, este é o editor gráfico mais comum, mas possui apenas alguns recursos adicionais para criar imagens de pixel. Este é um dos poucos programas distribuídos de forma totalmente gratuita.

Os desenvolvedores não posicionam seu produto como adequado para a criação de pixel art, eles o consideram uma excelente forma de desenhar logotipos e ícones.

GráficosGale

Em quase todos esses softwares, eles tentam implementar um sistema de animação de imagens, que na maioria das vezes acaba sendo simplesmente inutilizável devido a funções limitadas e implementação incorreta. GraphicsGale também não é tão bom com isso, mas pelo menos esta função pode funcionar normalmente.

Quanto ao desenho, tudo é exatamente igual à maioria dos editores: funções básicas, uma grande paleta de cores, possibilidade de criar várias camadas e nada extra que possa atrapalhar o trabalho.

Charamaker

Character Maker 1999 é um dos programas mais antigos. Foi criado para criar personagens ou elementos individuais, que seriam então utilizados em outros programas de animação ou implementados em jogos de computador. Portanto, não é muito adequado para a criação de pinturas.

A interface não é muito boa. Quase nenhuma janela pode ser movida ou redimensionada e o layout padrão não é muito bom. No entanto, você pode se acostumar com isso.

Pro Motion NG

Este programa é ideal em quase tudo, começando por uma interface bem pensada, onde é possível mover janelas independentemente da principal para qualquer ponto e alterar seu tamanho, e terminando com uma mudança automática de conta-gotas para lápis , que é simplesmente um recurso incrivelmente conveniente.

Caso contrário, o Pro Motion NG é apenas um bom software para criar gráficos de pixel de qualquer nível. A versão de teste pode ser baixada do site oficial e testada para decidir se deseja comprar a versão completa.

Aseprite

Ele pode ser considerado o programa mais conveniente e bonito para criar pixel art. O design da interface por si só já vale a pena, mas essas não são todas as vantagens do Aseprite. Existe a capacidade de animar uma imagem, mas ao contrário dos representantes anteriores, ela é implementada de forma competente e fácil de usar. Há tudo que você precisa para criar lindas animações GIF.

No século 20, os jogos de computador tornaram-se uma ampla área de aplicação para gráficos de pixel, especialmente 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 imagens em formato digital, realizada em editores gráficos raster, em que o artista trabalha com a menor unidade de uma imagem digital raster - o pixel. Esta imagem é caracterizada por uma baixa resolução, na qual cada pixel se torna claramente visível. Pixel art leva muito tempo e é trabalhoso, dependendo da complexidade do desenho - pixel por pixel.

Regras básicas de pixel art

O componente mais importante da pixel art é a chamada line art - em outras palavras, seus contornos. Pixel art é feito usando linhas - retas e curvas.

Linhas retas

A regra para construir linhas em pixel art é que elas devem consistir em segmentos que se movem um pixel para o lado à medida que o desenho avança. Evitar erro principal para 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 exemplos de linhas retas inclinadas:

Como pode ser visto na figura, todas as linhas retas nela apresentadas consistem em segmentos de pixels idênticos, 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 em gráficos de pixel são chamadas de “ideais”.

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

Linhas curvas

As linhas retas são mais fáceis de fazer porque evitam dobras, o que não acontece com as 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 de formação de ângulos retos a partir dos pixels, ao desenhar linhas curvas é necessário lembrar a natureza de seu deslocamento. O comprimento dos segmentos de pixel deve mudar uniformemente, gradualmente - subir suavemente e cair suavemente. Os gráficos de pixel não permitem dobras.

É improvável que você consiga desenhar uma linha curva ideal com um movimento de sua mão sem quebrar 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 depois corrigi-la removendo pixels extras do “quadro” finalizado.

Pontilhamento

Na pixel art existe pontilhamento. É uma forma específica de misturar pixels de cores diferentes para criar um efeito de transição de cores.

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

Este método deve o seu aparecimento a limitações técnicas nas paletas de cores, pois para obter, por exemplo, roxo, foi necessário desenhar pixels vermelhos e azuis em um padrão xadrez:

E, posteriormente, o pontilhamento era frequentemente usado para transmitir volume por meio de luz e sombra nas imagens:

Para que o pixel art pontilhado funcione com êxito, a área de mistura de cores deve ter pelo menos dois pixels de largura.

Programas para pixel art

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

Muitas pessoas até hoje preferem desenhar com pixels no conhecido programa padrão do sistema operacional Windows - Microsoft Paint. Este programa é muito fácil de aprender, mas esta também é a sua desvantagem - é 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 online de forma totalmente gratuita, é o GraphicsGale. A desvantagem do programa é, talvez, que ele não suporta salvar pixel art no formato .gif.

Proprietários de computadores Mac podem tentar trabalhar em programa gratuito Pixen. 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 programa Adobe Photoshop, que possui ampla funcionalidade, permite trabalhar com camadas, suporta transparência, fornece trabalho simples com uma paleta. Com a ajuda deste programa, veremos exemplos simples, como desenhar pixel art você mesmo.

Como desenhar Pixel Art no Photoshop

Como nos tipos de tradicional Artes visuais, grande importância em pixel art têm forma, sombra e luz, então antes de aprender a desenhar pixel art, dê-se ao trabalho de se familiarizar com os fundamentos do desenho - pratique desenhar com um lápis no papel.

Desenho "Balão"

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

Desenhe um pequeno semiarco curvo da esquerda para a direita, conduzindo-o de baixo para cima. Lembre-se das regras da pixel art: mantenha as mesmas proporções dos segmentos, desloque-os um pixel para o lado, sem deixar dobras ou ângulos retos. Em seguida, espelhe este arco desenhando parte do topo bola.

Usando o mesmo princípio, desenhe a parte inferior da bola e o fio. Preencha a bola com vermelho usando a ferramenta Preenchimento. Agora só falta adicionar volume - nossa bola parece muito plana. Pinte uma faixa vermelha escura no canto inferior direito da bola e pontilhar a área. No canto superior esquerdo da bola, desenhe um destaque de pixels brancos.

Veja como é simples - a bola está pronta!

Desenho "Robô"

Agora vamos tentar desenhar uma imagem da maneira tradicional e só então limparemos os pixels que violam as regras da pixel art.

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

Agora você pode limpar tudo que estiver atrapalhando e adicionar pixels quando necessário:

Da mesma forma, desenhe a parte inferior do corpo do robô. Não perca a oportunidade de desenhar linhas retas “perfeitas” em locais apropriados.

Detalhe o corpo do robô. Muitos artistas experientes aconselham preparar uma paleta antes de começar a trabalhar - um conjunto de cores que você usará ao criar trabalhos em estilo pixel. Isso permite a maior integridade da imagem. Crie uma paleta em uma área livre da área de trabalho do Photoshop - por exemplo, na forma de quadrados ou pontos coloridos. Posteriormente para selecionar cor desejada, clique nele com a ferramenta Conta-gotas.

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

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

COM lado direito marque a sombra mais profunda do desenho, percorrendo o contorno do corpo. 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 luz:

Dê às pernas do robô uma aparência cilíndrica usando sombra e luz. Da mesma forma, faça furos em círculos no peito do robô:

Agora vamos melhorar a imagem adicionando o elemento de pixel art discutido anteriormente - pontilhamento - às áreas sombreadas do corpo.

Não é necessário fazer pontilhamento nas mechas, assim como nas pernas - elas já são muito pequenas. Usando pixels escuros e claros, desenhe uma fileira de rebites na cabeça do robô em vez de dentes e adicione também 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 é tudo - nosso engraçado robô pixel está pronto!

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

Pegue você mesmo e conte para seus amigos!

Passo 1

Abra o Guia de Animação (16 bits).psd e 18888111.jpg (ou foto de sua preferência) para usar como base para o personagem. Uma foto de perfil completa funcionará melhor e ajudará a obter paletas de cores e estilos para sua figura de 16 bits.
O tutorial de animação possui diversas poses em camadas individuais. Escolha aquele que a melhor maneira corresponde à pose da sua foto - como não temos pernas no quadro, optei pela pose padrão no nível 1.

Passo 2

Usando a Rectangular Marquee Tool (M), selecione a cabeça da sua foto e copie (Cmd /Ctrl + C) e cole (Cmd /Ctrl + V) no Guia de Animação (16 bits).psd.
Dimensione a imagem para caber, proporcionalmente. Você notará que como as dimensões do PSD são muito pequenas, a imagem começará instantaneamente a desenhar um pixel.

etapa 3

Crie uma nova camada e desenhe o contorno com um lápis preto de pixel único (B), usando o guia de animação fornecido nele e a foto como base. \ P
O guia fornecido ajuda a desenvolver uma variedade de personagens, desde chefes maiores ou mulheres mais magras. Este é um guia aproximado para compor e animar meus personagens de pixel art.

Passo 4

Usando a Ferramenta Conta-gotas (I), experimente a área mais escura do tom de pele na foto e crie um pequeno quadrado de cor. Faça isso mais três vezes para criar uma paleta de tons de pele de quatro cores.
Crie outra camada abaixo da camada de contorno e use um pincel de um pixel e uma paleta de cores de quatro cores para sombrear a imagem (novamente, usando a foto como guia). \ P
É melhor armazenar todos os elementos do seu trabalho artístico ou diferentes camadas, pois isso facilita a reutilização deles em outras formas. Isso é especialmente útil para os vilões, já que a maioria dos jogos de 16 bits usa números muito semelhantes. Por exemplo, um amigo pode ter uma camisa vermelha e uma faca, enquanto outro é idêntico, exceto por uma camisa azul e uma arma.

Etapa 5

Repita esse processo para outras partes da figura, sombreando o tecido para combinar com outros elementos da foto original. Certifique-se de continuar amostrando com a ferramenta Conta-gotas para criar paletas de cores primeiro, pois isso fornece um conjunto consistente de cores que parece ótimo e se ajusta à paleta de cores relativamente limitada dos jogos de 16 bits.

Etapa 6

Adicione dados para aprimorar seu personagem com sombras, tatuagens, brincos, etc. Jante aqui e pense em como você deseja que seu personagem apareça no ambiente de jogo. Talvez pudessem usar um machado ou ter um braço robótico?

Etapa 7

Para animar seu personagem, repita os passos anteriores usando as outras cinco camadas do guia de animação. Esse processo pode levar algum tempo para ser dominado e criar resultados perfeitos, mas atalhos podem ser feitos reutilizando elementos de quadros anteriores. Por exemplo, nesta sequência de seis quadros, a cabeça permanece inalterada.

Etapa 8

Para verificar se a sequência de animação está correta, abra o painel Animação no Photoshop e certifique-se de que este momento apenas o primeiro quadro da animação. Você pode adicionar novos quadros e ativar e desativar camadas para criar sua animação, mas a maioria de forma rápidaé usar o comando “Criar molduras a partir de camadas” no menu pop-up do painel (canto superior direito).
O primeiro quadro é um fundo vazio, então selecione-o e clique no ícone da lixeira do painel (parte inferior) para excluí-lo.

Arte de pixel(Gráficos de pixel) são muito populares para jogos até hoje e há vários motivos para isso!

Então, o que torna o Pixel Art cativante:

Percepção. Pixel Art parece incrível! Há muito que pode ser dito sobre cada pixel individual em um sprite.
Nostalgia. Pixel Art traz de volta uma grande sensação nostálgica para jogadores que cresceram jogando Nintendo, Super Nintendo ou Genesis (como eu!)
Fácil de aprender. Pixel Art é um dos tipos mais fáceis de aprender arte digital, especialmente se você for mais programador do que artista ;]

Então, você quer experimentar Pixel Art? Então acompanhe-me enquanto eu mostro como fazer um personagem de jogo 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 aprender com sucesso, você precisará do Adobe Photoshop. Caso não o tenha, você pode baixar uma versão de avaliação gratuita no site da Adobe ou torrent.

O que é Pixel Art?

Antes de começarmos, vamos esclarecer o que é Pixel Art, pois não é tão óbvio quanto você imagina. A maneira mais fácil de definir o que é Pixel Art é definir o que não é, ou seja: qualquer coisa onde os pixels sejam 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: Definir pixels e replicá-los/editá-los para fazer nova versão imagem anterior. Novamente, não pixel art.

Ferramenta suave(basicamente 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 requerem uma camada para misturar efeitos (misturar pixels entre duas camadas de acordo com um determinado algoritmo). Mas como a maioria dos dispositivos hoje em dia lida com milhões de cores, esta afirmação pode ser ignorada. Contudo, o uso não é grande quantidade 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 aplicar suavização de serrilhado nos pixels preenchidos, essas ferramentas são consideradas compatíveis com Pixel Art.

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

Início do trabalho

Antes de começar a criar seu primeiro ativo Pixel Art, você deve saber que Pixel Art não pode ser dimensionado. Se você tentar reduzi-lo, tudo ficará embaçado. Se você tentar aumentar o zoom, tudo ficará bem, desde que você use um zoom múltiplo de dois (mas é claro que não ficará nítido).

Para evitar esse problema, você deve primeiro entender o tamanho do personagem do jogo, ou elemento do jogo, e então 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ê quiser que o jogo pareça duas vezes maior na tela do iPhone 3GS (“Sim, eu realmente quero dar ao meu jogo uma aparência retrô pixelizada!”), cuja resolução de tela é 480x320 pixels, então você precisa trabalhe com metade da resolução, neste caso será 240x160 pixels.

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

Cada célula tem 32x32 pixels!

Escolhi 32x32 pixels não apenas porque se ajusta perfeitamente ao tamanho de tela selecionado, 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 como múltiplos 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, o que acabará resultando em melhor desempenho.

Desenhando um personagem Pixel Art

Pixel Art é conhecido por ter gráficos claros e fáceis de ler: você pode definir características faciais, olhos, cabelos, partes do corpo com apenas alguns pontos. Porém, o tamanho da imagem complica a tarefa: quanto menor for o seu personagem, mais difícil será desenhá-lo. Para ser mais prático, escolha o menor traço de caráter. Sempre escolho os olhos porque são uma das melhores formas de dar vida a um personagem.

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

Você também precisará Ferramenta apagar(Ferramenta Borracha), então clique nele (ou pressione E) e altere suas configurações selecionando na lista suspensa Modo:(Modo:) Lápis(Lápis) (porque não há anti-aliasing neste modo).

Agora vamos começar a pixelar! Desenhe as sobrancelhas e os olhos conforme mostrado na imagem abaixo:

ei! Estou pixelado!!

Você já poderia começar pelo Lineart, mas uma forma mais prática é desenhar a silhueta do personagem. Boas notíciasé que você não precisa ser um profissional nesta fase, apenas tente imaginar o tamanho das partes do corpo (cabeça, tronco, braços, pernas) e a pose inicial do personagem. Tente algo assim em cinza:

Você não precisa ser um profissional nesta fase

Observe que também deixei alguns espaço vazio. Você realmente não precisa preencher toda a tela, deixe espaço para futuras molduras. Neste caso, será muito útil manter o mesmo tamanho de tela para todos eles.

Depois de terminar a silhueta, é hora . Agora você precisa ter mais cuidado com o posicionamento dos pixels, então não se preocupe com roupas, armaduras, etc. Só para garantir, 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), lembre-se de que você não conseguirá posicionar os pixels com a mesma precisão que faria com um lápis. Você precisará configurar como mostrado abaixo:

Selecione , pressionando e segurando Ferramenta retângulo(Ferramenta Retângulo)

Vá para o painel de opções de ferramentas, na lista suspensa Escolha o modo de ferramenta(Modo de rastreamento de caminho) selecione Pixel, altere Peso(Espessura) para 1px (se ainda não tiver feito) e desmarque Anti-alias(Suavização). É assim que você deve fazer:

Observe que não fiz o contorno inferior dos pés. Isso é opcional, pois os pés não são uma parte tão importante das pernas para serem destacadas e isso economizará uma linha de pixels na tela.

Aplicando cores e sombras

Agora você está pronto para começar a colorir nosso personagem. Não se preocupe em escolher as cores certas, serão muito fáceis de alterar posteriormente, bastando certificar-se de que cada um tem a sua “cor”. Use as cores padrão na guia Amostras(Janela → Amostras).

Pinte seu personagem como na imagem abaixo (mas fique à vontade para ser criativo e usar o seu próprio próprias cores!)

Uma cor boa e contrastante melhora a legibilidade do seu ativo!

Observe que ainda não delineei as roupas ou o cabelo. Lembre-se sempre: salve o máximo possível de pixels de contornos desnecessários!

Não há necessidade de perder tempo pintando cada pixel. Para agilizar seu trabalho, use linhas da mesma cor ou Ferramenta Balde de tinta(Ferramenta Balde de Tinta) para preencher as lacunas. Aliás, você também terá que configurá-lo. Selecione Ferramenta Balde de tinta na barra de ferramentas (ou apenas pressione a tecla G) e altere Tolerância(Tolerância) para 0 e também desmarque Anti-alias(Suavização).

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

O próximo passo, que exigirá algum conhecimento de sua parte, é esquivar-se e sombrear. Se você não tem conhecimento de como mostrar brilho e lados sombrios, a seguir darei algumas instruções. Se você não tem tempo ou disposição para estudá-lo, pode pular esta etapa e passar para a seção “Apimentar sua paleta”, pois no final você pode simplesmente fazer seu sombreamento igual ao meu exemplo!

Use a mesma fonte de luz para todo o ativo

Tente dar-lhe as formas que quiser/pode, porque depois disso o ativo começa a ficar mais interessante. Por exemplo, agora você pode ver o nariz, os olhos franzidos, o cabelo emaranhado, os vincos das calças, etc. Você também pode adicionar alguns pontos de luz nele, ficará ainda melhor:

Use a mesma fonte de luz ao sombrear

E agora, como prometi, um pequeno guia sobre luzes e sombras:

Incremente sua paleta

Muitas pessoas usam cores de paleta padrão, mas como muitas pessoas usam essas cores, podemos vê-las em muitos jogos.

Photoshop tem grande escolha cores na paleta padrão, mas não deve confiar muito nela. A melhor maneira de criar suas próprias cores é clicando na paleta principal na parte inferior da barra de ferramentas.

Em seguida, na janela do Seletor de cores, 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 claro ou mais fosco).

Depois de encontrar o que deseja, 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 uma nova cor, todos os novos pixels com a mesma cor de fundo também serão preenchidos.

Esse é outro motivo pelo qual é importante trabalhar com um número pequeno de cores e usar sempre a mesma cor para o mesmo elemento (camisas, cabelo, capacete, armadura, etc.). Mas lembre-se 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 glamorosa! Você pode até recolorir os contornos, apenas certifique-se de que eles combinem bem com o 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 é para garantir que seu personagem fique visível contra fundos claros, escuros, quentes e frios.

Como você já 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 ex. Tenda Elíptica(Marquise 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 M) para selecionar uma área, clique com o botão direito e selecione Transformação Gratuita(Free Transform), ou apenas pressione Ctrl + T. Para alterar o tamanho da área selecionada, arraste uma das alças localizadas ao redor do perímetro do quadro de transformação. Para redimensionar a seleção mantendo as proporções, mantenha pressionada a tecla Shift e arraste uma das alças dos cantos.

No entanto, o Photoshop suaviza automaticamente qualquer coisa editada usando o Transformação Gratuita então antes de editar vá para Editar → Preferências → Geral(Ctrl + K) e alterar Interpolação de imagem(Interpolação de imagem) ativado Vizinho mais próximo(Vizinho mais próximo). Em poucas palavras, quando Vizinho mais próximo a nova posição e tamanho são calculados de forma muito aproximada, sem aplicar novas cores ou opacidade e mantendo as cores que você escolheu.

Integrando 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 Jetpack Joyride no Unity 2D) você já sabe como trabalhar com eles no Unity, e a partir dos artigos sobre Crafty (Jogos de navegador: Snake) e Impact (Introdução à criação de jogos de navegador no Impact) você aprendeu como inseri-los na tela e criar jogos de navegador.

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

Criar novo projeto iOS → cocos2d v2.x → modelo iOS cocos2d, nomeie-o PixelArt e selecione iPhone como dispositivo. Arraste o pixel art criado, 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 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 a escala dos pixels de forma artificial para que cada pixel fosse visivelmente distinguível dos outros. Então adicione esta nova linha dentro do método de inicialização:

Hero.escala = 2,0;

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

Isso ocorre porque, por padrão, o Cocos2d suaviza o desenho ao redimensioná-lo. Não precisamos disso, então adicione a seguinte linha:

Esta linha configura o Cocos2d para dimensionar imagens sem anti-aliasing, então nosso cara 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 criar imagens separadas para telas retina!

Qual é o próximo?

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

Sempre tente evitar o uso de suavização de serrilhado, gradientes ou muitas cores em seus ativos. Isso é para o seu próprio bem, especialmente se você ainda é iniciante.
Se você REALMENTE deseja emular um estilo retrô, observe a arte dos jogos de console de 8 ou 16 bits.
Alguns estilos não utilizam contornos escuros, outros não levam em consideração os efeitos de luz ou sombra. Tudo depende do estilo! Em nosso tutorial 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 realidade não é tão simples quanto parece. A melhor maneira Para melhorar suas habilidades, é prática, prática, prática. Eu recomendo fortemente postar seu trabalho nos fóruns de Pixel Art para que outros artistas possam lhe dar conselhos - é uma ótima maneira de melhorar sua técnica! Comece pequeno, pratique muito, obtenha opinião e você pode criar um jogo incrível que lhe trará muito dinheiro e alegria!