Como desenhar pixel art. O que é PixelArt? Exemplos e como aprender

O desenho no nível do pixel tem um nicho em belas-Artes. usando pixels simples verdadeiras obras-primas são criadas. Claro, você pode criar esses desenhos em uma folha de papel, mas é muito mais fácil e correto fazer fotos usando editores gráficos. Neste artigo, analisaremos detalhadamente cada representante desse software.

O editor gráfico mais popular do mundo, capaz de trabalhar no nível de pixel. Para criar essas imagens neste editor, você só precisa executar algumas etapas de pré-configuração. Tudo o que um artista precisa para criar arte está aqui.

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

PyxelEditar

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

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

Pixelformer

Na aparência e na funcionalidade, este é o editor gráfico mais comum, mas possui vários recursos adicionais para criar imagens de pixel. Este é um dos poucos programas que são distribuídos de forma totalmente gratuita.

Os desenvolvedores não posicionam seu produto como adequado para criar pixel art, eles o consideram uma ótima maneira de desenhar logotipos e ícones.

GraphicsGale

Em quase todos esses softwares, eles tentam introduzir 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. No GraphicsGale, também, nem tudo é tão bom com isso, mas pelo menos essa função pode ser trabalhada normalmente.

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

charamaker

O Character Maker 1999 é um dos programas mais antigos. Ele foi criado para criar personagens ou elementos individuais, que seriam usados ​​em outros programas para animação ou incorporados em jogos de computador. Portanto, não é muito adequado para criar pinturas.

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

Pro Motion NG

Este programa é ideal em quase tudo, desde uma interface bem pensada, onde é possível mover janelas independentemente da principal para qualquer ponto e redimensioná-las, e terminar com uma mudança automática de conta-gotas para lápis, que é apenas um recurso incrivelmente conveniente.

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

Aseprite

Pode ser considerado o programa mais conveniente e bonito para criar pixel art. O design da interface por si só vale alguma coisa, mas isso não é todos os benefícios do Aseprite. Tem a capacidade de animar a imagem, mas ao contrário dos representantes anteriores, é implementado corretamente e é conveniente de usar. Tem tudo para criar belas animações GIF.

"itemprop="imagem">

Neste tutorial de 10 passos sobre como desenhar pixel art, ensinarei como criar um "sprite" (um único personagem ou objeto 2D). O próprio termo, é claro, veio dos videogames.

Aprendi a criar pixel art porque precisava disso para os gráficos do meu jogo. Depois de anos de treinamento, me acostumei e comecei a entender que pixel art é mais uma arte do que apenas uma ferramenta. Hoje, pixel art é muito popular entre desenvolvedores de jogos e ilustradores.

Este tutorial foi criado há muitos anos para ensinar às pessoas conceitos simples de pixel art, mas foi estendido várias vezes, por isso difere significativamente da versão original. Existem muitos tutoriais na web sobre o mesmo tópico, mas todos parecem muito complicados ou longos para mim. Pixel art não é ciência. Você não precisa calcular vetores ao criar pixel art.

Ferramentas

Uma das principais vantagens de criar pixel art é que você não precisa de nenhuma ferramenta avançada - o editor gráfico instalado no seu computador por padrão deve ser suficiente. Vale ressaltar que existem programas desenvolvidos especificamente para a criação de pixel art, como o Pro Motion ou o Pixen (para usuários de Mac). Eu mesmo não os testei, mas ouvi muitos comentários positivos. Neste tutorial, usarei o Photoshop, que, embora custe muito, contém muitas ferramentas úteis para criar arte, algumas das quais são muito úteis para pixelização.

Como desenhar pixel art no Photoshop

Ao usar o Photoshop, sua arma principal será a Ferramenta Lápis (tecla B), que é uma alternativa à Ferramenta Pincel. Lápis permite colorir pixels individuais sem sobrepor as cores.

Mais duas ferramentas são úteis: a Seleção (tecla M) e a Varinha Mágica (tecla W) para selecionar e arrastar, ou copiar e colar. Lembre-se que mantendo pressionada a tecla Alt ou Shift enquanto faz uma seleção, você pode adicionar os objetos selecionados ou excluí-los da lista de seleção atual. A propósito, isso é necessário quando você precisa selecionar objetos irregulares.

Você também pode usar um conta-gotas para transferir cores. Existem milhares de razões pelas quais é importante preservar as cores em pixel art, então você precisará pegar algumas cores e usá-las repetidamente.

Finalmente, certifique-se de memorizar todas as teclas de atalho, pois isso pode economizar muito tempo. Observe o "X" alternando entre cores primárias e secundárias.

linhas

Os pixels são os mesmos pequenos quadrados coloridos. Primeiro, você precisa descobrir como organizar efetivamente esses quadrados para criar a linha de que precisa. Veremos os dois tipos mais comuns de linhas: retas e curvas.

linhas retas

