"itemprop="imagem">

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

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

Este tutorial foi criado há muitos anos para ensinar às pessoas os conceitos simples de criação de pixel art, mas foi atualizado várias vezes para ser significativamente diferente da versão original. Existem muitos tutoriais na Internet sobre o mesmo assunto, mas todos me parecem muito complicados ou demorados. pixel art não é ciência. Você não deve 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 padrão instalado em seu computador deve ser suficiente. Vale ressaltar que existem programas desenvolvidos especificamente para a criação de pixel art, como Pro Motion ou Pixen (para usuários de Mac). Eu não os testei, mas ouvi muitos comentários positivos. Neste tutorial usarei o Photoshop, que, embora caro, contém muitas ferramentas úteis para a criação de 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. O lápis permite colorir pixels individuais sem sobrepor cores.

Precisaremos de mais duas ferramentas: “Seleção” (tecla M) e “Varinha Mágica” (tecla W) para selecionar e arrastar ou copiar e colar. Lembre-se de que, mantendo pressionada a tecla Alt ou Shift ao fazer uma seleção, você pode adicionar objetos selecionados ou excluí-los da lista de seleção atual. Isto é útil quando você precisa selecionar objetos irregulares.

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

Por fim, lembre-se de todas as teclas de atalho, pois isso pode economizar muito tempo. Observe o “X” que alterna entre as cores primárias e secundárias.

Linhas

Pixels são os mesmos pequenos quadrados coloridos. Primeiro você precisa entender como organizar esses quadrados de maneira eficaz para criar a linha desejada. Veremos os dois tipos de linhas mais comuns: retas e curvas.

Linhas retas

Eu sei o que você está pensando: tudo aqui é tão simples que não adianta entrar em nada. Mas quando se trata de pixels, até mesmo as linhas retas podem se tornar um problema. Precisamos evitar partes irregulares – pequenos pedaços de linha que fazem com que pareça irregular. Eles aparecem se uma parte da linha for maior ou menor que as outras que a cercam.

Linhas curvas

Ao desenhar linhas curvas, você precisa ter certeza de que a descida ou subida é uniforme ao longo de todo o comprimento. Neste exemplo, uma linha simples tem intervalos 6 > 3 > 2 > 1, mas uma 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ê precisará Boa ideia! Tente visualizar o que você fará em pixel art - no papel ou apenas em sua mente. Depois de ter uma ideia do desenho, você pode se concentrar na pixelização em si.

Tópicos para reflexão

• Para que esse sprite será usado? É para um site ou para um jogo? Será necessário animá-lo posteriormente? Nesse caso, ele precisará ser menor e menos detalhado. Por outro lado, se você não trabalhar com o sprite no futuro, poderá anexar quantas peças forem necessárias. Portanto, decida com antecedência para que exatamente esse sprite é necessário e selecione os parâmetros ideais.
• Que restrições existem? Mencionei anteriormente a importância de preservar as flores. A principal razãoé a paleta de cores limitada devido aos requisitos do sistema (o que é extremamente improvável em nossa época) ou à compatibilidade. Ou para maior precisão se você estiver emulando um estilo específico de C64, NES, etc. Também vale a pena considerar as dimensões do seu sprite e se ele se destaca demais dos objetos de fundo que você precisa.

Vamos tentar!

Não há restrições neste tutorial, mas eu queria ter certeza de que meu pixel art seria grande o suficiente para que você pudesse ver detalhadamente o que acontece em cada uma das etapas. Para isso, decidi usar como modelo Lucha Lawyer, personagem do mundo do wrestling. Ele se encaixaria perfeitamente em um jogo de luta ou em um jogo de ação em ritmo acelerado.

O circuito

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

Existem duas abordagens para criar um contorno. Você pode desenhar o contorno à mão e depois ajustá-lo um pouco, ou pode desenhar tudo, um pixel de cada vez. Sim, você entendeu tudo corretamente, estamos falando de mil cliques.

