Tutorial Pixel Arte – parte 1

Pixel Art : Inciando a prática

Autor: Samuel Salomão

Nível: Básico

Introdução

A grande vantagem da Pixel Art é que realmente não precisamos de nenhuma ferramenta específica para criar uma ilustração. Por exemplo, com o programa padrão de edição de bitmaps (aquele que já vem instalado em todos os computadores) também é possível obter bons resultados. Lembrando que, como visto no post anterior, existem vários tipos de softwares diferentes, por isso, é importante ressaltar que embora neste tutorial tenha sido utilizado o Fireworks como ferramenta, é o artista que deve escolher o software com que se sentir mais confortável para a execução da tarefa.

As ferramentas

Atenção: não se esqueçam que o programa aqui usado é o Fireworks, no caso de uso de outro programa, as teclas de atalho podem sofrer alterações.

Para a criação de uma ilustração feita pixel a pixel, seu principal aliado será a ferramenta Pencil Tool (atalho “B”) que encontra-se na Toolbox do programa.

É importante que haja atenção no momento de selecionar a ferramenta, pois há possibilidade de escolher opções alternativas para esta ferramenta com o mesmo atalho. Para certificar-se que realmente estamos selecionando a Pencil Tool, observe o ícone selecionado na Toolbox. O correto é que representa um lápis.

Pencil Tool: ícone representado na Toolbox.

A Pencil Tool é utilizada por permitir a manipulação de pixels individuais, sem qualquer anti-aliasing. Esse detalhe é extremamente importante nesse momento, então fique atento.

Além da Pencil Tool, também serão úteis outras ferramentas:

* Marquee Tool (atalho “M”) e Magic Wand Tool (atalho “W”), que servem para criar areas de seleção.

Magic Wand Tool: também conhecida como varinha mágica.

É importante lembrar que, segurando “Shift” e “Alt” enquanto faz sua seleção, pode-se respectivamente adicionar ou subtrair a seleção atual. Isto auxilia muito quando for necessário pegar áreas que não são perfeitamente quadradas.

* Eyedropper Tool (atalho “I”) para capturar as cores.

Eyedropper Tool: facilita a reutilização de um tom de cor já aplicado.

Neste software, outro atalho útil é o “X”, pois ele alterna entre as opções de contorno e preenchimento, podendo assim utilizar ou a Pencil Tool ou a Paint Bucket Tool (atalho “G”)

Paint Bucket Tool: aplica preenchimento.

É importante lembrar que, assim como a Pencil Tool, outras ferramentas apresentadas neste parágrafo também possuem opções variantes, assim, a atenção deve ser constante para que não haja confusão no momento da utilização das mesmas.

Linhas retas

A criação de linhas é algo que parece fácil, porém, com pixels, inclusive linhas retas podem apresentar problemas. O que devemos evitar são as “Jaggies” ou “Aliasing”, ou seja, o excesso de contraste entre os pixels vizinhos de uma imagem, isso ocorre quando um pedaço da linha é maior ou menor que as peças vizinhas.

Linhas curvas

Muita atenção na curvatura das linhas. Certifique-se que a inclinação seja consistente sempre. Neste exemplo, a curva abaixo é apresentada de forma suave com a seguinte seqüência de pixels 6 > 3 > 2 > 1, enquanto a curva com o “Jaggy” (serrilhada) apresenta a seqüência de pixel 3 > 1 < 3.

Para auxiliar na visualização podemos conferir um gabarito de linhas, logo abaixo:

Gabarito de linhas para Pixel Art.

Exercício

Primeiramente, abra um arquivo novo (atalho, “Crtl+N”), com nome de “Carro” do tamanho de 180×80 pixels com 72 dpi de resolução, em modo RBG. Escolha transparente para a cor de fundo (Background).

É importante realizar alguns ajustes de configuração no programa para facilitar a criação da ilustração:

1- Precisamos usar a ferramenta Pencil Tool e devemos configurá-la sem a opção Anti-aliased, Auto erase e Preserve transparency, conforme a imagem abaixo:

