Menu

06.5 – Tutorial Intermediário – Construindo Pixel Art

E aê galerinha, tudo joia? Hoje o tutorial será um extra, por isso será beeeem curtinho e se quiser pode até pular. Mas iremos conhecer uma ferramenta para desenhos em pixel art.

Neste tutorial você não verá nada relacionada ao Unity e sim a criação de sprites.

Acho que todos vocês sabem, mas existe uma técnica de arte chamada Pixel Art, que é baseada na construção de desenhos em pixel como os jogos da década de 80/90.

Basicamente você clica em um pixel e depois em outro e por ai vai. Você pode fazer isso através de ferramentas como o Photoshop, Ilustrator, Gimp e até mesmo o Paint (Embora não recomendo esse ultimo).

Mas caso não saiba mexer nessas ferramentas, existe uma online disponível exclusivamente para a construção de pixel art! E é justamente o que vou apresentar para vocês hoje.

Conheçam Piskel!

Piskel

Como vocês devem saber, não é muita minha área a parte de art e designer, então vou apenas apresentar a ferramenta por cima. Porém sem dúvida é uma ferramenta que eu usarei em meus trabalhos futuros.

Para começar a criação do seu projeto, basta descer um pouquinho e clicar ali embaixo “Create a Sprite”:

E então começa a diversão:

Aqui é bastante intuitivo, se você sair clicando, vai aprender a mexer em tudo.

Temos:

Tamanho dos quadrados da nossa Pixel Art (Não se preocupe com o tamanho da imagem, pois isso definimos no final), mas pense que ao escolher um quadrado maior, irá te polpa ter que fazer 4 menores em alguma parte.

Pen Tool

Famoso Lapis, que você usa para fazer cliques simples e livres no desenho, mas deve ser a ferramenta que você mais vai usar:

Vertical Mirror Pen

 É o Lapis simples, porém com a função de espelhamento, ou seja, o que você fizer de um lado também fará do outro:

Paint Bucket

O clássico balde de pintar. Irá pintar aquele grupo de pixel da mesma cor que estiverem juntos:

Paint All pixels of same color

 Como o próprio nome já diz, ele vai pintar todos os pixels da mesma cor, estando juntos ou não:

Eraser Tool

 A borracha, com função de apagar seus erros:

Stroker Tool

 Ferramenta de fazer linhas. Clica em um ponto e arrasta até outro ponto:

Rectangle Tool

Ferramenta de fazer retângulos:

Circle Tool

Ferramenta de fazer círculos:

Move Tool

Ferramenta para mover todos os pixels do frame (Clica e arrasta)

Shape Selection

 É parecido com a varinha magica do photoshop. Serve para selecionar alguns conteúdos.

Rectangle Selection e Lasso Selection

Mais outras duas ferramentas de seleção. Após selecionar você pode deletar, copiar e essas coisas que estamos acostumados a fazer.

Lighten

Ferramenta para aplicar clareamento ou escurecer alguns pixels, ótimo para fazer efeito de sombra.

Dithering Tool

Serve para fazer conteúdo tracejado:

Color Picker

 Serve para buscar aquela cor que você usou em um pixel e não se lembra qual é.

Cores

 Escolhe a cor que usar

Atalhos

Ver os atalhos e comandos do teclado:

OBS:  Você pode alterar os botões se quiser.

Após ter criado o seu primeiro desenho, pode adicionar um novo frame para criar uma animação clicando em Add new Frame:

Caso queira adicionar um novo frame igual, para fazer as alterações em cima desse novo frame, basta clicar em Duplicate Frame (Ideal para fazer sprites de movimentação, onde você quer apenas modificar algumas partes do desenho anterior):

A animação e a velocidade você pode controlar do outro lado da tela:

Os Layers servem para caso você queira fazer desenhos em diferentes camadas:

Por exemplo, na camada 1 crio o meu personagem sem roupa e na camada 2 crio a roupa dele. Assim quando eu quiser fazer outra roupa, uso apenas a camada 1, sem ter que fazer tudo do zero!

Transform, permite você fazer algumas modificações na posição e rotação do seu desenho (Layer).

Palettes armazena as ultimas cores que você usou, assim você pode recupera-las de forma rápida.

Em Resize, você pode definir qual será o tamanho final do seu desenho:

Em Export você pode baixar o seu sprite em formado de PNG (todos os frames em uma única imagem, sendo cada frame um do lado do outro, igual ao tutorial básico), PNG com frames separados (Igual ao tutorial atual) ou GIF (Uma imagem animada).

Em Save, você pode salvar tanto na sua conta (Que eu recomendo que crie) ou no formato .piskel no seu pc em casa mesmo.

Em Import você pode importar uma imagem normal, ou um arquivo piskel que você já tenha salvo no seu pc ou na sua conta online.

Bem simples a ferramenta, porém bastante útil e torna o trabalho bem mais produtivo do que ferramentas grandes, porém que não foram criadas com o foco para Pixel Art.

Por hoje é só isso e boa diversão com o Piskel 😉

Índice Tutorial Intermediário

Criador do Jogos Indie, amante de jogos, terror, música, anime e programação. Estudante de mestrado com foco em jogos na educação. Louco por Resident Evil e... sei lá, acho que é isso O.o

3 comments

  1. Ygor disse:

    Kra voce é realmente é o kra mais foda de todos !! alem de explicar sobre programaçao voce deu uma otima dica para fazer pixel art,
    Meu parabens !!!!!!
    Premio nobel para vc !!!
    Depois dessa dica vou parar de usar o Photoshop kk 😀

  2. Ygor disse:

    OBS:Aprendi muito com voce,e estou tentando fazer o primeiro indie game :D,novamente parabens kra !! 😀

Deixe uma resposta

Parceiros

Steam Brasil LoboLimão Centro RPG Lab Indie
Mundo Gamer PodTerror

Anunciantes

Aglomerando - Agregador de conteúdo
Uêba - Os Melhores Links GeraLinks - Agregador de links Piadas Idiotas - São idiotas mas o faz rir Tedioso: Os melhores links LinkLog MeusLinks.com - Informação e conteúdo todos os dias para você! Agregador de Links - Madruga Links 4Blogs - Agregador de conteúdo Está no seu momento de descanso né? Entao clique aqui!