O método escolhido depende do tamanho do sprite e de suas habilidades de pixelização. Se o sprite for realmente enorme, 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 fazer o esboço perfeito imediatamente.

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

Etapa um: esboço aproximado

Usando o mouse ou tablet, desenhe um esboço para o seu sprite. Certifique-se de que NÃO esteja MUITO cru, o que significa que tem a mesma aparência que você vê no produto final.

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

Etapa dois: aprimorar o contorno

Comece ampliando a imagem 6 ou 8 vezes. Você deve ver cada pixel claramente. E então limpe o contorno. Em particular, vale a pena prestar atenção aos “pixels perdidos” (o contorno inteiro não deve ter mais do que um pixel de espessura), livrar-se das bordas irregulares e adicionar 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 tanto quanto possível. Entraremos em detalhes mais tarde, agora você precisa trabalhar para encontrar os pixels grandes, como, por exemplo, a segmentação muscular. As coisas não parecem boas agora, mas seja um pouco paciente.

Cor

Quando o contorno estiver pronto, obtemos uma espécie de folha para colorir que precisa ser preenchida com cores. Pintura, vazamento e outras ferramentas nos ajudarão nisso. Escolher 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 abreviatura em inglês composta pelas 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 imagens 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%, então este é o brilho máximo. Se você baixá-lo, a cor aparecerá opaca e ela ficará “cinza”.

Brilho– luz que emite cor. Por exemplo, para uma pessoa negra este indicador é de 0%.

Escolhendo cores

A decisão de quais cores escolher depende de você, mas há algumas coisas que você deve ter em mente:

• Cores opacas e dessaturadas parecem mais realistas do que desenhos animados.
• Pense em uma roda de cores: quanto mais distantes duas cores estiverem na roda, pior elas combinam. Ao mesmo tempo, vermelho e laranja, que estão próximos um do outro, ficam ótimos juntos.

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

Aplicando cores

Aplicar a cor é muito simples. Se você usa o Photoshop, basta selecionar o fragmento desejado, selecioná-lo com a varinha mágica (tecla W) e preenchê-lo com a cor principal (Alt-F) ou cor adicional Ctrl-F).

Sombreamento

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

Etapa um: escolha uma fonte de luz

Primeiro escolhemos uma fonte de luz. Se o seu sprite fizer parte de um fragmento maior que possui suas próprias fontes de iluminação, como lâmpadas, tochas e assim por diante. E todos eles podem ter efeitos diferentes na aparência do sprite. No entanto, escolher uma fonte de luz distante como o sol é uma ótima ideia para a maioria dos pixel art. Para jogos, por exemplo, você precisará criar o sprite mais brilhante possível, que poderá então ser ajustado ao ambiente.

Eu normalmente opto por uma luz distante em algum lugar na frente do sprite, de modo que apenas a frente e o topo do sprite fiquem iluminados e o resto fique sombreado.

Etapa dois: sombreamento direto

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

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

Etapa três: sombras suaves

A segunda tonalidade, mais clara que a primeira, deve ser usada para criar sombras suaves. Isto é necessário para áreas que não são iluminadas diretamente. Eles também podem ser usados ​​para fazer a transição de áreas claras para áreas escuras e em superfícies irregulares.

Etapa quatro: áreas iluminadas

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

Evite dores de cabeça lembrando-se de uma regra simples: primeiro as sombras, depois os realces. A razão é simples: se não houver sombras, fragmentos muito grandes serão apagados e, ao aplicar sombras, eles terão que ser reduzidos.

Algumas regras úteis

As sombras são sempre um desafio para iniciantes, então aqui estão algumas regras que você precisa seguir durante o sombreamento.

1. Não use gradientes. O erro mais comum cometido por iniciantes. Os gradientes parecem terríveis e nem sequer se aproximam de como a luz atua 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 e impede a identificação da fonte de luz.
3. Não use muitas sombras. É fácil pensar que “quanto mais cores, mais realista será a imagem”. Seja como for, em Vida real Estamos acostumados a ver as coisas nos espectros escuro ou claro, e nosso cérebro filtrará tudo o que estiver entre eles. Use apenas dois tons escuros (escuros e muito escuros) e dois claros (claros e muito claros) e coloque-os sobre a cor base, e não uns sobre os outros.
4. Não use cores muito semelhantes. Não há necessidade real de usar cores quase idênticas, a menos que você queira criar um sprite realmente desfocado.

