Become a Pìxel Artist #1 - Introdução

Geraldo de Rívia

Outras edições

[close]

Iniciação

Nos "tutoriais" da série Become a Pìxel Artist, iremos utilizar para exemplo o programa Photoshop que pode ser encontrado com facilidade na internet. Entretanto, pixelar é algo que pode ser feito na grande maioria dos editores de imagem (para não dizer todos), o Photoshop irá oferecer ferramentas extras que podem ser úteis na confecção do trabalho, mas em teoria, tudo desenvolvido aqui pode ser aplicado em qualquer programa.
E para começarmos, precisamos saber quais ferramentas temos em mãos pra saber o que usar em determinadas situações, então vamos lá!

Ferramentas

1.1 - Menu File

Imagem

[close]

Pelo menu File, que é o primeiro na barra de menus, ao lado da logo, é que iremos criar um novo documento/arquivo, abrir um existente, salvar o atual, entre outras que podem ser identificadas. Uma função bem útil que muitos outros programas possuem, é a opção Save As... (ou Salvar Como...), que permite que salvemos o arquivo atual com outro nome ou em outro local, sem que isso altere o arquivo anterior. Por exemplo, você pixelou um personagem e quer ver como ele fica com um elmo, mas não sabe se vai ficar bom, daí você salva primeiramente o arquivo original, e depois vai na opção salvar como, a partir daí você estará editando o novo arquivo e o salvo antes permanece inalterado.

1.2 - Janela de Camadas

Imagem

[close]

Essa é uma função importante, principalmente ao trabalhar com templates (ou modelos). A Janela de camadas lhe dá a possibilidade de utilizar "níveis" diferentes. Por exemplo, ter o modelo do corpo de um personagem e desenhar a roupa literalmente em cima do modelo, numa outra camada, sendo assim, a camada de baixo permanece inalterada. Edições em uma camada não afetam outra a menos que estejam ligadas por algum efeito. Além disso, você pode colocar uma ou mais camadas em uma pasta, e deixá-las sinalizadas com as cores que preferir a fim de organização. Além do controle de opacidade, visualização, também é possível trancar a camada para não mexer nela sem querer, entre outra funções. Geralmente ela vem exibida, por padrão, mas se por algum motivo não estiver a vendo, é só ir no menu Window > Layers, ou simplesmente apertar F7.

Para criar uma nova camada é só apertar Ctrl+Shift+N e em seguida, OK.

1.3 - Menu de Ferramentas

Imagem

[close]

O "importante" para pixel art está aqui, que são as ferramentas. Nesta janela estão as ferramentas: mover; seleção; varinha mágica; lápis; borracha; balde de tinta; zoom e; a seleção de cores, são estas que iremos usar para pixelar. As outras são bem úteis também, entretanto, por desfocarem ou propiciarem suavização das bordas, poderemos usá-las somente esporadicamente. Os nomes das ferramentas são bem sugestivos quanto a seu uso já, e acredito que a maioria já esteja familiarizada. Somente a varinha mágica é nova, e a função dela é poder selecionar regiões da imagem baseada na proximidade das cores. Por exemplo, no seu char, tem umas partes em vermelho que você gostaria de trocar para azul, então usa-se a varinha mágica, seleciona o azul, e usa o balde de tinta para recolorir todas as áreas selecionadas num só clique.
À medida em que fomos utilizando essas ferramentas veremos mais especificações e possibilidades de uso.

1.4 - Réguas, Guias e Grade

Imagem

[close]

As réguas, guias e grade têm a função de auxiliar quanto à tamanho, distância e alinhamento da arte que está fazendo. As réguas, irão exibir uma escala na lateral da área de trabalho do programa, com as medidas. É importante verificar se as unidades estão em pixels, pois como estamos desenhando pixel-por-pixel, é mais interessante utilizar essa medida. Para isso, é só apertar Ctrl+K (atalho para a janela de preferências) e você verá uma janela semelhante à abaixo. Quem quiser pode deixá-la com as mesmas configurações, é a que utilizo, independente de trabalhar com pixel arte ou não.

Imagem

[close]

As guias nada mais são do que linhas, mais utilizadas para fins de alinhamento. Para criar uma, posicione o cursor sobre uma das réguas (caso as réguas estejam ocultas, aperte Ctrl+R para exibi-las) e arraste para dentro da área de trabalho do programa. Se precisar mover ela futuramente, selecione a ferramente mover e poderá reposicionar ela facilmente.
A grade é a mais imprescindível dentre essas três. Para exibi-la, aperte Ctrl+". Ela é útil, por exemplo, para quando estiver pixelando um iconset, você ter o controle do tamanho em que cada ícone irá ocupar, ou para ajeitar chars em um charset. A grade tem tamanho, cor e subdivisões configuráveis, além do estilo da linha também, e essas opções podem ser acessadas também apertando Ctrl+K e indo para a opção indicada na primeira imagem destas ferramentas. Em Gridline Every você coloca quantos pixels deseja entre uma linha da grade e outra. Eu utilizo 16, por ser metade de um tile do RPG Maker, o que para mim permite maior controle. Lembrem-se de colocar a medida em pixels também.

