Muitas vezes, os desenvolvedores independentes têm que assumir vários papéis ao mesmo tempo: designer de jogos, programador, compositor e artista. E, quando se trata de visuais, muitos escolhem pixel art — à primeira vista, parece simples. Mas para fazer algo bonito, é preciso muita experiência e habilidades específicas. Encontrei um tutorial para aqueles que estão apenas começando a entender as bases desse estilo: com uma descrição de software especial e técnicas de desenho, usando dois sprites como exemplo.
Fundo
Pixel art é uma forma de arte digital em que as alterações são feitas ao nível dos pixels. Principalmente, está associada à gráficos de videogames dos anos 80 e 90. Naquela época, os artistas precisavam considerar limitações de memória e baixa resolução. Hoje, o pixel art ainda é popular em jogos e como estilo artístico em geral, apesar da possibilidade de criar gráficos 3D realistas. Por quê? Mesmo sem considerar a nostalgia, criar uma ótima obra dentro de tais limitações é um desafio agradável e gratificante.
A barreira de entrada para pixel art é comparativamente baixa em relação à arte tradicional e gráficos 3D, o que atrai desenvolvedores independentes. Mas isso não significa que será fácil terminar um jogo nesse estilo. Vi muitos desenvolvedores independentes com metroidvanias em pixel art em plataformas de crowdfunding. Eles achavam que terminariam tudo em um ano, mas, na verdade, precisaram de mais seis anos.
Metal Slug 3 (Arcade). SNK, 2000
O pixel art no nível que a maioria deseja criar leva muito tempo, e há muito poucos tutoriais curtos. Ao trabalhar com um modelo 3D, você pode rotacioná-lo, deformá-lo, mover suas partes individuais, copiar animações de um modelo para outro e assim por diante. O pixel art de alta qualidade quase sempre exige um esforço imenso para o posicionamento meticuloso dos pixels em cada quadro.
Então, eu avisei.
Agora um pouco sobre meu estilo: principalmente, eu faço pixel art para videogames e encontro inspiração neles. Em particular, sou fã da Famicom/NES, consoles de 16 bits e fliperamas dos anos 90. O pixel art dos meus jogos favoritos daquela época pode ser descrito como vibrante, confiante e limpo (mas não excessivamente), não sendo rígido nem minimalista. Eu trabalho nesse estilo, mas você pode facilmente aplicar as ideias e técnicas deste tutorial para criar coisas completamente diferentes. Estude o trabalho de diferentes artistas e crie pixel art que você gosta!
Software
Ferramentas digitais básicas para pixel art — Zoom e Lápis, para posicionar os pixels. Você também vai precisar de Linha, Forma, Selecionar, Mover e Balde de Tinta. Há muitos softwares gratuitos e pagos com esse conjunto de ferramentas. Vou falar sobre os mais populares e os que eu mesmo uso.
Paint (gratuito)
Se você tem Windows, o Paint embutido é um programa primitivo, mas contém todas as ferramentas necessárias para pixel art.
(gratuito)
Um editor de pixel art surpreendentemente funcional que roda no navegador. É possível exportar seu trabalho em PNG ou GIF animado. Uma excelente opção para iniciantes.
(gratuito)
GraphicsGale é o único editor que conheço, desenvolvido especificamente para pixel art e que inclui ferramentas de animação. Foi criado pela empresa japonesa HUMANBALANCE. Desde 2017, é distribuído gratuitamente e continua popular, apesar do aumento do uso do Aseprite. Infelizmente, funciona apenas no Windows.
($)
Talvez, o editor mais popular no momento. , muitas funcionalidades, suporte ativo, versões para Windows, Mac e Linux. Se você está realmente empenhado em pixel art e ainda não encontrou o editor certo, talvez este seja o que você precisa.
($$+)
GameMaker Studio 2 é uma excelente ferramenta 2D com um bom editor de sprites. Se você quer criar pixel art para seus próprios jogos, é muito conveniente fazer tudo em um só programa. Atualmente, estou usando este software enquanto trabalho em , uma coleção de 50 jogos retro: crio sprites e animações no GameMaker, e tilesets no Photoshop.
($$$+)
Photoshop — um software caro, disponível por assinatura, não é voltado para pixel art. Não recomendo adquiri-lo, a menos que você esteja trabalhando com ilustrações em alta resolução ou precise realizar manipulações complexas na imagem, como eu. É possível criar sprites estáticos e trabalhos em pixel, mas é bastante complicado em comparação com softwares especializados (como GraphicsGale ou Aseprite).
Outros
Meu kit de pixel art. Tudo preto, só agora percebi.
Tablet gráfico ($$+)
Recomendo tablets gráficos para qualquer trabalho com ilustrações digitais, para evitar a síndrome do túnel do carpo. É muito mais fácil prevenir do que curar. Uma vez que você sentir dor, ela só vai aumentar — cuide-se desde o início. Como um dia eu desenhei com o mouse, agora tenho dificuldades para jogar jogos que exigem pressionar teclas. Atualmente, estou usando o Wacom Intuos Pro S.
Suporte de pulso ($)
Se você não pode adquirir um tablet, compre pelo menos um suporte de pulso. Gosto muito do Mueller Green Fitted Wrist Brace. Os outros ou são muito apertados ou oferecem suporte insuficiente. Suportes podem ser comprados facilmente online.
96×96 pixels
Final Fight. Capcom, 1989.
Vamos começar! Iniciaremos com um sprite do personagem de 96×96 pixels. Para exemplo, desenhei um orc e o coloquei em um screenshot de Final Fight (imagem acima), para que você compreenda a escala. Este é um grande sprite para a maioria dos jogos retro, tamanho do screenshot: 384×224 pixels.
Com um sprite tão grande, será mais fácil mostrar a técnica que quero explicar. Além disso, a arte pixelada se assemelha mais às formas tradicionais de arte (como desenho ou pintura), com as quais você pode estar mais familiarizado. Depois de dominar as técnicas básicas, passaremos para sprites menores.
1. Escolha a paleta
Pixel é um conceito muito mais profundo em pixel art do que em qualquer outro campo digital. A pixel art é definida por suas limitações, como as cores. É importante escolher a paleta corretamente, pois isso ajudará a determinar seu estilo. Mas no começo, sugiro não pensar muito sobre paletas e escolher uma das existentes (ou apenas várias cores aleatórias) — você pode facilmente mudá-la em qualquer fase.
Para este tutorial, vou usar uma paleta de 32 cores que criamos para . Para pixel art, elas costumam ser agrupadas em 32 ou 16 cores. A nossa foi desenvolvida para um console fictício que poderia aparecer em algum lugar entre o Famicom e o PC Engine. Você pode usar a nossa ou qualquer outra — o tutorial não depende da paleta escolhida.
2. Contornos Básicos
Vamos começar a desenhar usando a ferramenta Lápis. Faremos um esboço assim como faríamos com uma caneta e papel. Claro, pixel art e arte tradicional se cruzam, especialmente quando se trata de sprites maiores. Minhas observações mostram que os artistas de pixel art, pelo menos, desenham razoavelmente bem a mão e vice-versa. Portanto, desenvolver habilidades de desenho sempre é útil.
3. Refinando os Contornos
Vamos refinar os contornos: removemos pixels desnecessários e reduzimos a espessura de cada linha para um único pixel. Mas o que exatamente considerar desnecessário? Para responder a essa pergunta, precisamos entender as linhas e irregularidades em pixel art.
Irregularidades
É preciso aprender a desenhar duas linhas básicas em pixel art: retas e curvas. Com caneta e papel, tudo se resume ao controle muscular, mas estamos trabalhando com pequenos blocos de cor.
A chave para desenhar linhas pixeladas corretas são as irregularidades. São pixels isolados ou pequenos segmentos que quebram a suavidade da linha. Como eu já mencionei, um único pixel tem um enorme impacto na pixel art, portanto, irregularidades podem arruinar toda a estética. Imagine que você está desenhando uma linha reta no papel e, de repente, alguém dá um soco na mesa: as irregularidades em pixel art são assim, como um rabisco aleatório.
Exemplos:
Retas
Curvas
Irregularidades aparecem nas curvas quando a extensão dos segmentos da linha aumenta ou diminui de forma abrupta.
É impossível evitar completamente as irregularidades — elas estão presentes em todos os seus jogos retro favoritos (a menos que, é claro, a pixel art seja composta exclusivamente de formas simples). O objetivo é minimizar as irregularidades, enquanto mostra tudo o que é necessário.
4. Aplicando as Primeiras Cores
Pinte seu personagem com preenchimento ou outra ferramenta adequada. A paleta facilitará essa parte do trabalho. Se o software não suportar o uso de paletas, você pode colocá-la diretamente na imagem, como no exemplo acima, e escolher cores usando o conta-gotas.
No canto inferior esquerdo, desenhei nosso amigo, conheçam, este é o Shar. Com ele, será mais fácil entender o que acontece em cada etapa.
5. Sombreado
É hora de adicionar sombras — basta usar cores mais escuras no sprite. Isso fará com que a imagem pareça volumosa. Vamos supor que temos uma fonte de luz posicionada acima e à esquerda do orque. Portanto, estará iluminado tudo que se encontra acima e à frente do nosso personagem. Adicionamos sombras na parte inferior direita.
Forma e volume
Se essa etapa está sendo difícil para você, imagine seu desenho como formas volumétricas, e não apenas linhas e cores. As formas existem no espaço tridimensional e podem ter volume, que construímos com sombras. Isso ajudará a visualizar o personagem sem detalhes e a imaginar que ele é feito de argila, em vez de pixels. O sombreado não se trata apenas de adicionar novas cores, é um processo de construção da forma. Em um personagem bem trabalhado, os detalhes não escondem as formas básicas: se você apertar os olhos, verá alguns grandes agrupamentos de luz e sombra.
Suavização (anti-aliasing)
Sempre que uso uma nova cor, aplico a suavização (AA). Ela ajuda a suavizar os pixels, adicionando cores intermediárias nas bordas, onde dois segmentos de linha se tocam:
Pixels cinzentos atenuam as "quebras" na linha. Quanto mais longo o segmento da linha, maior será o segmento de AA.
Assim, o AA aparece no ombro do orque. Ele é necessário para suavizar as linhas que representam a curva de seus músculos.
A suavização não deve exceder o sprite que será usado no jogo ou em um fundo cuja cor é desconhecida. Por exemplo, se você aplicar AA em um fundo claro, em um fundo escuro a suavização ficará feia.
6. Contorno seletivo
Anteriormente, os contornos eram completamente pretos, o que fazia o sprite parecer muito cartunesco. A imagem parecia dividida em segmentos. Por exemplo, as linhas pretas no braço contrastam excessivamente com a musculatura, fazendo com que o personagem pareça menos sólido.
Se o sprite se tornar mais natural e a segmentação menos óbvia, as formas básicas do personagem serão mais fáceis de ler. Para isso, pode-se usar um contorno seletivo — substituir parcialmente o contorno preto por um tom mais claro. Nas áreas iluminadas do sprite, podem ser usados os tons mais claros ou, onde o sprite toca o espaço negativo, o contorno pode ser completamente removido. Em vez do preto, deve-se usar a cor escolhida para a sombra — assim, a segmentação será mantida (para distinguir músculos, pelos, etc.).
Nesta etapa, eu também adicionei sombras mais escuras. Surgiram três graduações de verde na pele do orc. A cor verde mais escura pode ser usada para o contorno seletivo e AA.
7. Toques Finais
No final, vale a pena adicionar brilhos (as manchas mais claras no sprite), detalhes (brincos, rebites, cicatrizes) e outras melhorias, até que o personagem esteja pronto ou até que seja necessário passar para o próximo.
Existem algumas técnicas úteis que podem ser aplicadas nesta etapa. Gire o desenho horizontalmente, isso frequentemente ajuda a identificar erros nas proporções e na sombreamento. Também pode-se remover a cor — definir a saturação como zero para entender onde é necessário alterar as sombras.
Criação de Ruídos (Dithering)
Até agora, aplicamos principalmente áreas grandes e sólidas de sombra. Mas existe outra técnica — dithering, que permite transitar de uma cor para outra sem adicionar uma terceira. Veja o exemplo abaixo.
O gradiente superior do escuro para o claro usa centenas de tonalidades diferentes de azul.
O gradiente médio usa apenas nove cores, mas ainda tem demasiadas variações de uma única cor. Surge assim chamado banding, onde, devido a faixas grossas e homogêneas, o olho se concentra nos pontos de contato das cores, em vez das próprias cores.
No gradiente inferior, aplicamos dithering, que evita o banding e utiliza apenas duas cores. Estamos criando ruídos de diferentes intensidades para imitar a gradação de cor. Esta técnica é muito semelhante ao halftone, utilizado na impressão; assim como o stippling — em ilustrações e quadrinhos.
No orc eu apliquei dither apenas um pouco para transmitir a textura. Alguns artistas de pixel não o usam de forma alguma, outros, ao contrário, não hesitam e fazem isso com grande habilidade. Acho que o dither fica melhor em grandes áreas preenchidas por uma única cor (observe o céu na captura de tela de Metal Slug que foi mostrada acima) ou em áreas que devem parecer ásperas e irregulares (como a sujeira, por exemplo). Decida por si mesmo como usá-lo.
Se você quer ver um exemplo de dither em grande escala e de qualidade, examine os jogos The Bitmap Brothers, do estúdio britânico dos anos 80, ou os jogos no computador PC-98. Apenas tenha em mente que todos eles são NSFW.
Kakyusei (PC-98). Elf, 1996
Nesta imagem, há apenas 16 cores!
8. Último olhar
Um dos perigos da pixel art é que ela parece fácil e simples (devido à sua estrutura e limitações de estilo). Mas, no final, você gastará uma enorme quantidade de tempo refinando seus sprites. É como um quebra-cabeça que precisa ser resolvido — é por isso que a pixel art atrai perfeccionistas. Lembre-se de que um sprite não deve levar muito tempo — é apenas uma pequena parte de uma coleção extremamente complexa de pedaços. É importante não perder a visão do todo.
Mesmo que sua pixel art não seja para jogos, às vezes vale a pena dizer a si mesmo: "Está bom o suficiente!" e seguir em frente. A melhor maneira de desenvolver habilidades é passar por todo o processo do início ao fim o máximo possível, usando o maior número de temas.
E às vezes é útil afastar-se do sprite por um tempo, para depois olhá-lo com um olhar renovado.
32×32 pixels
Criamos um grande sprite de 96×96 pixels primeiro, porque em tal tamanho isso se assemelha mais a desenhar ou pintar, mas apenas com pixels. Quanto menor o sprite, menos ele se assemelha ao que deveria representar, e mais importante se torna cada pixel.
Em Super Mario Bros., o olho de Mario é apenas dois pixels, um acima do outro. E sua orelha também. O criador do personagem, Shigeru Miyamoto, disse que os bigodes eram necessários para separar o nariz do resto do rosto. Portanto, uma das principais características do rosto de Mario não é apenas o design do personagem, mas também uma truque pragmática. O que confirma o antigo ditado — "a necessidade é a mãe da invenção".
As principais etapas para criar um sprite de 32×32 pixels já são conhecidas: esboço, cor, sombras, aprimoramento adicional. Porém, nessas condições, como esboço inicial, opto por figuras coloridas ao invés de desenhar contornos devido ao tamanho pequeno. A cor desempenha um papel mais importante na definição do personagem do que os contornos. Olhe para o Mario mais uma vez; ele não possui contornos. Não são apenas os bigodes que são interessantes. As costeletas definem a forma das orelhas, as mangas mostram as mãos e a forma geral reflete de maneira mais ou menos clara todo o seu corpo.
Criar pequenos sprites é uma constante de compromissos. Se você adicionar um contorno, pode perder espaço para a sombra. Se as mãos e os pés do seu personagem estão claramente definidos, a cabeça provavelmente não deve ser muito grande. Se utilizar bem a cor, contornos seletivos e suavização, o objeto desenhado parecerá maior do que realmente é.
Para pequenos sprites, gosto do estilo chibi: os personagens parecem muito fofos, com cabeças e olhos grandes. É uma ótima forma de criar um herói vibrante em um espaço limitado, além de ser um estilo muito agradável. Mas talvez você precise mostrar mobilidade ou força do personagem; então pode dedicar menos espaço para a cabeça, fazendo o corpo parecer mais poderoso. Tudo depende de suas preferências e objetivos.
A equipe toda está reunida!
Formatos de arquivo
Esse resultado pode deixar qualquer artista de pixel nervoso.
A imagem que você vê é o resultado de salvar o desenho em JPG. Parte dos dados foi perdida devido aos algoritmos de compressão do arquivo. Um pixel-art de qualidade acabará parecendo ruim, e será difícil reverter para a paleta original.
Para salvar uma imagem estática sem perda de qualidade, use o formato PNG. Para animações, use GIF.
Como compartilhar pixel art corretamente
Compartilhar pixel art nas redes sociais é uma ótima maneira de obter feedback e conhecer outros artistas que trabalham no mesmo estilo. Não esqueça de usar a hashtag #pixelart. Infelizmente, as redes sociais frequentemente convertem PNG em JPG sem aviso, prejudicando seu trabalho. E não é sempre claro por que sua imagem foi convertida.
Existem algumas dicas sobre como manter a pixel art na qualidade desejada para várias redes sociais.
Para que o arquivo PNG não seja alterado no Twitter, use menos de 256 cores ou , de que seu arquivo tenha menos de 900 pixels no lado mais longo. Eu aumentaria o tamanho do arquivo para pelo menos 512×512 pixels. Além disso, deve-se garantir que o escalonamento seja múltiplo de 100 (200%, e não 250%) e que as bordas sejam nítidas (Nearest Neighbor no Photoshop).
Os arquivos GIF animados para postagens no Twitter não devem ultrapassar 15 MB. A imagem deve ter pelo menos 800×800 pixels, a animação cíclica deve ser repetida três vezes, e o último quadro deve durar metade do tempo dos outros — essa é a teoria mais popular. No entanto, não está claro até que ponto é necessário cumprir esses requisitos, considerando que o Twitter muda constantemente seus algoritmos de exibição de imagens.
Até onde sei, não é possível publicar uma imagem no Instagram sem perda de qualidade. Mas ela definitivamente parecerá melhor se você aumentar seu tamanho para pelo menos 512×512 pixels.
Fonte: habr.com