Pontilhamento

Preservar as cores é algo que os criadores de pixel art realmente precisam prestar atenção. Outra maneira de obter mais sombras sem usar mais cores é chamada de pontilhamento. Assim como em pintura tradicional São usadas "hachuras" e "hachuras cruzadas", ou seja, você obtém literalmente algo entre duas cores.

Exemplo simples

Aqui está um exemplo simples de como, por meio do pontilhamento, você pode criar quatro opções de sombreamento a partir de duas cores.

Exemplo avançado

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

Aplicativo

O dithering pode dar ao seu sprite aquela aparência retrô maravilhosa, já que muitos dos primeiros videogames faziam uso intenso da técnica devido ao pequeno número de paletas de cores disponíveis (se você quiser ver muitos exemplos de dithering, confira os jogos desenvolvidos para o Sega Gênese). Eu mesmo não utilizo esse método com muita frequência, mas para fins educacionais, mostrarei como ele pode ser aplicado em nosso sprite.

Você pode usar o dither o quanto quiser, mas é importante notar que apenas algumas pessoas o usam muito bem.

Contorno seletivo

O contorno seletivo, também chamado de contorno selecionado, é um subtipo de sombreamento de contorno. Em vez de usar uma linha preta, escolhemos uma cor que ficará mais harmoniosa no seu sprite. Além disso, alteramos o brilho desse contorno mais próximo das 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 fica ótimo e também permite que o sprite se destaque dos objetos ao redor. Mas ao usar esse método, sacrificamos o realismo, que pode ser útil para nós em alguns casos, já que nosso sprite continua com uma aparência de desenho animado. O contorno seletivo elimina isso.

Você notará que usei selaute para suavizar a definição de seus músculos. Finalmente, nosso sprite começa a parecer um todo único, em vez de um grande número de fragmentos separados.

Compare isso com o original:

1. Suavização

A forma como a suavização funciona é simples: adicionar cores intermediárias às bordas para torná-las mais suaves. Por exemplo, se você tiver uma linha preta sobre um fundo branco, pequenos pixels cinza serão adicionados às quebras ao longo da borda.

Técnica 1: Suavizando dobras

Em geral, você precisa adicionar cores intermediárias onde houver dobras, caso contrário a linha ficará 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 posso explicar melhor sem complicar ainda mais. Basta olhar para a foto e você entenderá o que quero dizer.

Técnica 2: arredondando as saliências

Técnica 3: apagar finais de linha

Aplicativo

Agora, vamos aplicar o anti-aliasing à nossa impressão. Observe que se você quiser que seu sprite fique bem em qualquer cor de fundo, você não deve suavizar a parte externa da linha. Caso contrário, seu sprite terá um halo muito inapropriado ao seu redor, onde encontra o fundo e, portanto, se destacará muito claramente contra qualquer fundo.

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

Por que você precisa fazer isso manualmente?

Você pode perguntar: "Por que não aplicar apenas um filtro de editor gráfico ao nosso sprite se quisermos que ele tenha uma aparência suave?" A resposta também é simples - nenhum filtro tornará seu sprite tão claro e limpo quanto feito à mão. Você terá controle total não apenas sobre as cores que usa, mas também sobre onde usá-las. Além disso, você sabe melhor do que qualquer filtro onde o anti-aliasing será apropriado e onde há áreas onde os pixels simplesmente perderão sua qualidade.

Acabamento

Uau, estamos chegando bem perto do ponto em que você pode desligar o computador e pegar uma garrafa de cerveja gelada na geladeira. Mas ainda não chegou! A última parte é sobre o que separa o amador ávido do profissional experiente.