Começando

Acima estão as funções que são importantes no uso do Photoshop para nosso objetivo. Ler é chato, eu também gosto bastante de skippar, mas é bom ler o manual de instruções antes de começar a usar o aparelho, entendemos com essa analogia. Muitas outras coisas que o programa nos oferece será útil, mas alguns trabalhos são melhores de entender praticando, então será um progresso contínuo, todo dia uma coisa nova, pensemos assim.
Enfim, vamos começar. Você é um cara que não sabe nem como fazer um dado branco com o valor um visto de cima, ou, se não for, ótimo pois já conhece algumas coisas, ou muitas. Mas vamos criar nosso documento para tentar algo. Para isso, é só apertar Ctrl+N, e veremos a seguinte tela.

Imagem

[close]

Temos como configurações, a largura, altura, resolução, tipo de cores e o fundo, respectivamente. A largura e altura são de sua preferência, resolução é bom colocar 72, que é o padrão para imagens digitais. Acima disso só faz diferença em documentos que serão para impressão física, em que aliás, o recomendado é 300. Você pode colocar mais de 300, mas não vai fazer diferença na qualidade e vai ficar proporcionalmente mais pesada a imagem. O tipo de cor será RGB, que são as cores primárias da luz. CMYK é o outro modo de cor colorido, porém, as cores primárias são de tinta, como nossos monitores utilizam luz e não tinta, usaremos RGB. O fundo eu recomendo Transparente mesmo. Ainda existe a opção de utilizar a segunda cor selecionada na ferramenta de cores, ou branco, porém, não sei o porquê, a camada vem travada.

Após criar o documento, dificilmente você irá conseguir pixelar na visualização normal (100%), então selecione a ferramenta

Zoom e ajuste como desejar, utilizando Alt+Scroll ou os botões esquerdo e direito do mouse. Particularmente, eu utilizo 1200%, mas creio que quanto maior a resolução do seu computador, mais zoom será necessário.

Zoom ajustado, selecione a ferramenta

Lápis. Caso não esteja a vendo na janela de ferramentas, provavelmente é porque o pincel está "no lugar do lápis". Para mudar para ele, clique e mantenha pressionado o botão esquerdo do mouse sobre a pequena setinha próximo ao ícone. Irá abrir uma mini janela onde será possível ver a ferramenta lápis (ou pencil tool).

Mudar as cores também é fácil. Você tem duas pre-determinadas, a de cima é a que irá fazer efeito ao usar o lápis, balde de tinta, etc. A de baixo é utilizada mais nos filtros, que não nos interessa em pixel art, mas ela pode ser uma cor que você usará bastante, e não quer ter o trabalho de escolhe-la novamente a toda vez que dela precisar. A setinha de suas pontas próximo às cores servem para alternar entre elas. E para escolher uma nova, basta clicar sobre uma delas que abrirá a janela em que se pode escolher uma nova cor. Vale ressaltar que, enquanto esta janela (Color Picker) estiver aberta, um conta-gotas funcionará em toda área de trabalho do programa, permitindo pegar uma cor dentro dela.

Dever de Casa

Ícones são pequenos, simples de criar e com formas muito variadas. A partir deles, podemos dar uma introduzida na parte de paletas, iluminação e sombreamento, que pode ser o tema da próxima edição dependendo do resultado desta. Então, o dever de casa é criar o ícone de: um dado (da forma e posição que preferirem), um cone de trânsito e uma bola de praia. Isso vai servir para introdução à formas, já que cada forma recebe uma iluminação diferente. Não se preocupem quanto às cores, usem as que preferir.
Postem os trabalhos nos comentários abaixo e comentem o trabalho anterior, se puderem. Dúvidas ou dificuldades quanto ao desenvolvimento desta atividade também podem ser solucionadas aqui.

Become a Pixel Artist é uma série de tutoriais não periódicos que fiz com o objetivo de tentar ajudar a quem quer aprender a pixelar. Não se tem um única forma certa de aprender, cada um aprenda da forma que mais lhe agrada, portanto vou tentar passar o conhecimento da forma como sei e uso, e claro, nem tudo é certo. Aos que já sabem mas que quiserem acompanhar e participar, são bem-vindos também, afinal também tenho a aprender e toda ajuda é bem-vinda!

Lincoln · **Resposta 1:** 05/04/2015 às 21:08

Ótimo tutorial Gerar, bem basicão, muito bem explicado e organizadinho.

Vai ajudar muita gente, inclusive eu, que estou iniciando na área.

Bom, fiz aqui o dever de casa, espero receber um feedback de como ficou.

Valeu aí pelo tutorial o/

Speed

É um ótimo tutorial e eu espero não ter falhado miseravelmente na tarefa, me indique os pontos que eu errei e quais devo melhorar.