Eu sei o que você estava pensando: tudo é tão simples aqui que não faz sentido se aprofundar em algo. Mas quando se trata de pixels, mesmo linhas retas podem ser um problema. Precisamos evitar partes irregulares - pequenos fragmentos da linha que a fazem parecer irregular. Eles aparecem se uma das partes da linha for maior ou menor que as outras ao seu redor.

linhas curvas

Ao desenhar linhas curvas, você precisa garantir que o declínio ou aumento seja uniforme ao longo de todo o comprimento. Neste exemplo, a linha pura tem intervalos 6 > 3 > 2 > 1, mas a linha com intervalos 3 > 1< 3 выглядит зазубренной.

A capacidade de desenhar linhas é um elemento-chave da pixel art. Um pouco mais adiante, falarei sobre anti-aliasing.

Conceitualização

Para começar você vai precisar Boa ideia! Tente visualizar o que você vai fazer em pixel art - no papel ou apenas em sua mente. Tendo uma ideia sobre o desenho, você pode se concentrar na própria pixelização.

Temas para reflexão

  • Para que serve este sprite? É para o site ou para o jogo? Será necessário torná-lo animado posteriormente? Se sim, ele precisará ser menor e menos detalhado. Por outro lado, se você não trabalhar com o sprite no futuro, poderá anexar a ele quantos detalhes precisar. Portanto, decida com antecedência para que exatamente esse sprite é necessário e selecione os parâmetros ideais.
  • Quais são as restrições? Anteriormente, mencionei a importância de preservar as cores. razão principalé a paleta de cores limitada devido aos requisitos do sistema (o que é extremamente improvável em nosso tempo) ou para compatibilidade. Ou para precisão, se você estiver emulando um estilo específico de C64, NES e assim por diante. Também vale a pena considerar as dimensões do seu sprite e se ele se destaca muito no fundo dos objetos necessários.

Vamos tentar!

Não há restrições neste tutorial, mas eu queria ter certeza de que minha pixel art é grande o suficiente para que você possa ver em detalhes o que acontece em cada uma das etapas. Para tanto, resolvi usar como modelo a Lucha Advogada, uma personagem do mundo do wrestling. Ele se encaixaria perfeitamente em um jogo de luta ou em um filme de ação dinâmico.

O circuito

O contorno preto será uma boa base para o seu sprite, então é por aí que vamos começar. Escolhemos o preto porque fica bem, mas também um pouco escuro. Mais adiante no tutorial, mostrarei como alterar a cor do contorno para aumentar o realismo.

Existem duas abordagens para criar um esboço. Você pode desenhar o caminho à mão livre e ajustá-lo um pouco ou desenhar tudo um pixel por vez. Sim, você entendeu bem, estamos falando de mil cliques.

A escolha do método depende do tamanho do sprite e de suas habilidades de pixel. Se o sprite for realmente grande, seria mais lógico desenhá-lo à mão para criar uma forma aproximada e depois apará-lo. Acredite, é muito mais rápido do que tentar desenhar o esboço perfeito na hora.

No meu tutorial, eu crio um sprite razoavelmente grande, então o primeiro método será mostrado aqui. Será mais fácil se eu mostrar tudo visualmente e explicar o que aconteceu.

Primeiro Passo: Esboço Bruto

Usando seu mouse ou tablet, desenhe um contorno aproximado para seu sprite. Certifique-se de que NÃO esteja MUITO cru, ou seja, que se pareça com o que você vê no produto final.

Meu esboço coincidiu quase completamente com o que eu havia planejado.

Segundo passo: polir o contorno

Comece ampliando a imagem em 6 ou 8 vezes. Você deve ver claramente cada pixel. E então, limpe o contorno. Em particular, preste atenção aos "pixels perdidos" (todo o contorno não deve ter mais de um pixel de espessura), livre-se das bordas irregulares e adicione os pequenos detalhes que perdemos na primeira etapa.

Mesmo sprites grandes raramente excedem 200 por 200 pixels. A frase "faça mais com menos" é uma ótima maneira de descrever o processo de pixelização. Você logo verá que até mesmo um pixel é importante.

Simplifique seu esboço o máximo possível. Trataremos dos detalhes posteriormente, agora você precisa trabalhar para encontrar pixels grandes, como, por exemplo, segmentação muscular. As coisas não parecem muito boas agora, mas tenha um pouco de paciência.

Cor

Quando o contorno está pronto, obtemos uma espécie de coloração que precisa ser preenchida com cores. Pintar, preencher e outras ferramentas nos ajudarão nisso. Combinar cores pode ser complicado, mas a teoria das cores claramente não é o tópico deste artigo. Seja como for, existem alguns conceitos básicos que você precisa saber.

Modelo de cores HSB