Dê um passo para trás e dê uma boa olhada em seu sprite. Existe a possibilidade de ainda parecer "úmido". Passe um pouco de tempo aperfeiçoando e certificando-se de que tudo está perfeito. Não importa o quão cansado você já esteja, a parte divertida está à sua frente. Adicione detalhes para tornar seu sprite mais interessante. É aqui que suas habilidades e experiência em pixelização entram em ação.

Você pode se surpreender com o fato de que durante todo esse tempo nosso advogado Lucha não tinha olhos, ou que o pacote que ele segurava estava vazio. Na verdade, a razão está no fato de eu querer esperar um pouco pequenos detalhes. Observe também o acabamento que adicionei às bandanas, a braguilha nas calças... e quem seria uma pessoa sem os mamilos? Também escureci um pouco a parte inferior do torso para fazer com que o braço se destacasse mais contra o corpo.

Finalmente você terminou! O Lucha Lawyer é leve, pois possui apenas 45 cores (ou pode ser super pesado - tudo depende das limitações da sua paleta) e sua resolução é de aproximadamente 150 por 115 pixels. Agora você pode abrir sua cerveja!

Progresso completo:

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

1. Aprenda o básico da arte e da prática técnicas tradicionais. Todos os conhecimentos e habilidades necessários para desenhar e desenhar podem ser aplicados à pixelização.
2. Comece com pequenos sprites. O mais difícil é aprender a colocar muitos detalhes usando um número mínimo de pixels para não deixar 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 - repetir fragmentos do trabalho de outras pessoas. Leva muito tempo para desenvolver seu próprio estilo.
4. Se você não tem um tablet, compre um. Permanente colapsos nervosos e o estresse causado por clicar continuamente com o botão esquerdo do mouse não é divertido e é improvável que impressione membros do sexo oposto. Eu uso um pequeno Wacom Graphire2 - gosto de como ele é compacto e portátil. Você pode preferir um tablet maior. Antes de comprar, faça um pequeno test drive.
5. Compartilhe seu trabalho com outras pessoas para obter suas opiniões. Essa também pode ser uma boa maneira de fazer novos amigos geeks.

P.S.

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

Adobe Photoshop: Desenhamos e animamos um personagem em Tecnologia de pixels Arte

Nesta lição você aprenderá como desenhar e animar personagens usando a técnica Arte de pixel. Para fazer isso, você só precisa do Adobe Photoshop. O resultado será um GIF com um astronauta correndo.

Programa: Adobe Photoshop Dificuldade: iniciante, nível intermediário Tempo necessário: 30 min – hora

I. Configurando o documento e as ferramentas

Passo 1

Selecione Lápis na barra de ferramentas - esta será a ferramenta principal da nossa lição. Nas configurações, selecione o tipo de pincel Hard Round e defina os valores restantes como na imagem. Nosso objetivo é deixar a ponta do lápis o mais afiada possível.

Passo 2

Nas configurações da Ferramenta Borracha (borracha), selecione Modo Lápis e defina os valores restantes conforme mostrado na imagem.

etapa 3

Ative a Grade de Pixels (Exibir > Mostrar > Grade de Pixels). Se não existir tal item no menu, vá para as configurações e ative a aceleração gráfica Preferências > Desempenho > Aceleração gráfica.

Observação: a grade só ficará visível na tela recém-criada quando ampliada em 600% ou mais.

Passo 4

Em Preferências > Geral (Control-K), altere o modo de interpolação de imagem para o modo Vizinho Mais Próximo. Isso permitirá que os limites dos objetos permaneçam tão claros quanto possível.

Nas configurações de Unidades e Réguas, defina as unidades da régua como pixels. Preferências > Unidades e Réguas > Pixels.

II. Criação de personagem

Passo 1

E agora que tudo está configurado, podemos prosseguir diretamente para o desenho do personagem.

Esboce seu personagem com um contorno claro, tomando cuidado para não sobrecarregá-lo com pequenos detalhes. Nesta fase a cor não importa em nada, o principal é que o contorno esteja bem desenhado e você entenda como ficará o personagem. Este esboço foi preparado especificamente para esta lição.

