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

01- Tutorial 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”:

02- Tutorial Piskel

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

03- Tutorial Piskel

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

Temos:

04- Tutorial Piskel

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

05- Tutorial Piskel

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

06- Tutorial Piskel

Vertical Mirror Pen

07- Tutorial Piskel

 É 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:

08- Tutorial Piskel

Paint Bucket

09- Tutorial Piskel

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

10- Tutorial Piskel

Paint All pixels of same color

11- Tutorial Piskel

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

12- Tutorial Piskel

Eraser Tool

13- Tutorial Piskel

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

14- Tutorial Piskel

Stroker Tool

15- Tutorial Piskel

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

16- Tutorial Piskel

Rectangle Tool

17- Tutorial Piskel

Ferramenta de fazer retângulos:

18- Tutorial Piskel

Circle Tool

19- Tutorial Piskel

Ferramenta de fazer círculos:

21- Tutorial Piskel

Move Tool

22- Tutorial Piskel

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

Shape Selection

23- Tutorial Piskel

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

24- Tutorial Piskel

Rectangle Selection e Lasso Selection

25- Tutorial Piskel

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

Lighten

26- Tutorial Piskel

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

28- Tutorial Piskel

Dithering Tool

29- Tutorial Piskel

Serve para fazer conteúdo tracejado:

30- Tutorial Piskel

Color Picker

31- Tutorial Piskel

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

Cores

32- Tutorial Piskel

 Escolhe a cor que usar

Atalhos

33- Tutorial Piskel

Ver os atalhos e comandos do teclado:

34- Tutorial Piskel

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:

35- Tutorial Piskel

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):

36- Tutorial Piskel

37- Tutorial Piskel

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:

38- Tutorial Piskel

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!

39- Tutorial Piskel

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

40- Tutorial Piskel

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

41- Tutorial Piskel

42- Tutorial Piskel

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

43- Tutorial Piskel

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).

44- Tutorial Piskel

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

45- Tutorial Piskel

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!