Esta é uma abreviação em inglês, formada a partir das palavras "Hue, Saturation, Brightness". É apenas um dos muitos modelos de cores de computador (ou representações numéricas de cores). Você provavelmente já ouviu falar de outros exemplos como RGB e CMYK. A maioria dos editores de imagem usa HSB para seleção de cores, então vamos nos concentrar nisso.

Matiz Matiz é o que costumávamos chamar de cor.

Saturação– Saturação – determina a intensidade da cor. Se o valor for 100%, esse é o brilho máximo. Se você abaixá-lo, aparecerá um embotamento na cor e ela "ficará cinza".

brilho- luz que emite cor. Por exemplo, para preto, esse indicador é 0%.

Escolhendo as cores

Decidir quais cores escolher depende de você, mas há algumas coisas a serem lembradas:

  • Cores suaves e dessaturadas parecem mais realistas do que caricatas.
  • Pense na roda de cores: quanto mais longe duas cores estiverem, pior elas se misturam. Ao mesmo tempo, vermelho e laranja, que estão próximos um do outro, ficam ótimos juntos.

  • Quanto mais cores você usar, mais desfocado seu desenho ficará. Portanto, escolha algumas cores primárias e use-as. Lembre-se que o Super Mario, ao mesmo tempo, foi criado apenas a partir de combinações de marrom e vermelho.

Aplicando flores

Aplicar a cor é muito fácil. Se você estiver usando o Photoshop, basta selecionar o fragmento desejado, selecione-o com uma varinha mágica (tecla W) e preencha com a cor principal (Alt-F) ou cor secundária Ctrl-F).

sombreamento

O sombreamento é uma das partes mais importantes da busca para se tornar um semideus pixelado. É nesse estágio que o sprite começa a ter uma aparência melhor ou se transforma em uma substância estranha. Siga minhas instruções e você definitivamente terá sucesso.

Primeiro passo: escolha uma fonte de luz

Primeiro escolhemos uma fonte de luz. Se o seu sprite faz parte de um fragmento maior que possui luzes próprias, como lâmpadas, tochas e assim por diante. E todos eles podem afetar a aparência do sprite de maneiras diferentes. No entanto, escolher uma fonte de luz distante como o sol é uma ótima ideia para a maioria das pixel art. Para jogos, por exemplo, você precisará criar o sprite mais brilhante possível, que pode ser ajustado ao ambiente.

Normalmente, opto por uma luz distante em algum lugar na frente do sprite, de modo que apenas a frente e o topo do sprite sejam iluminados e o resto seja sombreado.

Etapa dois: sombrear diretamente

Uma vez escolhida uma fonte de luz, podemos começar a escurecer as áreas mais distantes dela. Nosso modelo de iluminação sugere que a parte inferior da cabeça, braços, pernas, etc. sejam cobertos com uma sombra.

Lembre-se de que coisas planas não podem projetar sombra. Pegue um pedaço de papel, amasse-o e enrole-o sobre a mesa. Como você sabe que não é mais plano? Você acabou de ver as sombras ao redor dele. Use sombreamento para enfatizar dobras em roupas, músculos, pele, cor da pele e assim por diante.

Etapa três: sombras suaves

O segundo tom, que é mais claro que o primeiro, deve ser usado para criar sombras suaves. Isso é necessário para áreas que não são iluminadas diretamente. Eles também podem ser usados ​​para fazer a transição do claro para o escuro e em superfícies irregulares.

Passo quatro: lugares iluminados

Locais que recebem raios de luz diretos também devem ser destacados. Vale ressaltar que deve haver menos realces do que sombras, caso contrário, eles causarão atenção desnecessária, ou seja, sobressairão.

Salve-se da dor de cabeça lembrando-se de uma regra simples: primeiro as sombras, depois os destaques. O motivo é simples: se não houver sombras, fragmentos muito grandes serão expostos e, quando você aplicar as sombras, elas terão que ser reduzidas.

Algumas regras úteis

As sombras são sempre difíceis para iniciantes, então aqui estão algumas regras que você precisa seguir ao sombrear.

  1. Não use gradientes. O erro mais comum de novato. Os gradientes parecem terríveis e nem se aproximam de como a luz é reproduzida nas superfícies.
  2. Não use "sombreamento suave". Estou falando de uma situação em que a sombra fica muito distante do contorno, pois fica muito embaçada, impedindo que a fonte de luz seja revelada.
  3. Não use muitas sombras. É fácil pensar que "quanto mais cores - mais realista a imagem". Seja como for, em Vida real estamos acostumados a ver as coisas em espectros escuros ou claros, e nosso cérebro filtrará tudo o que estiver no meio. Use apenas duas cores escuras (escuras e muito escuras) e duas cores claras (claras e muito claras) e coloque-as sobre a cor base, não uma sobre a outra.
  4. Não use cores muito parecidas. Realmente não há necessidade de usar cores quase idênticas, exceto quando você deseja criar um sprite realmente embaçado.

pontilhado