Passo 2

Reduza a escala do esboço para 60 pixels de altura usando o atalho de teclado Control+T ou Editar > Transformação Livre.

O tamanho do objeto é exibido no painel de informações. Observe que as configurações de interpolação são as mesmas que fizemos na etapa 4.

etapa 3

Aumente o zoom no esboço em 300-400% para facilitar o trabalho e reduzir a opacidade da camada. Em seguida, crie uma nova camada e desenhe os contornos do esboço usando a ferramenta Lápis. Se o personagem for simétrico, como no nosso caso, você pode contornar apenas a metade, duplicá-lo e virá-lo como um espelho (Editar > Transformar > Virar horizontalmente).

Ritmo: Desenhar elementos complexos quebre-os em pedaços. Quando os pixels (pontos) em uma linha formam um “ritmo” como 1-2-3 ou 1-1-2-2-3-3, o esboço parece mais suave ao olho humano. Mas, se a forma assim o exigir, esse ritmo pode ser perturbado.

Passo 4

Quando o contorno estiver pronto, você pode escolher as cores principais e pintar as formas grandes. Faça isso em uma camada separada abaixo do contorno.

Etapa 5

Suavize o contorno desenhando uma sombra ao longo da borda interna.

Continue adicionando sombras. Como você deve ter notado ao desenhar, algumas formas podem ser corrigidas.

Etapa 6

Crie uma nova camada para os destaques.

Selecione o modo de mesclagem Overlay na lista suspensa do painel Camadas. Empate cor clara sobre as áreas que você deseja destacar. Em seguida, suavize os destaques usando Filter > Blur > Blur.

Complete a imagem, copie e espelhe a metade finalizada da imagem e, em seguida, combine as camadas com as metades para formar uma imagem inteira.

Etapa 7

Agora o astronauta precisa adicionar contraste. Use as configurações de Níveis (Imagem > Ajustes > Níveis) para torná-lo mais claro e, em seguida, ajuste o matiz usando a opção Equilíbrio de cores (Imagem > Ajustes > Equilíbrio de cores).

O personagem agora está pronto para animação.

III. Animação de personagens

Passo 1

Crie uma cópia da camada (Layer > New > Layer Via Copy) e mova-a 1 pixel para cima e 2 pixels para a direita. Este é um ponto chave na animação de personagens.

Reduza a opacidade da camada original em 50% para poder ver o quadro anterior. Isso é chamado de “Onion Skinning” (modo plural).

Passo 2

Agora dobre os braços e as pernas do seu personagem como se ele estivesse correndo.

● Destaque mão esquerda ferramenta laço

● Usando a FreeTransformTool (Edit > FreeTransform) e mantendo pressionada a tecla Control, mova as bordas do contêiner para que a mão se mova para trás.

● Selecione primeiro uma perna e estique-a um pouco. Em seguida, aperte a outra perna ao contrário para que pareça que o personagem está andando.

● Usando lápis e borracha, ajuste a parte do braço direito abaixo do cotovelo.

etapa 3

Agora você precisa redesenhar completamente a nova posição dos braços e pernas conforme mostrado na segunda seção desta lição. Isso é necessário para garantir que a imagem pareça nítida, pois a transformação distorce bastante as linhas de pixels.

Passo 4

Faça uma cópia da segunda camada e vire-a horizontalmente. Agora você tem 1 pose básica e 2 em movimento. Restaure a opacidade de todas as camadas para 100%.

Etapa 5

Vá para Janela > Linha do tempo para exibir o painel Linha do tempo e clique em Criar animação de quadro.

Pixel Art ou gráficos de pixel são pintura digital, que é criado em editores raster por pixel. Pixel é o menor elemento gráfico de uma imagem. Em outras palavras, este é o ponto. E todos os desenhos de pixels consistem em inúmeros acúmulos de pontos, que ficam um pouco irregulares, como se fossem mal desenhados. Mas esta é a beleza de tais pinturas.

Um pouco de história