Makers · **Resposta 3:** 05/04/2015 às 21:53

É um ótimo tutorial mesmo. Uma raridade hoje em dia. Eu adoraria fazer a tarefa, mas fazer P.A em um notebook no paint e sem mouse é complicado

Espero que faça vários tutos!

Lucas Leite · **Resposta 4:** 05/04/2015 às 22:06

Bom tutorial, ideal para quem está começando não só em PA, mas em qualquer tipo de manipulação de imagens. Eu mesmo não uso Photoshop (tenho o Gimp, mas não gosto de usá-lo para pixel art), mas fiz a lição de casa usando o Graphics Gale Free Edition, que é um aplicativo focado em pixel art. A bola de praia foi baseada na bola do Andy, dos filmes Toy Story.

[Anexo excluído pelo administrador]

Geraldo de Rívia · **Resposta 5:** 05/04/2015 às 23:41

Lincoln

[close]

Então, man, tá bom, conforme esperava que fosse o trabalho dessa aula mesmo. Já dá para partir para a próxima
daí, mas caso queira tentar melhorar, lá vai: a bola tá redondinha, porém as estrias coloridas dela tão um pouco
retas, formando um "v" deitado, seria uma boa tentar arredondar mais isso; o cone tá legal, mas se animar pode
deixar a base dele menor (o círculo) pois como ficou largo lembra facilmente aqueles chapéus de bruxa; e o dado
também tá legal, mas pode tentar fazer como o pessoal fez, dando para ver mais superfícies.

Speed

[close]

Falhou não, Speed, haha. Bom, primeiramente acho que fez os ícones um tanto pequenos, se os fizesse um pouco
maiores acho que seria mais fácil até pra tu mesmo. O cone ficou legal, as estrias mostram que é um cone, mas a
base dele reta tira um pouco disso, seria bom arredondar ela também. O dado acho que seria questão de aumentar
ele mesmo, pois o único probleminha foi o pontinho do meio que ficou maior do que os demais, acho que fez isso
pra ele ficar centralizado, certo? E bom, a bola não ficou muito redonda não. Acho que ela tá legal, mas ela ficou
como um octógono, com lados, e não redondinha, saka!?

Makers

[close]

Valeu, Makers. Mas bom, o Photoshop é porque tenho mais intimidade com ele mesmo, pra tentar fazer pode ser
em qualquer programa que permita.

Lucas Leite

[close]

O seu ficou muito bom para começo, rapaz. As formas estão muito boas, mas se me permite só uma observação,
a faixa azul da bola tá um pouco reta na parte mais clara, se quiser tentar arredondar mais. Mas já ficou bem legal
assim. Uma dica não muito a ver com a pixel art em si é salvar os trabalho em .png ou .gif, pois em .jpg (formato
em que salvou) as cores se interlaçam e isso atrapalha muito na qualidade. Então, os próximos, salva em um desses
dois outros formatos.

SantannaCL · **Resposta 6:** 06/04/2015 às 05:55

Belo guia, apesar de eu que pensei que você iria começar logo com os básicos do pixel art (linhas serrilhadas, dither e etc). Mas é bom mesmo assim fazer um tutorial para "preparar" um editor (PS) mais avançado para P.A.

Mas que se dane, tô dentro também.
Aqui os meus trabalhinhos, ficaram ó, uma bosta~;

Spoiler

[close]

Foi divertido, até. q
No aguardo do próximo.

Geraldo de Rívia · **Resposta 7:** 06/04/2015 às 19:37

O seu tá ótimo, man, haha. Mas bom, para te dar serviço pode tentar deixar a bola mais redonda, pois
ela apresenta algumas deformações que não a deixam bem redondinha.
Quanto ao tuto, acho a parte que envolve esses termos mais complicada, até para mim escrever sobre
também, daí pensei em ir mais devagar. A questão do PS como disse é mais porque mexo mais com ele,
além de dispor muitas ferramentas que podem vir a ajudar também.

Prand · **Resposta 8:** 10/04/2015 às 17:36

Gostei muito do tutorial, e resolvi fazer a "lição de casa"

para praticar um pouco :3

Tamanho original

[close]

:linha3:

Não ficou muito bem feito mas gostaria de saber o que achou . E sobre o cone, eu fiz do escuro pois todo mundo fez do laranja

Victor Sena · **Resposta 9:** 10/04/2015 às 19:46

Muito bom o tutorial, espero que dê continuidade a ele. Apesar de que não mexo em PS. Mas com certeza é de grande ajuda para muitos.

Não pude deixar de fazer minha lição também. :3

Anos 40

[close]

Geraldo de Rívia · **Resposta 10:** 10/04/2015 às 20:41

Prand

[close]

:linha3:

Não ficou muito bem feito mas gostaria de saber o que achou . E sobre o cone, eu fiz do escuro pois todo mundo fez do laranja

-->

[close]