2 – A Paint Bucket Tool com tolerância 0 e Anti-aliased desligado:

3 – Seguindo o caminho abaixo criaremos uma segunda visualização do documento que será usada mais adiante, durante a criação.

Acesse o menu Window e acione a opção “Duplicate Window”

Deixe a janela principal com 1600% de zoom (atalho “Crtl +,” o quanto for necessário para atingir o zoom que achar necessário) e a secundária com 100 % (atalho Crtl+1). Assim, será possível visualizar como está o resultado obtido em seu tamanho real.

Com as devidas configurações ajustadas, podemos começar a criação.

Se este for seu primeiro contato com este tipo de arte, aconselho escolher um desenho digitalizado ou uma imagem de referência, neste caso, para ilustrar, escolhi a foto de um carro Delorean, o objetivo é transformá-lo em uma versão do filme “De volta para o futuro”.

Versão do carro sem o capacitor de fluxo

Antes de mais nada, adote um padrão de organização de layers (também conhecidas por “camadas”). Este detalhe ajuda muito caso seja necessário realizar futuros ajustes.

Utilize a imagem de referência como background, crie as layers acima do background e as renomeie de acordo com o conteúdo de cada uma.

A layer onde estão os traços principais da ilustração, foi chamada aqui no exemplo de: “Carro contorno”.

Crie uma layer com um fundo branco entre os desenhos e a imagem de referência, assim é possível conferir como o desenho está ficando sem precisar excluir a imagem de background. Para isso, basta desabilitar a visualização da layer de fundo branco clicando no ícone do olho.

Feito isso, começaremos a traçar o contorno do desenho. Para facilitar, podemos utilizar o gabarito de linhas como auxilio.

Muita atenção nas linhas. Verifique o gabarito de linhas sempre que houver dúvidas.

Em seguida, crie mais uma camada para aplicar o preenchimento de cor. Bloqueie as camadas de contorno e background para evitar pixels em layers erradas.

Agora, defina a cor a ser utilizada na ilustração para criar um efeito de volumetria. Aqui no exemplo, criei um degrade simples, em tons de cinza.

O degradê é feito com linhas com pouca diferença de tons de uma mesma cor.

Cria-se posteriormente uma camada diferente para os detalhes do carro, adicionando pequenos detalhes como janelas, pára-choques e lanternas.

Note a importância da posição de cada ponto, observe a diferença que ele faz, comparando a imagem com visualização em 100% (atalho Crtl +1, imagem acima ) com zoom 600% (imagem abaixo).

Zoom 600%

Para as rodas, é preciso atenção no número de pixels para cada um dos lados, no exemplo na roda traseira, utilizei 9 pixels nas linhas horizontais, 5 nas diagonais e 8 nas verticais. Estes números não são regra, mas foram a melhor opção para esta ilustração.

Roda traseira.

Com o Delorean já pronto, falta somente criar as turbinas utilizando o mesmo esquema de camadas separadas para este elemento.

A grande vantagem é que pode-se gerar imagens do carro simples ou em sua versão no filme “De volta para o Futuro”.

Conclusão

Criar Pixel Art não é tão difícil quanto pode aparentar, como pode-se notar por este tutorial. Estar confiante com a criação de qualquer linha em pixels é crucial para fazer Pixel Art, ter um pouco de criatividade e se atentar às teclas de atalho são dicas importantes para não fazer confusão quando utilizar as ferramentas adequadas.

Com treino o processo de criação de Pixel Art se torna fácil e divertido para o artista, incitando para que mais e mais desenhos sejam produzidos.

Mais adiante, vamos apresentar a aplicação do anti-aliasing para aperfeiçoar a aparência das linhas, fazendo que estas pareçam mais suaves. Por enquanto é isso, até a próxima!

Referência :

Texto adaptado e imagens de estilos de linhas:

http://www.derekyu.com/

http://imasters.uol.com.br/artigo/1681