Quais programas você pode usar para criar pixel art moderno?

Existem muitos editores raster gratuitos. Mas na maioria das vezes 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 das imagens;
ao salvá-los no formato jpg, ocorre grave distorção de cores;
É difícil desenhar sombras e realces.
Por isso, procuram dar preferência ao Adobe Photoshop. Este programa tem muito mais recursos de trabalho do que o Paint. Isso permite que você desenhe não personagens individuais com designs simples, mas imagens inteiras. Além disso, o pixel art em si é mais fácil e rápido de editar aqui. Sim, e você pode transferir transições de cores no Adobe Photoshop de maneira suave e natural.

Como evitar dobras 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 e a suavidade das linhas desaparece. Por um lado, esse é o cartão de visita do Pixel Art, mas por outro lado, quero mais suavidade, o que tornará a imagem elegante e atraente para o usuário. Esse problema na linguagem dos pixel artist é chamado de kinks ou “jaggies”.
Jaggies são peças que dão um aspecto recortado a qualquer linha. Eles geralmente são descartados por um dos seguintes métodos:
aumentar o segmento de linha dispersa em 2, 3 ou mais pixels de comprimento;
reduza o comprimento dos próprios pixels na área proeminente;
construir uma nova seção de linha a partir de vários pixels únicos;
adicione pixels únicos à área com um intervalo entre “pontos” mais longos, etc.
Para eliminar adequadamente as torções, é preciso lembrar a regra principal: o comprimento dos elementos de uma linha curva deve diminuir ou aumentar gradativamente. Você também precisa lembrar que mudar um segmento de linha em dois ou mais pixels de altura leva à destruição da suavidade.
Portanto, é necessária prática constante de desenho. E como o mais simples e ajuda visual Para ajudar a evitar dobras, você pode usar um conjunto de linhas retas inclinadas.

Como obter sombra em Pixel Art

Outro ponto importante na pixel art, este é o seu volume. Isso, como em outras opções gráficas, é obtido por meio de realces e sombras. Para criar uma sombra em pixel art você precisará de uma transição suave do tom claro para o escuro ou de uma cor para outra. Para obter esse efeito, a tecnologia de mistura é frequentemente usada - dithering. Ou seja, na fronteira de duas cores elas se misturam em um padrão xadrez. Este método surgiu num contexto de escassez de flores. Ao misturar duas cores em um padrão xadrez, 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 você precisa lembrar que uma transição de um pixel de uma cor para outra não parece boa. Acontece apenas um pente. É por isso
a zona mínima de mesclagem deve ter pelo menos dois pixels. E quanto mais ampla for essa 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” e também ajudará você a entender onde desenhar a sombra. Por exemplo, se a luz vier da direita, as áreas de sombra estarão localizadas à esquerda, etc.;
você precisa usar cores muito mais escuras que as básicas. Aqueles. a sombra deve ser representada com cores mais escuras que a própria área sombreada. Por exemplo, se um objeto for vermelho, sua sombra será bordô ou marrom escuro;
não se esqueça da sombra parcial. Para isso, é selecionada uma tonalidade que fica entre a cor base e a cor da sombra na paleta. Essa tonalidade é colocada entre 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 destaques em pixel art

Um realce, como uma sombra, dá volume aos objetos que estão sendo desenhados. Está sempre do lado onde a luz incide. Mas se o objeto pretende ter uma superfície brilhante, por exemplo, uma xícara de porcelana, uma espada de aço, etc., então também será necessário um destaque em uma área sombreada.
Para criar um destaque na área onde incide a luz, é necessário levar uma tinta que seja bem mais clara que a principal. Só não seja zeloso com o brilho deste local - pode não ficar natural. Muitas vezes, o destaque é representado em branco sem transições. Isso não acontece na natureza. E o objeto parecerá plano.
Para criar um destaque na lateral da sombra, você precisará 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 conseguida usando vários tons ao mesmo tempo.
Para perceber tudo isso, é claro, você precisa de prática. E é melhor começar com objetos simples.