Preservar as cores é o que os criadores de pixel art realmente precisam prestar atenção. Outra maneira de obter mais sombras sem usar mais cores é chamado de "dithering". Assim como na pintura tradicional, usa-se "hatching" e "crosshatching", ou seja, você, no sentido literal, consegue algo entre duas cores.

Exemplo simples

Aqui está um exemplo simples de como duas cores podem ser pontilhadas para criar quatro opções de sombreamento.

Exemplo Avançado

Compare a imagem acima (criada com um gradiente no Photoshop) com a imagem criada com apenas três cores usando dithering. Observe que diferentes padrões podem ser usados ​​para criar "cores adjacentes". Será mais fácil para você entender o princípio se você mesmo criar vários padrões.

Aplicativo

Dithering pode dar ao seu sprite aquele belo visual retrô, já que muitos dos primeiros videogames usavam fortemente essa técnica devido ao pequeno número de paletas de cores disponíveis (se você quiser ver muitos exemplos de pontilhamento, confira os jogos desenvolvidos para Sega Genesis). Eu mesmo não uso esse método com muita frequência, mas, para fins educacionais, mostrarei como ele pode ser aplicado ao nosso sprite.

Você pode usar dither para o conteúdo do seu coração, mas vale a pena notar que apenas algumas pessoas realmente o usam com sucesso.

contorno seletivo

O contorno seletivo, que também é chamado de selout (do delineamento selecionado em inglês), é uma subespécie de sombreamento de contorno. Em vez de usar uma linha preta, estamos escolhendo uma cor que ficará mais harmoniosa em seu sprite. Também alteramos o brilho desse caminho em direção às bordas do sprite, permitindo que a fonte de cores determine quais cores devemos usar.

Até este ponto, usamos um contorno preto. Não há nada de errado com isso: o preto parece ótimo e também permite distinguir qualitativamente o sprite do fundo dos objetos ao seu redor. Mas, ao usar esse método, estamos sacrificando algum realismo que pode ser necessário em alguns casos, pois nosso sprite continua a parecer um desenho animado. O contorno seletivo permite que você se livre disso.

Você notará que usei um seult para suavizar seus músculos. Por fim, nosso sprite começa a parecer um todo, e não um grande número de fragmentos separados.

Compare com o original:

  1. Alisamento

O princípio do anti-aliasing é simples: adicionar cores intermediárias às dobras para torná-las mais suaves. Por exemplo, se você tiver uma linha preta em um fundo branco, pequenos pixels cinzas serão adicionados às dobras ao longo da borda.

Técnica 1: suavizando as curvas

Em geral, você precisa adicionar cores intermediárias onde houver quebras, caso contrário, a linha parecerá irregular. Se ainda parecer irregular, adicione outra camada de pixels mais claros. A direção de aplicação da camada intermediária deve coincidir com a direção da curva.

Acho que não consigo explicar melhor sem complicar. Basta olhar para a foto e você entenderá o que quero dizer.

Técnica 2: arredondamento de saliências

Técnica 3: Sobrescrevendo Finais de Linha

Aplicativo

Agora, vamos aplicar anti-aliasing à nossa impressão. Observe que, se você deseja que seu sprite fique bem em qualquer cor de fundo, não suavize a parte externa da linha. Caso contrário, seu sprite será cercado por um halo muito inapropriado na junção com o plano de fundo e, portanto, se destacará muito claramente contra qualquer plano de fundo.

O efeito é muito sutil, mas é de grande importância.

Por que você precisa fazer isso manualmente?

Você pode estar se perguntando: "Por que não apenas aplicar um filtro de editor gráfico ao nosso sprite se quisermos que pareça suave?" A resposta também é simples - nenhum filtro deixará seu sprite tão nítido e limpo quanto feito à mão. Você terá controle total não apenas sobre as cores usadas, mas também onde usá-las. Além disso, você sabe melhor do que qualquer filtro onde o anti-aliasing será apropriado e onde há áreas nas quais os pixels simplesmente perderão sua qualidade.

Acabamento

Uau, estamos bem perto de poder desligar seu computador e pegar uma cerveja gelada na geladeira. Mas ele ainda não chegou! A última parte é sobre o que separa o amador enérgico do profissional experiente.

Dê um passo para trás e dê uma boa olhada no seu sprite. Existe a possibilidade de ele ainda parecer "cru". Reserve um tempo para melhorar e garantir que tudo esteja perfeito. Não importa o quão cansado você esteja, a parte mais divertida está à sua frente. Adicione detalhes para tornar seu sprite mais interessante. É aqui que suas habilidades e experiência com pixels entram em jogo.

Você pode se surpreender com o fato de nosso Lucha Lawyer não ter olhos todo esse tempo ou que o pacote que ele está segurando esteja vazio. Na verdade, a razão está no fato de que eu queria esperar com pequenos detalhes. Reparem também no caimento que coloquei nas braçadeiras, na braguilha da calça… bom, o que seria de um homem sem os mamilos? Também escureci um pouco a parte inferior do tronco para que o braço se sobressaia mais contra o fundo do corpo.

