Pixel Art : Inciando a prática

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.
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.
É 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.
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”)
É 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:
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.
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”.
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.
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.
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).
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.
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