Por que a Pixel Art pode ser um campo de treinamento perfeito para design gráfico em 2023

Mesmo que você não estivesse por perto para experimentar as maravilhas dos videogames clássicos dos anos 1970 até os anos 1990, nunca é tarde demais para desenvolver uma apreciação pela forma de arte distinta que evoluiu para atender às necessidades desses jogos. É uma forma de arte que conhecemos hoje como pixel art e é uma das melhores maneiras de ganhar seu stripes em design gráfico 2D auxiliado por computador.

A razão para isso é que a pixel art exige muito do artista. Requer mais disciplina e é mais rígido do que a maioria das outras formas de arte. Pixel art força você a focar e isolar o que é mais importante em uma imagem e usar apenas isso, sem fornecer o controle mais preciso que você poderia aplicar em um estilo de desenho mais detalhado. É uma abordagem “menos é mais” para desenhar e torna você melhor no desenho.

Pixel art leva tempo para dominar. Afinal, você está criando suas imagens um pixel por vez, e toda imagem requer um planejamento cuidadoso. Você precisará aprender a trabalhar com uma paleta limitada e sem o benefício de curvas naturais. Você também estará trabalhando exclusivamente em um ambiente 2D, onde, se precisar de um visual 3D, precisará criá-lo usando truques como perspectiva isométrica e rolagem paralaxe.

Aprender a animar sprites e fundos também é uma excelente maneira de reforçar suas habilidades de programação, se você estiver lidando com um projeto de jogo inteiro sozinho. Agora que os dispositivos móveis estão mais conectados e ainda estão perdendo a capacidade de jogos 3D sustentados, Jogos 2D estão ressurgindo, e você pode realmente colocar essas habilidades para trabalhar para ganhar algum dinheiro extra quando o trabalho de design não está fluindo livremente à sua porta.

A arte do pixel não requer nenhum software especial. Você pode criar pixel art em qualquer programa de desenho básico. Muitos artistas de pixel começaram seu trabalho em ferramentas simples como o MS Paint, mas é melhor usar softwares mais sofisticados que usam camadas e grades personalizadas, para que você possa realmente ajustar seus designs com perfeição. Inkscape é realmente bom para esse propósito. É grátis, tem grades isométricas embutidas e funciona perfeitamente para pixel art.

No que diz respeito ao hardware, você pode usar um mouse, mas acho mais fácil usar uma mesa digitalizadora porque tenho tendência a pegar “mãos do mouse” quando faço trabalhos de arte detalhados, então eu recomendaria usar pelo menos uma mesa digitalizadora básica.

Por que pixel art é ideal

Muitas pessoas usam as palavras ilustrador e designer de forma intercambiável. Realmente um ilustrador está muito abaixo do nível de um designer. Os ilustradores simplesmente desenham as coisas de acordo com o pedido do cliente. Designers projetam as coisas de acordo com as necessidades de seus clientes. É uma diferença enorme.

Aprender a criar pixel art significa aprender a inovar soluções criativas para atender necessidades muito específicas. É muito mais do que apenas desenhar. O planejamento, a atenção aos detalhes, a capacidade de trabalhar dentro das limitações da tecnologia e a elaboração de estratégias para superar essas limitações, é o que faz de um grande artista de pixel também um grande designer.

O mundo da arte pixel

Ao contrário do que você pode esperar, o mercado de pixel art é grande e está crescendo. As expectativas eram geralmente de que a pixel art morreria quando a tecnologia atingisse o ponto em que era mais prático e viável usar arte vetorial e 3D CGI. Na realidade, ainda há uma forte demanda por pixel art e, na verdade, ganhou um escopo mais amplo de aplicação. Onde antes a pixel art se limitava principalmente ao jogo, agora ela é usada em uma ampla gama de aplicações práticas.

Algumas das áreas em que a pixel art está vendendo incluem:

• Jogos para celular e jogos retro-temáticos
• Infográficos
• Design do site
• Design de interface
• Designs usados ​​em roupas, tags-chave, etc.
• Gráficos de televisão (ex: The IT Crowd, Good Game)
• Pixel art comics (ex: Sweeties Diesel, Kid Radd)
• Filmes (por exemplo: Wreck It Ralph, Pixels)
• Exposições de arte em pixel e coleções particulares

Pode haver outros mercados potenciais que surgem de tempos em tempos. De certa forma, você pode até pensar em blocos de Lego como uma espécie de pixel art, e é realmente possível criar pixel art 3D com Lego. Mas isso não vai acontecer a menos que você se torne um mestre em pixel art, então vamos descobrir mais sobre como você faz isso.

Primeiros passos no design de pixel art

A melhor maneira de entrar neste mundo é entrar em algum competições de pixel art e aprenda como você vai. É claro que quando falamos de competições, queremos dizer que são livres para entrar e que não exploram comercialmente o seu trabalho, exigindo que você assine todos os seus direitos para os organizadores da competição.

Boas competições de pixel art estabelecem desafios que exigem que você use suas habilidades como designer inovador para atingir o objetivo. Às vezes, isso simplesmente define o tema, mas também pode incluir regras como limitar o número de cores que você pode usar ou definir uma contagem máxima de pixels. Estas são todas as restrições que os designers de jogos tiveram que trabalhar antes. Quando você aprende as mesmas técnicas, nas mesmas condições, você está desenvolvendo habilidades fortes e, espera-se, uma melhor compreensão de todo o processo de design.

Training

Há uma abundância de tutoriais on-line gratuitos e você pode comprar livros sobre pixel art or design de jogo para você ir. Para uma introdução mais aprofundada, você pode considerar curso udemy em pixel art. Apenas $ 35 e lecionado por um artista especialista em jogos (Marco Vale, atualmente Diretor de Arte na Estúdios Indot), é muito bom valor.

O processo de pixel art

Criar qualquer trabalho de pixel art segue um processo linear do conceito à conclusão:

• A ideia - você decide o que vai criar ou obtém instruções
• Planejamento - você faz escolhas sobre como criar a imagem
• Seleção de grade - você seleciona o tipo de grade correto para a imagem que está criando
• Seleção de paleta - você configura uma paleta de cores para a imagem
• Prototipagem - um passo opcional para dar a você um trabalho básico de estrutura para o esboço
• Delineando - você cria o contorno básico das principais partes da imagem
• Suavização - você corrige quaisquer “recortes” ou irregularidades para criar um contorno melhor
• Colorir - você adiciona cores à imagem usando a paleta que você configurou
• Sombreamento - você adiciona destaques e sombras para tornar sua imagem mais realista
• Pontilhamento - um passo opcional para replicar uma verdadeira sensação retro em uma situação de paleta limitada
• Delineamento seletivo - você aplica linhas sólidas a partes selecionadas da imagem para dar definição
• Anti-aliasing - um passo final de suavização no qual você usa cores para realçar o realismo
• Configuração - se a imagem que você criou é uma pequena parte de uma cena maior, você entra em sua configuração

Algumas etapas, como dithering e anti-aliasing, podem ser tratadas automaticamente pelo software de desenho. Depende do que você está usando e de quais opções você seleciona.

A ideia

Algumas pessoas consideram isso como o passo mais difícil na criação de um novo trabalho, mas, na verdade, provavelmente não é. Seu objetivo é decidir o que você vai criar ou, em alguns casos, receber instruções do cliente sobre o que eles querem. A inspiração pode vir do mundo real ao seu redor, ou de filmes, jogos, livros e qualquer outra coisa que possa ajudá-lo a visualizar os objetos que aparecerão em sua cena. Para este exemplo, criaremos um vaso de flores que seria um objeto em uma cena maior.

Planeamento