Finalmente você terminou! Lucha Lawyer concorre na categoria Lightweight, pois possui apenas 45 cores (talvez seja um heavyweight dependendo das limitações de sua paleta) e sua resolução é de cerca de 150 por 115 pixels. Agora você pode abrir a cerveja!

Progresso total:

É sempre engraçado. Aqui está um gif mostrando a evolução do nosso sprite.

  1. Aprenda os fundamentos da arte e da prática técnicas tradicionais. Todo o conhecimento e habilidades necessárias para desenhar e desenhar podem ser aplicados em pixelização.
  2. Comece com sprites pequenos. A parte mais difícil é aprender a colocar muitos detalhes usando o mínimo de pixels possível sem deixar os sprites tão grandes quanto os meus.
  3. Estude o trabalho de artistas que você admira e não tenha medo de não ser original. A melhor maneira aprendizagem - repetição de fragmentos do trabalho de outras pessoas. Leva muito tempo para desenvolver seu próprio estilo.
  4. Se você não tiver um tablet, compre um. Permanente colapsos nervosos e o estresse de clicar constantemente no botão esquerdo do mouse não é divertido, nem é provável que impressione os membros do sexo oposto. Eu uso um pequeno Wacom Graphire2 - gosto de sua compacidade e portabilidade. Você pode gostar de um tablet maior. Antes de comprar, faça um pequeno test drive.
  5. Compartilhe seu trabalho com outras pessoas para obter a opinião delas. Essa também pode ser uma boa maneira de fazer novos amigos geeks.

PS

O artigo original está localizado. Se você tiver links para tutoriais legais que precisam ser traduzidos, envie-os para nosso salão de festas. Ou escreva diretamente para as mensagens do grupo

Hoje em dia, programas como Photoshop, Illustrator, Corel facilitam o trabalho do designer e ilustrador. Com a ajuda deles, você pode trabalhar totalmente sem se distrair com a disposição dos pixels, como acontecia no final do século passado. Todos cálculos necessários comete Programas- editor gráfico. Mas há pessoas trabalhando em uma direção diferente, não apenas diferente, mas até completamente oposta. Ou seja, eles estão envolvidos no mesmo arranjo de pixels da velha escola, a fim de obter um resultado e uma atmosfera únicos em seu trabalho.

Um exemplo de pixel art. Fragmento.

Neste artigo, gostaríamos de falar sobre pessoas envolvidas com pixel art. Dê uma olhada em seus melhores trabalhos, que, apenas pela complexidade da implementação, podem ser chamados de obras sem exagero. arte contemporânea. Obras de tirar o fôlego quando vistas.

Arte de pixel. As melhores obras e ilustradores


Cidade. Autor: Zoggles


Castelo de conto de fadas. Autor: Tinuleaf


aldeia medieval. Autor: docdoom


jardins Suspensos Semiramis. Autor: Eclipse Lunar


Bairro residencial. Autor:

Pixel art ou pixel art é pintura digital, que é criado em editores raster pixel a pixel. Pixel (pixel) - o menor elemento gráfico da imagem. Em outras palavras, é um ponto. E todos os desenhos de pixel são formados por incontáveis ​​aglomerados de pontos, resultando em um pouco desigual, como se mal traçado. Mas essa é a beleza dessas fotos.

Um pouco de história

Quais programas podem criar pixel art moderno

Existem muitos editores raster gratuitos por aí. Mas mais frequentemente do que outros são chamados de Microsoft Paint e Adobe Photoshop. É verdade que o Paint é considerado uma ferramenta menos conveniente para criar pixel art do que o Adobe Photoshop. Por que? Neste programa:
é muito difícil conseguir uniformidade e simetria de imagens;
ao salvá-los no formato jpg, há uma forte distorção de cores;
difícil desenhar sombras e destaques.
Portanto, eles tentam dar preferência ao Adobe Photoshop. Este programa tem muito mais opções de trabalho do que o Paint. O que permite desenhar não personagens individuais com um design simples, mas imagens inteiras. Além disso, a própria pixel art é mais fácil e rápida de editar. Sim, e você pode transferir transições de cores no Adobe Photoshop de maneira suave e natural.

Como evitar torções em pixel art

