Os desenvolvedores independentes muitas vezes precisam combinar várias funções ao mesmo tempo: designer de jogos, programador, compositor, artista. E quando se trata de recursos visuais, muitas pessoas escolhem pixel art – à primeira vista parece simples. Mas para fazer isso lindamente, você precisa de muita experiência e certas habilidades. Encontrei um tutorial para quem está começando a compreender o básico desse estilo: com uma descrição de softwares especiais 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 no nível do pixel. Está principalmente associado aos gráficos de videogame dos anos 80 e 90. Naquela época, os artistas tinham que levar em conta as limitações de memória e a baixa resolução. Hoje em dia, a pixel art ainda é popular em jogos e como estilo de arte em geral, apesar da capacidade de criar gráficos 3D realistas. Por que? Deixando a nostalgia de lado, criar um trabalho interessante dentro de uma estrutura tão rígida é um desafio agradável e gratificante.
A barreira para entrar na pixel art é relativamente baixa em comparação com a arte tradicional e os gráficos 3D, que atraem desenvolvedores independentes. Mas isso não significa que será fácil Finalizar jogo neste estilo. Já vi muitos desenvolvedores independentes com metroidvanias de pixel art em plataformas de crowdfunding. Eles pensaram que terminariam tudo em um ano, mas na realidade precisavam de mais seis anos.
Metal Slug 3 (Arcade). SNK, 2000
Pixel art no nível em que a maioria das pessoas deseja criá-lo leva muito tempo e há poucos tutoriais curtos. Ao trabalhar com um modelo 3D, você pode girá-lo, deformá-lo, mover suas partes individuais, copiar animações de um modelo para outro e assim por diante. Pixel art de alto nível quase sempre exige muito esforço para colocar pixels meticulosamente em cada quadro.
Em geral, eu avisei você.
E agora um pouco sobre o meu estilo: desenho principalmente pixel art para videogames e encontro inspiração neles. Em particular, sou fã do Famicom/NES, dos consoles de 16 bits e dos jogos de arcade dos anos 90. A pixel art dos meus jogos favoritos da época pode ser descrita como brilhante, confiante e limpa (mas não muito limpa), em vez de austera e minimalista. Este é o estilo que eu trabalho, mas você pode facilmente aplicar as ideias e técnicas deste tutorial para criar coisas completamente diferentes. Explore o trabalho de diferentes artistas e crie pixel art que você goste!
macio
As ferramentas digitais básicas para pixel art são Zoom e Lápis para posicionar os pixels. Você também achará úteis Linha, Forma, Selecionar, Mover e Balde de Pintura. Existem muitos softwares gratuitos e pagos com esse conjunto de ferramentas. Vou falar sobre os mais populares e aqueles que eu mesmo uso.
Pintar (grátis)
Se você possui Windows, o Paint integrado é um programa primitivo, mas possui todas as ferramentas para pixel art.
(é grátis)
Um editor de pixel art inesperadamente funcional que é executado no navegador. Você pode exportar seu trabalho como PNG ou GIF animado. Uma excelente opção para iniciantes.
(é grátis)
GraphicsGale é o único editor que ouvi falar que foi projetado especificamente para pixel art e inclui ferramentas de animação. Foi criado pela empresa japonesa HUMANBALANCE. Está disponível gratuitamente desde 2017 e ainda é procurado, apesar do aumento da popularidade do Aseprite. Infelizmente, só funciona no Windows.
($)
Talvez o editor mais popular do momento. , muitos recursos, suporte ativo, versões para Windows, Mac e Linux. Se você leva pixel art a sério e ainda não encontrou o editor certo, este pode ser o que você precisa.
($$+)
GameMaker Studio 2 é uma excelente ferramenta 2D com um bom Sprite Editor. Se você deseja criar pixel art para seus próprios jogos, é muito conveniente fazer tudo em um programa. Agora estou usando este software enquanto trabalho , uma coleção de 50 jogos retrô: crio sprites e animações no GameMaker e tilesets no Photoshop.
($$$+)
Photoshop é um software caro, distribuído por assinatura e não projetado para pixel art. Não recomendo comprá-lo, a menos que você esteja envolvido na renderização de ilustrações em alta resolução ou não precise realizar manipulações complexas com a imagem, como eu. Você pode criar sprites estáticos e pixel art nele, mas é bastante complexo em comparação com software especializado (por exemplo, GraphicsGale ou Aseprite).
outro
Meu kit de pixel art. Está tudo preto, só notei agora.
Mesa digitalizadora ($$+)
Eu recomendo tablets gráficos para qualquer trabalho de ilustração digital para evitar a síndrome do túnel do carpo. É muito mais fácil prevenir do que remediar. Um dia você sentirá dor e ela só aumentará - cuide-se desde o início. Como eu costumava desenhar com o mouse, agora tenho dificuldade em jogar jogos que exigem o pressionamento de teclas. Atualmente estou usando o Wacom Intuos Pro S.
Apoio de pulso ($)
Se você não conseguir um tablet, pelo menos compre um apoio para o pulso. Meu favorito é a pulseira ajustada Mueller Green. O resto está muito apertado ou não fornece suporte suficiente. As pinças podem ser encomendadas online sem problemas.
96 × 96 pixels
Luta final. Capcom, 1989
Vamos começar! Vamos começar com um sprite de caracteres de 96x96 pixels. Por exemplo, desenhei um orc e coloquei-o em uma captura de tela do Final Fight (foto acima) para que vocês possam entender a escala. Esse большой sprite para a maioria dos jogos retrô, tamanho da captura de tela: 384x224 pixels.
Em um sprite tão grande será mais fácil mostrar a técnica sobre a qual quero falar. A renderização por pixel também é mais semelhante às formas tradicionais de arte (como desenho ou pintura) com as quais você pode estar mais familiarizado. Tendo dominado as técnicas básicas, passaremos para sprites menores.
1. Escolha uma paleta
Pixel é um conceito muito mais profundo em pixel art do que em qualquer outro domínio digital. Pixel art é definido por suas limitações, como as cores. É importante escolher a paleta certa, pois isso ajudará a determinar seu estilo. Mas no início sugiro não pensar em paletas e escolher uma das existentes (ou apenas algumas cores aleatórias) - você pode alterá-la facilmente a qualquer momento.
Para este tutorial usarei a paleta de 32 cores que criamos para . Para pixel art, eles geralmente são montados em 32 ou 16 cores. O nosso foi projetado para um console fictício que apareceria em algum lugar entre o Famicom e o PC Engine. Você pode escolher qualquer outro - o tutorial não depende da paleta selecionada.
2. Contornos aproximados
Vamos começar a desenhar usando a ferramenta Lápis. Vamos desenhar um esboço da mesma forma que fazemos com papel e caneta normais. É claro que pixel art e arte tradicional se sobrepõem, especialmente quando se trata de sprites tão grandes. Minhas observações mostram que fortes artistas de pixel art são pelo menos bons em desenhar à mão e vice-versa. Portanto, desenvolver suas habilidades de desenho é sempre útil.
3. Elaboração de contornos
Refinamos os contornos: removemos pixels extras e reduzimos a espessura de cada linha para um pixel. Mas o que exatamente é considerado supérfluo? Para responder a esta pergunta você precisa entender as linhas e irregularidades dos pixels.
Irregularidades
Você precisa aprender a desenhar duas linhas básicas em pixel art: retas e curvas. Com caneta e papel é tudo uma questão de controle muscular, mas estamos trabalhando com pequenos blocos de cores.
A chave para desenhar linhas de pixels corretas são os recortes. São pixels únicos ou pequenos segmentos que destroem a suavidade da linha. Como eu disse antes, um único pixel faz uma grande diferença na pixel art, então a irregularidade pode arruinar toda a estética. Imagine desenhar uma linha reta no papel e de repente alguém bate na mesa: as saliências na pixel art parecem um rabisco aleatório.
Примеры:
Dirigir
As curvas
Irregularidades aparecem nas curvas quando o comprimento dos segmentos de linha não aumenta ou diminui gradualmente.
É impossível evitar completamente os solavancos - todos os seus jogos retrô favoritos os possuem (a menos, é claro, que a pixel art consista apenas em formas simples). Objetivo: Manter o desnível ao mínimo e ao mesmo tempo mostrar tudo o que é necessário.
4. Aplique as primeiras cores
Pinte seu personagem usando preenchimento ou outra ferramenta adequada. A paleta simplificará esta parte do trabalho. Caso o software não preveja o uso de paletas, você pode colocá-la diretamente na imagem, como no exemplo acima, e selecionar as cores usando um conta-gotas.
No canto inferior esquerdo desenhei nosso amigo, conheça, esse é o Ball. Isso tornará mais fácil entender o que exatamente está acontecendo em cada estágio.
5. Sombreamento
É hora de exibir as sombras - basta adicionar cores mais escuras ao sprite. Isso fará com que a imagem pareça tridimensional. Vamos supor que temos uma fonte de luz localizada acima do orc à esquerda dele. Isso significa que tudo o que está acima e à frente do nosso personagem será iluminado. Adicione sombras no canto inferior direito.
Forma e volume
Se esta etapa for desafiadora para você, pense no seu desenho como formas tridimensionais, em vez de apenas linhas e cores. As formas existem no espaço tridimensional e podem ter volume, que construímos com a ajuda de sombras. Isso vai te ajudar a visualizar o personagem sem detalhes e imaginar que ele é feito de argila e não de pixels. Sombrear não é apenas adicionar novas cores, é o processo de construção de uma forma. Em um personagem bem desenhado, os detalhes não escondem as formas subjacentes: se você apertar os olhos, verá alguns grandes aglomerados de luz e sombra.
Anti-aliasing (anti-aliasing)
Cada vez que uso uma nova cor, aplico o anti-aliasing (AA). Ajuda a suavizar os pixels adicionando cores intermediárias nos cantos onde dois segmentos de linha se encontram:
Pixels cinza suavizam as “quebras” na linha. Quanto mais longo for o segmento de linha, mais longo será o segmento AA.
Esta é a aparência de AA no ombro de um orc. É necessário suavizar as linhas que mostram a curva de seus músculos
O anti-aliasing não deve se estender além do sprite que será usado no jogo ou em um fundo cuja cor é desconhecida. Por exemplo, se você aplicar AA a um fundo claro, o anti-aliasing ficará feio em um fundo escuro.
6. Esboço seletivo
Anteriormente, os contornos eram completamente pretos, o que fazia o sprite parecer muito caricatural. A imagem parecia estar dividida em segmentos. Por exemplo, linhas pretas em um braço contrastam demais com a musculatura, fazendo com que o personagem pareça menos coeso.
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 fazer isso, você pode usar um contorno seletivo - substitua parcialmente o contorno preto por um mais claro. Na parte iluminada do sprite, você pode usar as cores mais claras, ou, onde o sprite tocar o espaço negativo, você pode remover o contorno completamente. Em vez do preto, é necessário usar a cor que foi escolhida para a sombra - assim a segmentação será preservada (para distinguir entre músculos, pelos e assim por diante).
Eu também adicionei sombras mais escuras nesta fase. O resultado foram três gradações de verde na pele do orc. A cor verde mais escura pode ser usada para contorno seletivo e AA.
7. Retoques finais
Por fim, vale adicionar destaques (os pontos mais claros do sprite), detalhes (brincos, tachas, cicatrizes) e outras melhorias até que o personagem esteja pronto ou até que você tenha que passar para o próximo.
Existem várias técnicas úteis que podem ser aplicadas nesta fase. Gire o desenho horizontalmente, isso geralmente ajuda a identificar erros de proporções e sombreamento. Você também pode remover a cor - defina a saturação como zero para entender onde alterar as sombras.
Criando ruído (pontilhamento, pontilhamento)
Até agora temos usado principalmente áreas de sombra grandes e sólidas. Mas existe outra técnica - o pontilhamento, que permite passar de uma cor para outra sem adicionar uma terceira. Veja o exemplo abaixo.
O gradiente superior de escuro para claro usa centenas de tons diferentes de azul.
O gradiente médio usa apenas nove cores, mas ainda existem muitos tons da mesma cor. Surge o chamado banding (do inglês band - stripe), em que, devido às listras grossas e uniformes, o olho foca nos pontos de contato das cores, ao invés das próprias cores.
No gradiente inferior aplicamos dithering, que evita faixas e utiliza apenas duas cores. Criamos ruído de intensidades variadas para simular a gradação de cores. Esta técnica é muito semelhante ao meio-tom (imagem em meio-tom) usado na impressão; bem como pontilhado (imagem granulada) - em ilustrações e quadrinhos.
No orc, hesitei um pouco para transmitir textura. Alguns pixel artist não usam nada, outros, pelo contrário, não são tímidos e o fazem com muita habilidade. Acho que o pontilhamento fica melhor em áreas grandes preenchidas com uma única cor (veja o céu na captura de tela do Metal Slug acima) ou em áreas que deveriam parecer ásperas e irregulares (como sujeira). Decida você mesmo como usá-lo.
Se você quiser ver um exemplo de dithering em grande escala e alta qualidade, dê uma olhada nos jogos do The Bitmap Brothers, estúdio britânico dos anos 80, ou nos jogos do computador PC-98. Lembre-se de que todos eles são NSFW.
Kakyusei (PC-98). Elfo, 1996
Existem apenas 16 cores nesta imagem!
8. Última olhada
Um dos perigos da pixel art é que ela parece fácil e simples (devido às suas limitações de estrutura e estilo). Mas você acabará gastando muito tempo refinando seus sprites. É como um quebra-cabeça que precisa ser resolvido – e é por isso que a pixel art atrai perfeccionistas. Lembre-se de que um sprite não deve demorar muito - é apenas um pequeno pedaço de uma coleção extremamente complexa de peças. É importante não perder de vista o quadro geral.
Mesmo que sua pixel art não seja para jogos, às vezes vale a pena dizer a si mesmo: “Já está bom o suficiente!” E seguir em frente. A melhor forma de desenvolver suas habilidades é percorrer todo o processo do início ao fim quantas vezes for possível, utilizando o máximo de tópicos possível.
E às vezes é útil deixar um sprite por um tempo para que você possa vê-lo com novos olhos um pouco mais tarde.
32×32 pixels
Criamos primeiro um sprite grande de 96x96 pixels porque nesse tamanho é mais parecido com desenho ou pintura, mas com pixels. Quanto menor o sprite, menos semelhante ele é ao que deveria ser exibido e mais importante é cada pixel.
Em Super Mário Bros. O olho de Mario tem apenas dois pixels, um em cima do outro. E a orelha dele também. O criador do personagem Shigeru Miyamoto disse que o bigode era necessário para separar o nariz do resto do rosto. Portanto, uma das principais características de Mario não é apenas o design do personagem, mas uma estratégia pragmática. O que confirma a velha sabedoria – “a necessidade é a mãe da invenção”.
As principais etapas da criação de um sprite de 32x32 pixels já nos são familiares: esboço, cor, sombras, refinamento adicional. Mas nessas condições, como esboço inicial, seleciono formas coloridas em vez de desenhar contornos devido ao tamanho pequeno. A cor desempenha um papel mais importante na definição de um personagem do que o contorno. Olhe para Mario novamente, ele não tem contorno algum. Não é apenas o bigode que é interessante. Suas costeletas definem o formato de suas orelhas, suas mangas mostram seus braços e seu formato geral mostra mais ou menos claramente todo o seu corpo.
Criar pequenos sprites é um compromisso constante. Se você adicionar um traço, poderá perder espaço para a sombra. Se o seu personagem tiver braços e pernas claramente visíveis, a cabeça provavelmente não deveria ser muito grande. Se você usar cores, traços seletivos e suavização de serrilhado de maneira eficaz, o objeto renderizado parecerá maior do que realmente é.
Para sprites pequenos gosto do estilo chibi: os personagens ficam muito fofos, têm cabeças e olhos grandes. Uma ótima maneira de criar um personagem colorido em um espaço limitado e, no geral, com um estilo muito agradável. Mas talvez você precise mostrar a mobilidade ou a força de um personagem, então você pode dar menos espaço à cabeça para fazer o corpo parecer mais poderoso. Tudo depende das suas preferências e objetivos.
Toda a equipe está reunida!
Formatos de arquivo
Este resultado pode deixar qualquer pixel artist nervoso
A imagem que você vê é o resultado de salvar a imagem em JPG. Alguns dados foram perdidos devido a algoritmos de compactação de arquivos. Pixel art de alta qualidade acabará ficando ruim e devolvê-lo à paleta original não será fácil.
Para salvar uma imagem estática sem perder qualidade, use o formato PNG. Para animações - 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 se esqueça de usar a hashtag #pixelart. Infelizmente, as redes sociais muitas vezes convertem PNG em JPG sem pedir, piorando a sua experiência. Além disso, nem sempre fica claro por que sua imagem foi convertida.
Existem diversas dicas de como salvar pixel art na qualidade exigida para diversas redes sociais.
Para manter seu arquivo PNG inalterado no Twitter, use menos de 256 cores ou que seu arquivo tenha menos de 900 pixels no lado mais longo. Eu aumentaria o tamanho do arquivo para pelo menos 512x512 pixels. E para que a escala seja um múltiplo de 100 (200%, não 250%) e as bordas nítidas sejam preservadas (Vizinho Mais Próximo no Photoshop).
GIFs animados para postagens no Twitter não pesa mais que 15 MB. A imagem deve ter pelo menos 800x800 pixels, a animação em loop deve ser repetida três vezes e o último quadro deve ter a metade do comprimento de todos os outros - a teoria mais popular. No entanto, não está claro até que ponto esses requisitos precisam ser atendidos, visto que o Twitter está constantemente mudando seus algoritmos de exibição de imagens.
Pelo que eu sei é impossível postar uma foto no Instagram sem perder qualidade. Mas com certeza ficará melhor se você ampliar para pelo menos 512x512 pixels.
Fonte: habr.com