Neste passo você já sabe o que vai criar, então agora você está pensando em como vai criá-lo. A primeira grande decisão será se você vai projetar uma imagem plana ou dar uma perspectiva 3D. Você também decidirá como a imagem deve ser detalhada ou realista, se precisa de aparência retro e outras coisas assim.

Quanto mais realista você quiser que a imagem seja, mais pixels e cores você precisará usar e mais tempo levará para criar. Se você está projetando para uma competição, algumas dessas escolhas já terão sido feitas para você, mas você ainda precisará conceber a melhor maneira de alcançar o resultado.

Uma coisa sensata a fazer seria imprimir a grade com a qual você estará trabalhando e usá-la para fazer um esboço em papel da imagem final do computador. Isso servirá como uma referência para o bitmap que você cria, para ajudá-lo a manter a perspectiva e a escala consistentes.

Seleção de grade

Isso é determinado pela natureza do trabalho que você está criando. Para imagens planas, você usará uma grade padrão onde todas as linhas se cruzam em ângulos retos.

Em uma cena 3D, você pode escolher entre usar uma grade isométrica (a escolha mais comum) ou uma grade oblíqua. Uma grade isométrica tem linhas que se cruzam em graus 30:

Uma grade oblíqua possui linhas que se cruzam em graus 45:

Desenhos oblíquos são bons quando você quer incluir muitos detalhes, mas em geral o isométrico fornece uma visão melhor e se sente mais realista. É o estilo de desenho mais amplamente escolhido por um bom motivo.

Seleção de paleta

Você pode deixar essa etapa até estar pronto para colorir, mas na verdade pode ajudar com o restante do processo se definir suas cores desde o início.

Prototipagem

O vaso de flores no exemplo é basicamente uma forma de cone distorcida e, como em todas as imitações 2D de um cone, criamos essa forma básica usando elipses empilhadas. Isso economiza tempo e também demonstra o valor do uso do Inkscape, porque ele possui algoritmos para produzir linhas mais suaves em bordas curvas do que muitos outros programas de desenho. Nós só precisamos ter certeza de que as elipses se alinham bem com a grade.

Em seguida, use algumas linhas retas para conectá-las (as linhas levemente curvas são ainda mais realistas se você tiver paciência para desenhá-las).

Delineando

Nesta etapa, desenhamos o contorno da imagem que queremos pixelizar. Se você fez um protótipo da imagem, esta parte é fácil. Primeiro, crie uma nova camada de imagem e empilhe-a sobre a outra camada (no Inkscape, a nova camada tem automaticamente um fundo transparente). Bloqueie a camada de protótipo, selecione a nova camada e use-a para rastrear seu protótipo com a ferramenta de lápis. Desativar o encaixe da grade ao traçar linhas curvas.

Se você tiver alguma dificuldade em ver suas novas linhas, simplesmente reduza a opacidade da camada de protótipo até que seja mais fácil ver as linhas da camada de contorno. Não trace todas as linhas, apenas as que fariam sentido.

Você pode excluir a camada de protótipo após concluir o contorno, se wish, ou simplesmente torná-lo invisível.

com óleos de Açai