Se você adorava brincar com Lego quando criança (ou continua a brincar com ele mesmo quando adulto), provavelmente se interessará por pixel art isométrico. Pode ser técnico e mais parecido com ciência do que com ilustração. Mas nessa arte não existe perspectiva 3D, você pode mover elementos do ambiente com a máxima simplicidade.

Criaremos o personagem como um ponto de partida lógico para a pixel art, pois isso ajudará a determinar as proporções da maioria dos outros itens que possamos criar. No entanto, primeiro você precisa aprender alguns conceitos básicos de pixel art isométrico e depois passar para a criação de um personagem; 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 representam dois pixels para cada pixel abaixo. Essas linhas parecem relativamente suaves e são usadas para superfícies quadradas:

As estruturas de linhas mais comumente usadas (como a abaixo) funcionarão bem, mas o desenho se tornará mais angular e áspero a cada incremento aumentado:

Por outro lado, 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 leis da isometria, então vamos primeiro criar um cubo simples para decidir as proporções.

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

Gosto de abrir uma janela adicional para o mesmo arquivo usando o menu Janela > Organizar > Nova janela/lições.(Janela > Organizar > Nova janela…). Isto permite, trabalhando em ampliação 600% monitore os resultados na janela de zoom 100% . O uso da grade depende de você, mas às vezes acho que é mais intrusivo do que útil.

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

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

Existem várias maneiras de traçar uma linha:

1. Usando Ferramenta Linha(Ferramenta Linha) com modo Píxeis(Pixels), desmarcado Suavização(Anti-alias) e espessura 1px. Ao desenhar, a dica de ferramenta do ângulo deve mostrar 26,6°. Na verdade, a ferramenta Linha não pode ser considerada conveniente; ela cria linhas irregulares se o ângulo não for preciso.

2. Você precisa criar uma seleção 20 x 40 pixels e selecione K lápis(Ferramenta Lápis) espessura 1px e desenhe um ponto no canto inferior esquerdo da seleção e mantenha pressionada a tecla Mudança clique à direita canto superior. O Photoshop criará automaticamente uma nova linha entre os dois pontos. Se você praticar, poderá criar linhas retas sem destacar dessa forma.

3. Você precisa desenhar dois pixels com um lápis, selecioná-los, clicar Ctrl+Alt e arraste a seleção para um novo local para que os pixels se encontrem nos cantos. Você também pode mover a seleção usando as teclas de seta do teclado enquanto mantém pressionada Alt.. Este método é chamado Alt-deslocamento(Alt-Nudge).

