Você já ouviu falar de Pixel Art? É um estilo artístico muito utilizado em diversos tipos de jogos. À primeira vista, lembra muito jogos antigos, mas o Pixel Art vai muito além da nostalgia. Neste tutorial de pixel art, iremos te ensinar a criar o personagem abaixo:
Não consegue pensar em nenhuma inspiração? Talvez uma stock image do Envato Market funcione.
Você vai precisar criar um novo arquivo no Adobe Photoshop. Suas dimensões podem ser 100 x 100 px; o personagem que eu fiz tem uma altura de apenas 28 px.
Antes de iniciarmos o tutorial, é importante explicarmos a diferença entre uma arte Pixel Art e uma arte convencional, e o jeito mais fácil de definirmos isso é explicando o que não é um Pixel Art.
Eu não os farei totalmente brancos porque eu já deixarei o fundo branco. A desvantagem de não utilizar contornos é que se o plano de fundo e o primeiro plano forem da mesma cor, alguns detalhes podem se perder.
E para aplicar a sombra, apenas diminua Opacity da camada para aproximadamente 15%. Você pode fazer isso através do painel Layers ou também pressionar 15 no teclado, enquanto a Move Tool está selecionada.
Uma outra ferramenta que você precisará bastante é a Borracha! Então clique nela (ou se preferir, pressione a tecla E) e mude nas opções da barra superior o “Mode” da Borracha para “Pencil”, conforme o exemplo abaixo:
Pixel Art é um estilo artístico no qual podemos facilmente identificar elementos na arte criada, tais elementos como um rosto, olhos, partes do corpo, etc. Mas quanto menor for o seu personagem, mais difícil será de criar isso.
Vamos colocar umas calças no personagem. A cor aqui será um tom de azul-marinho de baixa saturação, o qual estou usando para representar um jeans azul. Para tentar variações de cor, eu geralmente copio a área que eu estou colorindo para uma nova camada (New Layer) e abro o painel Hue/Saturation/Lightness (image > Adjustments > Hue/Saturation) e movo os sliders no painel até gostar do resultado.
Poderíamos desenhar todo o corpo do personagem de uma vez. Entretanto, é muito mais fácil e prático fazermos uma silhueta antes de criarmos os detalhes do corpo do personagem. Não precisa ser perfeito, apenas tente reproduzir a pose inicial do personagem e seus membros, conforme a imagem:
Antes de iniciarmos, você sabe o que é o Pixel Art? Trata-se de um estilo artístico extremamente utilizado principalmente por desenvolvedores independentes e por alguns motivos.
Por exemplo, para criar o batman em uma figura esboço já existente é necessário trabalhar nos elementos que chamam mais a atenção, para pessoas mais velhas tem a referência da logo de morcego com fundo amarelo, e uma roupa preta com tons acinzentados e o cinto amarelo.
Mas é interessante você desmarcar o “anti-alias” da ferramenta Free Transform, para que todas as cores que você aplicou sejam preservadas mesmo após uma edição na parte selecionada. Para isso, vá em Edit > Preferences > General (ou Ctrl + K) e mude a “Image Interpolation” para “Nearest Neighbor”.
Para finalizar as extremidades, nós adicionamos os braços nas laterais; elas são simplesmente um pixel extra nos lados do torso. Também adicionamos uma linha de pixel embaixo das pernas com um pixel extra em cada lado para representar os pés.
Ah! O único requisito que teremos para este tutorial será você possuir um software que permita criar pixel art. Você pode usar o Piskell (software gratuito) ou o Adobe Photoshop.
Você pode utilizar alguma ferramenta de seleção (tecla M) e demarcar alguma área do seu personagem a ser modificada e pressionar Ctrl + T para selecionar a ferramenta Free Transform, assim você será capaz de redimensionar ou rotacionar a área selecionada.
Vamos definir a cor da pele. Que será Hue (matiz) em 25º, Saturation (saturação) 40% e Brightness (brilho) 98%, mas escolha aquela que mais funciona para você.
Visto com 100% de zoom, o personagem pode estar muito pequeno para apreciar. Então você pode selecioná-lo, copiar e redimensionar para 200% ou 300% (Edit > Free Transform) com Interpolation definida para Nearest Neighbor.
Para criar objetos em pixel arte, você pode utilizar um site, programas no computador ou aplicativos para celular, de forma gratuita e simples. Construa seus projetos em Pixel Art, com desenho ponto a ponto, com apenas alguns cliques e divirta-se online.
Como surgiram os pixels? A palavra apareceu lá na década de 1960, mas não se sabe ao certo quem deu origem ao termo. O nome surgiu da combinação das palavras picture (imagem) e element (elemento), que juntas formam o conceito do pixel: ele é o elemento básico da imagem.
Os leitores devem estar se perguntando o que pixel tem a ver com indicadores. ... Mas voltemos aos pixels. Primeiro, é bom saber que a palavra surgiu da união de dois termos em inglês: picture e element, ou seja, imagem e elemento. E é isso mesmo que eles são: os elementos com os quais são construídas as imagens digitais.
Introdução à criação de pixel art no Photoshop
Use Janela > Linha do Tempo. No campo aberto, use a seta para escolher “Criar quadro de animação” e clique sobre o botão com esse nome. É possível removê-lo da janela para liberar sua mobilidade pela tela. Embaixo do botão de fechar o campo, clique sobre o botão de opções e escolha “Criar Quadros A Partir De Camadas”.
Permita-me explicar: Pixel é um elemento pequeno de exibição atribuído a uma cor. Sendo mais simples, um pixel é o menor ponto que forma uma imagem digital, consequentemente milhares de pixels formam a imagem digital completa que vemos hoje em dia.
O Photoshop oferece suporte para dimensões em pixels de até 300.
Importa que, na maioria dos casos, 1 dpi é igual a 1 pixel por polegada (ppi) e, portanto, 1 px equivale a 1 ponto. Como os monitores têm um padrão de 96 dpi no Windows e 72 dpi no Mac, simplesmente ignora-se o dpi para imagens que serão mostradas na tela do computador.
O que você aprendeu: cortar e endireitar uma imagem