Esta é uma etapa difícil. Para isso, você aumenta o zoom nas curvas da imagem e tenta corrigir as linhas irregulares que tornam a imagem menos natural. Dependendo do nível da imagem, você pode não precisar fazer isso (se sua imagem tiver 32 × 32 pixels ou menos, há muito pouco que você possa fazer para melhorá-la suavizando.

A maneira de fazer sua primeira execução de suavização é ampliar a imagem para que você possa ver onde as curvas não estão bem definidas ou onde há quebras (lacunas) nas linhas sólidas. Qualquer falha causará sangramento de cor se você usar um preenchimento de balde, por isso é uma boa ideia eliminar as lacunas. Lembre-se de que você está apenas fazendo um pixel por vez, que é onde um tablet torna o trabalho muito mais fácil do que um mouse.

Coloração

Isso é o que você costumava fazer para se divertir quando tinha cinco anos, só que agora é muito mais fácil. Você pode preencher grandes áreas de cor com um preenchimento de balde, e muitos programas de desenho permitem definir um gradiente que pode ou não dar uma aparência realista. De outroswise é o mesmo que suavizar: amplie e defina seus pixels um de cada vez. Não crie uma camada de cor separada, porque seu software pode não reconhecer os limites de uma camada diferente ao fazer um preenchimento de balde.

Sombreamento

Cores sólidas são fáceis, mas para obter uma aparência realista, é necessário usar o sombreamento. É mais fácil fazer sombreamentos em imagens maiores porque eles têm mais pixels para você trabalhar. A primeira etapa do sombreamento é descobrir como a luz está atingindo o objeto ou a cena e aplicar realces e sombras de maneira realista. No começo, isso será difícil, mas com a experiência e o feedback de outros artistas, você vai pegar o jeito. Aqui só vou sombrear a parede do fundo do vaso, mas seria melhor aplicar alguns destaques na parede da frente.

Pontilhado

Com uma paleta limitada, nem sempre é possível obter todos os tons e cores desejados, e é difícil fazer alterações sutis entre áreas contíguas sem pontilhar. Não é algo necessário em hardware moderno, mas geralmente é aplicado em situações em que você deseja uma aparência retro 90s ou onde, por vários motivos, é necessário trabalhar com uma paleta limitada. Alguns softwares podem manipular pontilhamento para você automaticamente ou você pode ter que criar seu próprio pontilhamento. Esta imagem é simples demais para precisar de qualquer pontilhado, mas aqui está um tutorial Isso explica como criar um falso efeito de pontilhamento no Inkscape.

Delineamento seletivo

Isso significa substituir os contornos pretos em áreas internas por uma cor de aparência mais natural e apenas delinear as partes que precisam ser delineadas para definição. Na vida real, as veias de uma folha não são pretas, então elas também não deveriam estar no seu desenho.

Anti-aliasing

Isso é semelhante à suavização, exceto que você está observando mais de perto as regiões de cor que podem precisar de “saliências” para suavizar um pouco as linhas para que pareçam mais realistas. Bater em uma cor significa apenas escolher um tom de cor para um pixel entre as cores dos pixels de cada lado dele. O desfoque intencional torna as linhas menos nítidas. Tal como acontece com o pontilhamento, seu software pode aplicar suavização de serrilhado automaticamente para você.

Configuração

Colocar o objeto finalizado em uma cena maior é chamado de configuração. Você não precisa fazer isso com sprites de personagens ou objetos que são móveis. Você pode fazer isso mais tarde com o código. Use a configuração para objetos fixos que não se movem. Objetos animados devem ser convertidos em sprites, o que é um tópico para outro dia.

O que fazer se sua imagem não estiver pixelizada o suficiente

Um dos problemas é que o Inkscape e programas vetoriais semelhantes funcionam bem demais com o preenchimento de baldes, de modo que as cores parecem muito lisas e vítreos. Se você quer uma aparência pixelizada, então você precisa exportar a imagem para png, abri-la no GIMP e aplicar o filtro Pixelize, que você encontrará na seção Blur. Isto lhe dará um resultado como este (que você pode então precisar de anti-alias):

Observações finais

Pixel art está longe de morrer, e bons artistas de pixel ainda são muito respeitados na comunidade de design daqueles que entendem a dedicação necessária para se tornar um mestre. Aprender a construir imagens pixel por pixel faz de você um designer melhor e, possivelmente, um engenheiro melhor também. Ainda há uma forte demanda de mercado por pixel art e relativamente poucos talentosos artistas de pixel no chão que estão atendendo a essa necessidade. Você pode ganhar dinheiro com pixel art, ou simplesmente usá-lo como uma maneira de reforçar suas habilidades. De qualquer forma, é divertido e gratificante, vale a pena fazer.