Então 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 > Virar horizontalmente(Editar > Transformar > Virar 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 a “terceira dimensão”. Alt-offset a superfície quadrada e mova-a para 44px abaixo:

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

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

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

Agora aumente o brilho da cor selecionada 10% (Eu recomendo usar os controles deslizantes HSB no painel de controle) para pintar cantos mais claros ao longo da frente do nosso quadrado colorido. Como cortamos um pouco o cubo, essas linhas claras ficarão mais bonitas acima das 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 da segunda linha para a borracha (que deve estar definida como normal Ferramenta de apagar(Ferramenta Borracha), modo Lápis(Modo Lápis), espessura 1px).

Selecione a cor do quadrado superior usando Pipetas(Ferramenta conta-gotas). Para selecionar rapidamente esta ferramenta, enquanto você desenha com um lápis ou preenche, pressione Alt.. Use a cor do conta-gotas resultante para preencher a linha vertical no meio do cubo. Depois disso, reduza o brilho da cor 15% e preencha o lado esquerdo do cubo com a cor resultante. Reduza 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. Via de regra, eu faço corpo magro 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 rigorosos com os â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 deixará o desenho limpo, mesmo apesar do tamanho.

Tornamos o personagem pequeno, pois 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 pequenos elementos na ilustração. Também vale a pena considerar a eficiência gráfica; tente tornar o personagem o mais atraente possível com um número mínimo de pixels (grande o suficiente para representar as características faciais). Além disso, objetos pequenos são muito mais fáceis de desenhar. A exceção é quando você deseja apenas mostrar um personagem, suas emoções ou sua semelhança com alguém.

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

Agora adicione outra camada e desenhe uma faixa horizontal de dois pixels, esta será a boca. Use as setas do teclado para se 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:

Desenhe o cabelo e o topo da cabeça e depois suavize os cantos. Você deve obter algo semelhante a 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 deles até a linha do cabelo. Depois deixe outro pixel vazio, é aqui que vai começar a orelha e uma linha marcando o final da cabeça. Vá em frente e suavize os ângulos onde as linhas se encontram:

Adicione um pixel para o topo da orelha e altere o formato da cabeça se desejar; as cabeças geralmente já são desenhadas na região do pescoço:

Desenhe uma linha a partir do queixo - este será o peito. O início do pescoço ficará na área das orelhas, 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 de comprimento 12 pixels para fazer a parte externa da mão, e lado interno estará dois pixels à esquerda. Conecte as linhas na parte inferior com alguns pixels para formar uma mão/punho (não há detalhes neste caso, então ignore esse elemento) e logo acima de onde termina a mão, adicione uma linha 2:1 , que servirá de cintura, depois desenhe a linha do peito e obtenha uma linha completa parte do topo corpos. O outro braço do personagem não está visível, mas parecerá normal, pois está coberto pelo torso.

Você deve acabar com algo assim:

Claro que você pode usar as proporções que desejar; Prefiro desenhar diferentes opções lado a lado antes de decidir qual é a melhor.

Agora, para a parte inferior do tronco, adicionaremos mais alguns linhas verticais. eu gosto de sair 12 pixels entre as solas e a cintura. As pernas são muito fáceis de desenhar, basta deixar uma perna um pouco mais comprida, 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 seleção de cores para os elementos restantes não deve ser um problema. Depois disso, determine o comprimento das mangas, a posição do corte da camisa e seu estilo. Agora adicione uma faixa escura para separar a camisa do corpo. Prefiro manter todos os elementos decorativos mais claros do que o preto (principalmente quando muitos elementos estão no mesmo nível, como desde uma camisa até couro ou calça). Isso permite obter o contraste necessário sem que a imagem fique muito áspera.

Você pode adicionar efeitos de iluminação a quase todas as zonas de cores. Evite também grande quantidade sombras ou uso de gradientes. Vários pixels a mais ( 10% ou 25% ) uma cor clara ou escura é suficiente para fazer com que os elementos pareçam tridimensionais e remover o nivelamento da ilustração. Se você quiser adicionar um toque de cor a uma área que já possui 100% brilho, tente reduzir sua saturação. Em alguns casos (como desenhar cabelos) esta pode ser uma boa forma de variar os tons.

Existem muitas opções de cabelo que você pode experimentar. Aqui estão algumas ideias:

À medida que você continua a criar personagens, pequenas coisas como estilo de roupa, comprimento das mangas, comprimento das calças, acessórios, roupas e cor da pele serão úteis para variar.

Agora tudo o que resta a fazer é colocar os dois elementos juntos e avaliar sua aparência em uma configuração:

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

É isso, trabalho concluído!

Espero que esta lição não tenha sido muito confusa. Acho que cobri o máximo possível de dicas e truques estéticos. Você pode expandir livremente seu mundo de pixels isométricos - edifícios, carros, interiores, exteriores. Fazer tudo isso é possível e até interessante, embora não seja tão fácil.

Tradutor: Shapoval Alexei

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 deslocam um pixel para o lado à medida que o desenho avança. Evite o principal erro dos artistas iniciantes em 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 bem, 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 excelente opção para criar pixel art é o programa Adobe Photoshop, que possui ampla funcionalidade, permite trabalhar com camadas, suporta transparência e facilita o trabalho com a 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 há 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 esse arco desenhando o topo da bola.

Usando o mesmo princípio, desenhe o fundo da bola e do 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 a cor desejada, clique nela 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:

No 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!

Leia também em nosso site:

mostre mais