Pixel art é uma coleção de pixels que são "pontos" quadrados ou retangulares. Quando uma imagem é desenhada a partir desses “pontos”, ela se torna angular, a suavidade das linhas desaparece. Por um lado, este cartão de visitas Pixel Art, por outro lado, quero mais suavidade, o que tornará a imagem nítida e atraente para o usuário. Este problema na linguagem dos artistas de pixel é chamado de kinks ou "jaggies".
Jaggies são peças que dão a qualquer linha uma aparência irregular. Eles geralmente são descartados por um dos as seguintes maneiras:
aumentar o segmento de linha discrepante em 2, 3 ou mais pixels de comprimento;
reduza o comprimento dos próprios pixels na área proeminente;
uma nova seção da linha é construída a partir de vários pixels únicos;
adicione pixels únicos à área irregular entre os "pontos" mais longos e assim por diante.
Para eliminar adequadamente as dobras, lembre-se da regra principal: o comprimento dos elementos de uma linha curva deve diminuir ou aumentar gradativamente. Você também precisa se lembrar que deslocar um segmento de linha em dois ou mais pixels de altura leva à destruição da suavidade.
Portanto, a prática de desenho constante é necessária. E como o mais simples e ajuda visual, o que ajuda a evitar dobras, você pode usar um conjunto de linhas retas oblíquas.

Como obter uma sombra em Pixel Art

Outro ponto importante em pixel art, esse é o volume deles. Isso, como em outras opções gráficas, é obtido por meio de realces e sombras. Para criar uma sombra em pixel art, você precisa de uma transição suave do tom claro para o escuro ou de uma cor para outra. Para obter esse efeito, a tecnologia de mixagem é frequentemente usada - pontilhamento ou pontilhamento. Em outras palavras, na borda de duas cores, elas são misturadas em um padrão quadriculado. Este método surgiu no contexto de uma escassez de flores. Com a ajuda da mistura de xadrez de duas cores, foi possível obter uma terceira que não estava na paleta.
No entanto, depois que a paleta se expandiu significativamente, a tecnologia de pontilhamento ainda permaneceu em demanda. Mas é preciso lembrar que a transição de uma cor para outra com largura de um pixel não parece boa. Acontece apenas um pente. É por isso
a área de mesclagem mínima deve ser de pelo menos dois pixels. E quanto mais ampla a transição, melhor.
Além disso, ao criar uma sombra:
é importante determinar em que ângulo e de que lado a luz incidirá sobre o objeto. Isso tornará o desenho "vivo", além de entender onde desenhar a sombra. Por exemplo, se a luz cair à direita, as áreas de sombra estarão localizadas à esquerda, etc.;
você precisa usar cores muito mais escuras do que as básicas. Aqueles. a sombra deve ser representada usando cores mais escuras do que a própria área sombreada. Por exemplo, se o objeto for vermelho, sua sombra será bordô ou marrom escuro;
não se esqueça da penumbra. Para isso, é selecionada uma tonalidade que, de acordo com a paleta, esteja entre a cor de base e a cor de sombra. esta sombra colocados entre as camadas dessas duas cores. Como resultado, é criado o efeito de uma transição suave de uma área escura para uma área mais clara.

Como obter brilho em pixel art

O destaque, como uma sombra, dá volume aos objetos desenhados. Está sempre localizado no lado onde a luz incide. Mas se o objeto deve ter uma superfície brilhante, por exemplo, uma xícara de porcelana, uma espada de aço, etc., também será necessário um destaque na área sombreada.
Para criar um destaque na área onde a luz incide, você precisa pegar uma tinta que será bem mais clara que a principal. Só não precisa ser zeloso no brilho deste ponto - pode não sair naturalmente. Muitas vezes, o brilho é representado em branco sem transições. Isso não acontece na natureza. Sim, e o objeto parecerá plano.
Para criar um destaque do lado da sombra, você precisa de uma cor mais clara do que aquela com a qual a própria sombra é aplicada. E, neste caso, também é necessária uma transição suave, que pode ser obtida usando vários tons ao mesmo tempo.
Para perceber tudo isso, é claro, a prática é necessária. E é melhor começar com objetos simples.

Se você gostava de brincar com Lego quando criança (ou continua a brincar mesmo depois de adulto), com certeza vai se interessar por pixel art isométrico. Pode depender da tecnologia e ser mais uma ciência exata do que uma ilustração. Mas em tal arte não há perspectiva 3D, você pode mover os elementos ambiente com a máxima simplicidade.

Criaremos o personagem como um ponto de referência lógico para a pixel art, pois ajudará a determinar as proporções da maioria dos outros itens que provavelmente criaremos. No entanto, primeiro você precisa aprender alguns conceitos básicos de pixel art isométrico e, em seguida, passar para a criação de personagens; se você não quiser aprender o básico e desenhar um cubo, pule para a etapa 3. Agora vamos começar.

1. Linhas de pixels

Essas linhas são a base para o estilo mais comum (e interessante) de pixel art isométrico, o estilo que usaremos neste tutorial:

Eles têm dois pixels de comprimento para cada pixel abaixo. Essas linhas parecem relativamente suaves e são usadas para superfícies quadradas:

As estruturas de linha mais comumente usadas (como na figura abaixo) funcionarão bem, mas o desenho ficará mais angular e áspero a cada aumento de passo:

Para contraste, aqui estão algumas linhas estruturadas de forma desigual:

Muito angular e não parece

