Introdução à Criação de Pixel Art no Photoshop

Pixel Art é a técnica de pintura em que a imagem é criada tomando-se como ponto de partida cada pixel. O pixel é a menor unidade de medida da imagem, podendo ter formatos diversos, sendo na Pixel Art quase sempre usado o pixel quadrado. Para quem já brincou de Lego, é fácil entender: já viu aqueles super projetos de Lego, criado bloco a bloco e formando grandes construções e personagens? Nos trabalhos de Pixel Art é basicamente a mesma coisa.

Desenhos feitos por essa técnica costumam impressionar pela complexidade, já que deve-se sempre ter em mente que o trabalho todo foi criado a nível de pixels. Podem-se mesclar outras técnicas à pintura de pixels sólidos, como uso de anti-aliasing (técnica de suavização de arestas sólidas). O estilo é bastante usado para ilustrações exibidas em meios digitais, como em videogames de menor resolução, e como base gráfica de sites (como o Habbo).

Neste artigo, você verá como criar um desenho básico no Photoshop que o fará entender melhor o princípio do Pixel Art, além de alguns trabalhos avançados. Pela simplicidade das ferramentas usadas, outros programas gráficos elementares como o próprio Paint podem ser usados (e são até recomendados por veteranos em Pixel Art).

No nosso exemplo, você vai desenhar uma simples caixa aberta. Abra um novo documento no Photoshop - 350 x 250 pixels é muito mais do que suficiente.

Preencha a camada única com uma cor qualquer para servir de base (usei branco). Crie outra camada acima dela, e nesta, vamos começar a fazer o traçado da caixa.

Invariavelmente, o traçado de Pixel Art deve ser feito fino, seco, e a melhor forma de conseguir isso é com a Pencil Tool (Lápis), ajustada para o tamanho de 1 pixel. Use preto para criar os contornos - outras cores podem ser usadas, e branco também.

Traçados podem ser feitos usando uma imagem na camada inferior para servir como referência, como uma foto, um rascunho, ou um esboço que você desenhou ou escaneou. Pode-se também usar ferramentas como os Paths (Demarcadores), criados através de Custom Shapes (Formas Personalizadas) ou com a Pen Tool (Caneta), e depois traçadas com o Lápis. Vamos ver na prática.

Selecione a Rectangle Tool (atalho: U) e arraste o mouse no papel para desenhar um retângulo como visto a seguir. Aproxime o papel com zoom (Ctrl e +) para ver melhor o trabalho.

Clique Ctrl + T para transformar o demarcador. Segurando Alt + Ctrl, arraste um pouco o canto superior direito do retângulo para baixo, para deixá-lo mais inclinado, como visto abaixo, à esquerda. Em seguida, arraste o ponto central do lado esquerdo para reduzir sua largura, como visto abaixo à direita:

Selecione a Pencil Tool, configure-a para 1 pixel, e a cor de primeiro plano para preto. Como você já tem o demarcador, selecione outra vez a Rectangle Tool (ou a Pen Tool) e clique sobre ele com o botão direito, selecionando a opção Stroke Path. Selecione a opção Pencil e confirme.

Se quiser, você pode excluir o demarcador (aperte Del)  para ver como ficou o desenho (depois, aperte Ctrl + Alt + Z para trazê-lo de volta, vamos usá-lo ainda). Pressione Ctrl + T outra vez, e arraste o ponto do meio da lateral esquerda do retângulo para a direita, virando-o para o outro lado (veja a seguir).

Aplique o Stroke no demarcador outra vez. Exclua o demarcador. Você deverá ter algo parecido com isto.

Repare que as linhas são formadas por partes retângulares sequenciais. O que fizemos aqui foi economizar o trabalho de criar ponto por ponto da linha. A linha vertical central (aresta da caixa) ficou com 2 pixels de largura. O correto seria apenas 1 pixel, mas não se preocupe com detalhes agora, apenas entenda como funciona a técnica de desenho e preenchimento de pixels.

Agora, usando a Pen Tool, crie uma linha que vai da ponta superior direita da caixa, até pouco além da metade, com inclinação parecida com o outro plano da caixa. Veja abaixo:

Aplique o Stroke nesta linha, como fez antes com os retângulos. Complete a linha, com outro demarcador seguindo para baixo, e aplique-lhe o stroke em seguida (segure Shift para obter um traço perfeitamente reto).

Com a mesma Pencil Tool, complete a caixa, fechando a parte superior com uma linha; aplique o Stroke.

Vamos colocar alguma cor na caixa. Sempre que for criar pixel art, prefira usar cores RGB (que é o padrão de cor digital). Para representar áreas de luz ou menos luz, use diferentes tons da mesma cor.

Por exemplo, escolhi usar para colorir a caixa a cor RGB 255, 153, 51.

Usando a própria ferramenta Pencil, com tamanho mínimo perto das linhas e mais largo no centro da área de preenchimento, cubra a face esquerda do cubo. Aproxime bem a imagem enquanto preenche, tomando cuidado de não ultrapassar a linha preta. Você pode fazer isso em uma camada logo abaixo daquela onde foi feita a linha, tanto como juntar tudo numa só, fica a seu critério.

