Como vetorizar ícone 2D para jogos no Inkscape | Pote de poção

Uma opção que temos para criar uma arte seja para jogos ou outras mídias é a vetorização, e neste tutorial eu mostro passo a passo como criar um ícone pote de poção 2D com o Inkscape.

Esta é a paleta de cores que utilizei para criar todo o ícone, e com o código hexadecimal que deixei abaixo de cada uma delas você pode fazer o seu exatamente com as mesmas cores.


Como criar um pote de poção 2D no Inkscape


Alterando as Propriedades do Desenho

Vamos começar fazendo algumas alterações (opcionais) nas Propriedades do Desenho (Shift + Ctrl + D), apenas fiz para organizar melhor o conteúdo. E a Cor de pano de fundo eu alterei para cinza pra que a parte em branco do ícone não fique invisível no fundo branco da página.


Criando o formato base do pote de poção

Aqui vamos criar três formas bem simples. Para a primeira selecione a ferramenta e com a ajuda da tecla Ctrl pressionada crie um círculo perfeito. Com a ferramenta selecionada altere os valores da largura(W) e altura(H) para os valores apresentados na imagem abaixo.

Para as outras duas formas você deve selecionar a ferramenta e criar dois retângulos, então com uma de cada vez selecionada repita o processo anterior e altere as medidas.

Alinhando as formas

Com as formas básicas criadas vamos alinhá-las, e para isso esteja com o diálogo Alinhar e Distribuir (Shift + Ctrl + A) aberto. Então basta selecionar duas formas e alinhar e centralizar.

Aqui o alinhamento pode ficar diferente de acordo com o tipo de alinhamento que você pode definir em Relativo à, no caso do meu eu geralmente deixo em Último selecionado. Então faça testes para entender melhor sobre isso.

Por exemplo, com as configurações da imagem acima você deve selecionar primeiro o retângulo e depois o círculo → logo em seguida basta clicar nos botões Centralizar no eixo vertical e Alinhar bases dos objetos ao topo do âncora, e já teremos isto aqui.

Nesta parte já posicione o retângulo um pouco mais para dentro do círculo antes de alinhar o menor, basta selecioná-lo → segurar a tecla Shift → e apertar a seta para baixo (do teclado) 5 vezes.

Criando o líquido

Para fazer o líquido podemos simplesmente duplicar (Ctrl + D) o círculo do nosso pote e alterar o seu tamanho para 245 de altura e largura. Mude a cor do líquido com a ajuda do pra diferenciar do pote → selecione os dois círculos e centralize nos eixos vertical e horizontal.

Mais detalhes para o líquido

Para deixar o líquido mais interessante vamos selecionar a ferramenta e fazer um formato como este abaixo. Em seguida selecione o círculo do líquido e a forma que você acabou de criar e vá até CaminhoDiferença. E temos isto aqui:

Para finalizar vamos dar mais profundidade a este líquido. Então novamente com a ferramenta vamos fazer um formato de ponta a ponta como o da imagem abaixo.

Na caixa de diálogo Preenchimento e contorno (Shift + Ctrl + F) vá até a aba Cor do Contorno e clique no botão SEM COR. E em Preencher vamos deixar em Cor Uniforme e selecionar uma outra cor. Com esta forma que acabamos de criar ainda selecionada aperte o botão page down do teclado para mover ela para trás da outra. E teremos isto aqui:

Voltando ao pote

Agora vamos selecionar os dois retângulos e o círculo que criamos logo no início com o auxílio da tecla Shift pressionada. Vá até CaminhoUnião, e então o que eram 3 formas separadas vai virar uma só.

Com essa forma que acabamos de unir selecionada vá até a aba Cor do Contorno e selecione Cor uniforme. Na aba Contorno mudamos a espessura do traço para 15 pixels e novamente em Cor do contorno mude a cor para branco.

Criando brilhos

Pra dar um toque a mais, com a ferramenta faça um formato qualquer para o brilho → retire o contorno e preencha com a cor branco. Em seguida apenas diminua a opacidade para uns 70%.

E pra terminar essa parte vamos desenhar novamente com a ferramenta um formato qualquer como este abaixo. Selecione as duas formas → vá até CaminhoDiferença.


Bolhas

Apenas selecione a ferramenta e faça alguns pequenos círculos. Depois é só posicioná-los arrastando com a ferramenta .

Criando uma rolha

Crie um retângulo qualquer e altere o seu tamanho para W:100 e H:140. Com o retângulo selecionado vá até CaminhoConverter em Caminho.

Em seguida selecione a ferramenta . E estes nós deverão aparecer:

Selecione o nós do topo e da esquerda → segure a tecla Shift e aperte uma única vez com o botão seta esquerda. Depois selecione o nó do topo e da direita, segure Shift e aperte uma única vez com o botão seta esquerda. E teremos o formato base da rolha.

Duplique (CTRL + D) esta forma que acabou de criar e altere a largura e altura para 120. Com as duas formas selecionadas basta fazer o alinhamento conforme está na imagem. E conclua fazendo pequenas elipses e círculos para dar mais detalhes ao objeto.

Com a ferramenta selecione tudo (clicando e arrastando em volta das partes da rolha) e utilize o atalho Ctrl + G para agrupar. Assim fica mais fácil movê-lo. Agora basta mudar o tamanho para W:120 e H:105.

Com a tecla page down mova a rolha para trás do pote. Em seguida selecione o pote e altere a transparência para mais ou menos 220 como está na imagem abaixo:

E temos nosso ícone 2D do pote de poção pronto.

Vídeo tutorial de como fazer arte 2D para jogos

E se por acaso você chegou nesta postagem de outra forma que não pelo canal Desenhando com Mack, está aqui o vídeo mostrando passo a passo este tutorial.


comments powered by Disqus