Lindo. Evite usá-los.

2. Volumes

Nosso personagem não seguirá exatamente as regras isométricas, então vamos primeiro criar um cubo simples para descobrir as proporções.

Crie um novo documento no Photoshop com resolução 400x400px.

Eu gosto de abrir uma janela adicional para o mesmo arquivo usando o menu Janela > Organizar > Nova janela/lições.(Janela > Organizar > Nova Janela…). Isso permite, trabalhando em um aumento 600% acompanhe o resultado na janela de zoom 100% . Usar a grade é com você, mas às vezes acho mais irritante do que útil.

Vamos ampliar o documento e criar uma das linhas 2:1

eu prefiro usar 5% cinza em vez de preto, para depois adicionar sombras (preto e baixa opacidade) e poder selecionar cada cor separadamente com a varinha mágica.

Existem várias maneiras de desenhar uma linha:

1. Usando ferramenta de linha(Ferramenta Linha) com Modo Píxeis(Pixels) desmarcado Alisamento(Anti-alias) e espessura 1px. Conforme você desenha, a dica de ferramenta do ângulo de inclinação deve aparecer 26,6°. Na verdade, a ferramenta Linha não pode ser considerada conveniente, pois cria linhas irregulares se o ângulo não for preciso.

2. Você precisa criar uma seleção 20 x 40 pixels, em seguida, escolha K lápis(Ferramenta Lápis) 1px e desenhe um ponto no canto inferior esquerdo da seleção, depois disso, mantendo pressionada a tecla Mudança clique à direita canto superior. O Photoshop criará automaticamente uma nova linha entre os dois pontos. Com a prática, você pode criar linhas suaves sem seleção.

3. Você precisa desenhar dois pixels com um lápis, selecioná-los, clicar Ctrl+Alt, arraste a seleção para um novo local para que os pixels converjam nos cantos. Você também pode mover a seleção usando as setas do teclado enquanto segura alternativo. Tal método é chamado Deslocamento Alt(Alt Nudge).

Aqui criamos a primeira linha. Selecione-o e mova-o como no passo 3, ou apenas copie e cole, movendo a nova camada para baixo. Depois disso, vire a segunda linha horizontalmente no menu Editar > Transformar > Inverter horizontalmente(Editar > Transformar > Inverter horizontalmente). Eu uso esse recurso com tanta frequência que até criei um atalho de teclado para ele!

Agora vamos combinar nossas linhas:

Em seguida, Alt-Offset novamente, vire a cópia verticalmente e mescle as duas metades para completar nossa superfície:

É hora de adicionar uma "terceira dimensão". Alt-shift a superfície quadrada e mova-a para 44px abaixo:

Dica: Se você segurar as teclas de seta enquanto move Mudança, a seleção mudará para 10 pixels em vez de um.

Para tornar o cubo mais organizado, vamos suavizar os cantos removendo os pixels mais à esquerda e mais à direita dos quadrados. Depois disso, adicione linhas verticais:

Agora remova as linhas desnecessárias na parte inferior do cubo. Para começar a colorir nossa figura, escolha qualquer cor (de preferência um tom claro) e preencha o quadrado superior com ela.

Agora aumente o brilho da cor selecionada em 10% (Recomendo usar os controles deslizantes HSB no painel de controle) para desenhar cantos mais claros ao longo da frente do nosso quadrado colorido. Como cortamos um pouco o cubo, essas linhas mais claras ficarão mais bonitas sobre as bordas pretas (em vez de substituí-las) como na imagem abaixo:

Agora precisamos remover as bordas pretas. Use o truque do método de desenho de segunda linha para a borracha (que deve ser definida como normal ferramenta de apagar(Ferramenta Borracha) Modo Lápis(Modo Lápis), Espessura 1px).

Selecione a cor do quadrado superior com Pipetas(Ferramenta conta-gotas). Para selecionar rapidamente esta ferramenta, ao desenhar com um lápis ou um preenchimento, pressione a tecla alternativo. Use a cor do conta-gotas resultante para preencher a linha vertical no meio do cubo. Depois disso, reduza o brilho da cor em 15% e preencha o lado esquerdo do cubo com a cor resultante. Diminua ainda mais o brilho 10% para o lado direito:

Nosso cubo está completo. Deve parecer limpo e relativamente suave quando ampliado. 100% . Podemos continuar.

3. Adicione um personagem

O estilo do personagem pode ser completamente diferente, você é livre para alterar as proporções ou elementos que desejar. Normalmente eu faço corpo sutil e uma cabeça um pouco maior. O corpo magro do personagem ajuda a manter as linhas retas e simples.

Seria lógico começar pelos olhos. Se fôssemos rígidos com ângulos isométricos, então no rosto um olho deveria ser mais baixo, mas em pequena escala podemos negligenciar esse recurso para tornar os rostos dos personagens mais agradáveis. Isso tornará o desenho limpo, mesmo apesar do tamanho.