Volte ao seletor de cores, escolha uma um pouco mais escura para a parte mais sombria da caixa (um pouco abaixo da primeira, você encontra a RGB 153, 51 , 0 - se não achá-la, digite os valores nas caixas dos valores R, G e B). Com ela, preencha a outra face do cubo.

Preencha a parte de dentro da caixa com as cores invertidas em cada lado, veja abaixo.

Faça uma área de sombra para a caixa, contornando-a com o Lápis e cinza RGB 102, 102, 102. Para criar a área da sombra, você pode usar a Pen Tool: crie linhas que sigam a mesma direção das linhas da base da caixa, estendo-as até a área de sombra. Use o mesmo cinza para preencher a sombra.

Com branco, cubra a linha preta do contorno superior das faces frontais, dando-lhes uma aparência iluminada.

Veja como fica em tamanho natural.

Salve sempre em formato GIF - com um máximo de 256 cores, este formato é o suficiente para seus trabalhos, mantendo o tamanho do arquivo reduzido.

Lembrando que este é um exemplo MUITÍSSIMO BÁSICO, destinado apenas a mostrar os princípios mais rudimentares de desenho e pintura a nível de pixel. Para ter um trabalho de qualidade, você precisa caprichar muito mais nas linhas, refinando as arestas e sobrepondo tons para obter degradês nas luzes e sombras. Para desenho de cubos, por exemplo, outras técnicas seriam mais adequadas, como a duplicação de um retângulo para a base e a parte superior do cubo.

Repare nas linhas.

Este efeito no nosso exemplo é indesejado em um trabalho de qualidade. O correto é que a linha suba com traços e pontos similares, normalmente usando em pixel art isométrico (representações tridimensionais em pixel art) a proporção 2:1 - dois pixels no traço, um pixel de elevação ou descida.

Veja mais sobre isso aqui: http://pixelparadise.forumotion.com/t83-tutorial-traduzido-pixel-art-em-3d-isometrico

Isso fica para um tutorial futuro. Por enquanto, veja alguns exemplos de trabalho em Pixel Art.

Exemplos

Referências sobre o assunto

• Mark's Pixel Art Tutorial
• Isometric Pixel Art
• Tutoriais do Pixelaria
• Tutoriais do Pixeljoint

Leia também...

• 

  Photoshop CC: Nova Versão “Na Nuvem” Disponível em Junho

  O novo Photoshop, que estará disponível só pela Creative Cloud, teve algumas ferramentas anunciadas na conferência Adobe Max, em Los Angeles, nessa semana. Com o Photoshop CC, a empresa passa a oferecer acesso ao software "em nuvem" através do pagamento de planos mensais ou anuais. Será que o fim da suíte CS e da mídia física vai acabar com a pirataria, ou só acelerar a migração desse público para outros softwares?

  De qualquer forma, são várias novidades para os usuários, entre elas: redução de tremor da câmera, que promete salvar fotos que você pensava ter perdido pelo movimento ao fotografar; aprimoramentos nas seleções de formas e demarcadores; melhorias no Camera Raw; aplicação inteligente de nitidez e muito mais. Vamos dar uma passada em algumas das novas possibilidades do Photoshop CC.

• 

  Técnicas: Crop (Corte Demarcado) Não-Destrutivo no Photoshop

  A ferramenta Crop (Corte Demarcado) pode ser a salvação daquela foto que você tirou e ficou meio torta, com um enquadramento não muito interessante, ou com um elemento atrapalhando a composição (tipo um cara que ia passando e saiu na borda da cena ou alguém que aparece fazendo careta no canto da imagem).

  Mas é preciso tomar um pequeno cuidado ao usá-la para não comprometer seu arquivo com um dano permanente, que não poderá ser corrigido depois durante ou após o fim do trabalho. Basta um pequeno ajuste nas opções da ferramenta para garantir que o corte só esconda as áreas eliminadas e não as exclua de vez.

  Assim, caso você precise reajustar o enquadramento, os pixels ainda estarão lá disponíveis, evitando ter que recomeçar a edição do zero.

• 

  Efeito Bokeh Ficou Fácil Com Novos Desfoques do Photoshop CS6

  Pra criar efeitos bonitos simulando bokeh no Photoshop era preciso usar pincéis especiais, misturar filtros ou outras gambiarras, mas depois do CS6 e seus novos tipos de desfoque, ficou bem mais fácil - pelo menos na aplicação sobre fotografias e ilustrações em geral.

  Leia também → Tutorial: Criando um Papel de Parede em Bokeh no Photoshop

  A opção está em "Efeitos de desfoque", guia que aparece quando começamos a aplicar os desfoques de campo, íris ou tilt-shift. Basta ajustar os valores de suavidade, intensidade de cor e intervalo de luz e sombra.

  Vamos ver um exemplo simples e prático.