Tornamos o personagem pequeno, porque depois de um tempo você pode querer adicionar um carro, uma casa, uma praça inteira ou até mesmo uma cidade a ele. Portanto, o personagem deve ser um dos mais itens pequenos na ilustração. A eficiência gráfica também deve ser considerada; tente tornar o personagem o mais atraente possível com o menor número possível de pixels (grande o suficiente para representar características faciais). Além disso, objetos pequenos são muito mais fáceis de desenhar. A exceção é quando você quer apenas mostrar o personagem, suas emoções ou sua semelhança com alguém.

Vamos criar uma nova camada. Os olhos precisam apenas de dois pixels - um para cada olho, com um pixel em branco entre eles. Pule um pixel à esquerda dos olhos, adicione uma linha vertical:

Agora adicione outra camada e desenhe uma faixa horizontal de 2px, esta será a boca. Use as setas do teclado para mover e quando encontrar a posição perfeita, mova a camada para baixo. Faça o mesmo com o queixo, deve ser apenas uma linha mais longa:

Finalize o cabelo e o topo da cabeça e depois suavize os cantos. Você deve obter algo como isto:

Agora deixe um pixel em branco próximo ao segundo olho, adicione costeletas (que também ajudarão a desenhar as orelhas do personagem) e mais alguns pixels acima delas até a linha do cabelo. Depois deixe mais um pixel vazio, é aqui que vai começar a orelha e a linha que marca o final da cabeça. Vá em frente e suavize os cantos das linhas:

Adicione um pixel para o topo da orelha e remodele a cabeça se quiser; as cabeças geralmente são desenhadas já na área do pescoço:

Desenhe uma linha do queixo - este será o peito. O início do pescoço estará na orelha, alguns pixels para baixo e alguns pixels na diagonal para que os ombros do nosso personagem fiquem visíveis:

Agora, no local onde terminam os ombros, adicione uma linha vertical com um comprimento de 12 pixels para fazer o lado externo da mão também lado interno estará dois pixels à esquerda. Conecte as linhas na parte inferior com alguns pixels para fazer uma mão / punho (no nosso caso não há detalhes, portanto, não preste atenção a esse elemento) e logo acima do local onde a mão termina, adicione uma linha 2:1 , que funcionará como uma cintura, depois finalize a linha do peito e obtenha um acabamento parte de cima corpo. O outro braço do personagem não é visível, mas ficará bem, pois está coberto pelo torso.

Você deve acabar com algo parecido com isto:

Claro, você pode usar qualquer proporção que desejar; Prefiro traçar diferentes opções lado a lado antes de decidir qual é a melhor.

Agora, para o torso inferior, adicionaremos mais alguns linhas verticais. eu gosto de sair 12 pixels entre solas e cintura. As pernas são muito fáceis de desenhar, basta fazer uma perna um pouco mais longa, o que vai deixar o personagem mais volumoso:

Agora vamos adicionar cor. Encontrar uma boa cor de pele é sempre difícil, então se você quiser usar a mesma deste tutorial, seu código é #FFCCA5. A correspondência de cores para o restante dos elementos não deve ser um problema. Depois disso, determine o comprimento das mangas, a posição do corte da camisa, seu estilo. Agora adicione uma faixa escura para separar a camisa do corpo. Prefiro deixar todos os elementos decorativos mais claros do que o preto (principalmente quando muitos elementos estão no mesmo nível, por exemplo, de uma camisa a couro ou calça). Isso permite que você obtenha o contraste necessário, enquanto a imagem não ficará muito áspera.

Você pode adicionar efeitos de luz a quase todas as zonas de cores. Evite também um grande número sombras ou usando gradientes. Mais alguns pixels ( 10% ou 25% ) uma cor clara ou escura é suficiente para fazer os elementos parecerem tridimensionais e tirar o achatamento da ilustração. Se você deseja adicionar uma cor vibrante a uma área que já possui 100% brilho, tente diminuir sua saturação. Em alguns casos (por exemplo, ao desenhar o cabelo), isso pode se tornar de um jeito bom mudar de tonalidade.

Você pode tentar muitas opções de cabelo. Aqui estão algumas ideias:

Se você continuar a criar personagens, pequenas coisas como estilo de roupa, comprimento da manga, comprimento da calça, acessórios, roupas e cor da pele serão muito úteis para variar.

Agora só falta juntar os dois elementos e avaliar como eles ficam no mesmo cenário:

Se você deseja exportar sua criação, PNG é o formato ideal.

É isso, trabalho feito!

Espero que esta lição não seja muito confusa. acho que falei sobre o número máximo conselhos e técnicas estéticas. Você pode expandir livremente seu mundo de pixel isométrico - edifícios, carros, interiores, exteriores. Fazer tudo isso é possível e até interessante, embora não seja tão fácil.

Tradutor: Shapoval Alexey